Como crear una lista en SwiftUI (UITableView en UIKit)

Con la llegada del nuevo framework SwiftUI, la creación de interfaces en IOS, y realmente también en el resto de plataformas de Apple, ha llegado a otro nivel, cambiando por completo el paradigma utilizado y haciéndolo mucho más fácil y rápido.

Hoy vamos a ver como crear una lista con SwiftUI, lo que en UIKit conocemos como UITableView, y que es un componente casi esencial en cualquier aplicación para IOS.

Para el ejemplo hemos creado un proyecto por defecto en Xcode y solo hemos marcado la opción de utilizar SwiftUI dentro del wizard inicial de creación de proyectos que Xcode nos facilita.

Creando una lista en SwiftUI

Nuestra lista va estar compuesta por ítems que van a mostrar el estado del clima en diferentes ciudades. Por tanto lo primero que vamos a hacer es crear nuestro modelo que represente este ítem.

Lo vamos a llamar Weather y va a constar de las siguientes propiedades:

struct Weather: Identifiable {
    var id = UUID()
    var image: String
    var temperature: Int
    var city: String
}

Como vemos en el código, lo hemos creado utilizando una estructura e implementando un protocolo, Identifiable. Este protocolo nos obliga a que nuestro objeto posea una propiedad, id, y que esta sea única.

Esto le servirá a la lista que va contener a estos ítems para identificar de forma única a cada objeto que forma parte de la lista.

Ahora creamos nuestro modelo de datos, que van a ser todas las filas que contendrá nuestra lista.

let dataSource = [
        Weather(image: "sun.max", temperature: 28, city: "Marbella"),
        Weather(image: "sun.max", temperature: 25, city: "Coin"),
        Weather(image: "sun.min", temperature: 21, city: "Barcelona"),
        Weather(image: "cloud.fog", temperature: 14, city: "Londres"),
        Weather(image: "cloud.heavyrain", temperature: 12, city: "Berlín"),
        Weather(image: "cloud.snow", temperature: -3, city: "Oslo")
    ]

Y por último, lo único que nos queda es crear nuestra lista y que esta pinte estos datos.

Si hemos trabajado con UIKit con anterioridad pues casi seguro. que lo primero que se nos vendrá la cabeza son los protocolos necesarios para crear una lista en un UIViewController y que nos hacían implementar una serie de métodos, 2, 3, 4, … en función de la funcionalidad que quisiésemos añadir en la tabla.

Con SwiftUI, esto ha pasado a mejor vida y lo único que tenemos que hacer para crear la lista es:

var body: some View {
     
            List(dataSource){ weather in
                HStack{
                    Image(systemName: weather.image)
                        .frame(width: 50, height: 50, alignment: .center)
                    Text(weather.city).frame(width: 200)
                    Text("\(weather.temperature)º")
                        .frame(width: 50, height: 50, alignment: .trailing)
                }
            }
        
   
    }

Con List tenemos todo lo que nos hace falta. Le pasamos el modelo de datos por el constructor y en la clousure nos devuelve el ítem que corresponde en cada posición. Nosotros lo que hacemos en este caso es extraer la propiedad de cada objeto Weather y mostrarlo de una determinada forma. 

HStack nos sirve para alinear de forma horizontal todos los elementos que estén dentro de su clousure.

Como extra, si deseamos añadir una barra de navegación en la parte superior, únicamente tendremos que añadirla mediante el objeto NavigationView e incluir dentro de su scope la lista que hemos creado con anterioridad.

var body: some View {
        NavigationView{
            List(dataSource){ weather in
                HStack{
                    Image(systemName: weather.image)
                        .frame(width: 50, height: 50, alignment: .center)
                    Text(weather.city).frame(width: 200)
                    Text("\(weather.temperature)º")
                        .frame(width: 50, height: 50, alignment: .trailing)
                }
            }.navigationBarTitle("The Weather")
        }
   
    }

El objeto NavigationView posee una propiedad, navigationBarTitle mediante la cual podemos sestear un título a nuestra barra de navegación.

En fin, lo cierto es que esto comparado con como se hacía en UIKit es algo maravilloso.

Todo el código lo tenéis en Github

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.