RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine Ansichtskomponente, mit der sich große Datenmengen effizient darstellen lassen. Anstatt Ansichten für jedes Element im Dataset zu erstellen, verbessert RecyclerView die Leistung Ihrer App, indem ein kleiner Pool von Ansichten beibehalten und beim Scrollen durch diese Elemente wiederverwendet wird.

In Compose können Sie Lazy Lists verwenden, um dasselbe zu erreichen. Auf dieser Seite wird beschrieben, wie Sie Ihre RecyclerView-Implementierung migrieren, um Lazy-Listen in Compose zu verwenden.

Migrationsschritte

So migrieren Sie Ihre RecyclerView-Implementierung zu Compose:

1. Kommentieren Sie die RecyclerView aus oder entfernen Sie sie aus Ihrer UI-Hierarchie und fügen Sie eine ComposeView hinzu, um sie zu ersetzen, falls noch keine in der Hierarchie vorhanden ist. Dies ist der Container für die Lazy-Liste, die Sie hinzufügen:

         <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. Bestimmen Sie anhand des Layout-Managers von RecyclerView, welche Art von Lazy-List-Composable Sie benötigen (siehe Tabelle unten). Das ausgewählte Compose-Element ist das Compose-Element auf oberster Ebene des ComposeView, das Sie im vorherigen Schritt hinzugefügt haben.

   LayoutManager	Zusammensetzbar
   LinearLayoutManager	LazyColumn oder LazyRow
   GridLayoutManager	LazyVerticalGrid oder LazyHorizontalGrid
   StaggeredGridLayoutManager	LazyVerticalStaggeredGrid oder 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. Erstellen Sie für jeden Ansichtstyp in Ihrer RecyclerView.Adapter-Implementierung eine entsprechende zusammensetzbare Funktion. Jeder Ansichtstyp wird in der Regel einer ViewHolder-Unterklasse zugeordnet, was jedoch nicht immer der Fall ist. Diese Composables werden als UI-Darstellung für verschiedene Arten von Elementen in Ihrer Liste verwendet:

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

   Die Logik in den Methoden onCreateViewHolder() und onBindViewHolder() Ihres RecyclerView.Adapter wird durch diese Composables und den von Ihnen bereitgestellten Status ersetzt. In Compose gibt es keine Trennung zwischen dem Erstellen einer zusammensetzbaren Funktion für ein Element und dem Binden von Daten in dieses Element. Diese Konzepte sind miteinander verschmolzen.

4. Verwenden Sie im Slot content der Lazy-Liste (dem nachgestellten Lambda-Parameter) die Funktion items() (oder eine entsprechende Überladung), um die Daten für Ihre Liste zu iterieren. Rufe im Lambda-Ausdruck itemContent das entsprechende zusammensetzbare Element für deine Daten auf:

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

Gängige Anwendungsfälle

Elementverzierungen

RecyclerView bietet das Konzept eines ItemDecoration, mit dem Sie eine spezielle Zeichnung für Elemente in der Liste hinzufügen können. Sie können beispielsweise ein ItemDecoration hinzufügen, um Trennlinien zwischen Elementen einzufügen:

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

In Compose gibt es kein entsprechendes Konzept für Elementdekorationen. Stattdessen können Sie alle UI-Dekorationen in der Liste direkt in der Komposition hinzufügen. Wenn Sie der Liste beispielsweise Trennlinien hinzufügen möchten, können Sie nach jedem Element die komponierbare Funktion Divider verwenden:

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Elementanimationen

Ein ItemAnimator kann für ein RecyclerView festgelegt werden, um die Darstellung von Elementen zu animieren, wenn Änderungen am Adapter vorgenommen werden. Standardmäßig verwendet RecyclerView DefaultItemAnimator, das einfache Animationen für Ereignisse zum Entfernen, Hinzufügen und Verschieben bietet.

Lazy-Listen haben ein ähnliches Konzept mit dem animateItemPlacement-Modifikator. Weitere Informationen finden Sie unter Elementanimationen.

Zusätzliche Ressourcen

Weitere Informationen zur Migration von RecyclerView zu Compose finden Sie in den folgenden Ressourcen:

• Listen und Raster: Dokumentation zur Implementierung von Listen und Rastern in Compose.
• Jetpack Compose Interop: Using Compose in a RecyclerView: Blogpost zur effizienten Verwendung von Compose in einer RecyclerView.