Graphiques de navigation imbriqués

Une série de destinations peut être regroupée dans un graphique imbriqué au sein d'un graphique de navigation parent appelé graphique racine. Les graphiques imbriqués sont utiles pour organiser et réutiliser des sections de l'UI de votre application, telles qu'un flux de connexion autonome.

Le graphique imbriqué encapsule ses destinations. Comme pour un graphique racine, un graphique imbriqué doit avoir une destination identifiée comme destination de départ. Les destinations situées en dehors du graphique imbriqué, telles que celles du graphique racine, n'accèdent au graphique imbriqué que via sa destination de départ.

La figure 1 illustre un graphique de navigation pour une application de transfert d'argent simple. À partir de la destination de départ sur la gauche, le graphique comporte deux flux : l'un en haut pour envoyer de l'argent et l'autre en bas pour afficher le solde d'un compte.

Figure 1. Graphique de navigation pour une application de transfert d'argent

Pour regrouper des destinations dans un graphique imbriqué :

  1. Dans l'éditeur de navigation, appuyez de manière prolongée sur la touche Maj, puis cliquez sur les destinations que vous souhaitez inclure dans le graphique imbriqué.

  2. Effectuez un clic droit pour ouvrir le menu contextuel, puis sélectionnez Move to Nested Graph > New Graph (Déplacer vers un graphique imbriqué > Nouveau graphique). Les destinations sont incluses dans un graphique imbriqué. La figure 2 montre un graphique imbriqué dans l'éditeur de navigation :

    Figure 2. Graphique imbriqué dans l'éditeur de graphique

  3. Cliquez sur le graphique imbriqué. Les attributs suivants apparaissent dans le panneau Attributes (Attributs) :

    • Type, qui contient "Nested Graph" (Graphique imbriqué)
    • ID, qui contient un ID attribué par le système pour le graphique imbriqué (cet ID permet de référencer le graphique imbriqué de votre code)

  4. Double-cliquez sur le graphique imbriqué pour afficher ses destinations.

  5. Cliquez sur l'onglet Text (Texte) pour passer à la vue XML. Un graphique de navigation imbriqué y a été ajouté. Ce graphique de navigation possède ses propres éléments navigation, ainsi que son propre ID et un attribut startDestination qui pointe vers la première destination du graphique imbriqué :

    <?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. Dans votre code, transmettez l'ID de ressource de l'action qui connecte le graphique racine au graphique imbriqué :

    Kotlin

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

    Java

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

  7. Dans l'onglet Design (Conception), vous pouvez revenir au graphique racine en cliquant sur Root (Racine).

Référencer d'autres graphiques de navigation avec <include>

Dans un graphique de navigation, vous pouvez référencer d'autres graphiques à l'aide de include. Bien que ce fonctionnement soit identique à celui d'un graphique imbriqué, include vous permet d'utiliser les graphiques d'autres modules de projet ou de projets Bibliothèque, comme illustré dans l'exemple ci-dessous :

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

Ressources supplémentaires

Pour en savoir plus sur la navigation, consultez les ressources supplémentaires suivantes.

Exemples

Ateliers de programmation

Vidéos