Esegui la migrazione di RecyclerView all'elenco Lazy

RecyclerView è un componente Vista che consente di visualizzare in modo semplice e efficiente set di dati molto grandi. 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 in 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 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. Stabilisci il tipo di componibile in elenco lento di cui hai bisogno in base al tuo Gestore del layout di RecyclerView (vedi tabella sotto). Il componibile selezionato sarà il componibile di primo livello del ComposeView che hai aggiunto nel passaggio precedente.

    LayoutManager

    Componibili

    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 componibile corrispondente a ogni tipo di visualizzazione nel tuo Implementazione di RecyclerView.Adapter. In genere, ogni tipo di visualizzazione viene mappato ViewHolder, anche se potrebbe non essere 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 nei onCreateViewHolder() eRecyclerView.Adapter I metodi onBindViewHolder() verranno sostituiti da questi componibili e che fornisci. 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. Nello slot content dell'elenco Lazy (il parametro lambda finale), utilizzare la funzione items() (o un sovraccarico equivalente) per eseguire l'iterazione attraverso dati per il tuo 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 usare il componibile 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 la rimozione, l'aggiunta e eventi di spostamento.

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

Risorse aggiuntive

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