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 所示。
將遊標拖曳至要讓使用者前往並放開的目的地。兩個目的地之間產生的線條代表一項動作,如圖 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,這個目的地是指要將使用者帶往的頁面。
預留位置目的地
您可以使用預留位置來表示未實作的目的地。預留位置是做為目的地的視覺表示。在導覽編輯器中,您可以使用預留位置,與任何其他目的地一樣。