Participe do evento ⁠#Android11: apresentação de lançamento da versão Beta no dia 3 de junho.

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, como 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 atributos a seguir 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 referenciar o 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 para o 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 seguintes recursos.

Amostras

Codelabs

Vídeos