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 le prestazioni della tua app mantenendo un piccolo pool di visualizzazioni e riciclandole mentre scorri gli elementi.

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

Passi per la migrazione

Per eseguire la migrazione dell'implementazione di RecyclerView a Compose, segui questi passaggi:

  1. Commenta o rimuovi RecyclerView dalla gerarchia della UI e aggiungi un ComposeView per sostituirlo se non è ancora presente 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 composable di elenco lazy di cui hai bisogno in base al gestore del layout di RecyclerView (vedi la tabella di seguito). Il composable selezionato sarà il composable di primo livello di 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
    }
}

  3. Crea un composable corrispondente per ogni tipo di visualizzazione nell'implementazione di RecyclerView.Adapter. In genere, ogni tipo di visualizzazione viene mappato a una sottoclasse ViewHolder, anche se non è sempre così. Questi componibili verranno utilizzati come rappresentazione della 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() e onBindViewHolder() di RecyclerView.Adapter verrà sostituita da questi componibili e dallo stato che fornisci. In Compose, non esiste una separazione tra la creazione di un componibile per un elemento e l'associazione dei 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 overload equivalente) per eseguire l'iterazione dei dati dell'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)
        }
    }
}

Casi d'uso comuni

Decorazioni degli elementi

RecyclerView ha 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 di decorazioni degli elementi. Puoi invece aggiungere qualsiasi decorazione dell'interfaccia utente nell'elenco direttamente nella composizione. Ad esempio, per aggiungere divisori all'elenco, puoi utilizzare l'elemento componibile Divider dopo ogni elemento:

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

Animazioni degli elementi

È possibile impostare un ItemAnimator 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.

Gli elenchi lazy 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: