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 der App, da ein kleiner Pool von Ansichten beibehalten wird und diese beim Scrollen durch die Elemente recycelt werden.

In der neuen App können Sie auch Lazy Listen verwenden, um dasselbe 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 die RecyclerView aus der UI-Hierarchie aus oder entfernen Sie sie und fügen Sie einen ComposeView ein, um ihn zu ersetzen, wenn noch keiner 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. Ermitteln Sie anhand des Layout-Managers von RecyclerView, welche Art von zusammensetzbarer Liste Sie benötigen (siehe Tabelle unten). Die ausgewählte zusammensetzbare Funktion ist die übergeordnete zusammensetzbare Funktion der 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 eine entsprechende zusammensetzbare Funktion für jeden Ansichtstyp in der RecyclerView.Adapter-Implementierung. Jeder Ansichtstyp wird normalerweise einer abgeleiteten Klasse ViewHolder zugeordnet, dies ist jedoch nicht immer der Fall. Diese zusammensetzbaren Funktionen werden für die UI-Darstellung für verschiedene Elementtypen in der 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 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 darin – diese Konzepte werden zusammengeführt.

  4. Verwenden Sie im Slot content der Lazy-Liste (der nachgestellte Lambda-Parameter) die items()-Funktion (oder eine entsprechende Überlastung), um die Daten für Ihre Liste zu iterieren. 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. Sie können beispielsweise ItemDecoration hinzufügen, um Trennlinien zwischen Elementen einzufügen:

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

In der Funktion „Compose“ gibt es kein vergleichbares Konzept für das Dekorieren von Elementen. Stattdessen kannst du beliebige UI-Dekorationen direkt in der Komposition der Liste 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

Artikelanimationen

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 zu Ereignissen vom Typ „Entfernen“, „Hinzufügen“ und „Verschieben“ liefert.

Bei verzögerten Listen wird ein ähnliches Konzept in Bezug auf den animateItemPlacement-Modifikator verwendet. Weitere Informationen finden Sie unter Elementanimationen.

Weitere Informationen

Weitere Informationen zum Migrieren von RecyclerView zu Compose finden Sie in den folgenden Ressourcen: