¿Qué es el diseño de cuadrícula?

Cuando desarrollamos una interfaz de aplicación, la mayoría de las veces nos ocupamos de una representación bidimensional de elementos visuales. Hay muchos controles diseñados para estandarizar y simplificar el diseño. En términos de conceptos de desarrollo web, el Grupo de Trabajo de CSS propuso Grid Layout en 2017 como la mejor manera de crear plantillas de UI 2D.



En iOS 13 SDK, tenemos la capacidad de organizar elementos linealmente VStack, HStack, ZStack, en forma de lista: List. Pero no hay forma de definir la semántica de la disposición de los elementos en un sistema de coordenadas bidimensional. Así que decidimos crearlo nosotros mismos.

En iOS 14, Apple presentó su implementación de cuadrícula, que discutiremos a continuación en la sección Apple LazyVGrid / LazyHGrid.

Ejemplos de interfaces con diseño de cuadrícula

grid . , . Grid, UICollectionView, .





, Grid Layout

Timetable

, , . grid , . Spans grid item .

, .

Flipboard

, , . , — . Grid Layout , grid flow .rows .columns.

grid:



grid , , . , .

, , tracks. . , , .

Grid, . .

, , , . .

, : .

, . , , . grid (dense) .

Grid , , . scroll fill.

.

, , .

ExyteGrid — Grid, SwiftUI. , ExyteGrid:

- Strava

, grid. Grid. , , spans .

iOS

iOS? , grid, grid item. ExyteGrid layout, . SwiftUI grid.

Apple LazyVGrid/LazyHGrid

Apple LazyVGrid LazyVGrid iOS 14, ExyteGrid :

• Apple span . / .
• grid: / .
• ExyteGrid (grid packing): sparse, dense, , , .
• Apple Grid fade , ForEach. ExyteGrid , ID grid. ID GridGroup ForEach, SwiftUI (transition) .
• . Flexible Apple Grid , , .fr ExyteGrid .
• .adaptive Apple Grid .fit . Adaptive . , . Fit ExyteGrid , , .
• ExyteGrid gridCellOverlay gridCellBackground, custom view , . .
• Apple Grid , , ExyteGrid .
• ExyteGrid tiene un modo de contenido: .fill donde la cuadrícula organiza los elementos para llenar la vista del contenedor sin tener que calcular manualmente el tamaño de cada elemento.
  
  Los conceptos de estas dos implementaciones son algo similares, pero en muchos aspectos son diferentes. En el lado de Apple Grid hay una implementación nativa, se enfoca en una gran cantidad de elementos, y en el lado de ExyteGrid, más funcionalidad y código fuente abierto, en el desarrollo del cual cualquiera puede participar.

Me alegro de verlos como usuarios y como contribuyentes del repositorio de la biblioteca ExyteGrid .

Por supuesto, hay una lista de características que aún no se han realizado en la sección de la hoja de ruta .