巢狀導覽圖

可以將一系列到達網頁分組至父導覽圖中的巢狀圖,該父導覽圖稱為根圖表。巢狀圖適合用來整理及重複使用應用程式 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>

其他資源

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

範例

程式碼研究室

影片