Gráficos de navegación anidados

Es posible agrupar una serie de destinos en un gráfico anidado dentro de un gráfico de navegación superior llamado gráfico raíz. Los gráficos anidados son útiles para organizar y reutilizar secciones de la IU de tu app, como un flujo de acceso autónomo.

El gráfico anidado encapsula sus destinos. Al igual que sucede con un gráfico raíz, un gráfico anidado debe tener un destino identificado como el destino de inicio. Los destinos que están fuera del gráfico anidado, como los del gráfico raíz, acceden al gráfico anidado solo mediante su destino de inicio.

En la figura 1, se muestra un gráfico de navegación de una app simple de transferencia de dinero. Desde el destino de inicio de la izquierda, el gráfico tiene dos flujos: uno en la parte superior para enviar dinero y otro en la parte inferior para ver el saldo de la cuenta.

Figura 1: Gráfico de navegación de transferencia de dinero

Para agrupar destinos en un gráfico anidado, haz lo siguiente:

  1. En el editor de Navigation, mantén presionada la tecla Mayúsculas y haz clic en los destinos que deseas incluir en el gráfico anidado.

  2. Haz clic con el botón derecho para abrir el menú contextual y selecciona Move to Nested Graph > New Graph. Los destinos se encuentran dentro de un gráfico anidado. En la figura 2, se muestra un gráfico anidado en el editor de Navigation :

    Figura 2: Gráfico anidado en el editor de gráficos

  3. Haz clic en el gráfico anidado. Los siguientes atributos se muestran en el panel Attributes:

    • Type, que contiene "Nested Graph" (gráfico anidado).
    • ID, que contiene un ID asignado por el sistema para el gráfico anidado. Este ID se utiliza para hacer referencia al gráfico anidado de tu código.

  4. Haz doble clic en el gráfico anidado para mostrar sus destinos.

  5. Haz clic en la pestaña Text para alternar a la vista XML. Se agregó un gráfico de navegación anidado al gráfico. Este gráfico de navegación tiene sus propios elementos navigation, junto con su propio ID y un atributo startDestination que apunta al primer destino del gráfico anidado:

    <?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. En tu código, pasa el ID de recurso de la acción que conecta el gráfico raíz al gráfico anidado:

    Kotlin

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

    Java

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

  7. De vuelta en la pestaña Design, puedes hacer clic en Root para regresar al gráfico raíz.

Cómo hacer referencia a otros gráficos de navegación con <include>

Dentro de un gráfico de navegación, puedes hacer referencia a otros gráficos mediante include. Si bien esto es funcionalmente lo mismo que usar un gráfico anidado, include te permite usar gráficos de otros módulos del proyecto o de proyectos de biblioteca, como se muestra en el siguiente ejemplo:

<!-- (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>

Recursos adicionales

Para obtener más información acerca de la navegación, consulta los siguientes recursos adicionales.

Ejemplos

Codelabs

Videos