Aprende Storyboards paso a paso para poder disfrutar lo antes posible de esta nueva funcionalidad.

En este artículo vamos a ver paso por paso como utilizar la funcionalidad Storyboarding de iOS 5, que nos facilitará enormemente la gestión de múltiples pantallas en nuestra App.

En primer lugar vamos a tratar de explicar cual es la principal diferente entre la forma de trabajar antigua y la forma de trabajar nueva.

Hasta ahora, si teníamos una aplicación que tenía un total de 3 pantallas, en lo referente a la capa de vista, debíamos tener 3 archivos de Interface Builder, donde se elaboraba visualmente la estructura y elementos de cada pantalla. Para poder establecer navegación entre una vista y otra, la única manera era mediante código, con funciones como la que sigue:

1

[self.navigationController pushViewController:myViewController animated:YES];

Al encontrarse la lógica de navegación en el código, no había una forma rápida de entender la misma, sino que era necesario ir viendo cada ViewController y averiguar qué botón llama a qué pantalla, etc.

Ahora, con Storyboarding, esos múltiples ficheros de Interface Builder, se sustituyen por un único fichero .storyboard. Este fichero se edita desde el propio Xcode, al haberse “eliminado” Interface Builder con la salida de Xcode 4.

En este storyboard no solo podemos ver gráficamente cada una de las vistas de nuestra aplicación, sino que podemos conocer cual es la navegación que se establece entre cada una de ellas.

Esto quizás al principio pueda resultar un poco extraño, pero os puedo asegurar que con el ejemplo que vamos a ver al final de este artículo vais a poder comprobar la potencia de esta nueva forma de trabajar.

Escena: una escena es lo que podríamos denominar una vista de nuestra aplicación, es decir, cada pantalla.

Segue (pronunciado Seg-way): es la navegación/transición entre una escena y otra.

En Xcode sin una sola letra de código vamos a poder establecer cual es la navegación para cada uno de los elementos de la interfaz, e incluso personalizar la forma en que se produce la transición entre los mismos (con una serie de efectos que vienen predefinidos y pudiendo establecer los nuestros personalizados).

Ejemplo práctico

Vamos a hacer un ejemplo de aplicación, donde tengamos un TabBarController inicial con dos pestañas. En la primera de ellas tendremos un sencillo botón que abre una ventana modal en la cual hay un botón que nos permite volver a cerrarla enviándole cierta información. En la segunda pestaña tendremos un TableViewController con su correspondiente pantalla de detalle.

En primer lugar abriremos Xcode y crearemos un nuevo proyecto de tipo “Single View Application”.

A continuación cumplimentaremos la información del proyecto, asegurándonos de chequear en la parte inferior las opciones ARC y Storyboarding.

Una vez se haya creado el proyecto, veremos en nuestra vista “Project Navigator” que la plantilla ha creado automáticamente un fichero con el nombre “MainStoryboard.storyboard”. Pulsando sobre el fichero veremos que nos abre la funcionalidad de Storyboarding, que ahora mismo únicamente cuenta con un ViewController.

Dado que necesitamos tener en primer lugar un TabBarController en nuestra aplicación, podemos añadirlo manualmente desde el Panel de Objetos, pero existe una forma aun más comoda de hacerlo.

Si teniendo seleccionado nuestro ViewController vamos al menú “Editor / Embed in / Tab Bar Controller” será Xcode quien haga todos los pasos por nosotros.

Ahora ya tenemos el TabBarController pero aún nos falta una segunda pestaña que como decíamos en el enunciado deberá ser de tipo TableViewController con un NavigationController que nos permita posteriormente incluir una pantalla de detalle.

Desde el panel de objetos vamos a añadir un nuevo TableViewController.

Una vez añadido, lo seleccionaremos, y pulsaremos el menú “Editor / Embed in /  Navigation Controller”, y obtendremos un resultado como el que sigue.

Como se puede observar, el Navigation Controller esta completamente desvinculado del Tab Bar Controller. Para incluirlo como una nueva pestaña deberemos hacer Ctrl clic en el Tab Bar Controller y arrastrar y soltar en el Navigation Controller como cuando creamos un Outlet.

Al soltar nos saldrá una ventaja emergente con las siguientes opciones:

Deberemos seleccionar la opción “Relationship – ViewControllers”. Una vez hecho esto veremos que se ha incluido una nueva conexión entre ambos, y que en el Tab Bar Controller figuran ya dos pestañas.

Dado que en nuestro ejemplo no vamos a tener un DataSource para el TableView, vamos a hacer uso de una nueva funcionalidad de iOS 5 y Xcode 4, que son las Static Cells.

En un próximo artículo hablaremos en mas detalle de esta funcionalidad y de la de prototipado de Celdas desde Storyboarding.

Ahora solo haremos lo mínimo necesario para completar nuestra navegación.

Seleccionando el Table View, nos iremos al Attributes Inspector y seleccionaremos la opción Static Cells.

Con ello veremos que Xcode nos crea varias celdas en nuestro Table View. Eliminaremos todas, dejando solo la primera.

Teniendo seleccionada la celda que nos ha quedado en el table View, nos vamos de nuevo al Attributes Inspector y seleccionamos el tipo Basic.

Ahora vamos a añadir por último un ViewController destinado a la pantalla de detalle del Table View Controller.

Desde el panel de objetos añadimos un View Controller y al igual que hicimos hace un momento, arrastramos desde la celda del TableViewController hasta el ViewController creado. Esta vez seleccionaremos la opción Push que nos permitirá dar uso al NavigationController en el que nos encontramos en ese punto.

Ahora mismo ya tenemos todas las escenas que necesita nuestra aplicación, y como habéis podido observar, hemos establecido su navegación sin una sola letra de código.

Si ejecutamos en este punto la aplicación veremos que ya tenemos las pestañas, tenemos el TableView e incluso pulsando sobre la celda que hemos creado como estática, accedemos a la pantalla de detalle.

Como habréis podido observar, la potencia de Storyboarding es algo excepcional.

Por último vamos a ver como se implementaría el último de nuestros requisitos para este ejemplo: hacer que en la primera pestaña haya un botón que abra una ventana modal, en la cual haya otro botón que cierra dicha ventana devolviendo ciertos datos.

Dado que para hacer esta operativa si que vamos a necesitar algo de código a implementar, vamos a crearnos una clase ViewController para nuestra primera pestaña.

Para ello, añadimos una nueva clase a la que llamaremos PrimerViewController que deberá extender a UIViewController.

Una vez creada la clase, seleccionamos dentro del Storyboard el ViewController correspondiente a la primera pestaña (el que no es un Navigation Controller) y en la pestaña de Identity Inspector seleccionamos como Class PrimerViewController.

A continuación añadimos a nuestro Storyboard un nuevo ViewController desde el panel de objetos. Seguidamente creamos una nueva clase en nuestro proyecto a la que llamaremos SegundoViewController, y tal y como hicimos en la pestaña Identity Inspector de este nuevo View Controller seleccionamos como Class SegundoViewController.

Ahora añadiremos un UILabel y un UIButton al Primer View Controller y hacemos Ctrl clic hasta el SegundoViewController donde soltamos y seleccionamos Modal.

En SegundoViewController creamos un UITextField y un UIButton.

En este punto quizás podríais pensar que para poder ir al PrimerViewController al pulsar el botón Seleccionar bastaría con crear un nuevo Segue. La verdad es que no es posible hacer eso, dado que lo que ocurriría sería que nos crearía una nueva instancia de PrimerViewController, y podríamos hacer que el usuario entrara en un bucle en el cual se crean ViewControllers pero nunca se destruyen.

¿Y entonces como hago para enviar información desde la segunda ventana a la primera y cerrar la ventana modal?

Pues bien, vamos a necesitar crear un protocolo en el SegundoViewController, y nuestro PrimerViewController hará de Delegate e implementará dicho protocolo.

Para ello el código quedaría de la siguiente manera:

SegundoViewController.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import <UIKit/UIKit.h>
 
@class SegundoViewController;
 
@protocol SegundoViewControllerDelegate <NSObject>
- (void)devolverValor:(NSString *)texto;
@end
 
@interface SegundoViewController : UIViewController
 
@property (strong, nonatomic) IBOutlet UITextField *cajaTexto;
 
@property (nonatomic, weak) id <SegundoViewControllerDelegate> delegate;
 
- (IBAction)volver:(id)sender;
 
@end

SegundoViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#import "SegundoViewController.h"
 
@implementation SegundoViewController
 
@synthesize cajaTexto;
@synthesize delegate;
 
- (IBAction)volver:(id)sender {
[delegate devolverValor:self.cajaTexto.text];
}
 
- (void)viewDidUnload {
[self setCajaTexto:nil];
[super viewDidUnload];
}
@end

PrimerViewController.h

1
2
3
4
5
6
7
8

#import <UIKit/UIKit.h>
#import "SegundoViewController.h"
 
@interface PrimerViewController : UIViewController <SegundoViewControllerDelegate> {
}
@property (strong, nonatomic) IBOutlet UILabel *etiqueta;
 
@end

PrimerViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#import "PrimerViewController.h"
 
@implementation PrimerViewController
@synthesize etiqueta;
 
- (void)devolverValor:(NSString *)texto {
self.etiqueta.text = texto;
[self dismissModalViewControllerAnimated:YES];
}
 
- (void)viewDidUnload {
[self setEtiqueta:nil];
[super viewDidUnload];
}
@end

Ahora bien, ya tenemos todo preparado, pero nos falta un pequeño detalle: indicar a SegundoViewController que su delegate es PrimerViewController.

Y aquí es donde vamos a ver una pequeña pega, o elemento a mejorar en Storyboarding, y es que para poder definir esta relación, debemos obligatoriamente hacer uso de código.

Concretamente vamos tener que asignarnos como delegate en el momento en que se construye el SegundoViewController antes de mostrarse.

Para ello, existe un método denominado prepareForSegue, que nos permite justamente eso. Preparar el nuevo ViewController antes de mostrarlo, ya sea para incializar valores, cargar en el información procedente del ViewController en que nos encontramos, o como es el caso, para definirnos como delegate del mismo.

Para ello incluiremos en nuestro PrimerViewController.m el siguiente método:

1
2
3
4
5
6
7

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
 
SegundoViewController * segundoViewController = segue.destinationViewController;
 
segundoViewController.delegate = self;
 
}

Como se puede ver el método cuenta con un parámetro segue de tipo UIStoryboardSegue de donde podemos entre otras cosas obtener el ViewController al que vamos a ir al ejecutar esta navegación.

En algunos casos, en los que un ViewController tenga navegación a través de botones por ejemplo a varios lugares, preguntar cual es el Segue concreto que se esta ejecutando.

Para ello deberemos identificarlos previamente en el Attributes Inspector.

Esto lo haremos situándonos sobre el icono correspondiente al Segue que queremos identificar.

Una vez hecho esto, dentro de nuestro método prepareForSegue podremos preguntar por el identificador del Segue que se esta ejecutando, y poder así establecer diferentes salidas para cada uno de ellos:

1
2
3

if ([segue.identifier isEqualToString:@"PantallaDetalle"]){
 
}

Pues esto ha sido todo, y espero que este artículo os sirva para quitaros el miedo con esta potente herramienta que es el Storyboarding.

Una vez se prueba a trabajar así, ya no hay vuelta atrás.

Espero vuestros comentarios.