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, segui questi passaggi:

  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 composable 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 nell'elenco. Ad esempio, puoi aggiungere un ItemDecoration per inserire dei divisori 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 qualsiasi decorazione dell'interfaccia utente nell'elenco direttamente nella composizione. 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: