GuiaBreve

Hoy continuamos con esta guia de programación para iPhone.

En el primer capítulo aprendimos a crear una aplicación sencilla que tras pulsar un botón nos muestre en un label el mensaje “Hola Mundo!”. Erá una aplicación sencilla pero con ella aprendimos a relacionar elementos del StoryBoard con el código y a crear acciones que se ejecutan al pulsar sobre botones.

En este capitulo, el segundo, aprenderemos a manejar los UITableView que son uno de los elementos más útiles que nos encontraremos a la hora de crear una app. Para empezar simplemente crearemos una tabla y añadiremos celdas a partir de un array que crearemos también.

Vamos, paso a paso

Para empezar, como siempre, creamos un nuevo proyecto (No voy a explicar como crear un nuevo proyecto, en el capítulo uno de esta guia ya se explica). En este caso, crearemos una “Empty Application“.

Como podemos ver, este proyecto comienza solo con los archivos AppDelegate.h y AppDelegate.m.

Necesitamos un archivo StoryBoard. Para crearlo vamos a File » New » New File… y en la categoría UserInterface elegimos StoryBoard y lo creamos.

Ahora pasamos con el archivo StoryBoard

Para empezar tenemos que arrastrar una Table View Controler al StoryBoard. Este nos creará la primera vista con el TableView incluido.

Por defecto, la TableView viene configurada con las celdas en estilo “Custom”. Este estilo es para personalizar las celdas a nuestro gusto añadiendo elementos dentro de esta tal y como queramos, pero empezaremos con algo más sencillo.

Definiremos el tipo de celda como “Basic” que nos generará celdas sencillas con un unico Label dentro y nos será suficiente para empezar.

Si ejecutamos ahora el código nos saldrá una pantalla en blanco. Esto se debe ya que al poner Empty Application no nos carga la vista por defecto. Para que cargue nuestra tabla debemos de hacer dos cosas:

1. Primero debemos de dirigirnos al proyecto y definir StoryBoard como la interfaz que usará la aplicación tal y como indica la imagen. (Se explica mejor con una imagen que con mil palabras)
2. Y por último modificamos en el archivo AppDelegate.m la función - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions así:

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

Ahora al ejecutar nuestra app veremos la lista aunque por ahora sigue vacía.

Rellenando la lista

Primero necesitamos el controlador para la vista. Para ello vamos a File » New » New File… y creamos un archivo del tipo “UIViewControllersubclass“. En class ponemos el nombre que queramos y en “subclass of” tenemos que poner UITableViewController (Controlador de una table view).

Tenemos que relacionar el controlador con la vista. Para ello en el StoryBoard seleccionamos el “Table View Controller” y le ponemos de Class el archivo que acabamos de crear. (Imagen).

Y a la celda debemos de ponerle el “identifier” como Cell (Es el que se usa por defecto en el código). (Imagen izquierda)

Por último, el código

Tenemos que modificar el archivo .h y .m que creamos anteriormente.

Cabecera (Archivo .h)

Solo tenemos que definir aqui el array que vamos a usar para rellenar la lista. Quedará así.

#import 

@interface TableViewController : UITableViewController {
    NSArray *tabla; // Array
}

@end

Implementación (Archivo .m)

En este archivo son varias cosas las que debemos de hacer.

1. Debemos de definir el número de secciones y filas que tendrá nuestra tabla

- (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 [tabla count];
}

2. Debemos añadir elementos de la lista al Array

- (void)viewDidLoad
{
    [super viewDidLoad];

    tabla = [NSArray arrayWithObjects:@"1", @"2", @"3", @"4", @"5", nil];

    // Uncomment the following line to preserve selection between presentations.
    // self.clearsSelectionOnViewWillAppear = NO;

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

3. Debemos escribir el label de cada celda

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    // Configure the cell...
    cell.textLabel.text = [tabla objectAtIndex:indexPath.row];

    return cell;
}

¡Terminamos!

Con esto ya esta todo hecho. Como resultado tendremos una lista de 5 celdas con números del 1 al 5 como definimos en el array.

Esta vez ha sido un poco más complicado que el primer capítulo y puede que no haya quedado tan claro.

Como este proyecto es algo más complicado he subido todo el proyecto.

Como siempre, cualquier duda, usar los comentarios y si te ha gustado comparte el enlace en Twitter, Facebook o Google Plus. Gracias.