Criar gráficos de navegação

O componente de navegação usa um gráfico de navegação para gerenciar a navegação do seu app. Um gráfico de navegação é um arquivo de recursos que contém todos os destinos do app, com as conexões lógicas, ou ações, que os usuários podem realizar para navegar de um destino para outro. Você pode gerenciar o gráfico de navegação do seu app usando o Navigation Editor no Android Studio.

Este tópico contém práticas recomendadas e recomendações para criar gráficos de navegação do seu app.

Gráfico de navegação de nível superior

O gráfico de navegação de nível superior do seu app precisa começar com o destino inicial que o usuário vê ao iniciar o app e incluir os destinos que ele vê quando se movimenta pelo app.

Figura 1. Um gráfico de navegação de nível superior.

Gráficos aninhados

Fluxos de login, assistentes ou outros subfluxos no seu app geralmente são mais bem representados como gráficos de navegação aninhados. Aninhando fluxos de subnavegação autocontidos dessa forma, fica mais fácil de compreender e gerenciar o fluxo principal da IU do seu app. Além disso, os gráficos aninhados são reutilizáveis. Eles também fornecem um nível de encapsulamento: os destinos fora do gráfico aninhado não têm acesso direto a nenhum destino no gráfico aninhado. Em vez disso, eles precisam navigate() até o gráfico aninhado, onde a lógica interna pode mudar sem afetar o resto do gráfico.

Usando o gráfico de navegação de nível superior da Figura 1 como exemplo, suponha que você queira exigir que o usuário veja as telas title_screen e register somente quando o app for iniciado pela primeira vez. Em seguida, as informações do usuário são armazenadas e, em lançamentos subsequentes do app, você precisará levar esses usuários diretamente para a tela match. Como prática recomendada, defina a tela match como o destino inicial do gráfico de navegação de nível superior e mova as telas de título e registro para um gráfico aninhado, conforme mostrado na Figura 2:

Figura 2. O gráfico de navegação de nível superior agora contém um gráfico aninhado.

Quando a tela de correspondência for iniciada, você poderá verificar se há um usuário registrado. Se o usuário não estiver registrado, você poderá navegar até a tela de registro. Para saber mais sobre cenários de navegação condicional, consulte Navegação condicional.

Outra maneira de modularizar a estrutura do seu gráfico é incluir um gráfico dentro de outro com um elemento <include> no gráfico de navegação pai. Isso permite que o gráfico incluído seja definido em um módulo ou projeto separado, o que maximiza a capacidade de reutilização.

Navegação nos módulos da biblioteca

Caso seu app dependa de módulos da biblioteca, que contêm um gráfico de navegação, você pode referir-se a esses gráficos de navegação usando um elemento <include>.

Para mais informações, consulte Práticas recomendadas de navegação para projetos de vários módulos.

Ações globais

Qualquer destino no seu app que possa ser acessado por mais de um caminho precisa ter uma ação global correspondente definida para navegar até esse destino. As ações globais podem ser usadas para navegar até um destino a partir de qualquer lugar.

Vamos aplicar isso ao exemplo de módulo da biblioteca, que tem a mesma ação definida nos destinos de vitória e de fim de jogo. Você precisa extrair essas ações comuns para uma única ação global e referenciá-las em ambos os destinos, como mostrado no exemplo abaixo:

<?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/in_game_nav_graph"
   app:startDestination="@id/in_game">

   <!-- Action back to destination which launched into this in_game_nav_graph-->
   <action android:id="@+id/action_pop_out_of_game"
                       app:popUpTo="@id/in_game_nav_graph"
                       app:popUpToInclusive="true" />

   <fragment
       android:id="@+id/in_game"
       android:name="com.example.android.gamemodule.InGame"
       android:label="Game">
       <action
           android:id="@+id/action_in_game_to_resultsWinner"
           app:destination="@id/results_winner" />
       <action
           android:id="@+id/action_in_game_to_gameOver"
           app:destination="@id/game_over" />
   </fragment>

   <fragment
       android:id="@+id/results_winner"
       android:name="com.example.android.gamemodule.ResultsWinner" />

   <fragment
       android:id="@+id/game_over"
       android:name="com.example.android.gamemodule.GameOver"
       android:label="fragment_game_over"
       tools:layout="@layout/fragment_game_over" />

</navigation>

Consulte Ações globais nos documentos de navegação para saber mais e conferir exemplos de como usar ações globais nos seus fragmentos.