RecyclerView
est un composant View qui permet d'afficher facilement et efficacement de grands ensembles de données. Au lieu de créer des vues pour chaque élément de l'ensemble de données, RecyclerView
améliore les performances de votre application en conservant un petit pool de vues et en les recyclant à mesure que vous faites défiler ces éléments.
Dans Compose, vous pouvez utiliser des listes différées pour obtenir le même résultat. Cette page explique comment migrer votre implémentation RecyclerView
pour utiliser les listes différées dans Compose.
Procédure de migration
Pour migrer votre implémentation de RecyclerView
vers Compose, procédez comme suit:
Mettez en commentaire ou supprimez le
RecyclerView
de la hiérarchie de l'interface utilisateur et ajoutez unComposeView
pour le remplacer s'il n'en existe pas encore dans la hiérarchie. Il s'agit du conteneur de la liste différée que vous ajouterez:<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- <androidx.recyclerview.widget.RecyclerView--> <!-- android:id="@+id/recycler_view"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent />"--> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
Déterminez le type de composable de liste différée dont vous avez besoin en fonction du gestionnaire de mise en page de votre
RecyclerView
(voir le tableau ci-dessous). Le composable que vous sélectionnez sera le composable de premier niveau duComposeView
que vous avez ajouté à l'étape précédente.LayoutManager
Composable
LinearLayoutManager
LazyColumn
ouLazyRow
GridLayoutManager
LazyVerticalGrid
ouLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
ouLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Créez un composable correspondant à chaque type de vue dans votre implémentation de
RecyclerView.Adapter
. Chaque type de vue est généralement mappé à une sous-classeViewHolder
, bien que ce ne soit pas toujours le cas. Ces composables serviront de représentation de l'interface utilisateur pour différents types d'éléments de votre liste:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
La logique des méthodes
onCreateViewHolder()
etonBindViewHolder()
de votreRecyclerView.Adapter
sera remplacée par ces composables et l'état que vous leur fournissez. Dans Compose, il n'existe aucune séparation entre la création d'un composable pour un élément et la liaison de données dans celui-ci. Ces concepts sont fusionnés.Dans l'emplacement
content
de la liste différée (paramètre lambda de fin), utilisez la fonctionitems()
(ou une surcharge équivalente) pour itérer les données de votre liste. Dans le lambdaitemContent
, appelez l'élément composable approprié pour vos données:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
Cas d'utilisation courants
Décorations des articles
RecyclerView
a le concept de ItemDecoration
, que vous pouvez utiliser pour ajouter un dessin spécial pour les éléments de la liste. Par exemple, vous pouvez ajouter un élément ItemDecoration
pour ajouter des séparateurs entre les éléments:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose n'a pas de concept équivalent de décoration d'élément. À la place, vous pouvez ajouter n'importe quelle décoration d'interface utilisateur dans la liste directement dans la composition. Par exemple, pour ajouter des séparateurs à la liste, vous pouvez utiliser le composable Divider
après chaque élément:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Animation des éléments
Un ItemAnimator
peut être défini sur un RecyclerView
pour animer l'apparence des éléments lorsque des modifications sont apportées à l'adaptateur. Par défaut, RecyclerView
utilise DefaultItemAnimator
, qui fournit des animations de base sur les événements de suppression, d'ajout et de déplacement.
Les listes différées utilisent un concept similaire via le modificateur animateItemPlacement
.
Pour en savoir plus, consultez Animations des éléments.
Ressources supplémentaires
Pour en savoir plus sur la migration d'un RecyclerView
vers Compose, consultez les ressources suivantes:
- Listes et grilles: documentation sur l'implémentation de listes et de grilles dans Compose.
- Interopérabilité Jetpack Compose: Utiliser Compose dans un RecyclerView : article de blog pour utiliser efficacement Compose dans un
RecyclerView
.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Listes et grilles
- Migrer
CoordinatorLayout
vers Compose - Autres points à prendre en compte