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.
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.
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.
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.
A continuación, debemos iniciar dicho array, podemos realizarlo, por ejemplo, en el método viewDidLoad.
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:
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.
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.
El segundo paso consiste en modificar el método application:didFinishLaunchingWithOptions: del fichero AppDelegate.m de forma que solo devuelva 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.
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.
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.
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.
Debemos realizar el synthesize correspondiente en el fichero .m
También necesitamos asignar el valor de dicha variable al UILabel creado.
Por último, creamos el método prepareForSegue:sender:
en el controlador TableViewController.
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 siguiente código:
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.
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!