fbpx
 

Crea tu Aplicación con Menú Lateral

Crea tu Aplicación con Menú Lateral

1. Introducción

En el tutorial de esta semana, vamos a desarrollar una aplicación en Swift, la cual tendrá un tipo muy común de interfaz: Un menú lateral. Es probable que hayas visto este menú en muchas apps.

Podríamos programar esta aplicación completamente desde cero, pero en este caso, lo que vamos a hacer es utilizar una librería de terceros que nos permitirá incorporar el menú lateral a nuestra app. Así, además de ver como desarrollar la app, podrás entender el proceso a la hora de añadir librerías externas a tu aplicación.

El uso de librerías de terceros en tus aplicaciones es una opción muy válida. Permite incorporar funcionalidades completas que ayudan a minimizar nuestros tiempos de desarrollo. Por el contrario, en otras ocasiones, el incorporar librerías en tu aplicación puede suponer aumentar excesivamente la complejidad de la app y perder control sobre la misma. Por esto, debes ser tu mismo, como desarrollador quien evalúe cual es la opción recomendada para cada proyecto:

  • Utilizar librerías de terceros
  • Realizar el desarrollo de forma íntegra por tu cuenta

Otro punto interesante de este proyecto, es que vamos a desarrollar nuestra aplicación iOS con menú lateral utilizando Swift, mientras que la librería del menú lateral que vamos a incorporar ha sido desarrollada completamente en Objective-C.

Esto te servirá para comprobar lo fácil que puede ser integrar en tus proyectos Swift cualquier código en Objective-C.

La librería que vamos a utilizar para nuestro menú lateral se llama SWRevealViewController y está disponible para que puedas incorporarla en cualquiera de tus proyectos de forma gratuita. Si quieres echarle un vistazo a la librería accede aquí.

Para que te hagas una idea, al terminar el tutorial, este será el aspecto de nuestra aplicación iOS con menú lateral:

aplicación iOS con menú lateral demo_app_menu_lateral

2. ¿Qué vamos a ver en este Tutorial?

Estas podrían ser las partes más interesantes del tutorial de esta semana:

  • Desarrollarás una aplicación funcional en Swift
  • Aprenderás a integrar librerías de terceros en tus proyectos
  • Verás como integrar código en Objective-C en tus proyectos Swift

Si crees que alguno de estos puntos puede ser interesante para ti, sigue leyendo, porque ¡comenzamos!

3. Proyecto de Inicio

Para que no tengas que perder el tiempo creando gran parte de la interfaz de la aplicación, he creado un proyecto de inicio que puedes descargar desde aquí. Trabajaremos a partir de este proyecto en las partes realmente importantes de la aplicación.

Para que comprendas el funcionamiento completo de la aplicación, vamos a echar un vistazo rápido al contenido del proyecto de inicio.

Descarga el proyecto, ábrelo y accede al fichero Main.storyboard. Ésta es la interfaz completa de nuestra aplicación y aquí puedes ver que están creados todos los viewControllers que vamos a necesitar en nuestra aplicación:

aplicación iOS con menú lateral storyboard

No te preocupes, si de primeras te parece una interfaz compleja, en cuanto la expliquemos verás que es muy sencilla.

Para poder utilizar la librería SWRevealViewController para construir nuestro menú lateral, he creado un containerViewController, que únicamente es un viewController vacío, que será el encargado de contener nuestro menuViewController y el resto de viewControllers de la aplicación. Este containerViewController es el ViewController que se encuentra más a la izquierda en la imagen.

Justo a la derecha de él, puedes ver que ya está creado el menuViewController. Simplemente se trata de una tabla estática con 3 elementos de menú. Cada uno de estos 3 elementos nos llevará a un navigationController, que contendrá un viewController diferente. Podremos ver una sección de Tutoriales, una sección donde se nos muestra un Mapa y una sección donde podremos ver una Imagen.

En la sección Tutoriales he creado un tableView, con una custom cell, donde mostraré algunos tutoriales de ejemplo de EfectoApple.

En la sección Mapa, únicamente hay un mapView, en la que no he especificado ninguna localización concreta.

Por último, en la sección Imágenes, he añadido un imageView que muestra una fotografía de París.

Para este ejemplo, mostraremos contenido estático, pero si quieres modificar el proyecto y añadir otro tipo de contenido o más opciones al menú, únicamente tendrás que añadir mas viewControllers dentro del storyboard.

Como puedes ver, se trata de una aplicación muy sencilla.

4. Como integrar la librería externa

Como hemos dicho antes, vamos a utilizar la librería SWRevealViewController para implementar nuestro menú lateral. Así que lo primero que debes hacer es descargarla desde aquí. Una vez que la hayas descargado, debes descomprimir el fichero descargado y dentro de la carpeta principal encontrarás otra carpeta llamada SWRevealViewController. Si accedes a ella, encontrarás 2 ficheros llamados SWRevealViewController.h y SWRevealViewController.m.

aplicación iOS con menú lateral SWRevealViewController

Si no has trabajado antes con Objective-C, tal vez te preguntes porque estos ficheros tienen extensiones .h y .m y no .swift. Esto se debe a que en Objective-C, cada clase está dividida en dos ficheros diferentes, un fichero de cabecera (.h) y un fichero de implementación (.m).

Estos dos ficheros, forman la librería SWRevealViewController, así que vamos a añadirlos a nuestra aplicación.

Lo primero que debes hacer, para mantener organizado tu código es crear una carpeta en tu proyecto, que se llame SWRevealViewController. Para ello, colocate en el navegador del proyecto, situado en la parte izquierda de Xcode, haz clic con el botón derecho sobre la carpeta MenuLateral_Inicio y selecciona “New Group”. Dale el nombre SWRevealViewController.

aplicación iOS con menú lateral carpeta_swrevealviewcontroller

A continuación arrastra los 2 ficheros (.h y .m) de la librería hasta dentro de esta carpeta. Xcode te pedirá que confirmes que quieres añadir estos ficheros, asegurate que la opción “Copy items if needed”  esté seleccionada y pulsa en el botón Finish.

aplicación iOS con menú lateral anadiendo_fichero_a_xcode

Al pulsar en este botón, Xcode te preguntará si quieres crear un Objective-C bridging header. Haz clic en el botón Create Bridging Header. Lo que estás haciendo es crear un fichero header que te permitirá acceder a código Objective-C desde Swift.

aplicación iOS con menú lateral bridging_header_objective-c

A continuación Xcode generará un fichero header llamado SidebarMenu-Bridging-Header.h, dentro de nuestra carpeta SWRevealViewController. Abre ese fichero SidebarMenu-Bridging-Header.h y añade la siguiente linea:

5. Especificando nuestro ViewController principal y secundario

Para entender la librería con la que estamos trabajando, debemos tener claro que nuestra aplicación consta de dos partes diferenciadas:

  • Un viewController Principal:  Donde mostraremos el contenido que seleccione el usuario: Puede ser la vista de Tutoriales, la de Mapa o la de Imágenes.
  • Un viewController Secundario: Donde mostraremos nuestro menú de navegación.

La configuración de SWRevealViewController es muy simple, lo único que tenemos que hacer es asociar la clase SWRevealViewController con nuestro viewController principal y con nuestro viewController secundario utilizando segues.

Si no tienes experiencia utilizando storyboards, tal vez no sepas lo que son los segues. Un segue es una transición entre las escenas de nuestro storyboard. Es decir, la forma que tenemos de controlar, como pasar de un viewController de nuestra aplicación a otro.

En nuestro proyecto, el viewController principal será el Navigation Controller de la sección de Tutoriales, de esta forma, esta será la vista por defecto que se mostrará al lanzar la aplicación, cuando el usuario todavía no ha seleccionado ninguna opción del menú.

En cambio, nuestro viewController secundario será Menu View Controller, que es quien gestiona el menú de navegación.

Una vez que tenemos esto claro, es el momento de especificar en la librería quien será el viewController principal y el viewController secundario.

Para ello, abre el storyboard y selecciona el viewController inicial de nuestra aplicación. Siempre puedes saber cual es el viewController inicial de una aplicación fijándote en la flecha de selección situada en la parte izquierda.

Una vez que lo has seleccionado accede al Inspector de Identidad de Xcode y cambia su clase a SWRevealViewController:

aplicación iOS con menú lateral cambiando_clase_a_viewcontroller

Después, deja pulsada la tecla ctrl y arrastra desde este viewController y suelta el ratón justo encima del viewController que tienes a la derecha: Menu View Controller. Verás un menú contextual que te ofrece varias opciones. Elige la opción “reveal view controller set controller”.

aplicación iOS con menú lateral select_segue

Lo que hemos hecho es definir un segue personalizado: “SWRevealViewControllerSetSegue”. Selecciona este segue y cambia su identificador a “sw_rear” utilizando el Inspector de Identidad.

aplicación iOS con menú lateral sw_rear

 

Especificando este identificador, lo que hacemos es decirle a SWRevealViewController, que Menu View Controller es el viewController secundario de nuestra aplicación. Es decir, el viewController que usaremos para mostrar nuestro menú.

Ahora que ya hemos definido nuestro viewController secundario, deberemos definir nuestro viewController principal. Para ello, repetiremos el proceso.

Arrastra desde Reveal View Controller, con la tecla ctrl pulsada y suelta justo encima del Navigation Controller situado en la parte superior. Después selecciona la opción “reveal view controller set controller”, exactamente igual que antes.

aplicación iOS con menú lateral set_push_segue

Selecciona el segue que acabas de crear y cambia su identificador a “sw_front”. De esta forma, le decimos a SWRevealViewController que el navigationController de la sección de Tutoriales es el viewController principal de nuestra aplicación.

aplicación iOS con menú lateral sw_front

Antes de continuar, lo mejor es que hagas una prueba, para comprobar si has seguido todos los pasos correctamente. Ejecuta la aplicación en el simulador de Xcode y comprueba que se muestra correctamente la vista Tutoriales. Verás, que por ahora, el botón de menú (También llamado Hamburguer Button por su forma) no funciona todavía. Este será nuestro siguiente paso, hacer que nuestro Hamburguer Button funcione.

aplicación iOS con menú lateral app_en_ejecucion

Accede a la clase TutorialsTableViewController, que es el controlador que gestiona la vista de Tutoriales. En su método viewDidLoad() inserta las siguientes lineas de código:

Lo que hemos hecho en este código es utilizar el mecanismo de comunicación Target-Action para comunicarnos entre nuestro hamburguer button y nuestro viewController.

Si no sabes de que te estoy hablando, cuando menciono Target-Action échale un vistazo a esto: Conceptos

La librería SWRevealViewController nos ofrece el método revealViewController() que nos permite obtener el SWRevealViewController padre de cualquier controlador. También nos ofrece el método revealToggle() que permite la expansión y contracción del menú lateral. Lo que hacemos en este código, es especificar, que cuando se cargue la vista de Tutoriales, nuestro botón cuente con la funcionalidad de mostrar u ocultar el menú, cuando sea pulsado por el usuario.

Establecemos el target del hamburguer button a nuestro revealViewController y nuestro action al método revealToggle(). De esta forma, cuando pulsemos en el botón del menú lateral, llamará al método revealToggle() de revealViewController y se mostrará el menú lateral.

En la última linea lo que hacemos es añadir un gesture recognizer. Esto es necesario si queremos que además de mostrar el menú pulsando en el hamburguer button, también se pueda mostrar deslizando la pantalla hacia la derecha. Para esto sirve nuestro gesture recognizer.

Ahora, compila y ejecuta la aplicación en el simulador. Pulsa en el hamburguer button y comprueba que se muestra correctamente el menú lateral. Puedes ocultar el menú volviendo a pulsar el botón o deslizando la pantalla hacia la izquierda.

aplicación iOS con menú lateral post13_imagen12

Si pruebas a pulsar los botones del menú, verás que la vista principal no se modifica, eso es porque todavía no hemos desarrollado esa parte. Es lo siguiente que haremos. ¡Vamos allá!

6. Enlazando nuestro menú con sus ViewControllers

Como acabamos de ver, nuestro menú ahora mismo funciona a medias. Vamos a enlazar los elementos de nuestro menú a sus correspondientes viewControllers, para que cuando el usuario pulse en cualquier opción, nuestra aplicación actualice la vista principal y la muestre en pantalla.

Abre el fichero Main.storyboard. Como acabamos de decir, vamos a ir enlazando cada uno de los elementos del menú: Tutoriales, Mapa, Imágenes con su correspondiente viewController. En esta ocasión vamos a realizar el arrastre desde el Document Outline. Si no sabes lo que es el Document Online, aquí lo tienes representado en esta imagen:

aplicación iOS con menú lateral document_outline

Colócate, dentro del Menu View Controller, en la cell de Tutoriales y con la tecla ctrl pulsada arrastra hasta el NavigationController que está enlazado con el viewController Tutorials. En el menú contextual que aparece, dentro del apartado “Selection Segue” selecciona “reveal view controller push controller”. CUIDADO: No te confundas porque justo debajo hay otro “reveal view controller push controller” dentro del apartado “Accessory Action”. Recuerda que tienes que pulsar el que se encuentra dentro de la sección “Selection Segue”.

aplicación iOS con menú lateral segue

Repite este procedimiento con las celdas Mapa e Imágenes, enlazándolas con sus correspondientes NavigationControllers.

Por último tendrás que añadir el mismo código de antes, al método viewDidLoad() tanto de MapViewController.swift, como de ImageViewController.swift:

¡Eso es! Ahora, compila y ejecuta la aplicación y comprueba que los elementos de nuestro menú funcionan perfectamente.

7. Personalizando nuestra librería

Acabas de terminar una aplicación con menú lateral totalmente funcional. Funciona perfectamente y cumple con el objetivo que buscamos. Ofrecer al usuario una interfaz clara a través de la cual navegar por la aplicación.

¿Pero qué pasa si queremos realizar modificaciones en nuestra aplicación? ¿Qué tenemos que hacer si por ejemplo queremos que la animación del menú lateral sea más rápida o que el ancho del menú lateral sea menor? En principio puede parecer complicado, ya que estos aspectos están controlados por la librería que hemos añadido a nuestro proyecto, pero con un poco de práctica te acostumbrarás fácilmente a interpretar el código de librerías externas.

Para poder realizar algún cambio de este tipo, lo que tendremos que hacer será investigar las opciones de personalización que nos ofrece la librería. Para ello tendrás que acceder al fichero SWRevealViewController.h, allí está definidas todas las propiedades y métodos de los que consta nuestra librería.

Echando un vistazo a esta clase, puedes ver que existe una propiedad llamada toggleAnimationDuration y justo encima hay un comentario que dice que se trata de la velocidad de la animación y que por defecto está establecida a 0.25 segundos.

aplicación iOS con menú lateral toogle_animation

Por tanto, si queremos modificar la velocidad de la animación de nuestro menú lateral, parece obvio que tendremos que utilizar la propiedad toggleAnimationDuration.

¡Pues vamos allá!

Añade la siguiente linea al método viewDidLoad() de la clase TutorialsTableViewController.swift:

Ejecuta la aplicación y comprueba como la velocidad de la animación ha aumentado bastante.

Ahora modifica el valor de la propiedad y asígnale 2.0:

Como puedes ver la animación se realiza ahora de forma muy lenta.

Este es solo un ejemplo de personalización de una librería externa. La mejor forma de sentirte cómodo es investigando el fichero .h que ofrece SWRevealViewController y realizando cambios tu mismo, comprobando como cambia la ejecución de la aplicación.

8. Resumen Final

Espero que este nuevo tutorial te haya parecido útil. Aquí tienes un pequeño resumen de los puntos más importantes que hemos visto:

  1. Desarrollar una aplicación iOS con menú lateral
  2. Integrar una librería de terceros en tus proyectos
  3. Acceder a código en Objective-C dentro de tus proyectos en Swift
  4. Personalizar librerías externas para que se ajusten a tus necesidades

9. Descarga el Proyecto

10AppsBanner

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

10. Has terminado el Tutorial

Enhorabuena, has terminado el tutorial y has sido capaz de desarrollar una app con menú lateral. Te lo has ganado, aquí tienes el video chorra de la semana:

[ejercicio titulo = “Un pañuelo por favor” num=”1″]
aplicación iOS con menú lateral funny video
[/ejercicio]

11. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple desde aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.

2 Comentarios
  • sebastian
    Publicado a las 17:55h, 13 julio Responder

    Hola, he seguido el tutorial y no me funciona del todo, asumo que debe ser el que mi proyecto comienza con un login y luego de esto quiero que se vea este menu, pero de esa forma no funciona el menuButton solo me muestra la pantalla.

  • Antonio Olmo Ortiz
    Publicado a las 03:04h, 11 noviembre Responder

    Excelente !!!

    Muy claro todo.

    Gracias por tu tiempo y dedicación.

    Saludos y gracias

Escribe un comentario

Crea una aplicación iOS desde cero con mi Curso gratuito en videoRESERVAR PLAZA
+
10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.