6 月 3 日の「#Android11: The Beta Launch Show」にぜひご参加ください。

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

デスティネーション間に階層構造がある場合、「ルートグラフ」と呼ばれる親ナビゲーション グラフ内の「ネストグラフ」としてグループ化できます。ネストグラフは、自己完結型のログインフローなど、アプリの UI 内の各セクションを整理し、再利用するうえで役立ちます。

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

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

図 1: 送金ナビゲーション グラフ

デスティネーションをネストグラフにグループ化するには:

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

    図 2: グラフエディタ内のネストグラフ
  3. ネストグラフをクリックします。次の属性が [Attributes] パネルに表示されます。

    • Type - 「Nested Graph」が格納されます。
    • ID - ネストグラフに対してシステムが割り当てた ID が格納されます。この ID を使用して、コードからネストグラフを参照できます。
  4. ネストグラフをダブルクリックすると、デスティネーションが表示されます。

  5. [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>
        
  6. コード内で、ルートグラフとネストグラフを接続するアクションのリソース ID を渡します。

    Kotlin

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

    Java

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

  7. [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>
    

参考リンク

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

サンプル

コードラボ

動画