fbpx
 

Introducción a los Storyboards [Parte 1]

Introducción a los Storyboards [Parte 1]

1. Introducción

Apple introdujo los Storyboards en el lanzamiento de iOS 5.

Hace bastantes años de esto…

Sin embargo he recibido 2 emails de lectores de EfectoApple comentándome que han encontrado algunas dificultades para seguir los Tutoriales porque no dominan del todo los Storyboards.

Así que esta semana este será el tema sobre el que centraremos nuestro Tutorial.

Antes del lanzamiento de los Storyboards, los Desarrolladores iOS solo teníamos la opción de crear las interfaces de nuestra aplicaciones a través de ficheros con extensión .xib o directamente programarlas a través de código.

Cada uno de estos ficheros representaba una pantalla de nuestra aplicación.

Esta forma de trabajar tenía sus ventajas (En muchas ocasiones los .xib siguen siendo mejor opción que los storyboards) y por supuesto, también sus inconvenientes.

Por tanto, a día de hoy tienes tres opciones para crear tus interfaces:

  1. Programarlas directamente a través de código
  2. Utilizar ficheros .xib
  3. Usar Storyboards

En el Tutorial de esta semana, vamos a ver todo lo que necesitas saber para sentirte cómodo utilizando Storyboards y no tener ningún problema siempre que quieras crear una nueva aplicación iOS.

2. Ventajas de utilizar Storyboards en tus desarrollos

Tal vez más adelante desarrolle un Tutorial sobre como crear las interfaces a través de código o directamente utilizando .xib.

Como esta semana nos vamos a centrar en los Storyboards, vamos a ver algunas de las ventajas que nos ofrecen.

  1. Son perfectos para ver el flujo de navegación completo de una aplicación.
  2. Te permiten crear una aplicación multivista sin tener que escribir prácticamente código.
  3. Son muy útiles para desarrollos pequeños-medios.

Como cualquier opción, también tienen desventajas.

Solo voy a comentar una.

Debido a que toda nuestra interfaz se concentra en un único fichero, suelen generarse bastantes conflictos que complican el desarrollo en equipo de una aplicación.

Sin embargo, en muchos equipos de desarrollo son la opción preferente a la hora de crear cualquier interfaz, por lo que es importante que seas capaz de trabajar con ellos.

3. ¿Qué vamos a ver en este Tutorial sobre Storyboards?

Los puntos más importantes que veremos son los siguientes:

  1. Ventajas de utilizar Storyboards en tus desarrollos
  2. Conociendo Interface Builder
  3. ¿Qué es el Dock?
  4. Especificando la Main Interface de nuestra App
  5. Secuencia de arranque de una aplicación
  6. Como seleccionar el Initial View Controller
  7. Configurar los modos Portrait y Landscape de nuestra App
  8. ¿Cómo añadir un TableViewController, un NavigationController y un TabBarController?

Comencemos entonces echando un vistazo a los fundamentos básicos de los Storyboards.

4. Creando nuestro Proyecto en Xcode

Para comenzar crea un nuevo proyecto en Xcode, accediendo al menú File > New > Project… y elige la plantilla Single View Application:

 

Storyboards new project

 

Después pulsa en Next y dale el nombre que quieras. En mi caso lo llamaré Storyboards_Demo. Deja el resto de opciones, tal cual las ves en la imagen:

 

Storyboards project options

 

Pulsa en Next, guarda el proyecto donde quieras y para finalizar pulsa en el botón Create.

Después de crear el proyecto, Xcode te mostrará algo así:

 

Storyboards main screen xcode

Con este Proyecto de Demostración, iremos viendo todo lo necesario para dominar los Storyboards.

5. Fundamentos Básicos de los Storyboards

Haz click en el fichero Main.storyboard y veamos algunos conceptos que debes conocer:

Interface Builder

La pantalla que se ha abierto al acceder al Main.storyboard es conocida como Interface Builder y tiene el siguiente aspecto:

 

Storyboards Interface Builder Editor

 

En las primeras versiones de iOS, Interface Builder era una aplicación independiente de Xcode y al igual que ahora, se utilizaba para crear las interfaces de nuestras aplicaciones.

La parte izquierda de Interface Builder se conoce como Document Outline y nos muestra un listado de todas las escenas que componen nuestra interfaz.

[caja-roja]Una escena representa a cada una de las pantallas de nuestra aplicación[/caja-roja]

Dentro de cada escena se van englobando todos los objetos que vayamos añadiendo a la interfaz, además de constraints y otros elementos.

Para mostrar u ocultar el Document Outline puedes utilizar el siguiente botón, situado en la parte inferior izquierda:

 

Storyboards Document Outline button

 

Como ves, en nuestro proyecto recién creado únicamente tenemos una pantalla. Está pantalla está representada por nuestro View Controller.

En la parte superior derecha de Interface Builder tenemos el Inspector de Atributos. A través de las opciones que nos ofrece, podemos realizar modificaciones en las propiedades de cualquier objeto que forme parte de nuestra interfaz.

Dentro del Inspector de Atributos tienes 6 menús diferentes, donde cada uno controla un aspecto diferente de cualquier objeto:

 

Storyboards Properties Inspector Xcode

 

Por otro lado, en la parte inferior derecha, dispones de la Biblioteca de Objetos:

 

Storyboards Librery objects

 

Desde aquí puedes añadir cualquier elemento a la interfaz de tu aplicación.

Prueba por ejemplo a arrastrar un Label, un Button, un TextField y un Slider a tu ViewController:

 

Storyboards adding interface elements

 

Si te fijas, además de añadirlos a nuestra interfaz, Xcode los ha añadido a la lista de elementos que aparecen en el Document Outline:

 

Storyboards elements in Document Outline

 

Si ejecutas la aplicación, haciendo cmd+R, verás que en el simulador se muestran los elementos que hemos añadido a nuestra interfaz.

Storyboards app playing

Dock

Justo encima de cada ViewController podrás ver el Dock.

 

Storyboards dock

 

El Dock muestra los objetos de alto nivel de cada escena. Cada escena tendrá como mínimo un objeto ViewController, un objeto First Responder y un objeto Exit, pero además puede tener otros elementos. El Dock es simplemente un Document Outline en miniatura.

ViewController representa evidentemente a nuestro único ViewController.

First Responder gestiona el foco de nuestra aplicación. Lo más probable es que prácticamente no lo utilices.

Exit se puede utilizar para añadir opciones de navegación a nuestras interfaces.

Main Interface

Antes, al ejecutar nuestro proyecto, la aplicación que hemos creado, ya sabía perfectamente cual era el Storyboard que tenía que enlazar al ejecutar la app.

Esto no tiene ningún misterio, solo tenemos un fichero Main.storyboard, por lo que lo normal es que nuestro proyecto sepa que ese es el fichero que contiene nuestra interfaz.

Sin embargo, en algún otro proyecto puede que utilices varios Storyboards diferentes, por lo que es importante que entiendas, donde especificamos cual es el Storyboard principal.

Simplificando mucho, cualquier aplicación iOS, por defecto, comienza su ejecución en la clase AppDelegate.swift.

Haz click en esta clase y echa un vistazo a la parte inicial de la misma:

El atributo @UIApplicationMain situado en la parte superior determina que nuestra clase AppDelegate es el punto de entrada de nuestra aplicación.

Es obligatorio que nuestro AppDelegate herede de UIResponder y tenga una propiedad de tipo UIWindow para que la app funcione.

Si te fijas en los métodos que aparecen en esta clase, están todos prácticamente vacíos. Unicamente didFinishLaunchingWithOptions() tiene algo de código y lo único que hace es devolver true.

Una vez revisada la clase inicial de nuestra aplicación, es probable que te sigas preguntado ¿donde hace referencia nuestra aplicación al Storyboard?

El Fichero Info.plist

Para responder a esto tendrás que abrir el fichero Info.plist y localizar la entrada Main storyboard file base name.

 

Storyboards plist content

 

Cuando ejecutamos la app, el objeto UIApplication carga el storyboard que esté especificado en esta clave, inicializa el ViewController que esté marcado como Initial View Controller (Ahora veremos donde se hace eso) y después coloca la View de ese ViewController en el objeto UIWindow.

Existe otro punto donde debemos especificar cual es la interfaz principal de nuestra aplicación. Si haces click en el nombre del proyecto, en la parte superior izquierda y haces scroll hasta la sección Deployment Info, verás como hay otra opción llamada Main Interface, donde aparece el nombre de nuestro storyboard.

 

Storyboards Main Interface Option

 

Estas 2 opciones son fundamentales para que tu aplicación arranque correctamente.

Initial View Controller

Hemos comentado en el punto anterior, que una vez que hemos especificado cual será nuestro storyboard principal, también debemos determinar cual será el ViewController que nuestra aplicación debe cargar en primer lugar.

Para seleccionar esto, accede a Main.storyboard, haz click sobre nuestro único ViewController y en la cuarta opción del Inspector de Propiedades, verás la opción Is Initial View Controller.

 

Storyboards Is Initial View Controller

 

Esa opción especifica que cuando se cargue el storyboard, la primera pantalla que mostrará nuestra aplicación será la que esté seleccionada como Initial View Controller.

De hecho, si te fijas, verás que en Interface Builder, justo a la izquierda del ViewController aparece una flecha apuntando hacia la derecha. Si arrastras esa flecha y la colocas apuntando a otro ViewController, este último se convertiría en el Initial View Controller.

Como conclusión, si en algún momento tienes problemas con tu aplicación, porque ves que no carga el storyboard que debe o porque la primera pantalla que muestra no es la que tu quieres, es conveniente que revises estas 3 últimas opciones que acabamos de ver, porque lo mas probable es que hayas modificado alguna de ellas y no lo recuerdes.

Portrait/Landscape

A la hora de desarrollar una aplicación, tienes varias opciones.

Puedes querer que tu aplicación se ejecute solo en Portrait (Cuando el dispositivo esté en posición vertical) o también en Landscape (Cuando el dispositivo esté en posición horizontal).

Estas opciones y alguna más las puedes controlar desde el menú que hemos visto antes: Deployment Info.

 

Storyboards Main Interface Option

 

En la sección Device Orientation puedes ver que tienes 4 opciones para elegir.

Si ejecutáramos la aplicación, con las opciones que ves en la imagen, nuestra app giraría su interfaz siempre que utilizáramos el iPhone en posición vertical con el botón Home abajo y también en posición horizontal, tanto con el botón Home hacia la derecha como hacia la izquierda.

Sin embargo, si nuestro dispositivo estuviera en posición vertical con el botón Home hacia arriba, nuestra aplicación no se adaptaría a esta posición, ya que la opción Upside Down está desactivada.

Por tanto, esto es lo que representa cada una de las opciones:

  • Portrait: Posición vertical con el botón Home abajo
  • Upside Down: Posición vertical con el botón Home arriba
  • Landscape Left: Posición horizontal con el botón Home hacia la izquierda
  • Landscape Right: Posición horizontal con el botón Home hacia la derecha

A la hora de desarrollar tu proyecto, debes tener muy en cuenta todo esto.

6. Añadiendo un TableViewController

Por defecto, cuando creamos un proyecto de tipo Single View Application, Xcode crea un ViewController en nuestro Storyboard.

En ocasiones, es probable que queramos trabajar directamente con un TableViewController.

En estos casos, para sustituir uno por otro, lo mas rápido es seguir estos pasos:

  1. Seleccionar nuestro ViewController en el Main.storyboard
  2. Eliminarlo pulsando la tecla Delete
  3. Añadir un TableViewController desde la Biblioteca de Objetos
  4. Elegir este TableViewController como Initial View Controller

A continuación puedes ver esta secuencia de acciones:

 

Storyboards adding tableviewcontroller

 

Si ejecutas ahora la aplicación, verás como la vista inicial que muestra es la de un TableView vacío.

 

Storyboards added tableview

7. Añadiendo un NavigationController

Los NavigationController son la opción perfecta para añadir navegación entre pantallas cuando creamos aplicaciones multivista.

Un NavigationController debe ir siempre asociado a otro Controlador. Este controlador puede ser de cualquier tipo: ViewController, TableViewController, CollectionViewController.

Este Controlador asociado al NavigationController se convierte en su controlador principal, es decir, en su RootViewController.

Para añadir un NavigationController a tu aplicación puedes seguir unos pasos similares a los que hemos visto en el apartado anterior:

  1. Seleccionar nuestro TableViewController en el Main.storyboard
  2. Eliminarlo pulsando la tecla Delete
  3. Añadir un NavigationController desde la Biblioteca de Objetos
  4. Elegir este NavigationController como Initial View Controller

Aquí tienes estos pasos en video:

 

Storyboards adding navigationcontroller

 

Como has podido observar, el NavigationController lleva asociado por defecto un TableViewController.

Si ejecutas ahora el proyecto, verás como nuestra aplicación muestra el TableViewController junto con una NavigationBar en la parte superior con el título Root View Controller, que indica que nuestra app cuenta con un NavigationController.

 

Storyboards added naviController

8. Añadiendo un TabBarController

Los TabBarControllers, al igual que los NavigationController nos permiten crear aplicaciones multivista.

Sin embargo, si en los NavigationControllers establecemos una navegación jerárquica, de padres a hijos, en los TabBarController los diferentes ViewControllers que utilicemos estarán al mismo nivel de navegación.

Para añadir un TabBarController a través de un storyboard, vamos a seguir unos pasos similares a los vistos en los anteriores apartados:

  1. Seleccionar nuestro NavigationController en el Main.storyboard
  2. Eliminarlo pulsando la tecla Delete
  3. Selecciona el Root View Controller del Navigation Controller
  4. Elimínalo también con la tecla Delete
  5. Añadir un TabBarController desde la Biblioteca de Objetos
  6. Elegir este TabBarController como Initial View Controller

Estos son los pasos seguidos:

 

Storyboards adding tabbarcontroller

 

Si ejecutas la app verás como nuestra pantalla principal es ahora un TabBarController que cuenta a su vez con 2 ViewControllers, identificados como Item 1 e Item 2.

 

Searchbars tabbar added

9. Resumen Final

Hemos realizado un repaso rápido a los aspectos fundamentales de los Storyboards. Hemos visto como añadir elementos básicos que nos permitirán crear interfaces complejas.

Sin embargo, no hemos tratado uno de los temas mas importantes de los Storyboards: Los Segues.

Este concepto lo veremos en la Segunda parte de este Tutorial. Accede ahora a la segunda parte desde aquí.

10. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes tu recompensa. El video chorra de esta semana:

[ejercicio titulo = “Buah! Eso lo hago yo…” num=”1″]

https://www.youtube.com/watch?v=1O3cVHw-xFA

[/ejercicio]

11. ¿Donde ir ahora?

Accede a la Segunda Parte del Tutorial sobre Storyboards, donde veremos conceptos más avanzados que te serán muy útiles, desde aquí.

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.

Etiquetas:
8 Comentarios
  • Oscar
    Publicado a las 04:31h, 26 julio Responder

    Hola, me gustaría ver la posibilidad de algún tutorial para trabajar con archivos .json

  • Marcelo
    Publicado a las 04:22h, 12 agosto Responder

    Hola Luis queria agradecerte por tu valioso aporte, es muy dificil conseguir material de calidad y en español. Saludos desde Argentina

    • Luis R
      Publicado a las 12:45h, 15 agosto Responder

      Muchas gracias Marcelo!
      Me alegro que los artículos y tutoriales te sean útiles.
      Un saludo grande para todos los argentinos!

  • Reinaldo Zurita
    Publicado a las 04:08h, 27 marzo Responder

    Hola, gracias por la ayuda. Me ha sido muy útil el poder seguir tus tutoriales, felicitaciones!
    Saludos dede Chile!

    • Luis R
      Publicado a las 10:40h, 27 marzo Responder

      Gracias por el comentario Reinaldo!
      Me alegro que te hayan sido útiles.

  • Alan
    Publicado a las 18:43h, 14 abril Responder

    Hola Luis,
    Excelentes tutoriales. Estoy empezando a desarrollar para IOS y la verdad que esta todo muy claro y bien explicado.
    Saludos!

Escribe un comentario

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.