Cómo crear listas en iOS

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn4

En este tutorial vamos a aprender como mostrar nuestros datos en una lista.

Crearemos un proyecto nuevo. En el ViewController que viene por defecto insertaremos un componente llamado “Table View“, el cual lo referenciaremos como “lvContactos“. Una vez insertado y referenciado, meteremos dentro de este “Table View” otro componente llamado “Table View Cell“.

Os explico un poco para que sirve cada componente. El “Table View” es el control que se encarga de que los datos que le pasemos a él los muestre en forma de lista, mientras que el “Table View Cell” es el aspecto que va a tener cada una de las celdas de esa lista. En nuestro ejemplo vamos ha simular una agenda de contactos, por tanto, vamos a utilizar 2 “Label“: una para mostrar el nombre y la otra para mostrar el número.

Diseño celda
Diseño celda

También indicaremos un “id” en nuestro “Table View Cell” para posteriormente hacer referencia a él. En nuestro caso nuestro identificador se llamará “celda“.

Identificador celda
Identificador celda

Ahora crearemos nuestra clase modelo llamada “Contacto” que heredará de “NSObject” y que contiene los campos de nombre y número de teléfono. Cuando hayamos terminado de crear nuestra clase “Contacto“.

import UIKit

class Contacto: NSObject {
    var nombre:String = "";
    var telefono:Int = 0
}

Crearemos otra llamada “ListItemContacto” que heredará de “UITableViewCell” y que representa una celda de nuestra lista. Cuando la creemos, seleccionaremos nuestro “Table View Cell” para indicar en el apartado “Class” que use nuestra clase “ListItemContacto” y por tanto, referenciar nuestros 2 “Label“.

Clase ListItemContacto
Clase ListItemContacto

Ya tenemos toda nuestra interfaz lista. Ahora pasamos a implementar la lógica del componente lista para poder mostrar nuestra agenda de contactos.Nos dirigimos a nuestra clase “ViewController.swift” y creamos nuestro Array de Contactos el cual inicializaremos en “viewDidLoad()” con nuestro método “initContactos()“.

var contactos = Array<Contacto>();

    ...

func initContactos () {
   //Contacto 1
   var tmp:Contacto = Contacto();
   tmp.nombre = "Iván Díaz";
   tmp.telefono = 123456789;
   self.contactos.append(tmp);
        
   //Contacto 2
   tmp = Contacto();
   tmp.nombre = "Igor Ávila";
   tmp.telefono = 987654321;
   self.contactos.append(tmp);
        
}


A nuestra clase “ViewController.swift” le indicamos que implemente las interfaces de “UITableViewDelegate” y “UITableViewDataSource” y asignarle esas interfaces a nuestro “Table View“.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet var lvContactos: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.initContactos();
        self.lvContactos.delegate = self;
        self.lvContactos.dataSource = self;
    }

    ...

}

Ahora tenemos que implementar los métodos obligatorios de esas interfaces que son:

  • numberOfRowsInSection: Método que establece el número de filas que se va a mostrar por sección.
  • cellForRowAtIndexPath: Método que establece la celda para esa fila.
  • didSelectRowAtIndexPath: Método que se lanza cuando se selecciona una fila.

En el método “numberOfRowsInSection” indicaremos el número total de contactos puesto que queremos mostrarlos todos.

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
   return self.contactos.count;
}

En el método “cellForRowAtIndexPath” haremos referencia a nuestra celda mediante el “id” anteriormente establecido (en nuestro caso era “celda”) y estableceremos los datos que vamos a mostrar.

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
   var celda:ListItemContacto = self.lvContactos.dequeueReusableCellWithIdentifier("celda") as ListItemContacto;
   celda.lblNombre.text = self.contactos[indexPath.row].nombre;
   celda.lblTelefono.text = String(self.contactos[indexPath.row].telefono);
   return celda;
}

Finalmente, en el método “didSelectRowInSection” simplemente mostraremos por consola la fila seleccionada.

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
   NSLog("Has seleccionado la celda %d", indexPath.row);
}

Ahora ejecutamos nuestra aplicación y vemos como nuestros contactos se muestran en una lista mostrando su nombre y su número de teléfono.

Listas
Listas

Descargas

Puedes acceder a nuestro repositorio para bajar el proyecto aquí.

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn4
The following two tabs change content below.

Iván Díaz Molina

Desarrollador Android e iOS, colaborador de Proyecto Simio

Latest posts by Iván Díaz Molina (see all)

Deja un comentario