La gestion de grandes listes dans les applications Android peut consommer beaucoup de mémoire.
Cela peut entraîner des performances médiocres et une expérience utilisateur frustrante.
LazyRow et LazyColumn de Jetpack Compose offrent une solution en affichant uniquement les éléments visibles.
Créez des interfaces modernes et réactives avec JetPack Compose!
LazyRow et LazyColumn : Introduction
LazyRow et LazyColumn : Concepts clés
Jetpack Compose propose des outils puissants pour la création d’interfaces utilisateur modernes et réactives. Parmi ces outils, LazyRow et LazyColumn se distinguent par leur capacité à gérer de grandes listes d’éléments sans pour autant consommer inutilement des ressources. Dans ce document, nous allons explorer en détail ces composants, leurs différences par rapport à Row et Column, et comment les utiliser efficacement dans vos projets Android.
Créer des Items avec LazyRow/Column
Row et Column vs LazyRow et LazyColumn
Caractéristique | LazyColumn | LazyRow |
|---|---|---|
Disposition des Éléments | Colonne (verticale) | Ligne (horizontale) |
Construction des Éléments | Paresseuse (lazy) | Paresseuse (lazy) |
Performance | Efficace pour longues listes | Efficace pour longues lignes |
Défilement | Vertical | Horizontal |
Économie de Mémoire | Oui, construit uniquement les éléments visibles | Oui, construit uniquement les éléments visibles |
Utilisation Commune | Listes, grilles verticales | Carrousels, lignes d’images |
Fonctionnalités Avancées | Supporte des indices d’éléments personnalisés, diviseurs, groupes | Supporte des indices d’éléments personnalisés, diviseurs, groupes |
Modifier les Éléments | Facile avec item et items | Facile avec item et items |
Prise en Charge des Entêtes/Footeurs | Supporte avec itemsIndexed et des éléments conditionnels | Supporte avec itemsIndexed et des éléments conditionnels |
Les composants Row et Column sont utilisés pour organiser les éléments enfants en lignes et colonnes respectivement. Cependant, ces composants affichent tous leurs enfants en même temps, ce qui peut poser problème lorsque la liste est longue, car cela consomme beaucoup de mémoire et de ressources.
LazyRow et LazyColumn , en revanche, sont conçus pour résoudre ce problème en n’affichant que les éléments visibles à l’écran. Le préfixe « Lazy » signifie que ces composants sont « paresseux » dans la construction des éléments : ils ne construisent et n’affichent que les éléments qui sont nécessaires pour remplir l’espace visible, tout en rendant possible le défilement pour accéder aux éléments non visibles.
LazyColumn(
state = rememberLazyListState()
) {
items(itemsList) { item ->
ListItem(item)
}
}
Défilement et Interaction avec LazyList
Items et ItemsIndexed
Dans LazyColumn et LazyRow , les items peuvent être définis de deux manières principales :
- items :Permet de créer un item pour chaque élément d’une liste.
- itemsIndexed :Similaire à items, mais fournit également l’index de chaque item.
LazyColumn {
itemsIndexed(itemsList) { index, item ->
ListItem(item, index)
}
}
Cette approche est utile lorsque vous avez besoin de l’index d’un item, par exemple, pour alterner le style en fonction de la position ou pour des animations spécifiques.
Remember Lazy List State
Pour gérer l’état de défilement et interagir avec les éléments visibles, rememberLazyListState est utilisé. Cette fonction mémorise l’état de la liste et permet d’accéder à des informations comme le premier élément visible ou de contrôler le défilement.
val listState = rememberLazyListState()
Affichage d'Articles avec LazyColumn
Récupération d’informations sur le Scroll
L’état de défilement peut être utilisé pour savoir quel élément est actuellement visible. Par exemple, vous pouvez détecter si le premier élément est visible et afficher un bouton pour permettre à l’utilisateur de revenir en haut de la liste.
val firstVisibleItemIndex = listState.firstVisibleItemIndex
if (firstVisibleItemIndex > 0) {
Button(onClick = {
coroutineScope.launch {
listState.animateScrollToItem(0) }
}) {
Text("Scroll to top") }}
Voici la sortie du code :
Animer le Scroll
L’animation du défilement est possible en utilisant des coroutines. Voici comment créer un bouton qui fait défiler la liste vers le haut lorsqu’il est cliqué :
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
coroutineScope.launch {
listState.animateScrollToItem(0)
}
}) {
Text("Scroll to top")
}
Élément | Description |
|---|---|
CoroutineScope | Scope pour lancer des coroutines lié au cycle de vie du composant. |
Button | Composant déclencheur d’action au clic. |
onClick | Action exécutée lors du clic du bouton. |
coroutineScope.launch | Lancement d’une coroutine pour des tâches asynchrones. |
listState.animateScrollToItem | Méthode pour animer le défilement vers un élément spécifique. |
Text | Texte affiché dans le bouton. |
Conclusion sur LazyRow/Column Android
Pour illustrer l’utilisation de LazyColumn , prenons l’exemple d’une application affichant une liste d’articles. Chaque article peut être représenté par une image, un titre, une date, etc. Supposons que nous voulons afficher ces articles dans une LazyColumn pour gérer une grande quantité de données efficacement.
Définition de l’Item
Commençons par définir ce à quoi ressemble un article :
data class Article(
val title: String,
val date: String,
val image: Painter,
val content: String
)
Création de la Liste d’Articles
Nous pouvons maintenant créer une fonction ArticleList qui utilise LazyColumn pour afficher tous les articles :
@Composable
fun ArticleList(articles: List<Article>) {
val listState = rememberLazyListState()
LazyColumn(state = listState) {
items(articles) { article ->
ArticleItem(article) } }}
Gestion du Scroll avec un Bouton
Ajoutons un bouton pour revenir au premier article lorsque l’utilisateur scrolle vers le bas :
@Composable
fun ArticleListScreen(articles: List<Article>) {
val listState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()
Column {
Button(onClick = {
coroutineScope.launch {
listState.animateScrollToItem(0)
}
}) {
Text("Scroll to top")
}
ArticleList(articles)
}}
Voici la sortie du code :
Conclusion
LazyRow et LazyColumn sont des composants essentiels pour créer des interfaces utilisateur réactives et performantes dans Jetpack Compose, surtout lorsque vous travaillez avec de grandes quantités de données. En utilisant ces outils avec des fonctions comme rememberLazyListState, vous pouvez facilement gérer le défilement et améliorer l’expérience utilisateur de 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
Qu'est-ce que LazyRow et LazyColumn dans Jetpack Compose ?
Comment LazyRow et LazyColumn améliorent-ils la performance des applications ?
Comment utiliser items et itemsIndexed dans LazyRow et LazyColumn ?
Pourquoi utiliser rememberLazyListState dans LazyColumn ?
Comment animer le défilement dans Jetpack Compose avec LazyColumn ?
Conclusion
LazyRow et LazyColumn sont des outils puissants dans Jetpack Compose pour créer des interfaces performantes. Quelle autre fonctionnalité de Jetpack Compose aimeriez-vous explorer pour améliorer vos applications Android ?
