Swift-IOS para principiantes, UITableView Parte #3
Conceptos fundamentales de UITableView
Las tablas son comúnmente utilizadas por aplicaciones cuyos datos están altamente estructurados u organizados jerárquicamente. Las aplicaciones que contienen datos jerárquicos a menudo usan tablas junto con un controlador de vista de navegación, lo que facilita la navegación entre diferentes niveles de la jerarquía. Por ejemplo, la aplicación Configuración utiliza tablas y un controlador de navegación para organizar la configuración del sistema.
UITableView gestiona la apariencia básica de la tabla, pero su aplicación proporciona las celdas (objetos UITableViewCell) que muestran el contenido real. Las configuraciones de celda estándar muestran una combinación simple de texto e imágenes, pero puede definir celdas personalizadas que muestren el contenido que desee. También puede proporcionar vistas de encabezado y pie de página para proporcionar información adicional para grupos de celdas.
Protocolo UITableViewDataSource.
Apple nos ofrece la clase UITableView para que podamos trabajar con tablas en nuestras aplicaciones. Esta clase ha sido diseñada para poder mostrar tipos de datos muy diferentes. En una tabla puedes mostrar prácticamente cualquier dato, desde un conjunto de opciones básicas hasta un listado de productos en inventarios, con la información completa de cada uno, clasificados por sucursales.
La pregunta es:
¿Cómo le decimos a la clase UITableView que información debe mostrar?
La respuesta es, utilizando el protocolo UITableViewDataSource.
Las TableViews se dividen en Secciones y Celdas
Las tablas se dividen en diferentes secciones, donde cada sección puede contener un determinado número de celdas, entonces en que consiste el protocolo UITableViewDataSource.
UITableViewDataSource es el enlace entre los datos que queremos mostrar y nuestra UITableView. Este protocolo declara dos métodos obligatorios:
- tableView:numberOfRowsInSection()
- tableView:cellForRowAt()
El primero de los métodos: numberOfRowsInSection(), el cual especifica el número de celdas que mostraremos en nuestra tabla y se ejecutará tantas veces como secciones tenga nuestra tabla. En nuestro caso, como no hemos indicado el número de secciones, iOS entenderá que nuestra tabla tiene una única sección, por lo que este método se ejecutará una única vez.
El segundo método: cellForRowAt(), nos permite especificar los datos que mostraremos en cada celda y se ejecutará tantas veces como celdas tenga la única sección de nuestra tabla.
Cabe mencionar que estos son métodos obligatorios, y tendremos que implementarlos en nuestra clase si queremos utilizar el protocolo UITableViewDataSource.
Protocolo UITableViewDelegate
Por otro lado tenemos el protocolo UITableViewDelegate. Este protocolo es el encargado de determinar la apariencia de nuestra UITableView. Todos sus métodos son opcionales, por lo que no estamos obligados a implementar ninguno. Sin embargo, ofrece funcionalidades muy útiles como especificar el height de las celdas, configurar tanto el header como el footer de una tabla, reordenar las celdas, etc.
En este tutorial no utilizaremos ninguno de estos métodos, ya que nos vamos a centrar únicamente en mostrar los datos en nuestra aplicación pero aún así es importante que conozcas las opciones que te ofrece este protocolo.
IndexPath
La clase IndexPath es fundamental para que entiendas completamente el trabajo con tablas en aplicaciones iOS. Siempre que quieras utilizar alguna TableView en tu aplicación, tendrás que implementar el método cellForRowAt y gran parte del funcionamiento de este método se basa en un objeto de la clase IndexPath.
Este objeto tiene dos propiedades:
- .section
- .row
A través de estas dos propiedades, podremos situarnos en un punto concreto de una tabla. Mediante la propiedad .section especificaremos en que sección de nuestra tableView nos encontramos, mientras que a través de la propiedad .row determinaremos, dentro de esa sección, en que celda nos encontramos.
Por tanto si especificáramos lo siguiente:
- .section = 0
- .row = 4
Nos encontraríamos en la quinta celda de la primera sección de nuestra tabla.
Creando nuestro proyecto.
Abre Xcode y crea un nuevo proyecto, haciendo clic en la opción “Create a new Xcode project”.
Elige la plantilla “Single View Application” y haz clic en Next para continuar.
A continuación rellena los campos que Xcode te solicita:
- Nombre de producto o de la apps.
- Nombre de la organización.
- El identificador de la organización (Normalmente es el dominio de tu empresa pero en orden inverso).
- El lenguaje (Importante que elijas Swift)
Una vez que has introducido esta información, pulsa en Next y Xcode te preguntará donde quieres guardar tu proyecto. Elige una ubicación de tu ordenador y haz clic en el botón Create. Xcode creará tu proyecto y te mostrará tu entorno de trabajo:
Lo primero que haremos será crear la interfaz de nuestra aplicación. Abre el fichero Main.storyboard.
Haz doble clic en el único ViewController que tenemos en nuestro storyboard, para seleccionarlo. Después, en la librería de objetos, situada en la parte inferior derecha, desplázate hacia abajo hasta encontrar el objeto Table View y arrástralo al interior de la view de nuestro ViewController.
Ahora redimensiona la UITableView para que ocupe toda la view principal
Acabas de añadir un UITableView a la interfaz de tu aplicación. Esta tabla será la que utilicemos para mostrar los datos de nuestra app.
Lo siguiente que tienes que hacer es añadir las constraints de esa tabla. Las constraints nos permiten asegurarnos de que al ejecutar nuestra app en cualquier dispositivo, nuestra tabla aparecerá correctamente centrada.
Lo primero que tenemos que hacer es especificar que la clase ViewController.swift se ajustará a los protocolos UITableViewDataSource y UITableViewDelegate. Este es el primer paso siempre que trabajes con protocolos, determinar que clase será la que implemente el protocolo.
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegateEn clase ViewController.swift, declaramos la variable donde almacenaremos la información que queremos que muestre nuestra tabla.
Como los datos que mostraremos en nuestra tabla será un listado de paises Centroamericanos, utilizaremos un array llamado Banderas para almacenar ese listado. Por tanto, tendrás que añadir la siguiente variable justo antes del método viewDidLoad() y posterior a esto se rellana el array con los nombre de los paises de centroamérica dentro del método viewDidLoad():
var banderas:[String] = []
override func viewDidLoad() {
super.viewDidLoad()
banderas=["Guatemala", "Honduras", "El Salvador",
"Nicaragua", "Costa Rica", "Panama"]
}Ahora que ya tenemos nuestro array con todos los equipos que queremos mostrar en nuestra tabla, es hora de hacer que nuestra tabla muestre estos datos. Para ello utilizaremos los dos métodos del protocolo UITableViewDataSource:
- numberOfRowsInSection()
- cellForRowAt()
Añade la implementación de estos dos métodos a tu clase ViewController.swift:
func tableView(_ tableView:UITableView, numberOfRowsInSection section:Int) -> Int
{
return banderas.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell:UITableViewCell=UITableViewCell(style: UITableViewCellStyle.subtitle, reuseIdentifier: "mycell")
cell.textLabel?.text = banderas[indexPath.row]
cell.imageView?.image = UIImage(named: banderas[indexPath.row])
return cell
}Recuerda que hemos comentado antes, que estos dos métodos no se ejecutan una única vez.
A continuación tienes la explicación del código de cada uno de ellos.
El método numberOfRowsInSection(), como hemos dicho, es el encargado de especificar el número de celdas que mostraremos. En nuestro caso, como queremos mostrar tantas celdas como elementos hayamos almacenado en nuestro array banderas, utilizaremos la propiedad count, que lo que hace es devolver el número de elementos que hay almacenados en un array. De esta forma, si nuestro array characters tiene 6 elementos, nuestro método numberOfRowsInSection devolverá 6. Por tanto nuestra tabla mostrará 6 celdas con contenido.
Por otro lado, el método cellForRowAt() crea un objeto celda, que hemos llamado cell, de tipo UITableViewCell, al que se le asigna el identificador “mycell”. Posteriormente, lo que hace es asignar a su propiedad textLabel.text, el texto que queremos mostrar, que en nuestro caso, será el elemento que esté contenido en el array, en la posición indexPath.row.
Recuerda que la propiedad indexPath.row indica la celda en la que nos encontramos, por lo que la primera vez que se ejecute el método cellForRowAt(), indexPath.row será igual a 0, la segunda será igual a 1, la tercera será igual a 2, de esta forma podremos recorrer nuestro array teams y mostraremos cada vez un elemento distinto del array. No olvides que el método cellForRowAt() se ejecuta tantas veces como celdas vayamos a mostrar en nuestra tabla.
Ahora, prueba a ejecutar tu aplicación.
Descarga el proyecto de ejemplo desde aqui.
Quizas sea de interes:
Virtualizar MAC OS en Windows PC Introducción a Swift IOS Parte #1 Introducción a Swift IOS Parte #2
Te invitamos a suscribirte a nuestro canal de Youtube y a visitar nuestra sección de multimedias
Capacidades y Habilidades necesarias para ser un desarrollador FULL STACK
WebSphere Application Server en Windows Parte #1
Procedimiento que regresa una tabla cruzada usando Db2
Primeros pasos con Slim 4 en PHP
Slim para PHP – Micro Framework programación del 2020
Conociendo RPG IV – AS400
Excel en JAVA: Creación y lectura de archivos con Apache POI 4.4
Swift-IOS para principiantes, UITableView Parte #3
Introducción a Swift IOS Parte #2
4 comentarios