Empezando con los Tab Bars y Storyboards en iOS

Empezando con los Tab Bars y Storyboards en iOS

En la entrada de hoy vamos a hablar de los tab bars y de como funcionan en los storyboards. El Storyboarding es una funcionalidad que se implementó con el SDK de iOS 5 y que como veremos es muy útil para definir el esquema de nuestra aplicación de forma sencilla. ¿Que son los Storyboards? Antes la única manera de determinar la navegación de una aplicación era en el código. Las distintas pantallas que conforman nuestra aplicación se diseñaban de manera independiente, en archivos de Interface Builder o incluso tambien escribiendo lineas y lineas de código, para más adelante programar las acciones y/o eventos que nos hacían ir de unas pantallas a otras. Por lo tanto no había manera sencilla de entender la navegación de un aplicación. Era necesario analizar cada pantalla para saber como se pasaba de un sitio a otro. Ahora, los Storyboards integran todas las pantallas, así como la navegación que se establece entre cada una de ellas, en un solo fichero .storyboard. La aplicación se organiza en el storyboard por escenas y segues. Las escenas son cada una de las vistas o pantallas de nuestra aplicación y un segue es la transición o relación entre una escena y otra. Todo esto no quita que podamos seguir trabajando como antes o incluso mezclar un método y otro. Tab bars en el sotryboard Vamos a ver como manejar los tab bars en el storyboard con un ejemplo práctico. Abrimos Xcode y seleccionamos la plantilla de proyecto "Tabbed Application".

Plantillas Xcode

A continuación vamos a seleccionar las casillas de Use Storyboards y Use Automatic Reference Counting. Esta última casilla es opcional, ya que no afecta a lo relacionado con el artículo de hoy. Con esto simplemente encargamos la gestión de memoria al compilador (LLVM 3.0) para así no tener que preocuparnos de aumentar o disminuir las cuentas de referencias de cada objeto. Explicar esto en profundidad sería materia de otro post

Proyecto tab bar con ARC y Storyboards

Llegados a este punto podemos compilar y ejecutar la aplicación en el simulador para ver que ya tenemos un par de vistas ya definidas, entre las cuales podemos alternar con el tab bar inferior. Los ViewControllers de ambas vistas, FirstViewController y SecondViewController, los encontramos en el menú izquierdo como el resto de archivos de nuestra aplicación.

Tabbars Tutorial Captura menu izq

Ahora nos vamos a seleccionar uno de los archivos .stroyboard, en mi caso he escogido el del iPhone. Al abrirlo Xcode nos mostrará un editor gráfico muy comodo para el storyboard de nuestra aplicación.

Tab bar y Storyboard

Vamos a añadir una vista más a nuestro tab bar. Para ello tendremos que acceder al menú derecho de Xcode y arrastrar un ViewController hasta el storyboard. A continuación manteniendo ctrl pulsado arrastramos desde el Tab Bar Controller hasta el nuevo ViewController. Una vez soltemos el ratón aparecerá un menu en el cual elegiremos Relationship segue - view controllers.

Tabbars Tutorial Captura 3

Y ya tenemos una nueva vista en nuestro tab bar. Ahora solo faltaría programar lo que queremos que haga. El storyboard es bastante comodo de utilizar y en pocos pasos, sin apenas tocar código, podemos tener una aplicación con multiples vistas y compleja navegación. Aun así por supuesto, tiene sus limitaciones.