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 app carregando e exibindo dados de forma incremental. Essa técnica permite reduzir os tempos de carregamento iniciais e otimizar o uso da memória, melhorando o desempenho.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como 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 dados de um conjunto de dados maior adquirido do armazenamento local ou da rede. Use o código abaixo para mostrar uma lista paginada que mostra 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)
            }
        }
    }
}
LazyListSnippets.kt

Pontos principais sobre o código

  • LazyColumn: esse elemento combinável é usado para mostrar uma lista grande de itens (mensagens) de maneira eficiente. Ele renderiza apenas os itens que estão visíveis na tela, economizando recursos e memória.
  • O objeto lazyPagingItems gerencia de maneira eficiente 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 mensagem individuais, provavelmente mostrando o remetente e o texto da mensagem em um card.
  • O MessagePlaceholder() fornece um marcador visual (um ícone de carregamento) enquanto os dados da mensagem são buscados, melhorando a experiência do usuário.

Resultados

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

Coleções que contêm este guia

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

As listas e as grades permitem que o app exiba coleções de uma forma agradável e fácil de consumir.
Coletânea de guias rápidos
Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea 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.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback