Criando listas paginadas com Jetpack Compose

Olá a todos 😄, anteriormente publiquei um artigo demonstrando como utilizar o paging v3.

Ainda não existia suporte oficial para paginação no Jetpack Compose, mas a partir da versãocompose1.0.0-alpha06, a biblioteca paging-compose foi incluída.

Utilizei a mesma estrutura(PagingSource, Pager) do projeto anterior, sendo assim só mudarei a camada de apresentação de Fragment + ViewModel para Composables + ViewModel.

Todas as bibliotecas utilizadas(compose, paging), estão em alpha e não é aconselhável o uso em produção, e até o lançamento, o modo de implementação das mesmas pode mudar, este artigo foi feito em caráter de curiosidade/estudos.

Configurando o projeto

É necessário adicionar a dependência da biblioteca de paginação no build.gradle do nível de aplicação, em um projeto que já tenha o Jetpack Compose habilitado.

Implementação da obtenção dos dados

A explicação de cada uma das classes está no artigo anterior.

Utilizei a https://rickandmortyapi.com/ como fonte de dados.

PersonageDataSource

PersonageRepository

PersonageViewModel

Implementação camada de UI

• No Jetpack Compose, LazyColumn e LazyRow como um substituto para RecyclerView para exibir uma lista de dados.
• A biblioteca paging-compose vem com funções de extensão no LazyListScope que será usado pelos composables LazyColumn e LazyRow para exibir PagingData em uma lista.
• É necessário converter o Flow<PagingData<CharacterUi>> em LazyPagingItems<CharacterUi>, que é uma extension function que transforma o fluxo de dados de paginação em itens de carregamento sob demanda.
• nossa lista lazyCharacters então pode ser passada para a função items(), ela é uma extension function que retorna cada item da lista passada para que assim possamos atribuir a nossa view(CharacterItem) que representa um item único, e sua implementação é a seguinte:

Considerações Finais

Essa nova maneira de fazer paginação me deixou bastante ansioso para poder utilizar, ainda mais com a substituição do RecyclerView e todo seu boilerplate(Adapter, ViewHolders) por LazyColumn e LazyRow, e também a substituição dos callbacks de scroll, pelo compose-paging.

O projeto usado no meus estudos está no meu Github.

Obrigado por ler até aqui, fiquem bem 🙏