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:
Adicione um comentário ou remova a
RecyclerView
da hierarquia da interface e adicione umaComposeView
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>
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 doComposeView
adicionado na etapa anterior.LayoutManager
Elemento combinável
LinearLayoutManager
LazyColumn
ouLazyRow
GridLayoutManager
LazyVerticalGrid
ouLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
ouLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
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 subclasseViewHolder
, 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` } }
A lógica nos métodos
onCreateViewHolder()
eonBindViewHolder()
daRecyclerView.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.No slot
content
da lista lenta (o parâmetro lambda final), use a funçãoitems()
(ou uma sobrecarga equivalente) para iterar os dados da lista. Na lambdaitemContent
, invoque o item combinável adequado para seus dados:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
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)
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() } } }
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:
- Listas e grades: documentação sobre como implementar listas e grades no Compose.
- Interoperabilidade do Jetpack Compose: como usar o Compose em uma RecyclerView (link em inglês):
postagem do blog sobre como usar o Compose com eficiência em uma
RecyclerView
.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Listas e grades
- Migrar o
CoordinatorLayout
para o Compose - Outras considerações