Реализация навигации в Android приложениях с помощью Navigation Architecture Component

Архитектурный компонент

Архитектурный компонент Navigation позволяет упростить реализацию навигации между экранами назначения (destinations) в вашем приложении. По умолчанию, Navigation поддерживает фрагменты (Fragments) и активности (Activities) в качестве экранов назначения, но вы также можете добавить поддержку новых типов экранов назначения. Набор экранов назначения называется навигационным графом (navigation graph) приложения.

Помимо экранов назначения на навигационном графе есть соединения между ними, называемые действиями (actions). Рисунок 1 демонстрирует визуальное представление навигационного графа для простого приложения из шести экранов назначения, соединённых пятью действиями.

Рисунок 1. Навигационный граф

Архитектурный компонент Navigation реализован на основе Principles of navigation.

Если вы хотите использовать архитектурный компонент Navigation в Android Studio, то вам необходима версия Android Studio 3.2 Canary 14 или выше.

Настройка проекта с поддержкой Navigation

Прежде чем вам будет доступно создание навигационного графа, нужно настроить Navigation для вашего проекта. Для этого проделайте следующие шаги.

  • Добавьте поддержку Navigation в файле build.gradle (Module: app – Прим. переводчика). Для подробной информации изучите Adding components to your project.
    Прим. переводчика: Лучше не полениться и перейти по ссылке выше, так как проект активно развивается и зависимости точно будут меняться:
dependencies {
def nav_version = "1.0.0-alpha05"

// use -ktx for Kotlin
implementation "android.arch.navigation:navigation-fragment:$nav_version"
// use -ktx for Kotlin
implementation "android.arch.navigation:navigation-ui:$nav_version" 

// optional - Test helpers
// use -ktx for Kotlin
androidTestImplementation "android.arch.navigation:navigation-testing:$nav_version"
}
  • В окне проекта кликните ПКМ на папке res и выберете New > Android resource file.
    Откроется диалоговое окно New Resource.
  • Введите имя файла, например «nav_graph«.
  • Выберете Navigation из выпадающего списка Resource type.
  • Кликните OK. Произойдёт следующее:
    • В директории res появится поддиректория navigation.
    • В директории navigation появится файл nav_graph.xml.
    • Файл nav_graph.xml откроется в редакторе Navigation Editor. Этот файл содержит ваш навигационный граф.
  • Выберете режим редактирования Text. XML файл для пустого навигационного графа выглядит так:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android">
</navigation>

Выберете режим редактирования Design чтобы вернуться в Navigation Editor.
Прим. переводчика: если Navigation Editor не отображает граф, изучите начало следующего абзаца, выделенное жёлтым цветом.

Обзор Navigation Editor

Navigation Editor доступен по умолчанию только в Canary сборках Android Studio. Чтобы использовать Navigation Editor в Beta, Release Candidate, или Stable сборках перейдите в File > Settings (Android Studio > Preferences для Mac), выберете категорию Experimental, отметьте галочкой Enable Navigation Editor, и перезагрузите Android Studio.
Прим. переводчика: рекомендую независимо от сборки проверить, стоит ли эта галочка.

В Navigation Editor вы можете быстро создавать навигационные графы вместо написания XML. Как показано на рисунке 2, Navigation Editor имеет три раздела:

Рисунок 2. Navigation Editor

Описание разделов:

  1. Список экранов назначения – отображает все экраны назначения, добавленные в граф
  2. Редактор графа – содержит визуальное представление вашего графа
  3. Редактор атрибутов – содержит атрибуты и действия экранов назначения

Определение экранов назначения

Первый шаг в создании навигационного графа это определение экранов назначений для вашего приложения. Вы можете создать пустой экран назначения или использовать фрагменты и активности из текущего проекта.

Архитектурный компонент Navigation разработан для приложений, которые имеют одну главную активность (Main Activity – Прим. переводчика) с множеством фрагментов, которые используются как экраны назначения. Главная активность является «хостом» для навигационного графа. В приложении с множеством активностей, каждая из них будет являться хостом для разных навигационных графов. Превращение активности в хост для навигационного графа описано далее в документе.

Чтобы определить экран назначения для вашего приложения, выполните следующие шаги.

  • В редакторе графов кликните New Destination . Откроется диалоговое окно New Destination.
  • Кликните Create blank destination или выберете существующий фрагмент или активность. Откроется диалоговое окно Android Component.
  • Введите имя в поле Fragment Name. Оно должно совпадать с именем класса этого фрагмента.
  • Введите имя в поле Fragment Layout Name. Это имя будет присвоено layout файлу фрагмента.
  • Нажмите Finish. В списке экранов назначения появится строка с именем нового экрана назначения, а сам экран назначения появится в редакторе графа. Более детально:
    • Редактор графа отображает предпросмотр экрана назначения. Если вы создали пустой экран назначения, новый фрагмент будет содержать надпись “Hello blank fragment”, и эту же надпись вы увидите в редакторе графа. Если вы выбрали существующий фрагмент или активность, то граф будет отображать его миниатюрный вариант.
    • Если вы создали пустой экран назначения, то для него будет сгенерирован класс. Имя класса будет соответствовать имени, заданному в шаге 3.
    • Если вы создали пустой экран назначения, то для него будет сгенерирован layout файл. Имя файла будет соответствовать имени, заданному в шаге 4.
      Рисунок 3 демонстрирует пустой и существующий экран назначения.
  • Рисунок 3. Новый и существующий экран назначения.
  • Кликните на только что созданный экран назначения чтобы выделить его. Панель атрибутов содержит следующие атрибуты:
    • Поле Type может иметь значения «Fragment» или «Activity» для отображения того, как экран назначения реализован в исходном коде: как фрагмент или как активность.
    • Поле Label содержит имя XML файла экрана назначения.
    • Поле ID содержит ID экрана назначения (как самостоятельной сущности – Прим. переводчика), которое используется для ссылки на него в исходном коде (через R.id – Прим. переводчика).
    • Поле Class содержит имя класса экрана назначения (с указанием всех пакетов – Прим. переводчика).
  • Перейдите в режим редактирования Text чтобы переключиться на просмотр XML. Теперь XML содержит атрибуты id, name (имя класса), label, и layout, отображающие имена существующих классов и 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="Blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

XML содержит атрибут startDestination содержащий id пустого экрана назначения (app:startDestination=»@+id/fragment»). Для большей информации по стартовому экрану назначения изучите раздел Стартовый экран назначения.

Соединение экранов назначения

В вашем приложении должно быть больше одного экрана назначения чтобы соединять их. Ниже описан 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="fragment_blank"
        tools:layout="@layout/fragment_blank" />
    <fragment
        android:id="@+id/blankFragment2"
        android:name="com.example.cashdog.cashdog.BlankFragment2"
        android:label="Blank2"
        tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

Экраны назначения соединяются при помощи действий. Чтобы соединить два экрана назначения нужно:

  • В редакторе графа наведите курсор на экран назначения от которого нужно совершить переход. На нём появится круг.
Рисунок 4. Круг соединения действия

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

4 + = 7

Заказать звонок
+
Жду звонка!
56555431