RecyclerView
ist eine Ansichtskomponente, mit der sich ganz einfach
große Datasets. 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:
Kommentieren oder entfernen Sie
RecyclerView
aus Ihrer UI-Hierarchie und fügen Sie einComposeView
, 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>
Bestimmen Sie anhand der Layoutmanager von
RecyclerView
(siehe Tabelle unten) Die von Ihnen ausgewählte zusammensetzbare Funktion ist die zusammensetzbare Funktion auf oberster Ebene vonComposeView
, die Sie im vorherigen Schritt.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 eine entsprechende zusammensetzbare Funktion für jeden Ansichtstyp in der
RecyclerView.Adapter
-Implementierung. Jeder Ansichtstyp wird in der Regel einerViewHolder
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` } }
Die Logik in deinem
RecyclerView.Adapter
onCreateViewHolder()
undonBindViewHolder()
-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.Innerhalb des
content
-Slots der Lazy-Liste (dem nachgestellten Lambda-Parameter) Verwenden Sie die Funktionitems()
(oder eine entsprechende Überlast), um den Daten für Ihre Liste. Rufe in der Lambda-FunktionitemContent
die entsprechende zusammensetzbaren Element für Ihre Daten: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 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)
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() } } }
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:
- Listen und Raster: Dokumentation zur Implementierung von Listen und Rastern in Schreiben.
- Jetpack Compose Interop: Compose in einer RecyclerView verwenden:
Blogpost zur effizienten Verwendung der Funktion „Schreiben“ in
RecyclerView
.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Listen und Raster
CoordinatorLayout
zu Compose migrieren- Weitere Hinweise