fbpx
 

Introducción a los Storyboards [Parte 2]

Introducción a los Storyboards [Parte 2]

1. Introducción

 

El lunes de la semana pasada publicamos la Primera Parte de nuestro Tutorial sobre Storyboard.

Hicimos un repaso a los conceptos fundamentales que debes dominar para crear las interfaces de tus aplicaciones.

Esta semana vamos a continuar con la Segunda Parte del Tutorial sobre Storyboard.

Nos centraremos en uno de los conceptos más importantes de los Storyboards: Los Segues.

Si no pudiste echarle un vistazo a la Primera Parte, te recomiendo que lo revises antes de continuar.

Puedes acceder desde aquí.

 

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

 

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

  • ¿Qué son los Segues?
  • Tipos de Segues
  • Trabajando Segues de Transición Modal
  • Entendiendo los Segues con Navigation Controller
  • Dominando los Segues con TabBarController

 

Comencemos entonces por la primera parte de nuestro Tutorial.

 

3. Trabajando con Segues

 

Si has podido revisar la primera parte del Tutorial, recordarás que cuando añadimos un NavigationController o un TabBarController a nuestro proyecto, aparecían unas flechas que unían unos ViewControllers con otros.

Algo similar a esto:

 

1 Storyboard Segues presentation

 

Estas flechas representan las conexiones que se establecen en la interfaz de nuestra aplicación y cada una de ellas se denomina Segue (Se pronuncia Segway).

Un Segue puede representar 2 cosas:

  1. Una transición entre 2 escenas de nuestro storyboard
  2. Una relación entre 2 ViewControllers de nuestro storyboard

 

En los siguientes ejemplos, vamos a ir viendo diferentes tipos de Segues que podemos utilizar.

 

4. Segues de Transición Modal

 

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

 

Una vez que tienes tu proyecto abierto en Xcode, accede al fichero Main.storyboard y verás que por defecto, tenemos un ViewController creado.

Bien, pues como además de ese ViewController, necesitamos otro, añádelo desde la Librería de Objetos.

 

En la Primera Parte de este Tutorial hemos visto como añadir cualquier tipo de ViewController a nuestra interfaz, si no lo tienes claro, es el momento de revisarlo

 

Ahora que hemos añadido este ViewController, la interfaz de nuestra aplicación contará con 2 ViewControllers, a los cuales vamos a cambiarles el color para diferenciarlos.

Para ello selecciona la View de cada uno de los ViewControllers y en la propiedad background, elige el color que quieras.

Deberías obtener algo parecido a esto:

 

2 Storyboard adding color viewcontrollers

 

Tu siguiente paso será añadir un UIButton al centro de cada uno de los dos ViewControllers y especificar el texto que quieras.

Además, deberás seleccionar el primero de tus ViewControllers y seleccionarlo como Initial View Controller, para que cuando ejecutemos el proyecto, nuestra aplicación muestre esta pantalla.

En este punto, tu interfaz debería ser similar a esta:

 

3 Storyboard adding buttons

Lo que vamos a hacer ahora es ver la forma más sencilla de presentar un ViewController desde otro ViewController de forma Modal.

Presentando ViewControllers de forma modal

Lo primero que debes hacer es seleccionar el botón de tu primer ViewController, dejar la tecla ctrl pulsada y arrastrar hasta el segundo ViewController.

En ese momento aparecerá un menú flotante que te permite seleccionar el tipo de Segue de Transición que queramos elegir.

Selecciona la opción Present Modally y verás como en nuestra interfaz aparece al momento un Segue de Transición entre nuestras pantallas.

 

4 Storyboard adding segue

Además, en el Document Outline puedes apreciar como en la primera Escena de nuestra aplicación se ha añadido este Segue.

 

5 Storyboard Adding segue to document outline

 

Si seleccionas el Segue haciendo click sobre él y después accedes al Inspector de Atributos, verás como en la opción Transition puedes seleccionar el tipo de animación que realizará tu aplicación cuando pase de una Escena a otra.

 

6 Storyboard transitions type

 

Ejecuta la aplicación y al pulsar sobre el botón del primer ViewController, nuestra aplicación realizará una transición de abajo hacia arriba para mostrar el segundo ViewController:

Sin embargo, si pulsas sobre el botón del segundo ViewController, verás como no se produce ningún efecto. Esto se debe a que no hemos asociado ningún segue a ese botón.

7 Storyboard playing app

 

Vamos a solucionarlo.

 

Añadiendo un nuevo Segue

 

Selecciona el botón del segundo ViewController y dejando la tecla ctrl pulsada arrastra hasta el primer ViewController. Después, al igual que hemos hecho antes, selecciona la opción Present Modally en el menú flotante que aparece.

Verás, que ahora tu aplicación tiene dos Segues.

Vamos a modificar el efecto de transición de nuestro segundo Segue.

Selecciona el Segue que acabamos de crear y desde el Inspector de Atributos, en su opción Transition, elige Flip Horizontal.

Ejecuta la aplicación y comprueba como ahora si, podemos navegar desde una pantalla a otra y además utilizando dos animaciones totalmente diferentes.

8 Storyboard modal app working

 

Como puedes ver, sin tener que escribir ni una sola linea de código hemos creado una aplicación que realiza transiciones entre pantallas de forma modal.

Sin embargo, no es la única forma de implementar una navegación básica, existen algunas otras como la que vamos a ver a continuación.

 

5. Segues de Transición con NavigationController

 

Una de las formas más sencillas y útiles de crear una navegación completa en una aplicación es utilizando un NavigationController.

Vamos a ver un ejemplo muy sencillo en el que navegaremos entre 3 vistas diferentes.

Para comenzar, accede al Main.storyboard de tu proyecto y elimina cualquier ViewController que tengamos de ejemplos anteriores.

Después, sigue estos pasos para crear la interfaz:

  1. Añade un NavigationController a nuestra aplicación
  2. Elimina el Root View Controller que trae asociado dicho NavigationController
  3. Añade 3 ViewControllers a la interfaz
  4. Incorpora un UIButton al primer ViewController con el texto “Ir a siguiente vista”
  5. Agrega un UIButton al segundo ViewController con el texto “Ir a siguiente vista”
  6. En el tercer ViewController añade un UIlabel con el texto “Vista Final”
  7. Modifica el color de fondo de las Views de los 3 ViewControllers
  8. Haz que el NavigationController sea el Initial View Controller

 

Después de seguir este proceso, tu interfaz debería ser parecida a esta:

9 Storyboard app with navigationcontroller

Añadiendo Navegación a nuestras escenas

 

Ya tenemos creadas todas las escenas de nuestra aplicación.

Nuestro siguiente paso será añadir la navegación entre ellas.

En la Primera Parte de nuestro Tutorial vimos que todo NavigationController debe llevar asociado un Root View Controller.

En nuestro caso, todavía no hemos especificado cual es el Root View Controller de nuestro NavigationController.

Para determinar esto, hacemos click en el NavigationController y dejando la tecla ctrl pulsada, arrastramos hasta nuestro primer ViewController.

Al soltar verás que aparece el típico menú flotante.

En este caso, la opción que elegiremos será root view controller.

 

10 Storyboard setting root view controller

 

Ahora que ya hemos especificado esto, si ejecutaras la aplicación, verías como aparecería nuestro primer ViewController con el botón Ir a siguiente vista.

Además, si te fijas, en la parte superior de la aplicación aparece la NavigationBar del NavigationController.

11 Storyboard navigationController in execution

 

Si recuerdas, al comienzo de este tutorial, hablamos de dos tipos de Segues. Segues de Transición y Segues de Relación.

Este último Segue que hemos creado es un Segue de Relación, ya que relaciona el NavigationController con su Root View Controller.

Ahora, vamos a utilizar Segues de Transición para relacionar unos ViewControllers con otros.

 

Añadiendo Segues con un NavigationController

 

El proceso que vamos a seguir es muy sencillo.

Selecciona el botón situado en el primer ViewController y dejando la tecla ctrl pulsada arrastra hasta el segundo ViewController y en el menú flotante que aparece, elige como tipo de Segue, la opción Show.

A continuación repite la operación con el segundo ViewController:

 

12 Storyboard linking viewcontrollers

 

Mientras hemos ido añadiendo el Segue a cada uno de los ViewControllers, te habrás fijado que en la parte superior se ha ido añadiendo la NavigationBar.

Si ahora ejecutas la aplicación, verás que puedes navegar de un ViewController a otro sin ningún problema.

13 Storyboard app with navigationController working

 

De nuevo hemos hecho posible la navegación entre las pantallas de nuestra aplicación sin tener que escribir ni una sola linea de código.

Además, esta forma de pasar de una pantalla a otra utilizando un NavigationController es algo que se utiliza constantemente en el Desarrollo de Aplicaciones iOS, así que es importante que hayas comprendido el funcionamiento completo del proceso.

 

6. Segues de Relación con TabBarController

 

Vamos a realizar un último ejemplo en el que trabajemos con Segues de Relación.

Esta vez vamos a utilizar un TabBarController.

Si recuerdas lo que vimos en la Primera Parte del Tutorial, los TabBarControllers son perfectos para establecer una navegación entre pantallas que no tienen relación jerárquica.

Se suelen utilizar mucho para diferenciar entre varios menús dentro de nuestra Aplicación.

Para comenzar, elimina cualquier ViewController que tengas en tu Main.storyboard, seleccionando y pulsando en la tecla Delete, para que la interfaz de nuestro proyecto quede completamente limpia.

Ahora, añade un TabBarController.

Verás que al añadirlo, va asociado a 2 ViewControllers, cada uno de los cuales representa un menú diferente.

Como nuestro ejemplo constará de 3 pantallas, añade otro ViewController adicional desde la Biblioteca de Objetos.

Ahora, como hemos hecho anteriormente, selecciona la View de cada uno de los ViewControllers y cambia su color de fondo.

Por último, selecciona el TabBarController y haz que sea el Initial View Controller de nuestra app.

Después de haber seguido estos pasos, tu interfaz debería ser algo así:

 

14 Storyboard with tabBarController

 

Elementos que componen nuestra interfaz

 

Como puedes observar, tenemos los siguientes componentes:

  • Un TabBarController
  • Un ViewController enlazado al TabBarController
  • Otro ViewController enlazado al TabBarController
  • Un tercer ViewController que no está enlazado al TabBarController

 

Como queremos, que nuestra interfaz esté formada por 3 pantallas asociadas al TabBarController, crearemos un Segue de Relación para enlazar nuestro último ViewController al TabBarController.

Para ello, dejando pulsada la tecla ctrl, arrastra desde el TabBarController hasta el último ViewController. Después, en el menú flotante que aparece, selecciona la opción Relationship Segue: view controllers.

 

15 Storyboard linking tabBarController with VC

 

Al momento de realizar esta conexión, nuestro TabBarController incorporará un Item más a su TabBar, lo que nos permitirá acceder a este ViewController directamente a través del botón derecho del TabBar.

Ahora, prueba a ejecutar la aplicación y verás como puedes cambiar fácilmente de pantalla utilizando el NavigationBar que hemos implementado.

De nuevo, todo, sin tener que escribir ni una sola linea de código.
16 Storyboard app with tabBar working

 

7. Resumen Final

 

En esta Segunda Parte de nuestro Tutorial sobre Storyboard, nos hemos centrado de uno de los aspectos más importantes: Los Segues.

A través de varios ejemplos, hemos podido ver como utilizar Segues para relacionar cualquier pantalla de nuestra aplicación.

Además a través de los Segues de Transición hemos creado ejemplos de aplicaciones que realizan navegaciones sencillas a través de las pantallas de nuestras interfaces.

Con lo que hemos visto en esta Segunda parte del Tutorial puedes desarrollar apps multivista que te permitirán mostrar varias pantallas al usuario, ofreciéndole una forma de navegar entre ellas.

Este Tutorial cuenta con una Tercera Parte a la que puedes acceder desde aquí.

En esta Tercera parte, desarrollaremos una Aplicación completa utilizando todos los conceptos que hemos ido viendo en las dos primeras partes del Tutorial.

 

8. 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:

 

 

9. ¿Donde ir ahora?

 

Puedes continuar con el Tutorial, accediendo a la Tercera parte 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:
Sin comentarios

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.