DEV Community: João Gabriel

Utilizando o Jetpack Paging v3

João Gabriel — Thu, 16 Jul 2020 20:02:35 +0000

O que é a Paging Library?

A Paging Library, é uma biblioteca criada pelo Google para resolver o problema da paginação de dados no Android.

Um problema que geralmente temos que resolver ao criar um aplicativo, é a solicitação de dados longos, que não exigem uma única vez, pois o usuário vê apenas uma pequena parte desses dados por vez.

Uma maneira de resolver esse problema, é adicionar um ScrollListener para o RecyclerView e carregar mais dados quando o usuário chega ao final da lista. Com esta abordagem, é difícil manter a eficiência, também a lógica da interface do usuário e gera uma lógica de dados complicada, o que dificulta a depuração e testes do projeto.

Vantagens

A Paging Library ajuda a carregar e exibir pequenos blocos de dados por vez.
O carregamento de dados parciais sob demanda reduz o uso da largura de banda da rede e dos recursos do sistema.
Facilmente integrada ao RecyclerView.
Mantém o controle das chaves a serem usadas para recuperar a página seguinte e a anterior.
Solicita automaticamente a página correta quando o usuário rola para o final da lista.
Garante que várias solicitações não sejam acionadas ao mesmo tempo.
Rastreia o estado de carregamento e permite exibi-lo em um RecyclerView item da lista, ou em qualquer outro local da interface do usuário e mostrar facilmente as cargas com falha.

Novidades Paging 3

Suporte interno para tratamento de erros, incluindo mecanismo de reload e retry.
Suporte à coroutines e Flow do Kotlin, assim como era ao LiveData e RxJava na versão 2.
Header, footer e separator incluídos na biblioteca.

Como implementar

Primeiramente, é necessário ter o Android Studio na versão 3.6 ou superior.

Adicionar a dependência no build.gradle

def paging_version = "3.0.0-alpha02"
implementation "androidx.paging: paging-runtime: $ paging_version"

Até o momento da escrita deste artigo, esta é a versão atual da biblioteca

Fluxo dos dados

O principal componente na camada de Repository é o PagingSource.
Cada objeto PagingSource, define uma fonte de dados e recupera os dados dessa fonte, seja ela um banco de dados local ou uma API externa. No nosso exemplo utilizarei uma API externa:

class MyPagingSource(
    private val api: MyApi
) : PagingSource<Int, MyModel>() {
    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, MyModel> {
        return try {
            val result = api.getItems(params.key ?: STARTING_PAGE_INDEX)
            Page(
                data = result,
                prevKey = params.key,
                nextKey = result.nextPage ?: STARTING_PAGE_INDEX.plus(1)
            )
        } catch (e: IOException) {
            LoadResult.Error(e)
        } catch (e: HttpException) {
            LoadResult.Error(e)
        }
    }

    companion object {
        private const val STARTING_PAGE_INDEX = 1
    }
}

A partir da criação do nosso PagingSource na camada de Repository, criaremos o nosso Pager.

O Pager é o responsável por configurar o tamanho de nossas páginas de requisição, através do PagingConfig, e auxiliar no fluxo dos dados.

fun getItems(): Flow<PagingData<MyModel>> {
    return Pager(
          config = PagingConfig(pageSize = 20),
          pagingSourceFactory = { MyPagingSource(api = api) }
    ).flow.cachedIn(viewModelScope)
}

A partir da Paging v3, não é necessário converter Flow em LiveData.
Para manter um cache dos dados carregados no nosso ViewModel, chamamos o cachedIn passando o nosso androidx.lifecycle.viewModelScope

Agora teremos a nossa última etapa de implementação, que é passar os dados carregados para a nossa View.

Será necessário coletar os dados vindos do PagingData e passar para o nosso Adapter:

Solicitando os dados para o viewModel:

fun getData() {
    lifecycleScope.launch {
        viewModel.getItems().collectLatest {
            adapter.submitData(it)
        }
     }
}

A implementação do adapter só precisa fazer uma extensão da classe PagingDataAdapter, e passar um DiffUtilCallback para diferenciar os itens recebidos:

class MyAdapter : PagingDataAdapter<MyModel, MyAdapter.MyViewHolder>(DiffUtilCallback()) {
   // a implementação do corpo do adapter permanece a mesma
}

class DiffUtilCallBack : DiffUtil.ItemCallback<MyModel>() {
    override fun areItemsTheSame(oldItem: MyModel, newItem: MyModel): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: MyModel, newItem: MyModel): Boolean {
        return oldItem == newItem
    }
}

Esta foi a implementação necessária para fazer paginação no Android usando a Paging Library, obrigado pela leitura

Todo o conteúdo foi compartilhado no meu Github

Vou deixar aqui links adicionais com a documentação da biblioteca:

https://developer.android.com/topic/libraries/architecture/paging/v3-overview

https://codelabs.developers.google.com/codelabs/android-paging/#0

Utilizando o Jetpack Navigation em projetos multi módulos

João Gabriel — Sun, 07 Jun 2020 19:17:05 +0000

Neste artigo, mostrarei como utilizar o Navigation, em um projeto modularizado.

O Navigation é um componente que faz parte do Jetpack e que consiste de três partes principais:

NavGraph: é um XML que centraliza as informações de navegação de uma feature.
NavHost: é um contêiner vazio que mostra destinos do gráfico de navegação. O componente de navegação contém uma implementação NavHost padrão, NavHostFragment, que mostra os destinos do fragment.
NavController: é um objeto que gerencia a navegação do aplicativo em um NavHost. O NavController organiza a troca do conteúdo de destino, no NavHost, conforme os usuários navegam pelo aplicativo.

Texto completo aqui.

Porque utilizar o Navigation?

Com o Navigation é possível ver toda a navegação através do NavGraph, não sendo necessário procurar por cada Intent e FragmentTransaction no projeto. Além disso, ele permite encontrar todos os destinos possíveis.

Um outro ponto positivo, é que não é mais necessário se preocupar com o fato do botão "voltar" sair do aplicativo ao vir de um deep link. Em relação ao deep link, vale salientar que ele também tem essa informação da navegação.

Segurança ao passar argumentos utilizando o SafeArgs. Não é mais necessário fazer verificações e proteções de segurança, porque é possível ter os argumentos com tipos definidos.

Ele também funciona com os padrões atuais da interface do usuário de navegação, como bottom-navigation, com apenas algumas configurações.
É possível também criar transições e animações 💙 entre a navegação.

Pré requisitos

Para utilizar o Navigation é necessário ter instalado o Android Studio na versão 3.3 ou superior.

E adicionar no build.gradle do projeto as dependências do navigation:

  implementation "androidx.navigation:navigation-fragment-ktx:2.2.2"
  implementation "androidx.navigation:navigation-ui-ktx:2.2.2"

No momento da criação deste artigo a versão mais recente é a 2.2.2.

Em projetos monolitos, temos todas as features e camadas em um único módulo, mas nem todas features precisam uma das outras, isso também se aplica a navegação.

Hands On

Como exemplo, temos uma feature 1 que tem 2 fragments e faz a navegação de Fragment A -> Fragment B

Utilizando o navigation, precisaremos apenas de um NavGraphcom nossos 2 destinos e um action que leva do Fragment A ao Fragment B

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_feature_one"
    app:startDestination="@id/fragment_a">

    <fragment
        android:id="@+id/fragment_a"
        android:name="io.jgabriel.featureone.FragmentA">

        <action
            android:id="@+id/navigate_to_b"
            app:destination="@+id/fragment_b"
            app:popUpTo="@+id/fragment_a" />
    </fragment>
    <fragment
        android:id="@+id/fragment_b"
        android:name="io.jgabriel.featureone.FragmentB"/>

</navigation>

Assim, temos a navegação da nossa primeira feature.

Agora iremos aumentar a nossa aplição incluindo mais 2 feature modules :

Dessa maneira, nossa aplicação conterá essas features e fragments:

Será necessário também adicionar os NavGraphspara as novas features, criadas seguindo o mesmo modelo da Feature 1

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_feature_two"
    app:startDestination="@id/fragment_c">

    <fragment
        android:id="@+id/fragment_c"
        android:name="io.jgabriel.featuretwo.FragmentC">

        <action
            android:id="@+id/navigate_to_d"
            app:destination="@+id/fragment_d"
            app:popUpTo="@+id/fragment_c" />
    </fragment>
    <fragment
        android:id="@+id/fragment_d"
        android:name="io.jgabriel.featuretwo.FragmentD"/>

</navigation>

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_feature_three"
    app:startDestination="@id/fragment_e">

    <fragment
        android:id="@+id/fragment_e"
        android:name="io.jgabriel.featurethree.FragmentE">

        <action
            android:id="@+id/navigate_to_"
            app:destination="@+id/fragment_f"
            app:popUpTo="@+id/fragment_e" />
    </fragment>
    <fragment
        android:id="@+id/fragment_f"
        android:name="io.jgabriel.featurethree.FragmentF" />
</navigation>

Precisamos adicionar as nossas feature ao módulo de aplicação através do build.gradle

implementation project(":featureone")
implementation project(":featuretwo")
implementation project(":featurethree")

Agora o nosso módulo de aplicação conhece as nossas 3 features.

Para não precisar repetir toda a navegação feita em cada feature, vamos reutilizar os NavGraphs, através da tag de include dentro do NavGraph do nosso módulo e aplicação

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_main"
    app:startDestination="@id/nav_feature_one">

    <include app:graph="@navigation/nav_feature_one" />
    <include app:graph="@navigation/nav_feature_two" />
    <include app:graph="@navigation/nav_feature_three" />
</navigation>

Agora é possível fazer a navegação de qualquer fragment dentro do módulo de aplicação.

Em problemas reais, geralmente precisamos acessar um fragment de uma feature, através de outra, por exemplo:

O Fragment B, que está na Feature 1, precisa navegar até o Fragment D, que está na Feature 2:

Para isso vamos adicionar deep links aos fragments e fazer a navegação através deles. Assim, as features continuarão independentes e o módulo de app será o responsável por gerenciar essa navegação.

NavGraph Feature Two

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_feature_two"
    app:startDestination="@id/fragment_c">

    <fragment
        android:id="@+id/fragment_c"
        android:name="io.jgabriel.featuretwo.FragmentC">

        <action
            android:id="@+id/navigate_to_d"
            app:destination="@+id/fragment_d"
            app:popUpTo="@+id/fragment_c" />
    </fragment>
    <fragment
        android:id="@+id/fragment_d"
        android:name="io.jgabriel.featuretwo.FragmentD">
        <deepLink app:uri="navApp://fragmentD" />
    </fragment>

</navigation>

Utilizando a tag deepLink, podemos especificar o URI que podemos usar para navegar para esse destino específico, sem a

Feature One precisar conhecer a nossa Feature Two.

Para fazer essa navegação, vamos adicionar um click no FragmentB que vai navegar até o FragmentD

class FragmentB : Fragment() {
    fun onViewCreated(...) {
        ...
        ...
        view.setOnClickListener { 
            val uri = Uri.parse("navApp://fragmentD")
            findNavController().navigate(uri)
        }
   }
}

Dessa forma, mantemos os nossos módulos independentes um dos outros, e capazes de navegarem entre si.

Obrigado por ler até aqui. Todo o código utilizado está disponível em:

1jGabriel / Navigation-multi-module

Navegação utilizando deeplink em um projeto modularizado

Utilizando MergeAdapter no Android

João Gabriel — Sat, 23 May 2020 21:37:18 +0000

Introdução

MergeAdapter é uma nova feature introduzida no recyclerview:1.2.0-alpha02, habilitando a possibilidade de agrupar adapters e os exibir sequencialmente utilizando o mesmo RecyclerView.

Integração

Para fazer o uso do Merge Adapter é necessário adicionar a dependência no build.gradle do app ou módulo que irá fazer a utilização:

dependencies { implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha03' }

até o momento deste texto, esta era a versão mais recente da biblioteca.

Hands On

Será utilizado o Valorant, jogo recém lançado pela Riot Games, como exemplo.

Neste exemplo, serão utilizados: um layout de header, uma lista de personagens e um banner, assim criando um adapter para cada view: HeaderAdapter, PersonageAdapter e BannerAdapter.

Será necessário fazer o merge dos 3 adapters, utilizando o construtor do Merge Adapter e passando sua instância para o adapter do recyclerview.

val headerAdapter: HeaderAdapter= … val personageAdapter: PersonageAdapter= … val bannerAdapter: BannerAdapter= … val mergeAdapter = MergeAdapter(headerAdapter, personageAdapter, footerAdapter)

As views do recyclerview, serão renderizadas de acordo com a ordem dos adapters passados no construtor do [Merge Adapter] .(https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter)

recyclerView.adapter = mergeAdapter

Obtendo o seguinte resultado:

Toda a implementação dos adapters, e dados utilizados estão disponíveis em:

1jGabriel / Valorant-Merge-Adapter

Repositório para testes do merge adapter

Dica ao utilizar Merge Adapter

É recomendável também utilizar que cada adapter faça a extensão de ListAdapters para evitar chamar RecyclerView.Adapter.notifyDataSetChanged() assim ao passar novos dados para um adapter só é necessário chamar adapter.submitList(list)