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 insieme di visualizzazioni e riutilizzandole mentre scorri gli elementi.

In Scrittura, puoi utilizzare le elenchi lazy per ottenere lo stesso risultato. In questa pagina viene descritto come eseguire la migrazione dell'implementazione di RecyclerView per utilizzare le liste lazy 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 dell'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 componente componibile dell'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
    }
}
    MigrationCommonScenariosSnippets.kt

  3. Crea un composable corrispondente per ogni tipo di visualizzazione nell'implementazione diRecyclerView.Adapter. In genere ogni tipo di visualizzazione viene mappato a una sottoclasseViewHolder, anche se non sempre è così. Questi composabili verranno utilizzati come rappresentazione dell'interfaccia utente 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 dei metodi onCreateViewHolder() e onBindViewHolder() di RecyclerView.Adapter verrà sostituita da questi composabili e dall'estado fornito. In Compose, non esiste alcuna separazione tra la creazione di un composable per un elemento e il relativo collegamento dei dati: 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 eseguire l'iterazione dei dati per l'elenco. Nella lambda itemContent, invoca l'elemento composable 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 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 eventuali decorazioni 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.

Gli elenchi lazy hanno un concetto simile tramite il modificatore animateItemPlacement. Per scoprire di più, consulta Animazioni degli articoli.

Risorse aggiuntive

Per ulteriori informazioni sulla migrazione di un RecyclerView a Compose, consulta le seguenti risorse: