Créer des interfaces utilisateur performantes sur Android peut être complexe.
Les solutions traditionnelles peuvent être inefficaces pour gérer de grandes quantités de contenu, entraînant des ralentissements.
Découvrez comment LazyVerticalGrid de Jetpack Compose simplifie la création de grilles adaptatives et performantes, optimisant l’expérience utilisateur.
Créez des interfaces modernes et réactives avec JetPack Compose!
LazyVerticalGrid Jetpack Compose Guide
Introduction à Jetpack Compose UI
Jetpack Compose révolutionne la création d’interfaces utilisateur sur Android en offrant une approche déclarative et réactive. Parmi les nombreux composants qu’il propose, les conteneurs paresseux ( LazyRow , LazyColumn , et LazyVerticalGrid ) jouent un rôle crucial dans la gestion efficace des listes et des grilles de contenu.
Comprendre LazyVerticalGrid Android
Définition et Configuration de LazyVerticalGrid
LazyVerticalGrid est un composant de Jetpack Compose qui permet de créer des grilles verticales de manière performante. Comme LazyRow et LazyColumn , il est optimisé pour gérer de grandes quantités de contenu en construisant uniquement les éléments visibles.
Il existe deux principales configurations pour définir le nombre de colonnes dans une grille :
- Colonnes Fixes :Un nombre fixe de colonnes, indépendamment de la taille de l’écran.
- Colonnes Adaptatives :Le nombre de colonnes s’adapte en fonction de la taille de l’écran, permettant une flexibilité maximale.
Définition d’une LazyVerticalGrid avec colonnes adaptatives :
@Composable
fun AdaptiveLazyVerticalGrid(itemsList: List<String>) {
val gridState = rememberLazyGridState()
LazyVerticalGrid(
columns = GridCells.Adaptive(128.dp),
state = gridState,
contentPadding = PaddingValues(16.dp)
) {
items(itemsList.size) { index ->
Text(
text = itemsList[index],
modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
}
}
}
Voici la sortie du code :
Élément | Description |
|---|---|
LazyVerticalGrid | Composant pour afficher des éléments en grille verticale. |
columns = GridCells.Adaptive(128.dp) | Définition des colonnes adaptatives qui ajustent leur taille en fonction de l’espace disponible. |
contentPadding = PaddingValues(16.dp) | Espacement autour du contenu de la grille. |
Dans cet exemple, GridCells.Adaptive(128.dp) indique que chaque colonne doit avoir une largeur d’au moins 128 dp. Le nombre de colonnes s’adapte automatiquement en fonction de la largeur disponible de l’écran.
Alimentation en Contenu
Les éléments à afficher dans LazyVerticalGrid sont des composables. Dans notre exemple, nous utilisons des Card pour représenter chaque élément de la grille, contenant des textes ou d’autres éléments UI.
Exemple d’alimentation en contenu avec des cartes :
@Composable
fun ArticleGrid(itemsList: List<String>) {
val gridState = rememberLazyGridState()
LazyVerticalGrid(
columns = GridCells.Adaptive(128.dp),
state = gridState,
contentPadding = PaddingValues(16.dp)
) {
items(itemsList.size) { index ->
Card(
backgroundColor = Color.Red,
modifier = Modifier
.padding(8.dp)
.fillMaxSize(),
elevation = 4.dp ) {
Text(
text = itemsList[index],
modifier = Modifier
.padding(16.dp),
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
textAlign = TextAlign.Center,
color =Color.White ) } } }}
Voici la sortie du code :
Chaque élément de la grille est une carte rouge contenant un texte centré. Le padding autour de chaque carte assure un espacement visuel agréable.
Exemple Pratique : Grille d’Articles
Imaginons une application affichant une liste d’articles, chacun représenté par une image, un titre, une date, etc. Nous allons créer une grille d’articles en utilisant LazyVerticalGrid .
Définition du Modèle de Données
Commençons par définir la classe de données représentant un article :
data class Article(
val title: String,
val date: String,
val image: Painter,
val content: String,
val isFavorite: Boolean
)
Création de l’Item Article
Définissons un composable pour représenter chaque article dans la grille :
@Composable
fun ArticleItem(article: Article) {
Card(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
elevation = 4.dp
) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = article.image,
contentDescription = article.title,
modifier = Modifier
.size(100.dp)
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = article.title,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
textAlign = TextAlign.Center
)
Text(
text = article.date,
fontSize = 14.sp,
color = Color.Gray
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = article.content,
fontSize = 16.sp,
textAlign = TextAlign.Justify
)
}
}
}
Voici la sortie du code :
Création de l’Écran de Grille d’Articles
Créons maintenant l’écran affichant la grille des articles :
@Composable
fun ArticleGridScreen(articles: List<Article>) {
val gridState = rememberLazyGridState()
val coroutineScope = rememberCoroutineScope()
Column(modifier = Modifier.fillMaxSize()) {
Button(
onClick = {
coroutineScope.launch {
gridState.animateScrollToItem(0) } },
enabled = gridState.firstVisibleItemIndex > 0,
modifier = Modifier
.padding(16.dp)
.align(Alignment.CenterHorizontally) ) {
Text("Retour en haut") }
LazyVerticalGrid(
columns = GridCells.Adaptive(128.dp),
state = gridState,
contentPadding = PaddingValues(16.dp) ) {
items(articles.size) { index ->
ArticleItem(article = articles[index])
} } }}
Voici la sortie du code :
Élément | Description |
|---|---|
enabled | Détermine si le bouton est activé ou désactivé. |
coroutineScope.launch | Lancement d’une coroutine pour des tâches asynchrones, comme l’animation du défilement. |
LazyVerticalGrid | Composant pour afficher une grille verticale d’éléments. |
columns | Définit le nombre de colonnes dans la grille. GridCells.Adaptive(128.dp) permet de créer des colonnes adaptatives. |
state | État de la grille, utilisé pour contrôler le défilement. |
contentPadding | Espacement autour du contenu de la grille. |
items | Fonction pour générer des éléments de la grille en fonction de la liste d’articles. |
ArticleItem | Composant pour afficher les détails d’un article individuel. |
Dans cet écran, un bouton « Retour en haut » apparaît lorsque l’utilisateur défile vers le bas de la grille. En cliquant sur ce bouton, la grille défile de manière animée jusqu’au premier article.
Prévisualisation de la Grille
Pour visualiser notre grille dans Android Studio, ajoutons une fonction de prévisualisation :
@Preview(showBackground = true)
@Composable
fun PreviewArticleGrid() {
val sampleArticles = List(10) { index ->
Article(
title = "Article $index",
date = "2024-08-${index + 1}",
image = painterResource(id = R.drawable.sample_image),
content = "Contenu de l'article numéro $index.",
isFavorite = false ) }
ArticleGridScreen(articles = sampleArticles)}
Assurez-vous d’avoir une ressource image nommée sample_image dans le dossier drawable de votre projet.
Configuration des Colonnes Fixes vs Adaptatives
LazyVerticalGrid permet de configurer le nombre de colonnes de deux manières principales :
Colonnes Adaptatives : Le nombre de colonnes s’ajuste automatiquement en fonction de la largeur disponible et de la taille minimale spécifiée.
Colonnes Fixes : Un nombre fixe de colonnes, indépendamment de la taille de l’écran.
Exemple avec colonnes fixes :
LazyVerticalGrid(
columns = GridCells.Fixed(3),
state = gridState,
contentPadding = PaddingValues(16.dp)
) {
items(articles.size) { index ->
ArticleItem(article = articles[index])
}
}
Voici la sortie du code :
Dans cet exemple, la grille affichera toujours 3 colonnes, quel que soit le dispositif utilisé. Cela peut être utile lorsque vous souhaitez un affichage cohérent sur différents écrans.
Conclusion sur LazyVerticalGrid UI
Les conteneurs paresseux de Jetpack Compose, tels que LazyRow , LazyColumn , et LazyVerticalGrid , offrent des solutions puissantes et performantes pour gérer de grandes quantités de contenu dans vos applications Android.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment fonctionne LazyVerticalGrid dans Jetpack Compose?
Comment configurer des colonnes adaptatives avec LazyVerticalGrid?
Comment ajouter du contenu dans une LazyVerticalGrid?
Quelle est la différence entre colonnes fixes et adaptatives?
Pourquoi utiliser LazyVerticalGrid pour les grilles d'articles?
Conclusion
Les conteneurs paresseux de Jetpack Compose, tels que LazyVerticalGrid, offrent des solutions puissantes pour gérer efficacement de grandes quantités de contenu. Comment envisagez-vous d’utiliser ces outils pour améliorer votre prochaine application Android?
