Cómo hacer Storyboards en iOS – Guía completa

Comunicación entre controladores en storyboard

En el presente tutorial vamos a aprender a comunicar dos controladores creados mediante Storyboard, de forma que podamos crear una aplicación maestro-detalle, donde por un lado veamos una lista de elementos, y por otro los detalles de dichos elementos. Este tipo de comunicación entre controladores es importante a la hora de realizar una aplicación puesto que siempre es necesario ir informando de ciertos datos para que la aplicación vaya mostrando el contenido correcto.

Ejemplos

Un ejemplo práctico puede verse en las aplicaciones de las Fallas y la Guía de Valencia, desarrolladas por Imagina Labs, donde se dispone de tablas para los lugares de interés y una vista detalle que amplía la información de dicho lugar. Además, vamos a ver cómo realizarlo de dos formas distintas, para ello también se han dispuesto dos proyectos distintos para descargar para poder ver ambas implementaciones.

Puesto que el objetivo es aprender a realizarlo, vamos a crear un nuevo proyecto para iPhone de tipo Empty Application.

Creación del storyboard y los controladores

Una vez creado el proyecto, el primer paso es crear el archivo storyboard, en este caso le llamaremos MainStoryboard.

Después de crearlo, añadimos dos nuevos controladores, por un lado, un controlador de tipo Table View Controller y otro de tipo View Controller. Cuando hayamos añadido ambos controladores los uniremos mediante un segue, realizando click derecho sobre la celda y arrastrando hasta el controlador de tipo View Controller, e indicaremos push como tipo de segue.

Puesto que hemos indicado que el tipo del segue será push, deberíamos añadir un controlador que fuese de tipo Navigation Controller para poder realizar el push correctamente. Puesto que ya tenemos creado nuestros controladores para la lista y la vista detalle, deberíamos añadir el Navigation Controller y enlazarlo con nuestros controladores. Pero existe una forma más sencilla de realizar esto mediante el menú Editor: seleccionamos nuestro controlador Table View Controller y en el menú Editor seleccionamos la opción Navigation Controller en el submenú Embed In.

Configuración de la tabla y la vista detalle

El último paso que debemos realizar es completar nuestra tabla y vista detalle. Para ello, primero en la tabla, marcamos la celda e indicamos que sea de tipo Basic y añadimos el identificador de las celdas, podemos usar simplemente cell como identificador. Por otro lado, en nuestra vista detalle añadimos un UILabel que nos mostrará el elemento sobre el que hemos pulsado.

Hemos realizado todos estos pasos para la preparación de la interfaz, ahora queda empezar a desarrollar nuestro código.

Configuración del proyecto y controlador de la tabla

Primer paso

El primer paso que debemos realizar es indicar el uso de nuestro fichero storyboard. Para ello pulsamos sobre nuestro proyecto, a continuación sobre el target y por último, en el apartado iPhone / iPad Deployment Info escribimos el nombre de nuestro storyboard en la opción Main Storyboard.

Ahora vamos a crear una clase que herede de UITableViewController. Podemos llamarle TableViewController. Recordad que al hacer uso de storyboard, no necesitamos la creación del fichero XIB para la interfaz, por lo que desmarcamos dicha opción.

En este controlador vamos a declarar un array que nos servirá para mostrar los objetos que deseemos en la tabla.

1@interface
2
3 TableViewController : UITableViewController {
4    NSMutableArray *items;
5}

A continuación, debemos iniciar dicho array, podemos realizarlo, por ejemplo, en el método viewDidLoad.

1(void)viewDidLoad {
2    [super viewDidLoad];
3    items = [NSMutableArray array];
4}

Ahora modificamos los métodos encargados de devolver el número de secciones y filas de la tabla. Puesto que dependerá de nuestro array, los modificamos de la siguiente manera:

1(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
2    // Return the number of sections.
3    return 1;
4}
5
6(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
7    // Return the number of rows in the section.
8    return [items count];
9}

Ya tenemos preparados los métodos necesarios para mostrar objetos en nuestra tabla, ahora queda crear dichos objetos. Para ello, vamos a modificar el método viewDidLoad donde hemos inicializado el array para inicializarlo con algunos objetos, en este caso objetos de tipo NSString.

1(void)viewDidLoad {
2    [super viewDidLoad];
3    
4    // Creamos nuestro array con objetos
5    items = [NSMutableArray arrayWithObjects:@"First row", @"Second row", @"Third row" , @"Fourth row", @"Fifth row", nil];
6}

Aunque pueda parecer que nuestra aplicación ya debería mostrarnos la lista, si ejecutamos podremos comprobar que no es así. Esto se debe a que nos quedan unos pasos fundamentales. El primero de ellos se realiza en nuestro storyboard, donde debemos indicar que el controlador Table View Controller es de tipo TableViewController, es decir, el controlador que hemos creado.

Segundo paso

El segundo paso consiste en modificar el método application:didFinishLaunchingWithOptions: del fichero AppDelegate.m de forma que solo devuelva YES.

1(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2    return YES;
3}

Tercer paso

Por último, de nuevo en nuestro controlador TableViewController, debemos modificar el identificador de la celda, puesto que habíamos indicado que sería cell cuando en dicho método aparece como Cell.

1(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2    static NSString *CellIdentifier = @"cell";
3    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
4
5    // Configure the cell...
6    return cell;
7}

Si ahora ejecutamos la aplicación, comprobaremos que funciona correctamente e incluso podemos navegar a la vista detalle al pulsar sobre una celda y volver de nuevo a la lista.

Cuarto paso

Vamos a terminar de configurar la tabla de forma que aparezca el texto correcto en cada celda. Para ello, bastará con modificar el método tableView:cellForRowAtIndexPath: indicando que el texto de la celda debe corresponder con uno de los objetos de nuestro array.

1(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2    static NSString *CellIdentifier = @"cell";
3    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
4
5    // Configure the cell...
6    // Establecemos el texto para las celdas
7    cell.textLabel.text = [items objectAtIndex:indexPath.row];
8
9    return cell;
10}

Creación del controlador de la vista detalle

Pasamos ahora a la creación del controlador de nuestra vista detalle. Creamos un nuevo objeto de tipo UIViewController, de nuevo sin fichero XIB. Declaramos un IBOutlet para el UILabel que habíamos creado con anterioridad en el storyboard.

1@interface DetailViewController : UIViewController
2
3@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
4
5@end

Cambios en storyboard

Debemos realizar unos pequeños cambios en nuestro storyboard. El primero de ellos es modificar la clase que empleará el controlador para indicar que use la nuestra.

El segundo consiste en enlazar el IBOutlet con el UILabel adecuado.

Este identificador se emplea en el método prepareForSegue:sender:, así que vamos a añadir dicho método a nuestra clase TableViewController. En este método, debemos comprobar que el identificador corresponda al segue que queremos y a continuación pasar la información que deseemos a la vista detalle. En este caso, vamos a crear una variable de tipo NSString en nuestro controlador DetailViewController. Realicemos los pasos:

Declaramos la variable

text

que almacenará el texto que debemos mostrar.

1@interface DetailViewController : UIViewController
2
3@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
4@property (strong, nonatomic) NSString *text;
5
6@end

Debemos realizar el synthesize correspondiente en el fichero .m

1@synthesize titleLabel, text;

También necesitamos asignar el valor de dicha variable al UILabel creado.

1(void)viewDidLoad {
2    [super viewDidLoad];
3    // Do any additional setup after loading the view.
4
5    // Asignamos el texto para el label
6    titleLabel.text = text;
7}

Por último, creamos el método

prepareForSegue:sender:

en el controlador TableViewController.

1(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
2    // Comprobamos si el identificador es el adecuado
3    if ([segue.identifier isEqualToString:@"pushSegue"]) {
4        // Obtenemos el controlador destino
5        DetailViewController *destinationViewController = (DetailViewController *)segue.destinationViewController;
6        
7        // Asignamos el texto
8        destinationViewController.text = [items objectAtIndex:[self.tableView indexPathForSelectedRow].row];
9    }
10}

Ejecución de la aplicación

Si ejecutamos la aplicación, veremos que la vista detalle muestra el texto que contenía la celda. Al igual que hemos realizado este paso de información, podemos realizar otros muchos, como por ejemplo pasar objetos personalizados, arrays o diccionarios.

Mismo resultado pero prescindiendo de prepareForSegue:sender:

Un último apunte: si queremos prescindir en este caso del método prepareForSegue:sender:, podemos realizar lo siguiente para conseguir el mismo resultado. Primero, asignamos un identificador a nuestro DetailViewController. Además, eliminamos el segue.

A continuación, modificamos el método tableView:didSelectRowAtIndexPath: para utilizar el siguiente código:

1(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
2    // Obtenemos el storyboard
3    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:[NSBundle mainBundle]];
4
5    // Creamos una instancia del controlador
6    DetailViewController *detailViewController = [storyboard instantiateViewControllerWithIdentifier:@"DetailViewController"];
7
8    // Asignamos el texto
9    detailViewController.text = [items objectAtIndex:indexPath.row];
10
11    // Añadimos el controlador al navigation controller
12    [self.navigationController pushViewController:detailViewController animated:YES];
13}

Al ejecutar la aplicación, el resultado será exactamente el mismo que el anterior.

Resultados

Con estos sencillos pasos, se pueden crear aplicaciones para mostrar información a partir de una lista, de forma que el usuario pueda ampliar y conocer más datos de alguno de los elementos que mostremos.

Si estás interesado en aprender más sobre el desarrollo de aplicaciones móviles en iOS, te invitamos a consultar nuestro curso especializado en desarrollo en iOS.

¡No dudes en explorar y ampliar tus conocimientos en este emocionante campo de desarrollo!

Comunicación entre controladores en storyboard

Ejemplos

Puesto que el objetivo es aprender a realizarlo, vamos a crear un nuevo proyecto para iPhone de tipo Empty Application.

Creación del storyboard y los controladores

Una vez creado el proyecto, el primer paso es crear el archivo storyboard, en este caso le llamaremos MainStoryboard.

Configuración de la tabla y la vista detalle

Hemos realizado todos estos pasos para la preparación de la interfaz, ahora queda empezar a desarrollar nuestro código.

Configuración del proyecto y controlador de la tabla

Primer paso

En este controlador vamos a declarar un array que nos servirá para mostrar los objetos que deseemos en la tabla.

1@interface
2
3 TableViewController : UITableViewController {
4    NSMutableArray *items;
5}

A continuación, debemos iniciar dicho array, podemos realizarlo, por ejemplo, en el método viewDidLoad.

1(void)viewDidLoad {
2    [super viewDidLoad];
3    items = [NSMutableArray array];
4}

Ahora modificamos los métodos encargados de devolver el número de secciones y filas de la tabla. Puesto que dependerá de nuestro array, los modificamos de la siguiente manera:

1(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
2    // Return the number of sections.
3    return 1;
4}
5
6(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
7    // Return the number of rows in the section.
8    return [items count];
9}

1(void)viewDidLoad {
2    [super viewDidLoad];
3    
4    // Creamos nuestro array con objetos
5    items = [NSMutableArray arrayWithObjects:@"First row", @"Second row", @"Third row" , @"Fourth row", @"Fifth row", nil];
6}

Segundo paso

El segundo paso consiste en modificar el método application:didFinishLaunchingWithOptions: del fichero AppDelegate.m de forma que solo devuelva YES.

1(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2    return YES;
3}

Tercer paso

1(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2    static NSString *CellIdentifier = @"cell";
3    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
4
5    // Configure the cell...
6    return cell;
7}

Si ahora ejecutamos la aplicación, comprobaremos que funciona correctamente e incluso podemos navegar a la vista detalle al pulsar sobre una celda y volver de nuevo a la lista.

Cuarto paso

1(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2    static NSString *CellIdentifier = @"cell";
3    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
4
5    // Configure the cell...
6    // Establecemos el texto para las celdas
7    cell.textLabel.text = [items objectAtIndex:indexPath.row];
8
9    return cell;
10}

Creación del controlador de la vista detalle

1@interface DetailViewController : UIViewController
2
3@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
4
5@end

Cambios en storyboard

Debemos realizar unos pequeños cambios en nuestro storyboard. El primero de ellos es modificar la clase que empleará el controlador para indicar que use la nuestra.

El segundo consiste en enlazar el IBOutlet con el UILabel adecuado.

Declaramos la variable

text

que almacenará el texto que debemos mostrar.

1@interface DetailViewController : UIViewController
2
3@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
4@property (strong, nonatomic) NSString *text;
5
6@end

Debemos realizar el synthesize correspondiente en el fichero .m

1@synthesize titleLabel, text;

También necesitamos asignar el valor de dicha variable al UILabel creado.

1(void)viewDidLoad {
2    [super viewDidLoad];
3    // Do any additional setup after loading the view.
4
5    // Asignamos el texto para el label
6    titleLabel.text = text;
7}

Por último, creamos el método

prepareForSegue:sender:

en el controlador TableViewController.

1(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
2    // Comprobamos si el identificador es el adecuado
3    if ([segue.identifier isEqualToString:@"pushSegue"]) {
4        // Obtenemos el controlador destino
5        DetailViewController *destinationViewController = (DetailViewController *)segue.destinationViewController;
6        
7        // Asignamos el texto
8        destinationViewController.text = [items objectAtIndex:[self.tableView indexPathForSelectedRow].row];
9    }
10}

Ejecución de la aplicación

Mismo resultado pero prescindiendo de prepareForSegue:sender:

A continuación, modificamos el método tableView:didSelectRowAtIndexPath: para utilizar el siguiente código:

1(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
2    // Obtenemos el storyboard
3    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:[NSBundle mainBundle]];
4
5    // Creamos una instancia del controlador
6    DetailViewController *detailViewController = [storyboard instantiateViewControllerWithIdentifier:@"DetailViewController"];
7
8    // Asignamos el texto
9    detailViewController.text = [items objectAtIndex:indexPath.row];
10
11    // Añadimos el controlador al navigation controller
12    [self.navigationController pushViewController:detailViewController animated:YES];
13}

Al ejecutar la aplicación, el resultado será exactamente el mismo que el anterior.

Resultados

Si estás interesado en aprender más sobre el desarrollo de aplicaciones móviles en iOS, te invitamos a consultar nuestro curso especializado en desarrollo en iOS.

¡No dudes en explorar y ampliar tus conocimientos en este emocionante campo de desarrollo!

Cómo hacer Storyboards en iOS – Guía completa

Comunicación entre controladores en storyboard

Ejemplos

Creación del storyboard y los controladores

Configuración de la tabla y la vista detalle

Configuración del proyecto y controlador de la tabla

Primer paso

Descubre la formación a tu medida

Segundo paso

Tercer paso

Cuarto paso

Creación del controlador de la vista detalle

Cambios en storyboard

Ejecución de la aplicación

Mismo resultado pero prescindiendo de prepareForSegue:sender:

Resultados

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic

Cómo hacer Storyboards en iOS – Guía completa

Comunicación entre controladores en storyboard

Ejemplos

Creación del storyboard y los controladores

Configuración de la tabla y la vista detalle

Configuración del proyecto y controlador de la tabla

Primer paso

Descubre la formación a tu medida

Segundo paso

Tercer paso

Cuarto paso

Creación del controlador de la vista detalle

Cambios en storyboard

Ejecución de la aplicación

Mismo resultado pero prescindiendo de prepareForSegue:sender:

Resultados

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en iOS 16!

Tutoriales relacionados

¿Qué es el Patrón de Arquitectura (MVVM)?

Cómo Crear una Progressive Web App (PWA) con Ionic

Cómo Instalar QR Scanner en Aplicación Ionic