Ликбез по 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-навигации.