本頁面由 Cloud Translation API 翻譯而成。

Navigation 編輯器

Android Studio 提供 GUI，可用於建立及編輯導覽圖。基本上，這是基礎 XML 資源檔案的編輯器。

總覽

將 XML 圖表新增至應用程式後，Android Studio 會在導覽編輯器中開啟圖表。在導覽編輯器中，您可以直接編輯導覽圖或直接編輯基礎 XML。

目的地面板：在圖表編輯器中列出導覽主機和所有目的地。
圖表編輯器：包含導覽圖表的示意圖。您可以在「Text」檢視畫面中，切換使用「Design」檢視畫面和基礎 XML 表示法。
屬性：顯示導覽圖表中所選項目的屬性。

按一下「Text」分頁標籤，即可查看對應的 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"
            android:id="@+id/nav_graph">

</navigation>

<navigation> 元素是導覽圖的根元素。新增目的地和連結操作至圖表時，您可以在這裡看到對應的 <destination> 和 <action> 元素做為子項元素。如果您有巢狀圖表，則這些圖表會顯示為子項 <navigation> 元素。

新增目的地

您可以透過現有的片段或活動建立目的地。您也可以使用 Navigation 編輯器來建立新的目的地，或是建立預留位置，以便日後替換成片段或活動。

這個範例說明如何建立新的目的地。如要使用導覽編輯器新增目的地，請按照下列步驟操作：

在導覽編輯器中，按一下「新增到達網頁」圖示，然後按一下「建立新的到達網頁」。
在隨即顯示的「New Android Component」對話方塊中建立片段。如要進一步瞭解片段，請參閱片段總覽。

返回 Navigation 編輯器，請注意 Android Studio 已將這個目的地新增至圖表。

圖 2 是目的地和預留位置目的地的範例。

如要瞭解如何將其他目的地新增至導覽圖表，請參閱「其他目的地」一文。

從現有片段或活動建立目的地

在導覽編輯器中，如果已有想要新增至導覽圖的現有目的地類型，請按一下「New Destination」圖示。

接著，在隨即顯示的下拉式選單中按一下對應的目的地。您現在可以在「Design」檢視畫面中預覽目的地，並在導覽圖的「Text」檢視畫面中查看對應的 XML。

建立新的片段目的地

若要使用導覽編輯器新增目的地類型，請執行下列操作：

在導覽編輯器中，按一下「新增到達網頁」圖示。

接著，按一下「建立新的目的地」。
在隨即顯示的「New Android Component」對話方塊中，建立片段。

返回 Navigation 編輯器，請注意 Android Studio 已將這個目的地新增至圖表。

圖 3 是目的地和預留位置目的地的範例。

到達網頁架構

按一下到達網頁加以選取，並注意「Attributes」(屬性) 面板中的下列屬性：

「Type」欄位會指出目的地在原始碼中是以片段、活動或其他自訂類別完成實作。
「Label」(標籤) 欄位包含到達網頁的使用者可讀取名稱。這可能會顯示在使用者介面中，舉例來說，如果您使用 setupWithNavController() 連結 NavGraph 到 Toolbar，就可能會這樣。因此，請為這個值使用資源字串。
「ID」欄位包含目的地 ID，用來在程式碼中參照到達網頁。
「Class」下拉式選單會顯示與目的地相關聯的類別名稱。點選這個下拉式選單，將相關類別變更為其他目的地類型。

按一下「Text」分頁標籤，顯示導覽圖的 XML 檢視畫面。XML 包含與目的地相同的 id、name、label 和 layout 屬性，如以下程式碼片段所示：

<?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/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

NavHostFragment

您也可以使用版面配置編輯器，在活動中新增 NavHostFragment，方法如下：

在專案檔案清單中，按兩下活動的版面配置 XML 檔案，即可在版面配置編輯器中開啟檔案。
在「Palette」窗格中，選擇「Containers」類別，另一種做法是搜尋「NavHostFragment」。
將 NavHostFragment 資料檢視拖曳到你的活動上。
在隨即顯示的「Navigation Graphs」(導覽圖表) 對話方塊中，選擇與這個 NavHostFragment 建立關聯的對應導覽圖表，然後按一下「OK」(確定)。

連結到達網頁

「操作」是指到達網頁之間的邏輯連結。在導覽圖中，這類動作是以箭頭表示。操作通常會將到達網頁連結至其他到達網頁，但您也可以建立通用操作，從應用程式的任何位置前往特定到達網頁。

透過動作，您可以代表使用者在應用程式上採取的不同路徑。請注意，如要前往目的地，您還是需要編寫程式碼來執行導覽。

您可以使用導覽編輯器連結兩個到達網頁，方法如下：

在「Design」分頁中，將遊標懸停在要讓使用者前往的目的地右側。圓圈會顯示在目的地的右側，如圖 4 所示。

圖 4.到達網頁含有操作連線圈
將遊標拖曳至要讓使用者前往並放開的目的地。兩個目的地之間產生的線條代表一項動作，如圖 5 所示。

圖 5 將操作連結至到達網頁
按一下箭頭醒目顯示動作。「Attributes」面板中會顯示下列屬性：
- 「Type」(類型) 欄位包含「Action」(操作)。
- 「ID」欄位包含操作的 ID。
- 「Destination」欄位包含目的地片段或活動的 ID。

按一下「Text」分頁標籤，切換至 XML 檢視畫面。現已在來源到達網頁中新增操作元素。動作具有 ID 和目的地屬性，該屬性包含下一個目的地的 ID，如以下範例所示：

<?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/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

在導覽圖表中，操作是以 <action> 元素表示。動作應至少包含本身的 ID 和目的地 ID，這個目的地是指要將使用者帶往的頁面。

預留位置目的地

您可以使用預留位置來表示未實作的目的地。預留位置是做為目的地的視覺表示。在導覽編輯器中，您可以使用預留位置，與任何其他目的地一樣。