iOS – UIWebView – Creando nuestro propio Browser

webview14

Algunas aplicaciones necesitan mostrar un sitio web o cargar algunos datos html.  UIWebView despliega información web embebida en nuestra aplicación sin necesidad de salir de la misma, es decir, el usuario puede ver contenidos web en la aplicación sin abrir Safari en el dispositivo. En este tutorial, vamos a ver cómo crear y utilizar el UIWebView, y asumo que tienes conceptos básicos de Xcode y de ObjectiveC.

La implementación es muy sencilla. Sólo se debe crear un objeto UIWebView y utilizar sus métodos delegados para cargar el contenido web. También se puede agregar la opción de avanzar o retroceder en el historial de navegación.

Vamos al lío. Lo primero será crear un proyecto vacío y agregar un UIViewController al que llamaremos WebViewController. Debemos crearlo con xib, así que no nos olvidemos de marcar la opción. Al ser este el primer tutorial de iOS, voy a poner capturas de pantalla de todos los pasos. En futuros tutoriales sólo pondré las capturas de lo imprescindible.

webview1

webview2

webview3

webview4 webview5

Una vez hecho esto, vamos al fichero WebViewController.xib y agregamos un WebView, un Activity indicador View y un Label. Una vez los hemos arrastrado a nuestro fichero, hacemos click en el icono del chaleco de la parte superior derecha.

webview6

Una vez hecho esto, tenemos que crear las variables que representen a los objetos que acabamos de añadir en nuestro WebViewController.h. Para ello, después de pulsar sobre el icono del esmoquin, tendremos dos pantallas. Vamos a poner en la de la izquierda el fichero .xib y en el de la derecha el WebViewController.h. Una vez hecho esto, pulsaremos y mantendremos pulsada la tecla ctrl, haremos click sobre un elemento de la parte izquierda, por ejemplo el WebView, y arrastraremos hasta el fichero .h tal y como se ve en la siguiente imagen. A continuación le ponemos el nombre a la variable. Yo he elegido webView. Hacemos lo mismo con los otros dos elementos.

webview7 webview8

 

Ahora, vamos a nuestro fichero ViewController.h, y vamos a añadir en la parte superior lo siguiente para indicarle a nuestro controlador que delega de UIWebViewDelegate y así pueda usar sus métodos delegados.

Perfecto! Antes de atacar nuestro fichero WebViewController.m, vamos a definir un NavigationController para decirle a nuestra aplicación que la pantalla principal que debe cargar es la que acabamos de configurar. Para ello vamos al fichero AppDelegate.m y escribimos lo siguiente (básicamente es hacer un import y añadir el NavigationController):

Vale! Pues vamos a nuestro WebViewController.m

Lo primero que haremos será ir a nuestro método viewDidLoad  y definir el delegado para el UIWebView. Además, también indicaremos la URL que queremos cargar.

A continuación vamos a implementar los métodos que nos facilita el UIWebViewDelegate. Son los siguientes:

Vamos a irlos rellenando. Lo primero es saber que ocurre si falla la carga, por ejemplo, si no hay internet. Nosotros mostraremos un UIAlertView.

Veamos el siguiente:

Cuando está empezando a cargar la página pero todavía no tiene todos los datos, iremos al método webViewDidStartLoad. Lo que haremos será mostrar el spinner junto a la etiqueta cargando.

Por último, cuando termina de cargar, ocultaremos el spinner y el label.

Y con esto cargaríamos la página web en el UIWebViewController. Vamos a ver las tres pantallas posibles.

webview10

Añadiendo elementos de navegación

Vamos a complicar un poquito más la cosa. Ahora vamos a añadir elementos de navegación. Para ello, añadimos en nuestro fichero .xib un Toolbar y cuatro botones separados por espacios. Podemos seleccionar el tipo de botones en el menú izquierdo. Una vez hecho esto, volveremos a declarar los IBOutles tal y como hicimos antes. Os muestro un ejemplo:

webview11

webview12

Además de haber creado IBOutles y de haberlos linkado para poder acceder a estos elementos de la interfaz desde el código, también vamos a conectar los botones del Toolbar con el UIWebView. Para ello pulsamos y mantenemos pulsado la tecla ctrl y hacemos click desde uno de los botones del Toolbar hasta el UIWebBiew. Entonces elegimos que acción hace.

webview13

La interfaz de usuario actual tiene algunos problemas que pueden resolverse fácilmente con un poco más de código: todos los botones de la barra de herramientas están habilitados todo el tiempo. Sin embargo, al principio, los botones de atrás o adelante deben estar deshabilitados, o si una página está cargada, la opción de detener la carga debe estar deshabilitada también.

Para solucionarlo agregaremos un método para actualizar el estado de los botones de la barra de herramientas.

Y este es su código en el fichero .m

Lo único que nos queda es llamar a este método en el lugar correspondiente.

Y con esto ya tendríamos nuestra barra de herramientas totalmente habilitada. También hemos añadido una línea para que se vea el indicador de actividad de conexión a internet.

webview14

Y esto ha sido todo!

Como siempre, puedes descargar el código desde GitHub.

 

Deja un comentario