Google анонсирует Jetpack Navigation 3

Навигация между экранами в вашем приложении должна быть простой, не так ли? Однако создание надежной, масштабируемой и восхитительной навигации может оказаться непростой задачей. На протяжении многих лет библиотека Jetpack Navigation была ключевым инструментом для разработчиков, но с развитием пользовательских интерфейсов Android, в частности с появлением Jetpack Compose, в Google осознали необходимость нового подхода.

Сегодня компания представила Jetpack Navigation 3 — новую библиотеку навигации, созданную с нуля специально для Compose. Для краткости ее называют Nav3. Эта библиотека использует модель декларативного программирования и состояния Compose в качестве фундаментальных строительных блоков.

Зачем нужна новая библиотека навигации?

Оригинальная библиотека Jetpack Navigation (иногда называемая Nav2, так как она находится во второй основной версии) была первоначально анонсирована в 2018 году, до AndroidX и до Compose. Хотя она хорошо выполняла свои первоначальные задачи, у нее было несколько ограничений при работе с современными шаблонами Compose.

Одно из ключевых ограничений заключалось в том, что состояние бэкстека можно было наблюдать только косвенно. Это означало, что может существовать два источника истины, что потенциально может привести к несогласованному состоянию приложения. Кроме того, NavHost в Nav2 был разработан для отображения только одного пункта назначения — самого верхнего в обратном стеке — и заполнял все свободное пространство. Это затрудняло реализацию адаптивных макетов с одновременным отображением нескольких панелей контента, таких как макет «список-деталь» на больших экранах.

Рисунок 1. Переход от однопанельного к многопанельному макету может создать проблемы с навигацией

Основополагающие принципы

Nav3 построен на принципах, призванных обеспечить большую гибкость и контроль разработчика:

• Вы владеете стеком: Вы, разработчик, а не библиотека, владеете и контролируете бэкстек. Это простой список, который поддерживается состоянием Compose. В частности, Nav3 ожидает, что ваш стек будет SnapshotStateList<T>, где T может быть любым типом по вашему выбору. Вы можете перемещаться по списку, добавляя или удаляя элементы (T), а изменения состояния наблюдаются и отражаются в пользовательском интерфейсе Nav3.
• Не мешает вам: Разработчикам не нравится, когда навигационная библиотека представляет собой черный ящик с недоступными внутренними компонентами и состоянием. Nav3 спроектирована как открытая и расширяемая библиотека, предоставляя вам строительные блоки и полезные настройки по умолчанию. Если вам нужно кастомное поведение навигации, вы можете опуститься на более низкие уровни и создать свои собственные компоненты и настройки.
• Выбираете свои строительные блоки: Вместо того чтобы встраивать все поведение в библиотеку, Nav3 предлагает небольшие компоненты, которые вы можете комбинировать для создания более сложной функциональности. В Google подготовили «книгу рецептов», в которой показано, как комбинировать компоненты для решения общих задач навигации.

Рисунок 2. Экран Nav3 наблюдает за изменениями в бэкстеке, принадлежащем разработчику.

Ключевые особенности

• Анимации: Встроенные анимации переходов предусмотрены для изменения места назначения, в том числе для прогнозируемого возврата. Также имеется гибкий API для кастомного поведения анимации, позволяющий переопределять анимацию как на уровне приложения, так и на уровне отдельного экрана.
• Адаптивные макеты: Гибкий API макетов (под названием Scenes) позволяет отображать несколько мест назначений в одном и том же макете (например, макет «список-подробности» на устройствах с большим экраном). Это позволяет легко переключаться между однопанельными и многопанельными макетами.
• Разграничение состояний: Позволяет распределять состояние по направлениям на бэкстеке, включая дополнительную поддержку ViewModel с помощью специальной библиотеки жизненного цикла Jetpack.
• Модульность: Дизайн API позволяет разделить код навигации на несколько модулей. Это улучшает время сборки и позволяет четко разделить ответственность между модулями функций.

Базовый пример кода

Чтобы дать вам представление о том, как работает Nav3, приведем небольшой пример кода.

// Define the routes in your app and any arguments.
data object Home
data class Product(val id: String)

// Create a back stack, specifying the route the app should start with.
val backStack = remember { mutableStateListOf<Any>(ProductList) }

// A NavDisplay displays your back stack. Whenever the back stack changes, the display updates.
NavDisplay(
    backStack = backStack,

    // Specify what should happen when the user goes back
    onBack = { backStack.removeLastOrNull() },

    // An entry provider converts a route into a NavEntry which contains the content for that route.
    entryProvider = { route ->
        when (route) {
            is Home -> NavEntry(route) {
                Column {
                    Text("Welcome to Nav3")
                    Button(onClick = {
                        // To navigate to a new route, just add that route to the back stack
                        backStack.add(Product("123"))
                    }) {
                        Text("Click to navigate")
                    }
                }
            }
            is Product -> NavEntry(route) {
                Text("Product ${route.id} ")
            }
            else -> NavEntry(Unit) { Text("Unknown route: $route") }
        }
    }
)

Приступаем к работе

Чтобы начать работу, ознакомьтесь с документацией для разработчиков, а также с репозиторием с примерами, в котором собраны варианты использования:

В настоящее время Nav3 находится в стадии альфа-версии, что означает, что API может быть изменен на основе отзывов. Если у вас возникли проблемы или вы хотите оставить отзыв, пожалуйста, напишите об этом.