巢狀導覽圖

可以將一系列到達網頁分組至父導覽圖中的巢狀圖，該父導覽圖稱為根圖表。巢狀圖適合用來整理及重複使用應用程式 UI 的各個部分，例如獨立的登入流程。

巢狀圖會封裝其到達網頁。和根圖表一樣，巢狀圖必須具有一個標識為起始到達網頁的到達網頁。巢狀圖以外的到達網頁 (例如根圖表上的到達網頁) 只能透過其起始到達網頁存取巢狀圖。

圖 1 顯示簡易匯款應用程式的導覽圖。從左側的起始到達網頁開始，圖表中有兩個流程：一個位於頂部，用於匯款，另一個位於底部，用於查看帳戶餘額。

圖 1. 匯款導覽圖

如要將到達網頁分組至巢狀圖，請執行下列步驟：

  1. 在導覽編輯器中，按住 Shift 鍵，然後點選想要加入巢狀圖的到達網頁。

  2. 按一下滑鼠右鍵以開啟內容選單，然後依序選取「Move to Nested Graph」(移至巢狀圖) >「New Graph」(新建圖表)。這些到達網頁會包含巢狀圖中。圖 2 顯示導覽編輯器中的巢狀圖：

    圖 2.圖表編輯器中的巢狀圖

  3. 按一下巢狀圖。「Attributes」(屬性) 面板中會顯示以下屬性：

    • 類型：包含「巢狀圖」
    • 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>

其他資源

如要進一步瞭解導航，請參閱下列其他資源。

範例

程式碼研究室

影片