RecyclerView
è un componente View che consente di mostrare
facilmente grandi set di dati in modo efficiente. Anziché creare visualizzazioni per ogni elemento del set di dati,
RecyclerView
migliora le prestazioni della tua app mantenendo un piccolo gruppo di visualizzazioni
e riciclandole mentre scorri i contenuti.
In Compose, puoi utilizzare gli elenchi lenti per fare lo stesso. Questa pagina
descrive come eseguire la migrazione dell'implementazione RecyclerView
per utilizzare gli elenchi Lazy
in Compose.
Passaggi della migrazione
Per eseguire la migrazione dell'implementazione di RecyclerView
a Compose, segui questi passaggi:
Commenta o rimuovi
RecyclerView
dalla gerarchia dell'interfaccia utente e aggiungi unComposeView
per sostituirlo se non ne esiste ancora nessuno nella gerarchia. Questo è il container per l'elenco Lazy che aggiungerai:<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>
Determina il tipo di elenco componibile Lazy di cui hai bisogno in base al gestore di layout di
RecyclerView
(vedi la tabella di seguito). L'elemento componibile selezionato sarà il componibile di primo livello dell'elementoComposeView
che hai aggiunto nel passaggio precedente.LayoutManager
Componibile
LinearLayoutManager
LazyColumn
oLazyRow
GridLayoutManager
LazyVerticalGrid
oLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
oLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Crea un elemento componibile corrispondente a ogni tipo di visualizzazione nell'implementazione di
RecyclerView.Adapter
. In genere, ogni tipo di vista è mappato a una sottoclasseViewHolder
, anche se potrebbe non essere sempre così. Questi elementi componibili verranno utilizzati come rappresentazione UI per diversi tipi di elementi nell'elenco:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
La logica nei metodi
onCreateViewHolder()
eonBindViewHolder()
diRecyclerView.Adapter
verrà sostituita da questi elementi componibili e dallo stato fornito. In Compose, non esiste una separazione tra la creazione di un componibile per un elemento e l'associazione di dati al suo interno: questi concetti sono uniti.All'interno dello slot
content
dell'elenco Lazy (il parametro lambda finale), utilizza la funzioneitems()
(o un sovraccarico equivalente) per scorrere i dati del tuo elenco. Nella funzione lambdaitemContent
, richiama l'elemento componibile appropriato per i tuoi dati:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
Casi d'uso comuni
Decorazioni elemento
RecyclerView
include il concetto di ItemDecoration
, che puoi utilizzare per aggiungere un
disegno speciale per gli elementi nell'elenco. Ad esempio, puoi aggiungere un ItemDecoration
per aggiungere divisori tra gli elementi:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose non ha un concetto equivalente per le decorazioni dell'elemento. Puoi, invece, aggiungere
eventuali decorazioni UI all'elenco direttamente nella composizione. Ad esempio, per aggiungere divisori all'elenco, puoi utilizzare il componibile Divider
dopo ogni elemento:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Animazioni elemento
È possibile impostare un ItemAnimator
su un RecyclerView
per animare l'aspetto degli elementi quando vengono apportate modifiche all'adattatore. Per impostazione predefinita, RecyclerView
utilizza
DefaultItemAnimator
, che fornisce animazioni di base per gli eventi di rimozione, aggiunta e spostamento.
Gli elenchi lenti hanno un concetto simile attraverso il modificatore animateItemPlacement
.
Per scoprire di più, consulta Animazioni degli elementi.
Risorse aggiuntive
Per maggiori informazioni sulla migrazione di un RecyclerView
a Compose, consulta le
risorse seguenti:
- Elenchi e griglie: documentazione su come implementare elenchi e griglie in Compose.
- Jetpack Compose Interop: uso di Compose in un RecyclerView:
post del blog per usare Compose in modo efficiente all'interno di
RecyclerView
.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Elenchi e griglie
- Eseguire la migrazione di
CoordinatorLayout
a Compose - Altre considerazioni