Swift-IOS para principiantes, UITableView Parte #3

Swift-IOS para principiantes, UITableView Parte #3

Swift, Lenguaje de programación, iOS-Swift, esta tuani

Sharing is caring!

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.

Ejemplo de tableview, uitableview,esta tuani

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”.

Pantalla de bienvenida, Xcode

Elige la plantilla “Single View Application” y haz clic en Next para continuar.

Template new project, esta tuani, xcode, swift ios

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:

entorno de trabajo xcode, swift ios, tableview, uitableview

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

uitableview, xcode, swift ios, ios, esta tuani

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, UITableViewDelegate

En 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.

TableView, xcode, swift ios, esta tuani

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
Programacion Informática Tecnología

Capacidades y Habilidades necesarias para ser un desarrollador FULL STACK

Que habilidades o conocimientos se requieren para ser un desarrollador Full Stack, acá te informo lo tuani cuales son.
Read More
WebSphere Application Server en Windows Parte #1
Informática Desarrollo Programacion

WebSphere Application Server en Windows Parte #1

¿Que es WebSphere Application Server(WAS)? WebSphere Application Server conocido popularmente como WAS es un servidor de aplicaciones de la familia...
Read More
Procedimiento que regresa una tabla cruzada usando Db2
Informática Programacion

Procedimiento que regresa una tabla cruzada usando Db2

Concepto básico de tabla cruzada usando Db2 El concepto básico de una tabla cruzada es que los valores de fila...
Read More
Primeros pasos con Slim 4 en PHP
PHP Programacion

Primeros pasos con Slim 4 en PHP

Primeros pasos para utilizar Slim 4 en Php, Instalando Apache XAMPP, Composer y creando prin=mera App con Slim.
Read More
Slim para PHP – Micro Framework programación del 2020
PHP Programacion

Slim para PHP – Micro Framework programación del 2020

Hola que tal, como están? espero que muy bien. El día de hoy le vengo a hablar un poco de...
Read More
Conociendo  RPG IV  – AS400
Programacion

Conociendo RPG IV – AS400

Conociendo lenguaje de programación - RPG IV
Read More
Excel en JAVA: Creación y lectura de archivos con Apache POI 4.4
Programacion Java

Excel en JAVA: Creación y lectura de archivos con Apache POI 4.4

Hola que tal, como están?, bienvenido a este pequeño y sencillo articulo acerca de como crear un archivo Excel en...
Read More
Swift-IOS para principiantes, UITableView Parte #3
Programacion Centroamérica Swift

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...
Read More
Introducción a Swift IOS Parte #2
Informática Swift

Introducción a Swift IOS Parte #2

En este Post aprenderemos a crear nuestra primera app básica usando Swift IOS, la cual estará conformado por dos campos de textos donde se digitarán números que a través de botones se ejecutarán acciones básicas de una calculadora como sumar, restar, multiplicar y dividir.
Read More
Introducción a Swift-IOS Parte#1
Informática Programacion Swift

Introducción a Swift-IOS Parte#1

Swift es un lenguaje de programación creado por Apple, el cual esta enfocado para desarrollar aplicaciones que corran en iOS, Mac OS (OSX), TvOS y WatchOS presentado oficialmente en el año 2014 y diseñado para que se pudiera integrar con Cocoa y Cocoa Touch
Read More
{"posts_per_page":"10","cat":["151"],"design":"design-1","pagination":"false","gridcol":"2","showDate":"true","showCategory":"true","showContent":"true","words_limit":"20","showreadmore":"true","order":"DESC","orderby":"post_date","showAuthor":"true","media_size":"large","show_tags":"true","show_comments":"true"}
Luis Fonseca

Amplia experiencia en Desarrollo de Software usando lenguajes de programación: Java, C#, Swift - iOS, Angular 8, Node JS con Express.js, en base de datos MS Sql Server, Db2 For i y Postgresql.Apasionado por la Tecnología, Animes y Mangas principalmente de Dragón ball y Saint Seiya.

    4 comentarios

    Introducción A Swift-IOS Parte#1 – Esta Tuani Publicado el8:59 pm - noviembre 12, 2019

    […] Introducción a Swift IOS, TableView Parte #3 […]

    Bladimir Hernandez Publicado el5:54 am - noviembre 23, 2019

    Excelente tutorial estimado, lo pondré en practica muy pronto.!

      luis fonseca Publicado el4:07 pm - noviembre 23, 2019

      Gracias amigo, un placer haberte ayudado, esto nos anima a seguir adelante.

    Excel en JAVA: Creación y lectura de archivos con Apache POI 4.4 – Esta Tuani Publicado el8:18 pm - noviembre 30, 2019

    […] Swift-IOS para principiantes, UITableView Parte #3 […]

    Deja un comentario

    shares
    A %d blogueros les gusta esto: