(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Storyboards en iOS

iOS
Principiante
30 minutos

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.

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.

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

Una vez creado, 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.

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 unUILabel 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. 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.


@interface TableViewController : UITableViewController {
NSMutableArray *items;
}

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

- (void)viewDidLoad
{
[super viewDidLoad];

items = [NSMutableArray array];
}

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:


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
// Return the number of rows in the section.
return [tutorials count];
}

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.


- (void)viewDidLoad
{
[super viewDidLoad];

// Creamos nuestro array con objetos
items = [NSMutableArray arrayWithObjects:@"First row", @"Second row", @"Third row" , @"Fourth row", @"Fifth row", nil];
}

Aunque pueda parecer que nuestra aplicación ya debería de 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.

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


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
return YES;
}

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.


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

// Configure the cell...

return cell;
}

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


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

// Configure the cell...

// Establecemos el texto para las celdas
cell.textLabel.text = [items objectAtIndex:indexPath.row];

return cell;
}

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


@interface DetailViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *titleLabel;

@end

Debemos realizar unos pequeños cambios en nuestro storyboard. El primero de ellos es modificar la clase que empleara 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 controladorDetailViewController. Realicemos los pasos:

Declaramos la variable text que almacenará el texto que debemos mostrar.


@interface DetailViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (strong, nonatomic) NSString *text;

@end

Debemos realizar el synthesize correspondiente en el fichero .m


@synthesize titleLabel, text;

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


- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.

// Asignamos el texto para el label
titleLabel.text = text;
}

Por último, creamos el método prepareForSegue:sender: en el controlador TableViewController


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

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.

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 código siguiente:


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// Obtenemos el storyboard
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:[NSBundle mainBundle]];
// Creamos una instancia del controlador
DetailViewController *detailViewController = [storyboard instantiateViewControllerWithIdentifier:@"DetailViewController"];
// Asignamos el texto
detailViewController.text = [items objectAtIndex:indexPath.row];
// Añadimos el controlador al navigation controller
[self.navigationController pushViewController:detailViewController animated:YES];
}

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

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.

Infórmate sin compromiso

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Modalidad (requerido)

  1. Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  2. Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  3. Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  4. Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies