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:
Kommentieren Sie die
RecyclerView
aus der UI-Hierarchie aus oder entfernen Sie sie und fügen Sie einenComposeView
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>
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 derComposeView
, 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 eine entsprechende zusammensetzbare Funktion für jeden Ansichtstyp in der
RecyclerView.Adapter
-Implementierung. Jeder Ansichtstyp wird normalerweise einer abgeleiteten KlasseViewHolder
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` } }
Die Logik in den Methoden
onCreateViewHolder()
undonBindViewHolder()
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 darin – diese Konzepte werden zusammengeführt.Verwenden Sie im Slot
content
der Lazy-Liste (der nachgestellte Lambda-Parameter) dieitems()
-Funktion (oder eine entsprechende Überlastung), um die Daten für Ihre Liste zu iterieren. 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. Sie können beispielsweise ItemDecoration
hinzufügen, um Trennlinien zwischen Elementen einzufügen:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
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() } } }
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:
- Listen und Raster: Dokumentation zur Implementierung von Listen und Rastern in Composer.
- Jetpack Compose Interop: Using Compose in a 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
zum Schreiben migrieren- Weitere Überlegungen