Редактор навигации

Android Studio содержит графический интерфейс пользователя, позволяющий создавать и редактировать навигационную цепочку. По сути, это редактор для базового XML-файла ресурсов.

Обзор

После добавления XML-графа в приложение Android Studio откроет его в редакторе навигации . В редакторе навигации вы можете визуально редактировать навигационные графы или напрямую редактировать соответствующий XML-код.

Рисунок 1. Редактор навигации
  1. Панель «Направления» : отображает ваш навигационный хост и все пункты назначения в редакторе графиков .
  2. Редактор графиков : содержит визуальное представление вашего навигационного графика. Вы можете переключаться между режимом проектирования и базовым XML-представлением в текстовом режиме.
  3. Атрибуты : Отображает атрибуты выбранного элемента в навигационном графе.

Чтобы просмотреть соответствующий 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> здесь в качестве дочерних элементов. Если у вас есть [вложенные графы][2], они отображаются как дочерние элементы <navigation> .

Добавить пункты назначения

Вы можете создать целевую страницу на основе существующего фрагмента или действия. Также вы можете использовать редактор навигации для создания новой целевой страницы или создания заполнителя, который позже можно будет заменить фрагментом или действием.

В этом примере показано, как создать новый пункт назначения. Чтобы добавить новый пункт назначения с помощью редактора навигации, выполните следующие действия:

  1. В редакторе навигации щелкните значок «Новое место назначения» . а затем нажмите «Создать новое место назначения» .
  2. В появившемся диалоговом окне «Новый компонент Android» создайте свой фрагмент. Дополнительную информацию о фрагментах см. в [обзоре фрагментов][3].

Вернувшись в редактор навигации, обратите внимание, что Android Studio добавила этот пункт назначения на график.

На рисунке 2 показан пример пункта назначения и [пункт назначения-заполнитель][4].

Рисунок 2. Пункт назначения и место для ввода текста.

Другие способы добавления пунктов назначения в навигационную сеть см. в разделе [Дополнительные пункты назначения][5].

Создайте целевой объект на основе существующего фрагмента или действия.

В редакторе навигации, если у вас уже есть тип пункта назначения, который вы хотите добавить в свою навигационную схему, нажмите кнопку «Новый пункт назначения». .

Далее щелкните по соответствующему пункту назначения в появившемся раскрывающемся списке. Теперь вы можете увидеть предварительный просмотр пункта назначения в режиме проектирования , а также соответствующий XML-код в текстовом режиме вашей навигационной диаграммы.

Создайте новый целевой фрагмент.

Чтобы добавить новый тип пункта назначения с помощью редактора навигации, выполните следующие действия:

  1. В редакторе навигации щелкните значок «Новое место назначения» . .

    Далее нажмите «Создать новое место назначения» .

  2. В появившемся диалоговом окне «Новый компонент Android» создайте свой фрагмент.

Вернувшись в редактор навигации, обратите внимание, что Android Studio добавила этот пункт назначения на график.

На рисунке 3 показан пример пункта назначения и [пункт назначения-заполнитель][2].

Рисунок 3. Пункт назначения и место для ввода текста.

Анатомия места назначения

Щелкните по нужному месту назначения, чтобы выбрать его, и обратите внимание на следующие параметры в панели «Параметры» :

  • Поле «Тип» указывает, реализован ли целевой объект в вашем исходном коде как фрагмент, активность или другой пользовательский класс.
  • Поле «Метка» содержит удобочитаемое пользователем имя пункта назначения. Оно может отображаться в пользовательском интерфейсе — например, если вы подключаете [ NavGraph ][10] к Toolbar с помощью [ setupWithNavController() ][11]. По этой причине используйте строковые ресурсы для этого значения.
  • Поле 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>

Вы также можете использовать [редактор макетов][1] для добавления NavHostFragment в активность, выполнив следующие действия:

  1. В списке файлов проекта дважды щелкните XML-файл макета вашей активности, чтобы открыть его в редакторе макетов.
  2. В панели «Палитра» выберите категорию «Контейнеры» ; или же найдите «NavHostFragment».
  3. Перетащите представление NavHostFragment на вашу активность.
  4. В появившемся диалоговом окне «Графики навигации» выберите соответствующий граф навигации, который нужно связать с этим NavHostFragment , а затем нажмите кнопку ОК .

Соединяйте пункты назначения

Действие — это логическая связь между пунктами назначения. Действия отображаются в навигационном графе в виде стрелок. Действия обычно соединяют один пункт назначения с другим, хотя вы также можете создавать [глобальные действия][6], которые перенаправят вас к определенному пункту назначения из любой точки вашего приложения.

Действия (actions) представляют различные пути, по которым пользователи могут перемещаться по вашему приложению. Обратите внимание, что для фактической навигации к пунктам назначения вам все равно потребуется написать код для выполнения навигации.

С помощью редактора навигации можно соединить два пункта назначения, выполнив следующие действия:

  1. На вкладке «Дизайн» наведите указатель мыши на правую сторону пункта назначения, с которого вы хотите перенаправить пользователей. Справа от пункта назначения появится кружок, как показано на рисунке 4.

    Рисунок 4. Пункт назначения с кругом связи действий.

  2. Перетащите курсор на пункт назначения, куда вы хотите перенаправить пользователей, и отпустите. Образовавшаяся линия между двумя пунктами назначения обозначает действие, как показано на рисунке 5.

    Рисунок 5. Соединение пунктов назначения с действием.

  3. Нажмите стрелку, чтобы выделить действие. На панели «Атрибуты» отобразятся следующие параметры:

    • В поле « Тип» указано «Действие».
    • Поле ID содержит идентификатор действия.
    • Поле «Назначение» содержит идентификатор целевого фрагмента или действия.

  4. Щелкните вкладку «Текст» , чтобы переключиться в XML-представление. Теперь к целевому объекту добавлен элемент действия. Элемент действия имеет идентификатор и атрибут назначения, содержащий идентификатор следующего целевого объекта, как показано в следующем примере:

    <?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 пункта назначения, на который должен быть перенаправлен пользователь.

Пункты назначения-заглушки

Для обозначения нереализованных пунктов назначения можно использовать заполнители . Заполнитель служит визуальным представлением пункта назначения. В редакторе навигации вы можете использовать заполнители так же, как и любые другие пункты назначения.

[1]: /studio/write/layout-editor [2]: /guide/navigation/navigation-nested-graphs [3]: /guide/components/fragments [4]: ​​/guide/navigation/navigation-create-destinations#placeholders [5]: /guide/navigation/navigation-create-destinations [6]: /guide/navigation/navigation-global-action [10]: /reference/androidx/navigation/NavGraph [11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)