Migrar a RecyclerView para uma lista lenta

RecyclerView é um componente de visualização que facilita a exibição eficiente de grandes conjuntos de dados. Em vez de criar visualizações para cada item no conjunto de dados, a RecyclerView melhora o desempenho do app, mantendo um pequeno conjunto de visualizações e reciclando-as à medida que você rola por esses itens.

No Compose, você pode usar listas lentas para realizar a mesma coisa. Esta página descreve como migrar a implementação de RecyclerView para usar listas lentas no Compose.

Etapas da migração

Para migrar a implementação de RecyclerView para o Compose, siga estas etapas:

  1. Adicione um comentário ou remova a RecyclerView da hierarquia da interface e adicione uma ComposeView para substituí-la se nenhuma estiver presente na hierarquia ainda. Este é o contêiner da lista lenta que você vai adicionar:

          <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. Determine o tipo de elemento combinável de lista lenta com base no gerenciador de layout do RecyclerView. Consulte a tabela abaixo. O elemento combinável que você selecionar será o de nível superior do ComposeView adicionado na etapa anterior.

    LayoutManager

    Elemento combinável

    LinearLayoutManager

    LazyColumn ou LazyRow

    GridLayoutManager

    LazyVerticalGrid ou LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid ou 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. Crie um elemento combinável correspondente para cada tipo de visualização na implementação de RecyclerView.Adapter. Normalmente, cada tipo de visualização é mapeado para uma subclasse ViewHolder, embora isso nem sempre seja o caso. Esses elementos que podem ser compostos vão ser usados como a representação da interface para diferentes tipos de elementos da lista:

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    A lógica nos métodos onCreateViewHolder() e onBindViewHolder() da RecyclerView.Adapter será substituída por esses elementos combináveis e pelo estado fornecido. No Compose, não há separação entre a criação de um elemento combinável para um item e a vinculação de dados a ele. Esses conceitos são agrupados.

  4. No slot content da lista lenta (o parâmetro lambda final), use a função items() (ou uma sobrecarga equivalente) para iterar os dados da lista. Na lambda itemContent, invoque o item combinável adequado para seus dados:

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

Casos de uso comuns

Decorações de itens

RecyclerView tem o conceito de ItemDecoration, que pode ser usado para adicionar um desenho especial para itens na lista. Por exemplo, você pode adicionar uma ItemDecoration para incluir divisores entre itens:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

O Compose não tem um conceito equivalente de decorações de itens. Em vez disso, você pode adicionar qualquer decoração de interface à lista diretamente na composição. Por exemplo, para adicionar divisores à lista, use o elemento combinável Divider após cada item:

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

Animações de itens

Uma ItemAnimator pode ser definida em uma RecyclerView para animar a aparência dos itens à medida que as mudanças são feitas no adaptador. Por padrão, RecyclerView usa DefaultItemAnimator, que fornece animações básicas sobre eventos de remoção, adição e movimento.

As listas lentas têm um conceito semelhante com o modificador animateItemPlacement. Consulte Animações de itens para saber mais.

Outros recursos

Para mais informações sobre como migrar uma RecyclerView para o Compose, consulte os recursos abaixo: