Fuegos artificiales, habr. Antes de pasar al artículo, quiero compartir con ustedes de manera totalmente gratuita la grabación de dos lecciones muy útiles que nuestros profesores dieron en anticipación al inicio de los cursos básicos y avanzados sobre desarrollo de iOS:
Ahora pasemos al artículo.
Esta semana, quiero hablarles sobre Grids, una de las innovaciones más esperadas en SwiftUI. Todos estaban esperando ansiosamente una alternativa
UICollectionViewen SwiftUI, y finalmente este año apareció. SwiftUI nos proporciona vistas LazyVGrid y LazyHGrid que podemos usar para crear diseños con cuadrículas de elementos.
Los basicos
LazyVGrid y LazyHGrid son dos nuevos tipos de vista que SwiftUI nos proporciona para crear un diseño súper personalizado basado en una cuadrícula de elementos. La única diferencia entre ellos es el eje de relleno. LazyVGrid llena el espacio disponible verticalmente. LazyHGrid, por otro lado , coloca a sus hijos horizontalmente. El eje es la única diferencia entre estas dos vistas. Por lo tanto, todo lo que aprenda sobre LazyVGrid se aplica a LazyHGrid y viceversa. Echemos un vistazo al primer ejemplo.
struct ContentView: View {
private var columns: [GridItem] = [
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16)
]
var body: some View {
ScrollView {
LazyVGrid(
columns: columns,
alignment: .center,
spacing: 16,
pinnedViews: [.sectionHeaders, .sectionFooters]
) {
Section(header: Text("Section 1").font(.title)) {
ForEach(0...10, id: \.self) { index in
Color.random
}
}
Section(header: Text("Section 2").font(.title)) {
ForEach(11...20, id: \.self) { index in
Color.random
}
}
}
}
}
}
En el ejemplo anterior, estamos creando una cuadrícula de tres columnas donde cada columna tiene un tamaño fijo de 100 puntos. Voy a usar este ejemplo para describir todas las opciones de configuración disponibles para nosotros.
- El parámetro
columnses una matriz que define las columnas en el diseño de la cuadrícula. Para describir una columna, SwiftUI nos proporciona el tipo GridItem . Hablaremos de ello un poco más tarde. - El parámetro
alignmentnos permite alinear los contenidos de la red utilizando una enumeraciónHorizontalAlignmentpara LazyVGrid yVerticalAlignmentpara LazyHGrid . Funciona igual questack alignment. - El parámetro
spacingespecifica la distancia entre cada fila dentro de LazyVGrid o el espacio entre cada columna dentro de LazyHGrid . - El parámetro le
pinnedViewspermite especificar opciones para fijar encabezados y pies de página de sección. Está vacío de forma predeterminada, lo que significa que los encabezados y pies de página se comportan como contenido y desaparecen al desplazarse. Puede habilitar la fijación del encabezado y pie de página, en cuyo caso se superpondrán con el contenido y serán visibles de forma permanente.
GridItem
Cada columna de la cuadrícula debe definirse con una estructura
GridItem. El tipo GridItemnos permite especificar el tamaño, la alineación y el espaciado de cada columna. Echemos un vistazo a un pequeño ejemplo.
private var columns: [GridItem] = [
GridItem(.fixed(50), spacing: 16, alignment: .leading),
GridItem(.fixed(75)),
GridItem(.fixed(100))
]
Como puede ver, cada columna puede tener diferentes opciones de tamaño, espaciado y alineación. Lo más interesante aquí es el tamaño. Hay tres formas de determinar el tamaño de una columna dentro de una cuadrícula. Puede ser fijo, flexible o adaptable.
La columna Fija es la más obvia. La cuadrícula coloca la columna de acuerdo con el tamaño que especifique. En el ejemplo anterior, creamos un diseño de tres columnas en el que las columnas se fijan en 50 puntos, 75 puntos y 100 puntos, respectivamente.
opción flexiblele permite definir una columna que se expande o contrae según el espacio disponible. También podemos proporcionar tamaños de columna flexibles mínimos y máximos. De forma predeterminada, utiliza un valor mínimo de 10 puntos y no está limitado al máximo.
private var columns: [GridItem] = [
GridItem(.flexible(minimum: 250)),
GridItem(.flexible())
]
Aquí creamos un diseño que divide el espacio disponible entre dos columnas flexibles. La primera columna ocupa 250 puntos de su tamaño mínimo, mientras que la segunda tiene todo el resto del espacio disponible.
La opción más interesante es la adaptativa . La opción responsive nos permite colocar múltiples elementos en el espacio de una sola columna flexible. Intentemos resolverlo con un ejemplo.
private var columns: [GridItem] = [
GridItem(.adaptive(minimum: 50, maximum: 100)),
GridItem(.adaptive(minimum: 150))
]
Como puede ver, tenemos dos columnas receptivas. La primera columna contiene varios elementos con un tamaño mínimo de 50 puntos y un tamaño máximo de 100 puntos. Las columnas receptivas son útiles cuando el número de elementos dentro de una columna debe basarse en el espacio disponible.
El verdadero poder de las rejillas surge cuando comienza a mezclar tipos de columnas. Puede crear un diseño de dos columnas, donde la primera es fija y la segunda responde. Veamos cómo quedará.
private var columns: [GridItem] = [
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 50))
]
Conclusión
La cuadrícula le permite crear diseños muy complejos e interesantes mezclando diferentes tipos
GridItem. Cabe señalar que todos los cambios en las mallas se pueden animar. Espero que hayas disfrutado de este artículo. No dudes en seguirme en Twitter y hacer tus preguntas relacionadas con este tema. Gracias por su atención, ¡nos vemos!
Puede obtener más información sobre nuestros cursos utilizando los enlaces a continuación: