Прогнозирование снова в Compose

Функция Predictive Back, функция навигации с помощью жестов, позволяет пользователям предварительно просмотреть, куда их приведет смахивание назад. Функция Predictive Back легко интегрируется с Compose, улучшая навигацию в вашем приложении. Пользователи наслаждаются более плавными и интуитивно понятными переходами при обратной навигации по вашему приложению. На рис. 1 показано, как это работает в примере приложения SocialLite .

Рис. 1. Анимация возвращения домой в примере приложения SociaLite.

В этом руководстве описывается, как выполнить следующие действия с помощью интеллектуального обратного ответа:

  • Включите интеллектуальный жест назад
  • Включить системную анимацию по умолчанию
  • Включите интеллектуальную обратную связь с помощью Navigation Compose
  • Интеграция с переходами общих элементов
  • Поддержка прогнозирования с помощью компонентов Material Compose
  • Доступ к прогрессу вручную с помощью PredictiveBackHandler
  • Проверьте анимацию прогнозируемого жеста назад.

Включите интеллектуальный жест назад

Чтобы включить интеллектуальную анимацию спины, необходимо подписаться на поддержку интеллектуального жеста назад. Чтобы принять участие, добавьте android:enableOnBackInvokedCallback="true " в тег <application> или отдельные теги <activity> в файле AndroidManifest.xml .

Включить системную анимацию по умолчанию

Системные анимации возвращения домой, перекрестных действий и перекрестных задач доступны на устройствах Android 15 и более поздних версий для приложений, которые перешли на поддерживаемые API обратной обработки.

  • Back-to-home : возвращает пользователя на главный экран.
  • Перекрестная активность : переходы между действиями в приложении.
  • Перекрестная задача : переходы между задачами .

Эти анимации включены по умолчанию в Android 15 и более поздних версиях. На устройствах под управлением Android 13 или 14 пользователи могут включить их в настройках разработчика .

Чтобы получить системную анимацию, обновите зависимость AndroidX Activity до версии 1.6.0 или выше.

Включите интеллектуальную обратную связь с помощью Navigation Compose

Чтобы использовать предиктивную функцию обратно в Navigation Compose, убедитесь, что вы используете библиотеку navigation-compose 2.8.0 или более поздней версии.

Навигация Compose автоматически переключается между экранами, когда пользователь проводит пальцем назад:

Рисунок 2. Анимация с плавным затуханием по умолчанию в приложении SociaLite.

При навигации вы можете создавать собственные переходы с помощью popEnterTransition и popExitTransition . При применении к вашему NavHost эти модификаторы позволяют вам определить, как анимируются экраны входа и выхода. Вы можете использовать их для создания различных эффектов, таких как масштабирование, затухание или скольжение.

В этом примере scaleOut используется в popExitTransition для уменьшения размера экрана выхода, когда пользователь возвращается назад. Кроме того, параметр transformOrigin определяет точку, вокруг которой происходит анимация масштабирования. По умолчанию это центр экрана ( 0.5f, 0.5f ). Вы можете настроить это значение, чтобы масштабирование начиналось с другой точки. 

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Этот код дает следующий результат:

Рисунок 3. Пользовательская анимация внутри приложения в SocialLite.

popEnterTransition и popExitTransition специально управляют анимацией при извлечении обратного стека, например, с помощью жеста назад. Вы также можете использовать enterTransition и exitTransition для определения анимации входа и выхода из составных элементов в целом, а не только для прогнозируемого возврата. Если вы установите только enterTransition и exitTransition , они будут использоваться как для обычной навигации, так и для извлечения обратного стека. Однако использование popEnterTransition и popExitTransition позволяет создавать отдельные анимации для обратной навигации.

Интеграция с переходами общих элементов

Переходы общих элементов обеспечивают плавную визуальную связь между составными элементами с общим содержимым, часто используемым для навигации.

Рис. 4. Переход общего элемента с прогнозированием обратно в Navigation Compose.

Чтобы использовать общие элементы с функцией Navigation Compose, см. раздел Предиктивная обратная связь с общими элементами .

Поддержка прогнозирования с помощью компонентов Material Compose

Многие компоненты в библиотеке Material Compose предназначены для бесперебойной работы с интеллектуальными жестами назад. Чтобы включить прогнозирующую обратную анимацию в этих компонентах, включите в свой проект последнюю зависимость Material3 ( androidx.compose.material3:material3-*:1.3.0 или более позднюю версию).

Компоненты Material, которые поддерживают прогнозирующую заднюю анимацию, включают в себя:

SearchBar и ModalBottomSheet автоматически анимируются с помощью прогнозируемых жестов назад. ModalNavigationDrawer , ModalDrawerSheet , DismissibleDrawerSheet и DismissibleNavigationDrawer требуют, чтобы вы передали drawerState соответствующим компонентам содержимого листа.

Доступ к прогрессу вручную с помощью PredictiveBackHandler

Компонуемый PredictiveBackHandler [5] в Jetpack Compose позволяет перехватывать жест назад и получать доступ к его прогрессу. Вы можете реагировать на жест назад пользователя в режиме реального времени, создавая собственную анимацию или поведение в зависимости от того, насколько далеко пользователь проводит пальцем.

Чтобы использовать PredictiveBackHandler , убедитесь, что вы используете androidx.activity:activity:1.6.0 или более позднюю версию.

PredictiveBackHandler предоставляет Flow<BackEventCompat> , который генерирует события, представляющие ход выполнения жеста назад. Каждое событие содержит такую ​​информацию, как:

  • progress : плавающее значение от 0 до 1, указывающее ход выполнения жеста назад (0 = жест запущен, 1 = жест завершен).
  • touchX и touchY : координаты X и Y события касания.

В следующем фрагменте показано базовое использование PredictiveBackHandler : 

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Пример: интеграция с навигационным ящиком

В этом примере показано, как реализовать пользовательскую анимацию в приложении с помощью PredictiveBackHandler для создания плавного взаимодействия с навигационным ящиком в ответ на жесты назад в JetLagged :

Рис. 5. Навигационный ящик с прогнозируемой поддержкой спины.

В этом примере PredictiveBackHandler используется для:

  • Отслеживайте ход жеста назад.
  • Обновите translationX ящика в зависимости от хода выполнения жеста.
  • Используйте velocityTracker , чтобы плавно открывать или закрывать ящик в зависимости от скорости жеста, когда жест завершен или отменен.

Проверьте анимацию прогнозируемого жеста назад.

Если вы все еще используете Android 13 или Android 14, вы можете протестировать анимацию возвращения домой.

Чтобы протестировать эту анимацию, выполните следующие действия:

  1. На своем устройстве выберите «Настройки» > «Система» > «Параметры разработчика» .
  2. Выберите «Прогнозирующая анимация спины» .
  3. Запустите обновленное приложение и используйте жест назад, чтобы увидеть его в действии.

В Android 15 и более поздних версиях эта функция включена по умолчанию.

Дополнительные ресурсы