Ликбез по Navigation Component: тем, кто пропустил все туториалы

Эта история для тех, кто до сих пор не в курсе про Navigation Component. Тут мы пробежимся по основным элементам библиотеки и посмотрим, как это все выглядит.

Вы сейчас в первой части большого материала про Navigation Component в многомодульном проекте. Если вы уже знакомы с азами, то рекомендую идти дальше к частям:

• Как работает плагин Safe Args и что он делает.

• Работа с Navigation Component в многомодульном проекте совместно с SafeArgs.

• Решение для iOS-like multistack-навигации

TL;DR.:

Чтобы организовать навигацию в приложении с помощью Navigation Component, надо:

1. Создать граф;

2. Добавить в него экраны;

3. Добавить переходы между ними;

4. Добавить вложенные графы, если нужно;

5. Положить все это бесчинство в NavHost;

6. Указать переходы в коде.

Основные компоненты навигации

1. Navigation Graph — основополагающая единица навигации. Это граф, в котором вершины — экраны, а ребра — переходы между ними. Граф создается в отдельном xml-файле в папке res/navigation. Чтобы не вводить navController в заблуждение, необходимо в графе указать его стартовую точку (startDestination)

2. Destination представляет UI-единицу на графе (Fragment/Activity/Dialog/NestedGraph).

3. Action обозначает переход между destination-ами графа. Может быть как направленным (от одного экрана к другому), так и глобальным (не иметь вершины, от которой происходит переход).

4. Nested Graph — это вложенный граф. Если одного графа будет мало или он будет сильно большой, можно разбить их на несколько и переиспользовать один граф в другом с помощью тега <include>.

5. NavHost — контейнер, в котором будет происходить навигация. Для корректной работы надо указать контейнеру, что он именно NavHostFragment, и передать граф навигации. Выглядит это так:

<androidx.fragment.app.FragmentContainerView     android:id="@+id/navHost"     android:name="androidx.navigation.fragment.NavHostFragment"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:defaultNavHost="true"     app:navGraph="@navigation/nav_main" />

6. NavController — объект, который отвечает за навигацию. Он еще появится дальше в пункте про переходы. По факту NavController — это роутер, с помощью которого мы можем переходить между экранами, отправлять параметры, задавать дополнительные опции перехода, анимации, shared-элементы и пр.

Переходы между экранами

Переходы между экранов можно сделать через Action или через DeepLink.

Переход с помощью Action

Как выглядит:

<action     android:id=”@+id/action_to_user_details”     app:destination=”@id/userDetailsFragment”     app:enterAnim=”@anim/add_fragment_animation”     app:exitAnim=”@anim/pop_fragment_animation”     app:popEnterAnim=”@anim/pop_enter_animation”     app:popExitAnim=”@anim/pop_exit_animation”>

Вызов перехода:

navController.navigate(     R.id.action_to_user_details,     Bundle().apply {putString(USER_ID, userId)} )

Получение аргументов на «том конце»:

private val userID by lazy {     arguments!![USER_ID] }

Переход с помощью deep link

Как выглядит:

<deepLink      app:uri=”app://customUri?parameter={parameterName}” />

Вызов перехода:

navController.navigate(     Uri.parse(“app://customUri?parameter=$reason”) )

Получение аргументов на «том конце»:

private val refundId by lazy {     arguments?.getString(“parameter”, null) }

Вот и всё! Достаточно просто и понятно — именно этим и подкупает Navigation Component. Теперь давайте углубимся в то, как работает плагин Safe Args и что он делает и приступим уже к работе с Navigation Component в многомодульном проекте совместно с SafeArgs и iOS-like multistack-навигации.