Содержание

• Что такое компонент архитектуры навигации?
• Добавление редактора навигации в Android Studio
• Зависимости проекта: фрагмент навигации и интерфейс навигации
• Получите визуальный обзор навигации вашего приложения
• Заполнение навигационной диаграммы: добавление пунктов назначения
• Обновление макетов ваших фрагментов
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Соединение пунктов назначения с действиями
• Хостинг навигационного графика
• Запуск переходов с помощью NavController
• Добавление дополнительной навигации
• Создание пользовательских анимаций перехода
• Завершение

Во время конференции ввода-вывода 2018 года Google анонсировал новый подход к разработке приложений для Android.

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

Хотя мысль о манипулировании всеми этими различными транзакциями фрагментов и жизненными циклами может показаться кошмаром, на вводе-выводе 2018 года Google также запустила компонент архитектуры навигации, который призван помочь вам принять такую ​​единственную структуру действий.

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

Что такое компонент архитектуры навигации?

Являясь частью Android JetPack, компонент Navigation Architecture помогает визуализировать различные маршруты через ваше приложение и упрощает процесс реализации этих маршрутов, особенно когда речь идет об управлении фрагментными транзакциями.

Чтобы использовать компонент «Навигация», вам необходимо создать «График навигации», который представляет собой XML-файл, описывающий, как действия и фрагменты вашего приложения связаны друг с другом.

Навигационный график состоит из:

• Направления: Отдельные экраны, на которые пользователь может перейти
• Действия: Маршруты, которые пользователь может выбрать между пунктами назначения вашего приложения

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

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

Однако компонент «Навигация» предназначен не только для приложений с такой рекомендуемой структурой. Проект может иметь несколько навигационных графиков, и вы можете использовать фрагменты и действия в качестве пунктов назначения в этих навигационных графиках. Если вы переносите большой, зрелый проект на компонент Navigation, вам может быть проще разделить навигационные потоки вашего приложения на группы, где каждая группа состоит из «основного» действия, некоторых связанных фрагментов и собственного графика навигации.

Добавление редактора навигации в Android Studio

Чтобы помочь вам получить максимальную отдачу от компонента «Навигация», Android Studio 3.2 Canary и выше имеет новый редактор навигации.

Чтобы включить этот редактор:

• Выберите «Android Studio> Настройки…» в строке меню Android Studio.
• В левом меню выберите «Эксперимент».
• Если он еще не выбран, установите флажок «Включить редактор навигации».

• Нажмите «ОК».
• Перезапустите Android Studio.

Зависимости проекта: фрагмент навигации и интерфейс навигации

Создайте новый проект с настройками по вашему выбору, затем откройте его файл build.gradle и добавьте навигационный фрагмент и навигационный интерфейс в качестве зависимостей проекта:

зависимостей {реализация fileTree (dir: libs, include:) реализация com.android.support:appcompat-v7:28.0.0 реализация com.android.support.constraint: constraint-layout: 1.1.3 // Добавить следующую // реализацию "android.arch.navigation: navigation-фрагмент: 1.0.0-alpha05" // Navigation-UI предоставляет доступ к некоторым вспомогательным функциям // реализация "android.arch.navigation: navigation-ui: 1.0.0-alpha05" com .android.support: support-v4: 28.0.0 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: эспрессо-ядро: 3.0.2 }

Получите визуальный обзор навигации вашего приложения

Чтобы создать навигационный график:

• Удерживая нажатой клавишу «Control», щелкните «res» в вашем проекте и выберите «Создать> Каталог ресурсов Android»
• Откройте раскрывающийся список «Тип ресурса» и выберите «Навигация».
• Выберите «ОК».
• Удерживая нажатой клавишу «Control», щелкните новый каталог «res / navigation» и выберите «Создать> Файл ресурсов навигации».
• Откройте раскрывающийся список «Тип ресурса» и выберите «Навигация».

• Дайте это имя файла; Я использую «nav_graph».
• Нажмите «ОК».

Откройте файл «res / navigation / nav_graph», и редактор навигации запустится автоматически. Как и в редакторе макетов, редактор навигации разделен на вкладки «Дизайн» и «Текст».

Если вы выберете вкладку «Текст», вы увидите следующий XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation ’является корневым узлом каждого навигационного графа //

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

Слева направо, редактор навигации состоит из:

• Список направлений: В этом списке перечислены все пункты назначения, которые составляют этот конкретный Навигационный граф, а также Деятельность, где размещен Навигационный граф.
• Редактор графиков: Графический редактор предоставляет визуальный обзор всех пунктов назначения графика и действий, связывающих их.
• Редактор атрибутов: Если вы выберете пункт назначения или действие в редакторе графиков, на панели «Атрибуты» отобразится информация о выбранном в данный момент элементе.

Заполнение навигационной диаграммы: добавление пунктов назначения

Наш навигационный график в настоящее время пуст. Давайте добавим несколько направлений.

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

• Нажмите кнопку «Новый пункт назначения» и выберите «Создать пустой пункт назначения».

• В поле «Имя фрагмента» введите имя класса вашего фрагмента; Я использую «Первый фрагмент».
• Убедитесь, что установлен флажок «Создать макет XML».
• Заполните поле «Имя макета фрагмента»; Я использую «фрагмент_первый».
• Нажмите «Готово».

Подкласс FirstFragment и соответствующий файл ресурсов макета «frag_first.xml» теперь будут добавлены в ваш проект. Первый фрагмент также будет отображаться в качестве пункта назначения на навигационном графике.

Если вы выберете FirstFragment в редакторе навигации, на панели «Атрибуты» будет отображаться некоторая информация об этом месте назначения, например, имя класса и идентификатор, который вы будете использовать для ссылки на это место назначения в другом месте кода.

Промойте и повторите, чтобы добавить SecondFragment и ThirdFragment в ваш проект.

Перейдите на вкладку «Текст», и вы увидите, что XML был обновлен с учетом этих изменений.

Каждый навигационный график имеет начальное назначение, то есть экран, который отображается, когда пользователь запускает ваше приложение. В приведенном выше коде мы используем FirstFragment в качестве начального пункта назначения нашего приложения. Если вы перейдете на вкладку «Дизайн», то заметите значок дома, который также помечает FirstFragment в качестве начального пункта назначения графа.

Если вы предпочитаете использовать другую начальную точку, выберите интересующее задание или фрагмент, а затем выберите «Задать начальный пункт назначения» на панели «Атрибуты».

Кроме того, вы можете сделать это изменение на уровне кода:

Обновление макетов ваших фрагментов

Теперь у нас есть пункты назначения, давайте добавим некоторые элементы пользовательского интерфейса, чтобы всегда было ясно, какой фрагмент мы сейчас просматриваем.

Я собираюсь добавить следующее к каждому фрагменту:

• TextView, который содержит заголовок фрагмента
• Кнопка, которая позволит пользователю перемещаться от одного фрагмента к следующему

Вот код для каждого файла ресурсов макета:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

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

Следующий шаг - связать наши пункты назначения с помощью действий.

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

• Убедитесь, что выбрана вкладка «Дизайн» редактора.
• Наведите указатель мыши на правую сторону пункта назначения, по которому вы хотите ориентироваться от, который в данном случае является FirstFragment. Круг должен появиться.
• Нажмите и перетащите курсор в пункт назначения, по которому вы хотите ориентироваться в, который является SecondFragment. Синяя линия должна появиться. Когда SecondFragment выделен синим цветом, отпустите курсор, чтобы создать связь между этими пунктами назначения.

Теперь должна быть стрелка действия, связывающая FirstFragment с SecondFragment. Нажмите, чтобы выбрать эту стрелку, и панель «Атрибут» обновится, чтобы отобразить некоторую информацию об этом действии, в том числе назначенный системой идентификатор.

Это изменение также отражено в XML навигационного графика:

… … …

Промойте и повторите, чтобы создать действие, связывающее SecondFragment с ThirdFragment, и действие, связывающее ThirdFragment с FirstFragment.

Хостинг навигационного графика

Навигационный график обеспечивает визуальное представление пунктов назначения и действий вашего приложения, но для вызова этих действий требуется дополнительный код.

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

Откройте файл «activity_main.xml» вашего проекта и добавьте фрагмент NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Создать фрагмент, который будет действовать как NavHostFragment //

В приведенном выше коде app: defaultNavHost = «true» позволяет узлу навигации перехватывать всякий раз, когда нажимается системная кнопка «Назад», поэтому приложение всегда учитывает навигацию, описанную в вашем графике навигации.

Запуск переходов с помощью NavController

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

Чтобы перейти на новый экран, вам нужно получить NavController с помощью Navigation.findNavController, вызвать метод navigate (), а затем передать либо идентификатор пункта назначения, к которому вы переходите, либо действие, которое вы хотите вызвать. Например, я вызываю «action_firstFragment_to_secondFragment», который будет переносить пользователя из FirstFragment во SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

Пользователь перейдет на новый экран, нажав кнопку, поэтому нам также нужно реализовать OnClickListener.

После внесения этих изменений FirstFragment должен выглядеть примерно так:

импорт android.os.Bundle; импорт android.support.annotation.NonNull; импорт android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; импорт android.view.View; импорт android.view.ViewGroup; импорт android.widget.Button; импорт androidx.navigation.NavController; импорт androidx.navigation.Navigation; открытый класс FirstFragment extends Fragment {public FirstFragment () {} {} @Override public void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (Inflater LayoutInflater, контейнер ViewGroup, Bundle saveInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (представление @NonNull View, @Nullable Bundle saveInstanceState) {Button button = (Кнопка) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_rament_ragment_raf_sement_raaction_raction_raction.ra.id. }}); }}

Затем откройте ваш MainActivity и добавьте следующее:

• NavigationView.OnNavigationItemSelectedListener: Слушатель для обработки событий на элементах навигации
• SecondFragment.OnFragmentInteractionListener: Интерфейс, который был создан при создании SecondFragment с помощью редактора навигации

MainActivity также необходимо реализовать метод onFragmentInteraction (), который обеспечивает связь между фрагментом и Activity.

import android.support.v7.app.AppCompatActivity; импорт android.os.Bundle; импорт android.net.Uri; импорт android.view.MenuItem; import android.support.design.widget.NavigationView; импорт android.support.annotation.NonNull; открытый класс MainActivity расширяет AppCompatActivity, реализует NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (BundlevedInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Добавление дополнительной навигации

Чтобы реализовать остальную часть навигации нашего приложения, нам просто нужно скопировать / вставить блок onViewCreated и сделать несколько настроек, чтобы мы ссылались на правильные виджеты кнопок и действия навигации.

Откройте свой второй фрагмент и добавьте следующее:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_rament_ragment_ragment_ragment.ragment.ragment.ragment_ragment_ragment_ragment.ragment.ragment.ragment.ragment.ragment_ragment_ragment_id_ragment_id_Fid_id_F_id_id_id_id_id_id_id_id_id_id_id_id) }}); }

Затем обновите блок onViewCreated ThirdFragment:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_raf_f_st_F_Rid_Fid_F_Rid_F_F_F_R_F_F_F_R_F_R_F_R_F_R_F) }}); }

Наконец, не забудьте добавить интерфейс ThirdFragment.OnFragmentInteractionListener в свой MainActivity:

Открытый класс MainActivity расширяет AppCompatActivity, реализует NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Запустите этот проект на своем устройстве Android или Android Virtual Device (AVD) и проверьте навигацию. Вы должны иметь возможность перемещаться между всеми тремя фрагментами, нажимая различные кнопки.

Создание пользовательских анимаций перехода

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

Каждая анимация, которую вы хотите использовать, должна быть определена в своем собственном файле ресурсов анимации внутри директории res / anim. Если в вашем проекте еще нет каталога res / anim, вам необходимо создать его:

• Удерживая клавишу Control, щелкните папку «res» вашего проекта и выберите «Создать> Каталог ресурсов Android».
• Дайте этому справочнику название «аним».
• Откройте раскрывающийся список «Тип ресурса» и выберите «Анимация».
• Нажмите «ОК».

Давайте начнем с определения анимации затухания:

• Удерживая нажатой клавишу «Control», щелкните «res / anim» в вашем проекте.
• Выберите «Создать> Файл ресурсов анимации».
• Дайте этому файлу имя «fade_out».
• Откройте файл «fade_out» и добавьте следующее:

Повторите вышеуказанные шаги, чтобы создать второй файл ресурсов анимации с именем «slide_out_left», затем добавьте следующее:

Создайте третий файл с именем «slide_out_right» и добавьте следующее:

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

• Откройте навигационный график и убедитесь, что выбрана вкладка «Дизайн».
• Нажмите, чтобы выбрать действие, которое связывает FirstFragment с SecondFragment.
• На панели «Атрибуты» щелкните, чтобы развернуть раздел «Переходы». По умолчанию для каждого раскрывающегося списка в этом разделе должно быть установлено значение «Нет».
• Откройте раскрывающийся список «Ввод», который управляет анимацией, которая воспроизводится при переходе SecondFragment в верхнюю часть заднего стека. Выберите анимацию «fade_out».

Если вы перейдете на вкладку «Дизайн», то увидите, что эта анимация была добавлена ​​в «action_firstFragment_to_secondFragment».

Запустите обновленный проект на устройстве Android или AVD. Теперь вы должны столкнуться с эффектом затухания при переходе от FirstFragment к SecondFragment.

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

• Выход: Анимация, которая воспроизводится, когда фрагмент покидает стек
• Pop Enter: Анимация, которая воспроизводится, когда фрагмент заполняет вершину стека.
• Pop Exit: Анимация, которая воспроизводится при переходе фрагмента в конец стека.

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

Завершение

В этой статье мы рассмотрели, как вы можете использовать компонент Архитектура навигации для создания приложения с одним фрагментом и несколькими фрагментами, дополненного пользовательскими анимациями перехода. Компонент Навигация убедил вас перевести ваши проекты в такую ​​структуру приложений? Дайте нам знать в комментариях ниже!