Feux d'artifice, habr. Avant de passer à l'article, je souhaite partager avec vous tout à fait gratuitement un enregistrement de deux leçons très utiles que nos professeurs ont dispensées à la veille du début des cours de base et avancés sur le développement iOS:
Passons maintenant à l'article.
Cette semaine, je veux vous parler de Grids, l'une des nouvelles fonctionnalités les plus attendues de SwiftUI. Tout le monde attendait avec impatience une alternative
UICollectionViewdans SwiftUI, et finalement cette année, elle est apparue. SwiftUI nous fournit des vues LazyVGrid et LazyHGrid que nous pouvons utiliser pour créer des mises en page avec des grilles d'éléments.
Les bases
LazyVGrid et LazyHGrid sont deux nouveaux types de vue que SwiftUI nous fournit pour créer une mise en page super personnalisée basée sur une grille d'éléments. La seule différence entre eux est l'axe de remplissage. Le LazyVGrid remplit l'espace disponible verticalement. LazyHGrid place ses enfants horizontalement. L'axe est la seule différence entre ces deux vues. Par conséquent, tout ce que vous apprenez sur LazyVGrid s'applique à LazyHGrid et vice versa. Jetons un œil au premier exemple.
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
}
}
}
}
}
}
Dans l'exemple ci-dessus, nous créons une grille à trois colonnes où chaque colonne a une taille fixe de 100 pt. Je vais utiliser cet exemple pour décrire toutes les options de configuration disponibles.
- Le paramètre
columnsest un tableau qui définit les colonnes dans la disposition de la grille. Pour décrire une colonne, SwiftUI nous fournit le type GridItem . Nous en reparlerons un peu plus tard. - Le paramètre
alignmentnous permet d'aligner le contenu de la grille en utilisant une énumérationHorizontalAlignmentpour LazyVGrid etVerticalAlignmentpour LazyHGrid . Fonctionne de la même manière questack alignment. - Le paramètre
spacingspécifie la distance entre chaque ligne à l'intérieur du LazyVGrid ou l'espace entre chaque colonne à l'intérieur du LazyHGrid . - Le paramètre
pinnedViewsvous permet de spécifier les options d'épinglage des en-têtes et pieds de page de section. Il est vide par défaut, ce qui signifie que les en-têtes et pieds de page se comportent comme du contenu et disparaissent lors du défilement. Vous pouvez activer l'épinglage de l'en-tête et du pied de page, auquel cas ils chevaucheront le contenu et deviendront visibles en permanence.
GridItem
Chaque colonne de la grille doit être définie avec une structure
GridItem. Le type GridItemnous permet de spécifier la taille, l'alignement et l'espacement de chaque colonne. Jetons un coup d'œil à un petit exemple.
private var columns: [GridItem] = [
GridItem(.fixed(50), spacing: 16, alignment: .leading),
GridItem(.fixed(75)),
GridItem(.fixed(100))
]
Comme vous pouvez le voir, chaque colonne peut avoir différentes options de taille, d'espacement et d'alignement. La chose la plus intéressante ici est la taille. Il existe trois façons de déterminer la taille d'une colonne dans une grille. Il peut être fixe, flexible ou adaptatif.
La colonne Fixe est la plus évidente. La grille place la colonne en fonction de la taille que vous spécifiez. Dans l'exemple précédent, nous avons créé une mise en page à trois colonnes dans laquelle les colonnes sont fixées à 50 pt, 75 pt et 100 pt, respectivement.
option flexiblevous permet de définir une colonne qui se développe ou se contracte en fonction de l'espace disponible. Nous pouvons également fournir des tailles de colonnes flexibles minimales et maximales. Par défaut, il utilise une valeur minimale de 10 pt et n'est pas plafonné au maximum.
private var columns: [GridItem] = [
GridItem(.flexible(minimum: 250)),
GridItem(.flexible())
]
Ici, nous créons une mise en page qui divise l'espace disponible entre deux colonnes flexibles. La première colonne occupe 250pt de sa taille minimale, tandis que la seconde a tout le reste de l'espace disponible.
L'option la plus intéressante est adaptative . L'option responsive nous permet de placer plusieurs éléments dans l'espace d'une seule colonne flexible. Essayons de le comprendre avec un exemple.
private var columns: [GridItem] = [
GridItem(.adaptive(minimum: 50, maximum: 100)),
GridItem(.adaptive(minimum: 150))
]
Comme vous pouvez le voir, nous avons deux colonnes responsives. La première colonne contient plusieurs éléments d'une taille minimale de 50 pt et maximum de 100 pt. Les colonnes réactives sont utiles lorsque le nombre d'éléments dans une colonne doit être basé sur l'espace disponible.
La vraie puissance des grilles est lorsque vous commencez à mélanger les types de colonnes. Vous pouvez créer une mise en page à deux colonnes, où la première est fixe et la seconde est réactive. Voyons à quoi cela ressemblera.
private var columns: [GridItem] = [
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 50))
]
Conclusion
La grille vous permet de créer des mises en page très complexes et intéressantes en mélangeant différents types
GridItem. Il est à noter que toutes les modifications apportées aux maillages peuvent être animées. J'espère que vous avez apprécié cet article. N'hésitez pas à me suivre sur Twitter et à poser vos questions sur ce sujet. Merci pour votre attention, à bientôt!
Vous pouvez en savoir plus sur nos cours en utilisant les liens ci-dessous: