Съдържание

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

По време на конференцията за I / O през 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.
• В менюто отляво изберете „Експериментално“.
• Ако вече не е избран, поставете отметка в квадратчето „Активиране на редактора за навигация“.

• Щракнете върху „OK“.
• Рестартирайте Android Studio.

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

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

зависимости {изпълнение fileTree (реж .: libs, включват:) внедряване com.android.support:appcompat-v7:28.0.0 изпълнение com.android.support.constraint: ограничение-оформление: 1.1.3 // Добавете следното // изпълнение "android.arch.navigation: navigation-fragment: 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: espresso-core: 3.0.2 }

Получете визуален преглед на навигацията на приложението ви

За да създадете навигационна графика:

• Щракнете върху контролния бутон „res“ на вашия проект и изберете „New> Android Resource Directory“.
• Отворете падащото меню „Тип ресурс“ и изберете „навигация“.
• Изберете „OK“.
• Щракнете с мишката върху новата си директория „res / navigation“ и изберете „New> файл с ресурс за навигация.“
• Отворете падащото меню „Тип ресурс“ и изберете „Навигация“.

• Дайте име на този файл; Използвам „nav_graph.“
• Щракнете върху „OK“.

Отворете вашия файл „res / navigation / nav_graph“ и Navigation Editor ще се стартира автоматично. Подобно на редактора на оформлението, редакторът за навигация е разделен на раздели „Дизайн“ и „Текст“.

Ако изберете раздела „Текст“, ще видите следния 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 //

В горния код, app: defaultNavHost = "true" позволява на навигационния хост да прихваща всеки път, когато се натисне бутона "Back" на системата, така че приложението винаги почита навигацията, описана във вашата навигационна графика.

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

След това отворете вашата MainActivity и добавете следното:

• NavigationView.OnNavigationItemSelectedListener: Слушател за обработка на събития на елементи от навигацията
• SecondFragment.OnFragmentInteractionListener: Интерфейс, който се генерира при създаването на SecondFragment чрез Navigation Editor

MainActivity също трябва да приложи метода onFragmentInteraction (), който позволява комуникация между фрагмента и Дейността.

импортиране на android.support.v7.app.AppCompatActivity; импортиране на android.os.Bundle; import android.net.Uri; импортиране на android.view.MenuItem; импортиране на android.support.design.widget.NavigationView; импортиране на android.support.annotation.NonNull; обществен клас MainActivity разширява AppCompatActivity внедрява NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override защитен празнота onCreate (Bundle savedInstanceState) {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 обществена невалидност onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment_vanth_ragment_nagment_ (fragment) }}); }

След това актуализирайте блока onViewCreate на ThirdFragment:

@Override public void onViewCreate (@NonNull View изглед, @Nullable Bundle saveInstanceState) {Бутон Бутон = (Бутон) view.findViewById (R.id.button3); button.setOnClickListener (нов View.OnClickListener () {@Override обществена невалидност onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment (fr.fir.ravith_Firth_Fair_Firth_Firth_Firth_Firth_Firth_Firth_Fair_Fair_Fair_Fair_Fair_Faat_Feat_Feat_Factor_Fact_Faat_Feat_Feat_Feat_Factor) }}); }

И накрая, не забравяйте да добавите интерфейса ThirdFragment.OnFragmentInteractionListener към вашата MainActivity:

обществен клас MainActivity разширява приложението AppCompatActivity реализира NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Стартирайте този проект на устройството си с Android или виртуално устройство Android (AVD) и тествайте навигацията. Трябва да можете да се движите между трите фрагмента, като щракнете върху различните бутони.

Създаване на персонализирани анимации за преход

В този момент потребителят може да се движи около приложението ви, но преходът между всеки фрагмент е доста рязък. В този последен раздел ще използваме компонента Навигация, за да добавим различна анимация към всеки преход, така че те да се случват по-плавно.

Всяка анимация, която искате да използвате, трябва да бъде дефинирана в нейния собствен файл на анимационен ресурс, в директория „res / anim“. Ако проектът ви вече не съдържа директория „res / anim“, ще трябва да създадете такава:

• Щракнете върху контролния бутон „res“ на вашия проект и изберете „New> Android Resource Directory“.
• Дайте на тази директория името „анимация“.
• Отворете падащото меню „Тип ресурс“ и изберете „анимация“.
• Щракнете върху „OK“.

Нека започнем с дефинирането на избледняла анимация:

• Щракнете с контролен бутон върху директорията „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.

Обобщавайки

В тази статия разгледахме как можете да използвате компонента „Навигационна архитектура“, за да създадете едноактивно действие с множество фрагменти, допълнено с персонализирани анимации за преход. Убедил ли ви е компонентът „Навигация“ да мигрирате проектите си към подобна структура на приложения? Уведомете ни в коментарите по-долу!