Tutorial Programación iOS: Introducción a TableViewController (Clase 4)

Bienvenidos a la Clase 4 del Curso de Programación iOS de iPhone4Spain.

En esta clase vamos a hacer una introducción a la utilización del "TableViewController", uno de los componentes más importantes y más utilizados en la aplicaciones iOS. A lo largo del curso profundizaremos más en utilidades y propiedades de este componente.

Este componente se utiliza para crear listados de elementos. Sin ir más lejos podemos ver el ejemplo en la AppStore, donde tendremos listados de los tipo de aplicaciones que hay.

Empezamos ya con la clase creando un proyecto nuevo. "File -> New -> Project...". Seleccionamos una "Empty Application".



Nombramos el proyecto. Nuestro proyecto lo hemos llamado "Clase 4".



Una vez creado el proyecto, vamos a añadir un nuevo fichero de la clase "UITableViewController" con el que crearemos el listado.

Primero, pulsamos el botón derecho en la carpeta del proyecto y pulsamos "New File... "



Seleccionamos "Objective-C class".



En el siguiente paso nombramos a la clase. Nosotros la hemos llamado "ListViewController".

Seleccionamos que es subclase de "UITableViewController" y marcamos "With XIB for user interface".



Agrupamos los ficheros en carpetas con el nombre de la clase para tener el proyecto ordenado.



Una vez añadido la "ListViewController" vamos a hacer que la aplicación arranque en la escena asociada. Para ello, como siempre, editamos el fichero "AppDelegate.m".

Importamos "ListViewController.h", creamos un objeto de "ListViewController" y lo asignamos a la propiedad "rootViewController" de "window".



Ahora abrimos el fichero "ListViewController.m" y vamos a observar los métodos "numberOfSectionsInTableView", "numberOfRowsInSection" y "cellForRowAtIndexPath".



En "numberOfSectionsInTableView" es el método donde indicamos el número de secciones que va a tener el "TableViewController". En "numberOfRowsInSection" indicamos el número de filas que tendrá el componente. Es importante quitar los #warning una vez modificamos los métodos.

El "TableViewController" de la aplicación va a tener una sección y doce filas.

Además, el texto que va a tener cada celda es "Celdas". Para ello, modificamos el método "cellForRowAtIndexPath".

También, hay que comprobar que "cell" sea igual a "nil" e inicializar "cell", sino dará error al ejecutar la aplicación.



Ejecutamos y probamos el funcionamiento de la aplicación. Podéis poner un "breakpoint" en el método "cellForRowAtIndexPath" para ver cómo se comporta cuando se ejecuta.



La aplicación mostrará el "UITableViewController" con doce filas en las que el "textLabel" tendrá escrito "Celdas"



La aplicación que vamos a proponer esta semana ha de tener 25 filas en las que mostraremos el número de celda y el índice que tiene. Para ver el índice utilizaremos una variable que recibe el método, "indexPath".



El viernes 20 de abril publicaremos la solución con su correspondiente explicación.

Vía | iPhone4Spain.com - Clase 4

Bienvenidos a la solución y explicación del ejercicio propuesto de la Clase 4 del Curso de Programación iOS de iPhone4Spain.

Vamos a enseñar cómo hacer un listado con el componente "TableViewController".

Como dijimos en la Clase 4, es un componente muy utilizado en las aplicaciones que contienen listados.

Empezamos la explicación creando un proyecto nuevo. "File -> New -> Project...".

Seleccionamos "Empty Application".



Nombramos el proyecto. Nosotros le hemos puesto el nombre de "EjercicioClase4".



Ahora vamos a añadir una clase "UITableViewController" en la que vamos a mostrar el listado.

Añadimos los ficheros.



Seleccionamos "Objective-C class".



Elegimos "UITableViewController" en el apartado "Subclass of".

Marcamos "With XIB for user interface" para que, a la vez, cree el fichero .xib con la interfaz de usuario.

Por último, le damos un nombre. Nosotros lo hemos llamado "ListViewController".



Agrupamos todos los fichero creados en carpetas para tener ordenado el proyecto.



Editamos, ahora, el fichero "AppDelegate.m" para que arranque la aplicación en el listado.

Importamos "ListViewController". Buscamos el método "didFinishLaunchingWithOptions" en el que creamos un objecto de la clase "ListViewController" y lo asignamos a la propiedad "rootViewController" de "window".



Ahora, vamos a editar el fichero "ListViewController.m".

Buscamos los métodos "numberOfSectionsInTableView", "numberOfRowsInSection" y "cellForRowAtIndexPath"



Editamos estos métodos para que el listado cumpla con los requisitos del enunciado.



Ejecutamos y comprobamos que funciona correctamente.



Con la solución del ejercicio propuesto damos por terminada la Clase 4 del Curso de Programación iOS de iPhone4Spain.

Vía | iPhone4Spain.com - Clase 4