Зміст

• Що таке компонент архітектури навігації?
• Додавання редактора навігації до Android Studio
• Залежності проекту: фрагмент навігації та інтерфейс навігації
• Отримайте наочний огляд навігації вашого додатка
• Нарахування графіку навігації: додавання пунктів призначення
• Оновлення макетів ваших фрагментів
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Поєднання пунктів призначення з діями
• Розміщення навігаційної графіки
• Запуск переходів за допомогою NavController
• Додавання додаткової навігації
• Створення власної анімації переходу
• Підведенню

Під час конференції вводу-виводу 2018 року компанія Google оголосила про новий підхід до розробки програм для Android.

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

Хоча думка жонглювати усіма цими транзакціями з різними фрагментами та життєвими циклами може здатися кошмаром, на I / O 2018 Google також запустив компонент навігаційної архітектури, який призначений допомогти вам прийняти таку єдину структуру діяльності.

У цій статті ми покажемо вам, як додати компонент навігації до свого проекту та як за допомогою нього можна швидко та легко створити одноактивну, багатофрагментну програму за допомогою невеликої допомоги нового навігаційного редактора Android Studio. Після створення та підключення фрагментів ми вдосконалимо стандартні переходи фрагментів Android, використовуючи навігаційний компонент та Редактор, щоб створити цілий спектр повністю настроюваних анімацій переходу.

Що таке компонент архітектури навігації?

Частина Android JetPack, компонент навігаційної архітектури, допомагає візуалізувати різні маршрути через ваше додаток та спрощує процес реалізації цих маршрутів, особливо якщо мова йде про управління фрагментами транзакцій.

Щоб використовувати компонент Навігація, вам потрібно створити графік навігації, що представляє собою XML-файл, який описує взаємозв'язок діяльності та фрагментів вашого додатка один з одним.

Навігаційна графіка складається з:

• Напрямки: Окремі екрани, до яких користувач може переходити
• Дії: Маршрути, які користувач може пройти між пунктами призначення вашого додатка

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

Компонент Навігація розроблений, щоб допомогти вам реалізувати нову рекомендовану структуру додатків Google, де одна активність “розміщує” Навігаційну графіку, а всі ваші пункти призначення реалізовані у вигляді фрагментів. У цій статті ми будемо дотримуватися цього рекомендованого підходу та створивши додаток, який складається з MainActivity та трьох фрагментів призначення.

Однак компонент Навігація призначений не лише для додатків із такою рекомендованою структурою. Проект може мати декілька навігаційних графіків, а фрагменти та дії можна використовувати як пункти призначення в межах цих навігаційних графіків. Якщо ви переносите великий, зрілий проект на компонент Навігація, вам може бути простіше розділити навігаційні потоки вашого додатка на групи, де кожна група складається з "основної" діяльності, деяких пов’язаних фрагментів та власної навігаційної графіки.

Додавання редактора навігації до Android Studio

Щоб допомогти вам максимально використати компонент Навігація, Android Studio 3.2 Canary та новіші номери мають новий Редактор навігації.

Щоб увімкнути цей редактор:

• Виберіть "Android Studio> Налаштування ..." на панелі меню Android Studio.
• У меню зліва виберіть "Експериментальне".
• Якщо його ще не встановлено, установіть прапорець "Увімкнути редактор навігації".

• Натисніть «ОК».
• Перезапустіть Android Studio.

Залежності проекту: фрагмент навігації та інтерфейс навігації

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

залежності: {file 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-fragment: 1.0.0-alpha05" // Navigation-UI забезпечує доступ до деяких допоміжних функцій // виконання "android.arch.navigation: navigation-ui: 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: espresso-core: 3.0.2 }

Отримайте наочний огляд навігації вашого додатка

Щоб створити графік навігації:

• Клацніть клавішею управління і натисніть каталог "res" вашого проекту та виберіть "New> Каталог ресурсів Android".
• Відкрийте спадне меню "Тип ресурсу" та виберіть "навігація".
• Виберіть "OK".
• Клацніть клавішею миші новий каталог "res / navigation" та виберіть "New> file resource file".
• Відкрийте спадне меню "Тип ресурсу" та виберіть "Навігація".

• Дайте ім'я цього файлу; Я використовую "nav_graph".
• Натисніть «ОК».

Відкрийте файл «res / navigation / nav_graph», і редактор навігації запуститься автоматично. Подібно до редактора макетів, Редактор навігації розділений на вкладки «Дизайн» та «Текст».

Якщо ви виберете вкладку "Текст", ви побачите наступний XML:

<? xml version = "1.0" encoding = "utf-8"?> // Навігація "є кореневим вузлом кожного навігаційного графіка //

На вкладці "Дизайн" ви зможете візуально створювати та редагувати навігацію свого додатка.

Зліва направо на право Редактор навігації складається з:

• Список призначення: У цьому списку перераховані всі пункти призначення, які складають даний конкретний графік навігації, а також активність, де розміщена навігаційна графіка
• Графічний редактор: Редактор графіків надає візуальний огляд усіх цілей графіка та дій, що їх пов’язують.
• Редактор атрибутів: Якщо ви обрали призначення або дію в Редакторі графіків, на панелі «Атрибути» відображатиметься інформація про вибраний на даний момент елемент.

Нарахування графіку навігації: додавання пунктів призначення

Наш навігаційний графік наразі порожній. Додамо кілька напрямків.

Ви можете додати активність або фрагменти, які вже існують, але ви також можете скористатися Навігаційною графікою для швидкого та легкого створення нових фрагментів:

• Натисніть кнопку "Нове призначення" та виберіть "Створити порожнє місце призначення".

• У полі "Ім'я фрагмента" введіть назву класу вашого фрагмента; Я використовую "FirstFragment".
• Переконайтесь, що встановлено прапорець "Створити макет XML".
• Заповніть поле «Назва макета фрагмента»; Я використовую "fragment_first".
• Натисніть «Готово».

Підклас FirstFragment та відповідний файл ресурсу макета fragment_first.xml тепер будуть додані до вашого проекту. FirstFragment також відображатиметься як пункт призначення в навігаційній графіці.

Якщо ви вибрали 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 //

У наведеному вище коді програма: 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; імпортувати android.support.v4.app.Fragment; імпорт android.view.LayoutInflater; імпортувати android.view.View; імпортувати android.view.ViewGroup; імпортувати android.widget.Button; імпорт androidx.navigation.NavController; імпорт androidx.navigation.Navigation; публічний клас FirstFragment розширює фрагмент {public FirstFragment () {} @Override public void onCreate (пакет збереженихInstanceState) {super.onCreate (збереженийInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (надувальник LayoutInflater, контейнер ViewGroup, Bundle saveInstanceState) {return inflater.inflate (R.layout.fragment_first, контейнер, false); } @Override public void onViewCreate (@NonNull View view, @Nullable Bundle saveInstanceState) {Кнопка кнопки = (Кнопка) view.findViewById (R.id.button); button.setOnClickListener (новий View.OnClickListener () {@Override public void onClick (Переглянути v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment_irst_nagment_gegment (f) }}); }}

Далі відкрийте свою MainActivity та додайте наступне:

• NavigationView.OnNavigationItemSelectedListener: Слухач для обробки подій на елементах навігації
• SecondFragment.OnFragmentInteractionListener: Інтерфейс, який був створений під час створення SecondFragment за допомогою редактора навігації

MainActivity також потребує впровадження методу onFragmentInteraction (), який дозволяє зв’язок між фрагментом та Activity.

імпортувати android.support.v7.app.AppCompatActivity; імпортувати android.os.Bundle; імпорт android.net.Uri; імпортувати android.view.MenuItem; імпортувати android.support.design.widget.NavigationView; імпортувати android.support.annotation.NonNull; загальнодоступний клас MainActivity розширює AppCompatActivity реалізує NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override, захищений недійсним onCreate (пакет збереженихInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (пункт @NonNull MenuItem) {return false; } @ Override public void onFragmentInteraction (Uri uri) {}}

Додавання додаткової навігації

Щоб реалізувати решту навігації нашої програми, нам просто потрібно скопіювати / вставити блок onViewCreate і зробити кілька налаштувань, щоб ми посилалися на правильні кнопкові віджети та дії навігації.

Відкрийте SecondFragment і додайте наступне:

@Override public void onViewCreate (перегляд @NonNull View, @Nullable Bundle saveInstanceState) {Кнопка кнопки = (Кнопка) view.findViewById (R.id.button2); button.setOnClickListener (новий View.OnClickListener () {@Override public void onClick (Переглянути v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment_vanth_ragment_nagment_ (fragment) }}); }

Потім оновіть блок ThirdFragment onViewCreate:

@Override public void onViewCreate (перегляд @NonNull View, @Nullable Bundle saveInstanceState) {Кнопка кнопки = (Кнопка) view.findViewById (R.id.button3); button.setOnClickListener (новий View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment (fr). }}); }

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

публічний клас MainActivity розширює AppCompatActivity реалізує NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Запустіть цей проект на своєму пристрої Android або віртуальному пристрої Android (AVD) і протестуйте навігацію. Ви повинні мати можливість переходити між усіма трьома фрагментами, натискаючи різні кнопки.

Створення власної анімації переходу

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

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

• Клацніть клавішею "Res" для папки вашого проекту та виберіть "New> Каталог ресурсів Android".
• Дайте цій Директорії назву "анімація".
• Відкрийте спадне меню "Тип ресурсу" та виберіть "анімація".
• Натисніть «ОК».

Почнемо з визначення анімації зникаючої:

• Клацніть по клавіші управління «res / anim» у вашому проекті.
• Виберіть "Створити> Файл ресурсів анімації".
• Дайте цьому файлу ім'я "fade_out."
• Відкрийте файл "fade_out" і додайте наступне:

Повторіть описані вище дії, щоб створити другий файл ресурсу анімації, названий "slide_out_left", а потім додайте наступне:

Створіть третій файл з назвою "slide_out_right" і додайте наступне:

Тепер ви можете призначити ці анімації своїм діям за допомогою Редактора навігації.Щоб відтворити анімацію зникнення, коли користувач переходить від FirstFragment до SecondFragment:

• Відкрийте графік навігації та переконайтесь, що вибрана вкладка «Дизайн».
• Клацніть, щоб вибрати дію, яка пов'язує FirstFragment з SecondFragment.
• На панелі «Атрибути» натисніть, щоб розгорнути розділ «Переходи». За замовчуванням для кожного випадаючого в цьому розділі слід встановити значення "Ні".
• Відкрийте спадне меню "Enter", яке керує анімацією, яка відтворюється, коли SecondFragment переходить на верхню частину заднього стека. Виберіть анімацію "fade_out".

Якщо перейти на вкладку "Дизайн", ви побачите, що ця анімація була додана до "action_firstFragment_to_secondFragment".

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

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

• Вхід: Анімація, яка відтворюється, коли фрагмент залишає стек
• Pop Enter: Анімація, яка відтворюється, коли фрагмент заповнює верхню частину стека
• Поп-вихід: Анімація, яка відтворюється, коли фрагмент переходить до нижньої частини стека

Спробуйте експериментувати, застосувавши різні анімації до різних частин переходів. Ви також можете завантажити завершений проект з GitHub.

Підведенню

У цій статті ми розглянули, як можна використовувати компонент «Архітектура навігації» для створення одноактивного, багатофрагментного додатка, доповненого спеціальною анімацією переходу. Чи переконав компонент Навігація перенести свої проекти до такої структури додатків? Повідомте нас у коментарях нижче!