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 Ihrer App, da ein kleiner Pool von Ansichten beibehalten und diese beim Scrollen durch die Elemente recycelt werden.
In „Schreiben“ können Sie auch Lazy Listen verwenden, um dasselbe Ziel 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:
Kommentieren Sie das
RecyclerView
-Element aus Ihrer UI-Hierarchie aus oder entfernen Sie es aus Ihrer UI-Hierarchie und fügen Sie einComposeView
-Zeichen hinzu, um es zu ersetzen, wenn in der Hierarchie noch keines 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>
Bestimme anhand des Layoutmanagers von
RecyclerView
, welche Art von Lazy List-Zusammensetzbarkeit du benötigst (siehe Tabelle unten). Die von Ihnen ausgewählte zusammensetzbare Funktion ist die zusammensetzbare Funktion auf oberster Ebene vonComposeView
, die Sie im vorherigen Schritt hinzugefügt haben.LayoutManager
Zusammensetzbar
LinearLayoutManager
LazyColumn
oderLazyRow
GridLayoutManager
LazyVerticalGrid
oderLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
oderLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Erstellen Sie für jeden Ansichtstyp in der
RecyclerView.Adapter
-Implementierung eine entsprechende zusammensetzbare Funktion. Jeder Ansichtstyp wird normalerweise einer abgeleitetenViewHolder
-Klasse zugeordnet. Dies ist jedoch nicht immer der Fall. Diese zusammensetzbaren Funktionen werden als UI-Darstellung für verschiedene Elementtypen 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` } }
Die Logik in den
onCreateViewHolder()
- undonBindViewHolder()
-Methoden IhrerRecyclerView.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 an das Element. Diese Konzepte werden zusammengeführt.Verwenden Sie im Slot
content
der Lazy-Liste (dem nachgestellten Lambda-Parameter) die Funktionitems()
(oder eine entsprechende Überlastung), um die Daten für Ihre Liste zu durchlaufen. Rufen Sie in der Lambda-FunktionitemContent
das entsprechende zusammensetzbare Element für Ihre Daten auf:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
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. So können Sie beispielsweise ein ItemDecoration
einfügen, um Trennlinien zwischen Elementen hinzuzufügen:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Bei der Funktion „Verfassen“ gibt es kein äquivalentes Konzept der Dekoration von Elementen. 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 die zusammensetzbare Funktion Divider
verwenden:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Elementanimationen
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 für Entfernen-, Hinzufügen- und Verschieben-Ereignisse bereitstellt.
Das Konzept von Lazy-Listen ähnelt dem animateItemPlacement
-Modifikator.
Weitere Informationen finden Sie unter Elementanimationen.
Zusätzliche Ressourcen
Weitere Informationen zur Migration einer RecyclerView
zu Compose finden Sie in den folgenden Ressourcen:
- Lists and Grids (Listen und Raster): Dokumentation zur Implementierung von Listen und Rastern in „Compose“.
- Jetpack Compose Interop: Verwenden von Compose in einem RecyclerView: Blogpost zur effizienten Verwendung von Compose in einem
RecyclerView
.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Listen und Raster
CoordinatorLayout
zu Compose migrieren- Weitere Hinweise