Usando Navigation Component — Android Jetpack

Alifyz F. Pires
Jun 8 · 5 min read

Android Jetpack é um conjunto de bibliotecas e ferramentas criado com o objetivo de simplificar e melhorar a qualidade do processo de desenvolvimento de aplicativos Android. Com estas bibliotecas o Google revolucionou a forma de desenvolvimento de aplicativos mobile, e assim a facilidade de desenvolver um app com qualidade, previsibilidade e simplicadade.

Navigation — Architecture Component

O objetivo de hoje será refatorar um projeto existente que utiliza o padrão de navegação BottomNavigationView + FragmentTransactions para o novo componente de arquitetura do Android Jetpack chamado Navigation.

Para melhor compreenção deste artigo, será necessário que você tenha conhecimento dos seguintes conceitos:

O principal objetivo de utilizar este novo componente é reduzir a probabilidade de erro ao realizar alguma transação com fragments e melhorar a capacidade de testar a UI de forma isolada. Usando o Navigation do Android Jetpack também conseguimos acelerar o processo de desenvolvimento mobile, dessa forma reduzimos o tempo necessário para escrever um app sem perder a qualidade do software.

Ao utilizar o Navigation Component você estará delegando ao componente os seguintes conceitos de navegação:

  • Automação nas transações de fragments
  • Implementação dos princípios de navegação
Vídeo de Lançamento — Android Jetpack

Para utilizar o novo componente será necessário ter instalado o Android Studio 3.2 ou versões posteriores. Basta habilitar o editor de navegação em Settings -> Experimental -> Enable Navigation Editor.

Habilitando — Navigation Editor

Introdução ao projeto a ser Refatorado.

O projeto atualmente conta com o padrão de navegação Bottom Navigation View. Caso você tenha dúvidas sobre a implementação deste padrão de navegação, clique aqui.

TL;DR (Repositório)

Veja como o aplicativo se comporta atualmente.

PopSeries — App de Review de Séries em Desenvolvimento.

Arquivo atual de Layout do App.

Com o componente de navegação do Jetpack, iremos modificar o FrameLayout com o ID = @+id/fragment para um componente de navegação chamado NavHostFragment que irá hospedar nossa UI de forma dinâmica a medida que o nosso NavController modificar o destino atual (UI) em uso.

Nova Arquitetura do Navigation Component

Por definição: NavigationHostFragment é o principal componente (Widget) responsável por realizar as trocas de fragmento a medida que o usuário navega pelo gráfico de navegação (Navigation Graph) definido pelo Navigation Editor.

Para completa implementação deste compomente precisamos de três partes que funcionam em harmonia, são elas:

  • NavigationHostFragment
  • Navigation Graph
  • Navigation Controller

1ª Passo, Implementando NavHostFragment

Precisamos modificar o layout principal para hospedar o nosso NavHostFragment, para tal iremos substituir o nosso atual FrameLayout por um Fragment widget que irá referenciar a classe NavHostFragment do Android Jetpack.

Com o novo layout acima, conseguimos implementar o NavHostFragment que irá hospedar os destinations do aplicativo. O atributo defaultNavHost conecta o fragment ao gerenciamento de navegação do Android para implementar os principios de navegação como Back Button and Up Navigation.

Repare que definimos também o nosso navigation graph usando o atributo:

app:navGraph="@navigation/navigation_graph"

2ª Passo, Criando nosso Navigation Graph

Para conectar os caminhos que o NavController poderá gerenciar precisaremos criar um novo recurso em XML chamado “navigation_graph”. Com a nova biblioteca uma nova pasta para armazenar grafos de navegação foi criada.

Portanto, basta clicar com botão direito em res -> new -> Android Resource Directory e selecionar conforme abaixo.

Criando uma nova pasta de Recursos

Logo em seguida, devemos criar o novo XML chamado navigation_graph, para isso basta clicar com o botão direito em cima da pasta “navigation” -> new -> Navigation Resource File.

Para simplificar este artigo, iremos criar apenas uma navegação simples de dois fragments para uma Activity de detalhes, confira o gráfico de navegação e o código em XML a seguir.

Na imagem a seguir, temos três destinos, são eles;

  • Dois fragments em branco
  • Uma Activity de detalhes.

Código XML do gráfico de navegação

Para fazer o editor renderizar o preview do layout basta adicionar o seguinte atributo em cada <fragment>

tools:layout="@layout/your_layout_here"

3ª Passo, Implementando o NavController

Agora que temos o gráfico de navegação e o NavHostFragment precisamos implementar o componente responsável por gerenciar o fluxo da UI.

Antes de implementarmos, confira como o código da HomeActivity está organizado para controlar a navegação usando Fragment Transactions.

Código da Activity principal.

O principal objetivo será substituir as transações de fragments pelo NavController, que atualmente é gerenciado pelo método onNavigationItemSelected.

Para que a implementação do Navigation Controller seja completada conectando os destinations do Bottom Navigation View com o gráfico de navegação de forma automática será necessário definir os ids do navigation_graph de forma idêntica ao menu do BottomNavigationView, assim o próprio componente irá identificar e realizar as transações de fragments por conta própria.

Confira a implementação do NavController abaixo:

Como descrito acima, basta declarar os objetos NavController e BottomNavigationView e setar o NavController pelo método setWithNavController. Dessa forma, o próprio componente irá interceptar o listener onNavigationItemSelected e realizar as transações de fragmento necessárias para substituir a UI.

Em resumo, já ganhamos a segurança de não precisarmos realizar as transações por conta própria e no processo ganhamos a capacidade de definir animações e transições customizadas.

Veja o resultado simplificado a implementação do controlador para os dois fragments iniciais.

4ª Passo, refinando nosso exemplo.

Agora que cobrimos o básico, vamos refinar ainda mais nossa navegação definindo a navegação do menu superior da ActionBar que geralmente contem um menu de preferências (Tela de Configurações) usando o nosso NavController.

Em resumo, iremos substituir o seguinte Boilerplate code pelo NavController.

Lembrando que devemos sempre, criar e manter os IDs iguais ao definidos em nosso gráfico de navegação “navigation_graph.xml

Ou seja, o ID (R.id.preference) do arquivo @menu/menu.xml deve ser igual ao do nosso gráfico de navegação. Assim o próprio controlador será capaz de interceptar o listener e substituir a UI como destino apropriado.

Confira agora como ficou o código fonte do nosso Controlador em HomeActivity.

Código do NavigationGraph

Código do Layout principal.

Resultado Final:

Conclusão

Em resumo, o componente de navegação simplifica o processo de desenvolvimento de interfaces e fluxo de UI no mundo Android.

Na data deste artigo, a biblioteca está na versão 1.0.0 na versão Pré-Androidx e na versão 2.0.1-alpha-01 na nova versão Androix e está mudando muito rápido, mas já conta com recursos incríveis que todo desenvolvedor Android deve aprender para se manter atualizado com o Android Jetpack.

Qualquer dúvida estou a disposição!

Abraços.

Fonte:

Android Dev BR

Artigos em português sobre Android, curados pela comunidade Android Dev BR. Junte-se a nós: slack.androiddevbr.org.

Alifyz F. Pires

Written by

Android Developer @MaximaSistemas

Android Dev BR

Artigos em português sobre Android, curados pela comunidade Android Dev BR. Junte-se a nós: slack.androiddevbr.org.