Cómo crear UITableView en Swift en solo 15 minutos

UITableView es uno de los componentes de vista más útiles y comúnmente utilizados en el desarrollo de iOS. Ayuda a mostrar datos en una lista desplazable, como una fuente de noticias, una lista de recordatorios o cualquier tabla de elementos.

UITableView contiene UITableViewCells. Para comprender la relación entre los dos, piense en una matriz y elementos. Puede asignar fácilmente elementos de una matriz a la celda en una vista de tabla. Además, puede crear secciones para mapear varios arreglos o un arreglo 2D.

A continuación se muestra un ejemplo del uso de UITableView. La aplicación Configuración nativa utiliza una vista de tabla con secciones. La primera sección tiene 3 celdas, mientras que la segunda sección tiene 1 celda.

Por lo general, las celdas utilizadas en una vista de tabla tienen el mismo diseño y tamaño, lo que reduce la sobrecarga de volver a dibujar las celdas. Sin embargo, Apple le permite crear cualquier variedad de celdas para una vista de tabla.

UITableView Paso 1: Abra Xcode y configure una aplicación de demostración

Abra la aplicación Xcode en su Mac para crear un nuevo proyecto. Seleccione el nuevo proyecto de aplicación de la ventana emergente y proporcione un buen título para el Nombre del producto. Para nuestro proyecto de ejemplo, lo llamamos ColorList. Su interfaz debe ser Storyboard y el idioma configurado en Swift.

Pregunta: ¿Por qué Storyboard? Para 'Interfaz' estamos usando Storyboard, pero si tiene curiosidad, la otra opción es SwiftUI. SwiftUI es el último avance en el diseño de interfaces de usuario, pero muchos desarrolladores creen que aún no está completamente listo para la producción como iOS 14.

Por último, puede seguir el camino anterior y crear también la interfaz de usuario completa en código. Pero me gusta mantener las cosas de la vista separadas en lugar de un controlador gordo.

Paso 2: agregue la vista de tabla al controlador de vista en el guión gráfico

Cada nueva aplicación viene con un controlador de vista y un guión gráfico. En palabras simples, cada pantalla de la aplicación es un UIViewController en código.

1. Abra el archivo Main.Storyboard haciendo clic en él en el panel izquierdo.
2. Seleccione el xib que se muestra para el controlador de vista en el Guión gráfico. Es el esqueleto de un iPhone que aparece en tu Storyboard.
3. Presiona el botón +
   

4. Seleccione UITableView
   

5. Arrastre y suelte la vista de tabla sobre Xib.
6. Establezca cero para las restricciones superior, inferior, izquierda y derecha. Presione el botón 'Agregar 4 Restricciones'.
   

Eso es todo, su interfaz de usuario de vista de tabla desplazable está lista para funcionar. Puede agregar las restricciones para que se estire al 100% en ancho y alto.

Paso 3: Conectar Table View 'Outlets'

El siguiente paso es crear los puntos de venta en la clase de controlador de vista. De esa manera, podemos tener acceso a la vista de tabla en nuestro controlador para agregar aún más la lógica empresarial y de la interfaz de usuario. Hay varias formas de hacerlo. Aquí está el más rápido:

1. Presione la tecla 'opción' en su Mac mientras su Storyboard está abierto. Mantenga presionado eso para el paso 2.
2. Seleccione el archivo del controlador de vista en el panel izquierdo. Esto abrirá el guión gráfico y verá los archivos del controlador uno al lado del otro.
3. Pulse la tecla 'control'. Ahora, mientras mantiene presionada la tecla 'control', arrastre y suelte la vista de tabla desde Storyboard al controlador de vista.
   

4. Asigne a la nueva var un nombre como tableView.
   

5. Ahora se crea una variable tableView en el controlador de vista.
   

Paso 4: Configure Table View DataSource y Delegate

La vista de tabla tiene dos objetos débiles dentro de la clase UITableView para completar los datos y administrar la delegación. Débil significa que los objetos no se retienen con fuerza.

El objeto dataSource es responsable de proporcionar celdas y sus datos para una vista de tabla. Es de 'UITableViewDataSource?' escribe.

El objeto delegado es de 'UITableViewDelegate?' escribe. Maneja la selección, eliminación, encabezado/pie de página y otras acciones relacionadas.

Para comenzar,

1. Asignemos self a ambas propiedades.
   

 override func viewDidLoad () { super .viewDidLoad() // Do any additional setup after loading the view. tableView.delegate = self tableView.dataSource = self }

2. Tenemos que ajustar nuestro controlador de vista a la fuente de datos y al protocolo de delegado. Esto se debe a que los objetos delegado y fuente de datos permiten asignar una clase que debe ajustarse a sus protocolos. Vamos a hacer eso.
   

 class ViewController : UIViewController , UITableViewDelegate , UITableViewDataSource

3. Xcode le pedirá que agregue los stubs de método requeridos. Estos son los métodos que tenemos para proporcionar cuerpos, ya que son requeridos por dataSource y objetos delegados.
   
   Aquí están los dos métodos auxiliares agregados por Xcode. Hay muchos otros métodos que puede utilizar, consulte la documentación aquí.
   

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // TODO: Return items count return 0 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // TODO: Return cell return UITableViewCell() }

4. El primer numberOfRowsInSection- devuelve un Int. Es responsable de dibujar el número de celdas devueltas por este método.
   
   El otro método cellForRowAt- devuelve un objeto de tipo UITableViewCell. Aquí es donde podemos crear una celda y pasarle datos para configurar su interfaz de usuario.
   
5. Crearemos una matriz de colores ficticia. Llamémoslo 'arcoíris'.
6. Devuelve 'rainbow.count' para el método numberOfRowsInSection-.
   

 let rainbow: [UIColor] = [.red, .yellow, .green, .orange, .blue, .purple, .magenta] func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return rainbow.count }




7. Ahora creamos una nueva interfaz de usuario de celda para regresar desde cellForRowAt-. Para hacerlo, iremos a Storyboard donde ya tenemos nuestra vista UIViewController. Al igual que el n. ° 2, presionaremos el botón +, seleccionaremos Table View Cell, arrástrelo y suéltelo sobre Table View.
   





8. Seleccione la UITableViewCell que acaba de agregar. Luego, desde el panel derecho, seleccione la pestaña Inspector de atributos. Agregue una cadena en el campo Identificador.
   
9. En el método cellForRowAt-, saque la celda de la cola con el método tableView.dequeueReusableCell(withIdentifier: String, for: IndexPath).
   
   Aquí pasaremos el identificador para obtener la interfaz de usuario de la celda. En la siguiente línea, estamos configurando el color de fondo de la celda para el objeto de color en la matriz del arco iris.
   

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "colorCell" , for : indexPath) cell.backgroundColor = rainbow[indexPath.item] return cell }

10. Ejecute el proyecto. Verá su variedad de colores en la vista de tabla.

¿Qué más puede hacer con UITableView y UITableViewCell?

UITableView es su vista de interfaz de usuario en la mayoría de los casos en los que se desea un comportamiento de desplazamiento. UITableView hereda de UIScrollView, al igual que UICollectionView, una vista similar a UITableView donde puede tener celdas en ambos sentidos, es decir, horizontal y vertical.

La celda que estamos usando es la celda de vista de tabla predeterminada proporcionada por iOS. Puede crear una clase personalizada y, como en los pasos anteriores, conectar la interfaz de usuario y la clase. Cargaremos una guía práctica la próxima semana para crear una UITableViewCell de diseño personalizado.

La celda predeterminada puede proporcionar una vista de título, fondo y accesorios. Agregaremos un título usando defaultConfiguration- así:

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "colorCell" , for : indexPath) cell.backgroundColor = rainbow[indexPath.item] //Default Content Configuration var content = cell.defaultContentConfiguration() content.text = rainbow[indexPath.item].accessibilityName.capitalized cell.contentConfiguration = content return cell }

Así es como se verá:

Puede crear diferentes celdas de diseño en la misma vista de tabla. Al asignar diferentes identificadores, puede quitar la cola de su celda requerida. El método dequeueReusableCell mejora el rendimiento al crear solo celdas visibles en la pantalla y algunas más. Al almacenar en caché las celdas de manera eficiente, puede proporcionar una experiencia de usuario fluida.

Así es como debería verse todo el código. Puede descargar el código fuente de muestra desde aquí.

Háganos saber lo que creó con UITableView en nuestra comunidad Hackernoon .