Swift-IOS para principiantes, UITableView Parte #3

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

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"}

Introducción a Swift IOS Parte #2

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

Ya hemos aprendido a crear nuestra virtual de MAC OSX y nuestro ambiente de trabajo en los posts anterior de Introducción a Swift IOS Parte #1, si no los has leido te invito a visitar primero estos dos posts.

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.

  • Lo primero que haremos e ir a abrir nuestro IDE xCode y escoger la opción de crear un nuevo proyecto de xcode.
Pantalla de bienvenida, Xcode, Este ide es el mas completo para programar en Swift iOS
  • En la ventana de selección de template para tu nuevo proyecto seleccionamos la opción de Vista simple de App.
Ventana de template para crear nuevo proyecto Xcode. Este ide es el mas completo para programar en Swift iOS
  • Le ponemos un nombre a nuestra aplicación que en nuestro caso se llamara MiPrimeraApp, y hacemos clic sobre el botón y por último sobre el botón crear.
  • Lo primero que se nos muestra es la pantalla de las propiedades de configuración general de nuestro proyecto, donde podemos observar el nombre de nuestro proyecto, nuestro identificador de paquete permite que iOS y macOS reconozcan cualquier actualización de esta aplicación, la versión de nuestro proyecto y el número de compilado.
  • En nuestra estructura de proyecto tenemos en primer plano, nuestros Storyboards y nuestros ViewControllers, que son los componentes con los que trabajaremos para este ejemplo.
  • Usando nuestro panel de librerías de objetos vamos a diseñar esta pantalla básica, con la que haremos funcionar nuestro ejemplo.
Pantalla de ejemplo de aplicación movil basico. emulador básico para Swift-IOS
  • Para conectar nuestro control de interfaz de tipo texto con una variable de control dentro de nuestro editor, necesitaremos seleccionar el control a vincular o conectar y presionando la tecla “Control” y presionando nuestro cursor arrastramos desde nuestro control de interfaz a la posición donde necesitamos poner o inicializar nuestro variable de control en nuestro ViewController, no abrirá un modal donde verificamos que el tipo de conexión se “Outlet”, definimos el nombre y damos clic sobre el botón conectar.
  • Para los controles que son tipo botón el procedimiento es el mismo con la diferencia que el tipo de conexión seria de acción, esto es para indicar que la conexión se hará hacia una función o evento.
Nuestro ViewController deberia quedar de esta manera:
@IBOutlet weak var txtNumero1: UITextField!
@IBOutlet weak var txtNumero2: UITextField!    
@IBOutlet weak var lblResultado: UILabel!
    
@IBAction func btnSumar_Click(_ sender: Any) {
   var vSumar : Int = Int(txtNumero1.text!)! + Int(txtNumero2.text!)!;
   lblResultado.text = String(vSumar);
}
    
@IBAction func btnRestar_Click(_ sender: Any) {
   var vRestar : Int = Int(txtNumero1.text!)! - Int(txtNumero2.text!)!;
   lblResultado.text = String(vRestar);
}
    
@IBAction func btnMultiplicar(_ sender: Any) {
   var vMultiplicar : Int = Int(txtNumero1.text!)! * Int(txtNumero2.text!)!;
   lblResultado.text = String(vMultiplicar);
}
    
@IBAction func btnDividir_OnClick(_ sender: Any) {
   var vDividir : Int = Int(txtNumero1.text!)! / Int(txtNumero2.text!)!;
   lblResultado.text = String(vDividir);
}

Descarga el proyecto de ejemplo dando click aqui.

Te invitamos a ver nuestro video tutoria y a suscribirte a nuestro canal de youtube.

Suscribete a nuestro canal de Youtube

Recuerda ver tambien nuestros post de:

Virtualizar MAC OS sobre Windows PC.

Introducción a Swift IOS Parte #1

Puedes visitar nuestra sección de multimedias y ver mas videos de tu interés.

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"}

Introducción a Swift-IOS Parte#1

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

Swift-IOS es un lenguaje de programación creado por Apple, el cual está 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, se considera que es el lenguaje que viene a sustituir a Objective-C como lenguaje principal para los desarrollos de aplicaciones de Apple.

Swift está totalmente integrado con cualquier lógica y/o librerías hechos en su predecesor Objective-C, haciendo fácil de usar y procurando no perder desarrollo hecho con el lenguaje antes mencionado y que se desea implementar o integrar con Swift-IOS.

Este lenguaje de programación es poderoso e intuitivo y a la vez hace que la escritura de código sea interactivo y divertido, enfocado a que sea seguro y que se produzcan apps que se ejecuten rápido y que sobre todo administre eficientemente los recursos de los dispositivos. Para mayo de 2018 salió la versión 4 de Swift el cual viene con el IDE XCode 9 para el desarrollo en plataforma de Mac OS.

xcode, swift-ios, esta tuani, estatuani

Es el entorno de desarrollo integrado (IDE) usado por Mac OS para el desarrollo de software y contiene todas las herramientas diseñada y creadas por Apple para la creación de aplicaciones que corran en sus sistemas operativos iOS, Mac OS, Watch OS y Tv OS.

Trabaja en conjunto con Interface Builder una herramienta gráfica para la creación de interfaces de usuarios, y puede compilar códigos hechos en lenguajes como C, C++, Swift, Objective C, Objective C++, Java y AppleScript.

 

Crear ambiente de trabajo

A continuación, se explicara de forma corta como crear el ambiente de trabajo en su Macbook o en su Virtual de MAC OS en Windows.

1- Entrar a App Store en la barra inferior de la pantalla o usando “launchpad” de MAC OS

swift-ios, estatuani, programación en swift

2- En App Store, se filtra desde el buscador que esta en la parte superior derecha de la pantalla la palabra “xcode”

swift-ios, estatuani, programación en swift

3- En la pantalla de instalación se da click sobre la opción de Get – Installs, e inicia la instalación de XCode.

swift-ios, estatuani, programación en swift, swift ios

4- Esperar que finalice y ya tenemos nuestro ambiente de desarrollo creado.

swift-ios, estatuani, programación en swift, swift ios

 

Muchas gracias y espero sea de ayuda.

Ir a Introducción a Swift-IOS Parte #2

Introducción a Swift-IOS, TableView Parte #3

Te invitamos a que te suscribas a nuestro canal de youtube y que nos visites a nuestra sección de multimedias.

Dragon Ball Super Manga 59: Spoiler y Rumores
Comic Cine y Ocio Mangas

Dragon Ball Super Manga 59: Spoiler y Rumores

Dragon Ball Super Manga 59 Después de una larga ausencia EstaTuani esta de regreso, esto a causa de la espectativa...
Read More
One Piece Manga 976: “¡¡¡Permitanme presentarme!!!”
Cine y Ocio Mangas

One Piece Manga 976: “¡¡¡Permitanme presentarme!!!”

Sin mas que decir, vamos al review de One Piece Manga 976 llamado ¡El Nuevo Timonel de los Mugiwaras!, el...
Read More
One Piece Manga 976: Spoilers, “¡¡¡Defenderemos nuestro destino!!!”
Cine y Ocio Mangas

One Piece Manga 976: Spoilers, “¡¡¡Defenderemos nuestro destino!!!”

Ya estan los spoilers de One Piece Manga 976, Y es que en la portada de la WSJ tenemos a Luffy, Gol D. Roger y Oden junto al mensaje "la voluntad heredada a través del espacio y el tiempo".
Read More
One Piece Manga 973: Resumen y reacción
Cine y Ocio Mangas

One Piece Manga 973: Resumen y reacción

El día de hoy les traigo el resumen del One Piece Manga 973, el cual esta lleno de muchas revelaciones,...
Read More
{"posts_per_page":"4","cat":"","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"}