0
0
0En 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.
También indicaremos un “id” en nuestro “Table View Cell” para posteriormente hacer referencia a él. En nuestro caso nuestro identificador se llamará “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“.
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.
Descargas
Puedes acceder a nuestro repositorio para bajar el proyecto aquí.
000
Iván Díaz Molina
Latest posts by Iván Díaz Molina (see all)
- Cómo crear listas en iOS - 16 February 2015
- Navegación entre vistas - 11 February 2015
- Mi primera aplicación iOS (Hola Mundo) - 9 February 2015
