Как стать автором
Обновить

Ликбез по 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:layoutwidth="matchparent"
   android:layoutheight="matchparent"
   app:defaultNavHost="true"
   app:navGraph="@navigation/navmain" />

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

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

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

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

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

<action
    android:id="@+id/actiontouserdetails"
    app:destination="@id/userDetailsFragment"
    app:enterAnim="@anim/addfragmentanimation"
    app:exitAnim="@anim/popfragmentanimation"
    app:popEnterAnim="@anim/popenteranimation"
    app:popExitAnim="@anim/popexitanimation"/>

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

navController.navigate(
    R.id.actiontouserdetails,
    Bundle().apply {
        putString(USERID, userId)
    }
)

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

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

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

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

<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-навигации.

Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.