Usando Navigation Component — Android Jetpack
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.
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
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.
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.
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.
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.
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.
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:
