RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine Ansichtskomponente, mit der sich ganz einfach große Datenmengen. Anstatt für jedes Element im Dataset Datenansichten zu erstellen, RecyclerView verbessert die Leistung deiner App, indem ein kleiner Pool an Ressourcen beim Scrollen durch die Artikel.

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

Migrationsschritte

So migrieren Sie Ihre RecyclerView-Implementierung zu Compose:

  1. Kommentieren oder entfernen Sie RecyclerView aus Ihrer UI-Hierarchie und fügen Sie ein ComposeView, um ihn zu ersetzen, wenn in der Hierarchie noch keiner vorhanden ist. Dieses 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. Bestimmen Sie anhand der Layoutmanager von RecyclerView (siehe Tabelle unten) Die von Ihnen ausgewählte zusammensetzbare Funktion ist die zusammensetzbare Funktion auf oberster Ebene von ComposeView, die Sie im vorherigen Schritt.

    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 in der Regel einer ViewHolder abgeleitet. Dies ist jedoch nicht immer der Fall. Diese zusammensetzbaren Funktionen werden als UI-Darstellung für verschiedene Arten von Elemente in Ihrer Liste:

    @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 onCreateViewHolder() undRecyclerView.Adapter onBindViewHolder()-Methoden werden durch diese zusammensetzbaren Funktionen ersetzt und die angeben, die Sie ihnen zur Verfügung stellen. In „Schreiben“ gibt es keine Trennung eine zusammensetzbare Funktion für ein Element erstellen und Daten daran binden. Diese Konzepte sind zusammengeführt werden.

  4. Innerhalb des content-Slots der Lazy-Liste (dem nachgestellten Lambda-Parameter) Verwenden Sie die items()-Funktion (oder eine entsprechende Überlastung), um den Daten für Ihre Liste. Rufe in der Lambda-Funktion itemContent die entsprechende zusammensetzbaren Element für Ihre Daten:

    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 einen spezielle Zeichnung für Elemente in der Liste. Sie können beispielsweise eine ItemDecoration, 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 müssen Sie können der Liste beliebige UI-Dekorationen direkt in der Komposition hinzufügen. Beispiel: Um der Liste Trennlinien hinzuzufügen, können Sie nach jedem Teil die zusammensetzbare Funktion Divider verwenden Artikel:

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

Elementanimationen

Auf einem RecyclerView kann ein ItemAnimator festgelegt werden, um die Darstellung von wenn Änderungen am Adapter vorgenommen werden. Standardmäßig verwendet RecyclerView DefaultItemAnimator mit einfachen Animationen zum Entfernen, Hinzufügen und verschieben.

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

Weitere Informationen

Weitere Informationen zur Migration eines RecyclerView zu Compose finden Sie in der folgenden Ressourcen: