Migrer RecyclerView vers une liste différée

RecyclerView est un composant de vue qui permet d'afficher facilement et efficacement de grands ensembles de données. Au lieu de créer des vues pour chaque élément du jeu de données, RecyclerView améliore les performances de votre application en conservant un petit pool de et les recycler à mesure que vous les parcourez.

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 des listes différées dans Compose.

Procédure de migration

Pour migrer votre implémentation de RecyclerView vers Compose, procédez comme suit:

  1. Mettez en commentaire ou supprimez le RecyclerView de la hiérarchie de votre interface utilisateur, puis ajoutez un ComposeView pour le remplacer s'il n'en existe encore aucun dans la hiérarchie. Ce est le 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>

  2. Déterminez le type de composable de liste différée dont vous avez besoin en fonction de votre Gestionnaire de mise en page de RecyclerView (voir le tableau ci-dessous) Composable que vous sélectionnez sera le composable de premier niveau du ComposeView que vous avez ajouté dans à l'étape précédente.

    LayoutManager

    Composable

    LinearLayoutManager

    LazyColumn ou LazyRow

    GridLayoutManager

    LazyVerticalGrid ou LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid ou LazyHorizontalStaggeredGrid

    		 

    // recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}
    MigrationCommonScenariosSnippets.kt

  3. Créez un composable correspondant à chaque type de vue dans votre Implémentation de RecyclerView.Adapter. Chaque type de vue correspond généralement ViewHolder, même si ce n'est pas toujours le cas. Ces composables serviront de représentation d'UI pour différents types de votre liste:

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    La logique dans les onCreateViewHolder() de votre RecyclerView.Adapter et Les méthodes onBindViewHolder() seront remplacées par ces composables et les que vous lui fournissez. Dans Compose, il n'y a pas de séparation entre créer un composable pour un élément et y associer des données : ces concepts sont sont fusionnés.

  4. Dans l'emplacement content de la liste différée (paramètre lambda de fin), utilisez la fonction items() (ou une surcharge équivalente) pour itérer l'élément pour votre liste. Dans le lambda itemContent, appelez la méthode élément composable pour vos données:

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

Cas d'utilisation courants

Décorations

RecyclerView utilise le concept de ItemDecoration, que vous pouvez utiliser pour ajouter un un dessin spécial pour les éléments de la liste. Par exemple, vous pouvez ajouter ItemDecoration pour ajouter des séparateurs entre les éléments:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose n'a pas de concept équivalent pour les décorations d'éléments. Au lieu de cela, vous peut ajouter toutes les décorations d'interface utilisateur de 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()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Animation des éléments

Un ItemAnimator peut être défini sur une RecyclerView pour animer l'apparence de à mesure que des modifications sont apportées à l'adaptateur. Par défaut, RecyclerView utilise DefaultItemAnimator, qui fournit des animations de base pour supprimer, ajouter et les événements de déplacement.

Les listes différées ont un concept similaire avec le modificateur animateItemPlacement. Pour en savoir plus, consultez Animations d'éléments.

Ressources supplémentaires

Pour en savoir plus sur la migration d'un RecyclerView vers Compose, consultez la ressources suivantes: