LazyVGrid & LazyHGrid en SwiftUI

Uno de los componentes que más echamos de menos el año pasado con la salida de SwiftUI fue la falta de un equivalente a UICollectionView.

Este año Apple ha presentado el componente que lo implemente y no podemos estar más contentos. Estamos hablando no de uno sino de dos controles, LazyVGrid y LazyHGrid.

El prefijo Lazy nos dice Apple que responde al hecho de que el contenido de cada celda del grid se presenta cuando se necesita, no se carga todo el grid de golpe.

¿Y en qué se diferencian?

A pesar de que ambos presentan el contenido en celdas, la forma en la que se añaden y crecen es lo que les diferencia.

LazyVGrid crece en vertical, de arriba a abajo, es decir, que se van añadiendo filas cuando se han llenado las celdas de la fila superior. Es el comportamiento de UICollectionView

LazyVGrid en ejecución

LazyHGrid crece en horizontal, de izquierda a derecha. Las vistas que vamos añadiendo se ponen una debajo de la otra, y cuando se llena la columna, LazyHGrid añade otra a la derecha. Es como si estuviéramos escribiendo en japonés, de arriba a abajo y de izquierda a derecha

LazyHGrid en ejecución

GridItem. Definiendo las celdas

Si os fijáis en el código ambos tienen en común que he definido un array de tipo GridItem. Esta nueva estructura sirve para definir el comportamiento y tamaño de las celdas.

Cuando creamos un GridItem podemos pasarle tres argumentos:

  1. size: ¿Cómo va a crecer la celda? ¿Qué tamaño tendrá?
  2. spacing: El espacio que hay entre esta y la siguiente celda
  3. alignment: La alineación que empleamos en esta celda.

Debemos definir un GridItem por cada celda que tendrá nuestra fila, en el caso de LazyVGrid, o columna, si usamos LazyHGrid.

En nuestro ejemplo con LazyVGrid he definido un array de 3 GridItem, que son las celda que hay en una fila. Para el ejemplo de LazyHGrid el array tiene 5 GridItem, que son las celda que hay en cada columna.

Vamos a meternos un momento en el parámetro size, que varía el comportamiento de las celda dependiendo del espacio que haya para cada fila o columna.

Los valores que puede tener este parámetros son los siguientes:

  • adaptive: Puede haber uno o varios ítems en el espacio definido
  • fixed. El tamaño de la celda es fijo.
  • flexible. Sólo un elemento en el espacio asignado

Tanto adaptive com flexible puede recibir dos parámetros que definen el tamaño mínimo y máximo que puede tener la celda.

Vamos a ver en el siguiente vídeo lo que ocurre cuando rotamos el dispositivo, teniendo cada fila más espacio. En el caso de la primera vista (celdas naranjas y moradas) el GridItem tiene tamaño adaptive por lo que cuando hay más espacio disponible se ponen mas elementos

En el caso de la segunda vista (celda azules y rojas) el tamaño es flexible por lo que el número de celdas se mantiene, pero se da más espacio a cada una de ellas.

¿Se pueden mezclar diferentes tamaños en una misma fila o columna? Sin ningún problema, además vas a conseguir mostrar tu contenido de una forma muy atractiva para el usuario.

En el siguiente vídeo verás lo que ocurre cuando definidos un array de 3 GridItem, siendo el primero y tercero de un tamaño adaptive y el centrar flexible

Código fuente

En este repositorio de GitHub encontraréis en proyecto que acompaña a este artículo. Recordad que es necesario ejecutar con Xcode 12 beta 1 como mínimo.