Carregar dados de forma lenta com listas e paginação

Com o carregamento lento e a paginação, é possível oferecer suporte a grandes listas de itens, incluindo uma lista infinita, no seu app, carregando e mostrando dados de forma incremental. Essa técnica permite reduzir os tempos de carregamento inicial e otimizar o uso da memória, melhorando o desempenho.

Resultados

O vídeo a seguir mostra o comportamento resultante de uma lista grande que busca dados conforme o usuário rola a tela.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como o nível 21 da API ou mais recente.

Dependências

Mostrar conteúdo paginado

Com a biblioteca Paging, é possível carregar e mostrar páginas de um conjunto de dados maior adquirido do armazenamento local ou de uma rede. Use o código abaixo para mostrar uma lista paginada que exibe uma barra de progresso para indicar ao usuário que mais dados estão sendo buscados:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

Pontos principais sobre o código

  • LazyColumn: esse elemento de composição é usado para mostrar uma lista grande de itens (mensagens) de forma eficiente. Ela renderiza apenas os itens visíveis na tela, economizando recursos e memória.
  • O objeto lazyPagingItems gerencia com eficiência o carregamento e a apresentação de dados paginados no LazyColumn. Ele transmite LazyPagingItems para items no elemento combinável LazyColumn.
  • MessageRow(message: Text) é responsável por renderizar itens de mensagens individuais, provavelmente mostrando o remetente e o texto da mensagem em um card.
  • MessagePlaceholder() fornece um marcador de posição visual (um ícone de carregamento) enquanto os dados reais da mensagem estão sendo buscados, melhorando a experiência do usuário.

Coleções que contêm este guia

Este guia faz parte destas coleções de guias rápidos que abrangem objetivos mais amplos de desenvolvimento para Android:

As listas e grades permitem que o app mostre coleções de uma forma visualmente agradável e fácil de consumir.
Coleção de guias rápidos
Saiba como as funções combináveis permitem criar facilmente componentes de interface bonitos com base no sistema de design do Material Design.
Coleção de guias rápidos
Esta série de vídeos apresenta várias APIs do Compose, mostrando rapidamente o que está disponível e como usá-las.
Coleção de guias rápidos

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e confira os guias rápidos ou entre em contato para dar sua opinião.
Acessar as perguntas frequentes Deixar feedback