RecyclerView zu Lazy-Liste migrieren

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

In Compose können Sie Lazy-Listen 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 in der UI-Hierarchie oder entfernen Sie sie 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. Legen Sie anhand des Layout-Managers von RecyclerView fest, welche Art von Lazy List-Komposition Sie benötigen (siehe Tabelle unten). Das ausgewählte Composeable ist das Composeable der obersten Ebene der ComposeView, die Sie im vorherigen Schritt hinzugefügt haben.

    LayoutManager

    Komposition

    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 Composeable. Jeder Ansichtstyp wird normalerweise einer ViewHolder-Unterklasse zugeordnet, dies ist jedoch nicht immer der Fall. Diese Composeables 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() Ihrer RecyclerView.Adapter wird durch diese Composeables und den von Ihnen angegebenen Status ersetzt. In Compose gibt es keine Trennung zwischen dem Erstellen eines Composeables für ein Element und dem Binden von Daten in das Element. Diese Konzepte werden zusammengeführt.

  4. Verwenden Sie im content-Steckplatz der Lazy-Liste (dem abschließenden Lambda-Parameter) die Funktion items() (oder eine entsprechende Überladung), um die Daten für die Liste zu durchlaufen. Rufe in der itemContent-Lambda-Funktion 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

Artikeldekorationen

RecyclerView hat das Konzept eines ItemDecoration, mit dem Sie Elementen in der Liste ein spezielles Bild 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 Artikeldekorationen. 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 den Divider-Komposit-Befehl verwenden:

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

Artikelanimationen

Ein ItemAnimator kann auf einem RecyclerView festgelegt werden, um das Aussehen von Elementen zu animieren, wenn Änderungen am Adapter vorgenommen werden. Standardmäßig wird in RecyclerView DefaultItemAnimator verwendet, das grundlegende Animationen für die Ereignisse „Entfernen“, „Hinzufügen“ und „Verschieben“ bietet.

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

Weitere Informationen

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