RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine Ansichtskomponente, mit der große Datensätze einfach effizient dargestellt werden können. Anstatt für jedes Element im Dataset Ansichten zu erstellen, verbessert RecyclerView die Leistung Ihrer App, da ein kleiner Pool von Ansichten beibehalten und diese beim Scrollen durch die Elemente recycelt werden.

In „Schreiben“ können Sie auch Lazy Listen verwenden, um dasselbe Ziel zu erreichen. Auf dieser Seite wird beschrieben, wie Sie Ihre RecyclerView-Implementierung zur Verwendung von Lazy-Listen in Compose migrieren können.

Migrationsschritte

So migrieren Sie Ihre RecyclerView-Implementierung zu Compose:

  1. Kommentieren Sie das RecyclerView-Element aus Ihrer UI-Hierarchie aus oder entfernen Sie es aus Ihrer UI-Hierarchie und fügen Sie ein ComposeView-Zeichen hinzu, um es zu ersetzen, wenn in der Hierarchie noch keines 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. Bestimme anhand des Layoutmanagers von RecyclerView, welche Art von Lazy List-Zusammensetzbarkeit du benötigst (siehe Tabelle unten). Die von Ihnen ausgewählte zusammensetzbare Funktion ist die zusammensetzbare Funktion auf oberster Ebene von ComposeView, die 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 der RecyclerView.Adapter-Implementierung eine entsprechende zusammensetzbare Funktion. Jeder Ansichtstyp wird normalerweise einer abgeleiteten ViewHolder-Klasse zugeordnet. Dies ist jedoch nicht immer der Fall. Diese zusammensetzbaren Funktionen werden als UI-Darstellung für verschiedene Elementtypen 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 onCreateViewHolder()- und onBindViewHolder()-Methoden Ihrer RecyclerView.Adapter wird durch diese zusammensetzbaren Funktionen und den von Ihnen angegebenen Status ersetzt. In Compose gibt es keine Trennung zwischen dem Erstellen einer zusammensetzbaren Funktion für ein Element und dem Binden von Daten an das Element. Diese Konzepte werden zusammengeführt.

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

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

Gängige Anwendungsfälle

Artikeldekorationen

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

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

Bei der Funktion „Verfassen“ gibt es kein äquivalentes Konzept der Dekoration von Elementen. Stattdessen können Sie der Liste beliebige UI-Dekorationen direkt in der Komposition hinzufügen. Wenn Sie der Liste beispielsweise Trennlinien hinzufügen möchten, können Sie nach jedem Element die zusammensetzbare Funktion Divider verwenden:

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

Elementanimationen

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

Das Konzept von Lazy-Listen ähnelt dem animateItemPlacement-Modifikator. Weitere Informationen finden Sie unter Elementanimationen.

Zusätzliche Ressourcen

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