导航编辑器

Android Studio 包含一个 GUI，允许您创建和编辑导航图。这实际上是底层 XML 资源文件的编辑器。

概述

将 XML 图添加到您的应用后，Android Studio 会在导航编辑器中打开该图。在导航编辑器中，您可以可视化地编辑导航图或直接编辑底层 XML。

目标面板：列出您的导航主机和图编辑器中的所有目标。
图编辑器：包含导航图的可视化表示。您可以在设计视图和底层 XML 表示（在文本视图中）之间切换。
属性：显示导航图中所选项目的属性。

单击文本选项卡以查看相应的 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>元素。

添加目标

您可以从现有的片段或活动创建目标。您还可以使用导航编辑器创建新目标或创建占位符，以后再替换为片段或活动。

此示例演示如何创建新目标。要使用导航编辑器添加新目标，请执行以下操作

在导航编辑器中，单击新建目标图标，然后单击创建新目标。
在出现的新建 Android 组件对话框中，创建您的片段。有关片段的更多信息，请参阅片段概述。

返回导航编辑器，注意 Android Studio 已将此目标添加到图中。

图 2 显示了目标和占位符目标的示例。

有关向导航图添加目标的其他方法，请参阅其他目标。

从现有的片段或活动创建目标

在导航编辑器中，如果您有要添加到导航图的现有目标类型，请单击新建目标。

接下来，单击出现的下拉菜单中相应的目标。您现在可以在设计视图中看到目标的预览，以及导航图的文本视图中相应的 XML。

创建新的片段目标

要使用导航编辑器添加新的目标类型，请执行以下操作

在导航编辑器中，单击新建目标图标。

接下来，单击创建新目标。
在出现的新建 Android 组件对话框中，创建您的片段。

返回导航编辑器，注意 Android Studio 已将此目标添加到图中。

图 3 显示了目标和占位符目标的示例。

目标的构成

单击目标以选择它，并注意属性面板中的以下属性

类型字段指示目标是在源代码中作为片段、活动还是其他自定义类实现的。
标签字段包含目标的用户可读名称。这可能会显示在 UI 中，例如，如果您使用setupWithNavController()将NavGraph连接到Toolbar。因此，请为此值使用资源字符串。
ID 字段包含目标 ID，用于在代码中引用目标。
类下拉菜单显示与目标关联的类的名称。单击此下拉菜单可将关联的类更改为其他目标类型。

单击文本选项卡以显示导航图的 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 文件，在布局编辑器中打开它。
在调色板窗格中，选择容器类别；或者，搜索“NavHostFragment”。
将NavHostFragment视图拖动到您的活动中。
在出现的导航图对话框中，选择要与此NavHostFragment关联的相应导航图，然后单击确定。

连接目标

操作是目标之间的逻辑连接。操作在导航图中以箭头表示。操作通常将一个目标连接到另一个目标，但您也可以创建全局操作，这些操作可以将您从应用程序的任何位置带到特定目标。

使用操作，您可以表示用户可以在应用程序中采取的不同路径。请注意，要实际导航到目标，您仍然需要编写执行导航的代码。

您可以使用导航编辑器通过执行以下操作连接两个目标

在设计选项卡中，将指针悬停在您希望用户从中导航的目标的右侧。目标的右侧会出现一个圆圈，如图 4 所示。

图 4. 带有操作连接圆圈的目标
将光标拖动到您希望用户导航到的目标上，然后释放。两个目标之间的结果线表示一个操作，如图 5 所示。

图 5. 使用操作连接目标
单击箭头以突出显示操作。以下属性将出现在属性面板中
- 类型字段包含“操作”。
- ID字段包含操作的 ID。
- 目标字段包含目标片段或活动的 ID。

单击文本选项卡以切换到 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。

占位符目标

您可以使用占位符来表示未实现的目标。占位符用作目标的视觉表示。在导航编辑器中，您可以像使用任何其他目标一样使用占位符。