Gráficos de navegação aninhados

Uma série de destinos pode ser agrupada em um gráfico aninhado dentro de um gráfico de navegação pai chamado de gráfico raiz. Os gráficos aninhados são úteis para organizar e reutilizar seções da IU do app, como um fluxo de login independente.

O gráfico aninhado encapsula os próprios destinos. Como em um gráfico raiz, um gráfico aninhado precisa ter um destino identificado como inicial. Os destinos fora do gráfico aninhado, por exemplo, aqueles no gráfico raiz, acessam o gráfico aninhado somente por meio do destino inicial.

A Figura 1 mostra um gráfico de navegação para um app simples de transferência de fundos. A partir do destino inicial à esquerda, o gráfico tem dois fluxos: um na parte superior para enviar dinheiro e outro na parte inferior para visualizar o saldo de uma conta.

Figura 1. Gráfico de navegação de transferência de fundos.

Para agrupar destinos em um gráfico aninhado, faça o seguinte:

  1. No Navigation Editor, mantenha pressionada a tecla Shift e clique nos destinos que quer incluir no gráfico aninhado.

  2. Clique com o botão direito do mouse para abrir o menu de contexto e selecione Move to Nested Graph > New Graph. Os destinos são colocados em um gráfico aninhado. A Figura 2 mostra um gráfico aninhado no Navigation Editor:

    Figura 2. Gráfico aninhado no Graph Editor.

  3. Clique no gráfico aninhado. Os seguintes atributos aparecem no painel Attributes:

    • Type contém o "Nested Graph".
    • ID contém um ID atribuído pelo sistema ao gráfico aninhado. Esse ID é usado para fazer referência ao gráfico aninhado do seu código.

  4. Clique duas vezes no gráfico aninhado para exibir os destinos.

  5. Clique na guia Text para alternar para a visualização XML. Um gráfico de navegação aninhado foi adicionado ao gráfico. Este gráfico de navegação tem os próprios elementos navigation, com o ID e um atributo startDestination que aponta para o primeiro destino no gráfico aninhado:

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/mainFragment">
    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.cashdog.cashdog.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" >
        <action
            android:id="@+id/action_mainFragment_to_sendMoneyGraph"
            app:destination="@id/sendMoneyGraph" />
        <action
            android:id="@+id/action_mainFragment_to_viewBalanceFragment"
            app:destination="@id/viewBalanceFragment" />
    </fragment>
    <fragment
        android:id="@+id/viewBalanceFragment"
        android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
        android:label="fragment_view_balance"
        tools:layout="@layout/fragment_view_balance" />
    <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
        <fragment
            android:id="@+id/chooseRecipient"
            android:name="com.example.cashdog.cashdog.ChooseRecipient"
            android:label="fragment_choose_recipient"
            tools:layout="@layout/fragment_choose_recipient">
            <action
                android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
                app:destination="@id/chooseAmountFragment" />
        </fragment>
        <fragment
            android:id="@+id/chooseAmountFragment"
            android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
            android:label="fragment_choose_amount"
            tools:layout="@layout/fragment_choose_amount" />
    </navigation>
</navigation>

  6. No seu código, passe o ID do recurso da ação que conecta o gráfico raiz ao gráfico aninhado:

    Kotlin

    view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

    Java

    Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);

  7. De volta à guia Design, você pode retornar ao gráfico raiz clicando em Root.

Referenciar outros gráficos de navegação com <include>

Em um gráfico de navegação, você pode referenciar outros gráficos usando include. Embora seja funcionalmente o mesmo que usar um gráfico aninhado, include permite que você use gráficos de outros módulos do projeto ou de projetos de biblioteca, como mostrado no exemplo abaixo:

<!-- (root) nav_graph.xml -->
<?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_graph"
    app:startDestination="@id/fragment">

    <include app:graph="@navigation/included_graph" />

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" />
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?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/second_graph"
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

Outros recursos

Para saber mais sobre navegação, consulte os recursos adicionais a seguir.

Amostras

Codelabs

Vídeos