RecyclerView zu Lazy-Liste migrieren

RecyclerView ist eine Ansichtskomponente, mit der sich ganz einfach große Datenmengen. 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 „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. 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. Bestimmen Sie anhand der Layoutmanager von RecyclerView (siehe Tabelle unten) Das ausgewählte Composeable ist das Composeable der obersten Ebene 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 für jeden Ansichtstyp in Ihrer RecyclerView.Adapter-Implementierung ein entsprechendes Composeable. Jeder Ansichtstyp wird in der Regel einer ViewHolder abgeleitet. 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 „Schreiben“ gibt es keine Trennung zwischen Sie erstellen eine zusammensetzbare Funktion für ein Element und binden Daten daran. Diese Konzepte sind zusammengeführt werden.

  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 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

In Compose gibt es kein entsprechendes Konzept für Artikeldekorationen. 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) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Elementanimationen

Auf einem RecyclerView kann ein ItemAnimator festgelegt werden, um die Darstellung von 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.

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

Weitere Informationen

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