RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine Ansichtskomponente, mit der große Datensätze einfach effizient dargestellt werden können. 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). 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 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 einer zusammensetzbaren Funktion für ein Element und dem Binden von Daten an das Element. Diese Konzepte werden zusammengeführt.

  4. Verwenden Sie im content-Steckplatz der Lazy-Liste (der abschließende Lambdaparameter) 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 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 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 Erscheinungsbild 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 über den Modifikator animateItemPlacement. Weitere Informationen finden Sie unter Artikelanimationen.

Weitere Informationen

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