Usando Navigation Component — Android Jetpack

Alifyz F. Pires
Jun 8, 2019 · 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade