ネストされたナビゲーショングラフ

一連のデスティネーションは、「ルートグラフ」と呼ばれる親ナビゲーショングラフ内の「ネストされたグラフ」としてグループ化できます。ネストされたグラフは、自己完結型のログインフローなど、アプリの UI のセクションを整理し、再利用するうえで有用です。

ネストされたグラフはデスティネーションをカプセル化します。ルートグラフと同様、ネストされたグラフには、開始デスティネーションとして指定されているデスティネーションが必要です。ルートグラフ上のデスティネーションなど、ネストされたグラフの外部にあるデスティネーションは、開始デスティネーションを通じてのみネストされたグラフにアクセスします。

シンプルな送金アプリのナビゲーショングラフを図 1 に示します。左側の開始デスティネーションから始まるこのグラフには、2 つのフローがあります。上部のフローは送金用で、下部のフローは口座残高表示用です。

デスティネーションをネストされたグラフにグループ化する手順は次のとおりです。

Navigation Editor で、Shift キーを長押ししながら、ネストされたグラフ内に含めるデスティネーションをクリックします。
右クリックしてコンテキストメニューを開き、[Move to Nested Graph] > [New Graph] を選択します。対象デスティネーションがネストされたグラフ内に囲い込まれます。Navigation Editor 内のネストされたグラフを図 2 に示します。

図 2. グラフエディタ内のネストされたグラフ
ネストされたグラフをクリックします。次の属性が [Attributes] パネルに表示されます。
- Type - 「ネストされたグラフ」が格納されます。
- ID - システムによって割り当てられたネストされたグラフの ID が格納されます。この ID を使用して、コードからネストされたグラフを参照できます。
ネストされたグラフをダブルクリックすると、デスティネーションが表示されます。

[Text] タブをクリックして、XML ビューに切り替えます。ネストされたナビゲーショングラフがグラフに追加されています。このナビゲーショングラフは、独自の navigation 要素に加えて、独自の ID と startDestination 属性を備えています。この属性が、ネストされたグラフ内の最初のデスティネーションを指します。

<?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>

コード内で、ルートグラフをネストされたグラフに接続するアクションのリソース ID を渡します。

Kotlin

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

Java

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

[Design] タブに戻って、[Root] をクリックすると、ルートグラフに戻ることができます。

<include> を使用して他のナビゲーショングラフを参照する

ナビゲーショングラフ内で他のグラフを参照するには、include を使用します。この方法はネストされたグラフを使用した場合と同じように機能しますが、include では他のプロジェクトモジュールまたはライブラリプロジェクトのグラフを使用できます。以下の例をご覧ください。

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

参考情報

ナビゲーションについて詳しくは、以下の参考情報をご確認ください。

ネストされたナビゲーション グラフ

Kotlin

Java

<include> を使用して他のナビゲーション グラフを参照する

参考情報

サンプル

Codelab

動画

ネストされたナビゲーショングラフ

<include> を使用して他のナビゲーショングラフを参照する