Esegui la migrazione di RecyclerView all'elenco Lazy

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:

  1. Commenta o rimuovi RecyclerView dalla gerarchia dell'interfaccia utente e aggiungi un ComposeView 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>

  2. 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'elemento 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 elemento componibile corrispondente a ogni tipo di visualizzazione nell'implementazione di RecyclerView.Adapter. In genere, ogni tipo di vista è mappato a una sottoclasse ViewHolder, 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`
    }
}
    MigrationCommonScenariosSnippets.kt

    La logica nei metodi onCreateViewHolder() e onBindViewHolder() di RecyclerView.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.

  4. All'interno dello slot content dell'elenco Lazy (il parametro lambda finale), utilizza la funzione items() (o un sovraccarico equivalente) per scorrere i dati del tuo elenco. Nella funzione 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 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)
MigrationCommonScenariosSnippets.kt

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()
        }
    }
}
MigrationCommonScenariosSnippets.kt

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: