RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine View-Komponente, mit der sich große Datasets effizient darstellen lassen. Anstatt Ansichten für jedes Element im Datensatz zu erstellen, verbessert RecyclerView die Leistung Ihrer App, indem ein kleiner Pool von Ansichten beibehalten und wiederverwendet wird, wenn Sie durch die Elemente scrollen.

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 Lists in Compose zu verwenden.

Migrationsschritte

So migrieren Sie Ihre RecyclerView-Implementierung zu Compose:

  1. Kommentieren Sie das RecyclerView in Ihrer UI-Hierarchie aus oder entfernen Sie es und fügen Sie ein ComposeView hinzu, um es zu ersetzen, falls noch keines in der Hierarchie vorhanden ist. Dies ist der Container für die Lazy List, 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. Legen Sie anhand des Layout-Managers von RecyclerView fest, welche Art von Lazy-List-Composable Sie benötigen (siehe Tabelle unten). Das ausgewählte Composable ist das Composable der obersten Ebene des ComposeView, das Sie im vorherigen Schritt hinzugefügt haben.

    LayoutManager

    Composable

    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 ein entsprechendes Composable. Jeder Ansichtstyp wird in der Regel einer ViewHolder-Unterklasse zugeordnet. Das ist jedoch nicht immer der Fall. 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() von RecyclerView.Adapter wird durch diese Composables und den von Ihnen bereitgestellten Status ersetzt. In Compose gibt es keine Trennung zwischen dem Erstellen eines Composables für ein Element und dem Binden von Daten daran. Diese Konzepte sind zusammengefasst.

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

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

Häufige Anwendungsfälle

Artikeldekorationen

RecyclerView bietet das Konzept eines ItemDecoration, mit dem Sie eine spezielle Darstellung 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 die Komposition einfügen. Wenn Sie der Liste beispielsweise Trennlinien hinzufügen möchten, können Sie die zusammensetzbare Funktion Divider nach jedem Element 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 das Einblenden von Elementen zu animieren, wenn Änderungen am Adapter vorgenommen werden. Standardmäßig verwendet RecyclerView DefaultItemAnimator, das grundlegende Animationen für Ereignisse zum Entfernen, Hinzufügen und Verschieben bietet.

Lazy Lists haben ein ähnliches Konzept durch den animateItemPlacement-Modifikator. Weitere Informationen finden Sie unter Artikelanimationen.

Zusätzliche Ressourcen

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