可以將一系列到達網頁分組至父導覽圖中的巢狀圖,該父導覽圖稱為根圖表。巢狀圖適合用來整理及重複使用應用程式 UI 的各個部分,例如獨立的登入流程。
巢狀圖會封裝其到達網頁。和根圖表一樣,巢狀圖必須具有一個標識為起始到達網頁的到達網頁。巢狀圖以外的到達網頁 (例如根圖表上的到達網頁) 只能透過其起始到達網頁存取巢狀圖。
圖 1 顯示簡易匯款應用程式的導覽圖。從左側的起始到達網頁開始,圖表中有兩個流程:一個位於頂部,用於匯款,另一個位於底部,用於查看帳戶餘額。

如要將到達網頁分組至巢狀圖,請執行下列步驟:
- 在導覽編輯器中,按住 Shift 鍵,然後點選想要加入巢狀圖的到達網頁。
按一下滑鼠右鍵以開啟內容選單,然後依序選取「Move to Nested Graph」(移至巢狀圖) >「New Graph」(新建圖表)。這些到達網頁會包含巢狀圖中。圖 2 顯示導覽編輯器中的巢狀圖:
圖 2.圖表編輯器中的巢狀圖 按一下巢狀圖。「Attributes」(屬性) 面板中會顯示以下屬性:
- 類型:包含「巢狀圖」
- 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>
其他資源
如要進一步瞭解導航,請參閱下列其他資源。