Esegui la migrazione di RecyclerView all'elenco Lazy

RecyclerView è un componente View che semplifica la visualizzazione efficiente di grandi set di dati. Anziché creare visualizzazioni per ogni elemento del set di dati, RecyclerView migliora il rendimento dell'app mantenendo un piccolo pool di visualizzazioni e riciclandole mentre scorri gli elementi.

In Compose, puoi utilizzare le liste pigre per ottenere lo stesso risultato. Questa pagina descrive come eseguire la migrazione dell'implementazione di RecyclerView per utilizzare le liste pigre in Compose.

Passaggi per la migrazione

Per eseguire la migrazione dell'implementazione di RecyclerView a Compose:

1. Commenta o rimuovi RecyclerView dalla gerarchia dell'interfaccia utente e aggiungi un ComposeView per sostituirlo se non è ancora presente nella gerarchia. Questo è il contenitore per l'elenco pigro 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>
   

2. Determina il tipo di componente componibile Lazy list di cui hai bisogno in base al gestore del layout di RecyclerView (vedi tabella di seguito). Il composable che selezioni sarà il composable di primo livello del ComposeView che hai aggiunto nel passaggio precedente.

   LayoutManager	Componibile
   LinearLayoutManager	LazyColumn o LazyRow
   GridLayoutManager	LazyVerticalGrid o LazyHorizontalGrid
   StaggeredGridLayoutManager	LazyVerticalStaggeredGrid o 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. Crea un componente componibile corrispondente per ogni tipo di visualizzazione nell'implementazione di RecyclerView.Adapter. Ogni tipo di visualizzazione in genere corrisponde a una sottoclasse ViewHolder, anche se non sempre è così. Questi composables verranno utilizzati come rappresentazione dell'interfaccia utente per i 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`
       }
   }
   MigrationCommonScenariosSnippets.kt

   La logica nei metodi onCreateViewHolder() e onBindViewHolder() di RecyclerView.Adapter verrà sostituita da questi composable e dallo stato che fornisci. In Compose, non esiste una separazione tra la creazione di un elemento componibile per un elemento e l'associazione dei dati: questi concetti sono uniti.

4. All'interno dello slot content dell'elenco pigro (il parametro lambda finale), utilizza la funzione items() (o un overload equivalente) per scorrere i dati dell'elenco. Nella lambda itemContent, richiama l'elemento componibile appropriato per i tuoi dati:

   val data = listOf<MyData>(/* ... */)
   composeView.setContent {
       LazyColumn(Modifier.fillMaxSize()) {
           items(data) {
               ListItem(it)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

Casi d'uso comuni

Decorazioni degli articoli

RecyclerView ha il concetto di ItemDecoration, che puoi utilizzare per aggiungere un disegno speciale per gli elementi dell'elenco. Ad esempio, puoi aggiungere un ItemDecoration per inserire dei separatori tra gli elementi:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose non ha un concetto equivalente di decorazioni degli elementi. Puoi invece aggiungere direttamente nella composizione qualsiasi decorazione dell'interfaccia utente nell'elenco. Ad esempio, per aggiungere divisori all'elenco, puoi utilizzare il composable Divider dopo ogni elemento:

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Animazioni degli elementi

Un ItemAnimator può essere impostato su un RecyclerView per animare l'aspetto degli elementi man mano che vengono apportate modifiche all'adattatore. Per impostazione predefinita, RecyclerView utilizza DefaultItemAnimator, che fornisce animazioni di base per gli eventi di rimozione, aggiunta e spostamento.

Le liste pigre hanno un concetto simile tramite il modificatore animateItemPlacement. Per saperne di più, consulta Animazioni degli elementi.

Risorse aggiuntive

Per saperne di più sulla migrazione di un RecyclerView a Compose, consulta le seguenti risorse:

• Elenchi e griglie: documentazione su come implementare elenchi e griglie in Compose.
• Jetpack Compose Interop: Using Compose in a RecyclerView: Post del blog per utilizzare in modo efficiente Compose all'interno di un RecyclerView.