Обновите приложение для поддержки будущих предиктивных жестов «Назад»

1. Введение

В Android 13 мы добавили API, которые послужат основой для будущей поддержки предиктивного жеста «назад».

Эта функция позволит пользователю предварительно просмотреть результат жеста «Назад» до его полного выполнения — по сути, позволяя ему решить, остаться ли в текущем окне или завершить действие и вернуться на главный экран, к предыдущему действию или на ранее посещенную страницу в WebView. Вот пример того, как это будет выглядеть:

Для поддержки предиктивного жеста «назад» в Android 13 добавлен новый API платформы OnBackInvokedCallback на уровне окна. Этот API заменяет API KeyEvent.KEYCODE_BACK и все классы платформы, использующие OnBackPressed , которые планируется вывести из эксплуатации и которые потребуют миграции в следующем крупном релизе Android после версии 13. Подробности см. в нашей документации .

В рамках этого практического задания мы исправим фрагмент опроса, в котором используется WebView.

Цель этого практического занятия.

В этом практическом занятии показано, как подготовить AndroidX-приложение, которое перехватывает системный жест "Назад", путем миграции на поддержку предиктивного жеста "Назад" с помощью WebView, используя API, реализующие модель предварительной навигации "Назад ". Другими словами, для работы новых анимаций система должна заранее знать, перехватывает ли приложение жест навигации "Назад".

Что вы построите

В этом практическом занятии вы будете использовать библиотеки AndroidX API для обработки жестов "Назад" в приложении Sunflower.

Что вы узнаете

• Как перехватить вызов onback для AndroidX
• Как вернуть событие "Назад" в систему
• Другие варианты обработки жестов "Назад"
• В Android 13+ появится новый пользовательский интерфейс, обеспечивающий более интуитивно понятную навигацию жестами при возврате назад.

Что вам понадобится

• Android Studio
• Устройство Android с поддержкой навигации жестами.
• (Необязательно) Git

2. Запланируйте поддержку прогнозируемого жеста «назад».

Функция автоматического ввода жеста "Назад" поддерживается автоматически для приложений, использующих стандартную навигацию "Назад". Чтобы включить её, достаточно активировать параметр enableOnBackInvokedCallback , как описано в разделе "Включение автоматического ввода жеста "Назад"" .

Для реализации этой функции используйте API AndroidX.

Данный практический урок предназначен для приложений, которые уже используют AndroidX.

Вам потребуется реализовать OnBackPressedDispatcher и OnBackPressedCallback для поддержки навигации "Назад".

Другие варианты

В зависимости от потребностей вашего приложения, у нас есть и другие варианты реализации этой функции:

• Для приложений, не поддерживающих AndroidX — если это ваш случай, мы вам поможем. Используйте новые платформенные классы OnBackInvokedDispatcher и OnBackInvokedCallback , которые мы представляем в Android 13 и которые позволяют использовать API, доступные заранее, без необходимости использования AndroidX. Подробности см. в документации .
• Для приложений, временно не подлежащих миграции — если это ваш случай, мы также позаботимся о вас! Вы можете отказаться от предиктивного жеста «назад», если в данный момент невозможно перейти на библиотеки AndroidX или API платформы. Подробности см. в документации .

3. Прежде чем начать

Установите Android Studio.

Установите Android Studio и Android 13 SDK .

Получите устройство

Для запуска приложения, созданного с помощью этого практического занятия, вы можете использовать виртуальное или физическое устройство Android.

Включить навигацию жестами

Если вы запускаете новый экземпляр эмулятора с уровнем API 29, навигация жестами может быть отключена по умолчанию. Чтобы включить навигацию жестами, выберите «Системные настройки» > «Система» > «Системная навигация» > «Навигация жестами» .

Получите код

Получить код можно одним из следующих способов:

Скачать архив

Скачать архив (начало)

Скачать через Git

Если вы предпочитаете загрузить код с помощью Git, выполните следующие шаги:

1. Установите Git .
2. Чтобы получить приложение для этого упражнения, клонируйте ветку starter-code или main :

Терминал

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

Запустите приложение

Выполните следующие шаги:

1. Откройте и соберите приложение в Android Studio.
2. Создайте новое виртуальное устройство и выберите Tiramisu . В качестве альтернативы вы можете подключить физическое устройство, работающее под управлением API уровня 33 или выше.
3. Запустите приложение Sunflower.

Далее вы определите базовый уровень и проанализируете негативный опыт использования приложения Sunflower.

4. Установите исходный уровень.

В качестве отправной точки мы взяли приложение Sunflower, которое включает опрос, представленный в WebView, плохо обрабатывающем жесты «Назад». Когда пользователь проводит пальцем от левого или правого края, чтобы вернуться назад в WebView, приложение возвращает его к предыдущему фрагменту вместо возврата на предыдущую страницу, в результате чего пользователь теряет все неотправленные данные.

Ознакомьтесь с демоверсией

Начнём с главного экрана и рассмотрим основной рабочий процесс вашего приложения, чтобы оценить недостатки функциональности WebView.

1. На главном экране приложения Sunflower нажмите СПИСОК РАСТЕНИЙ .

2. В каталоге растений выберите любое растение. (В этом примере мы будем использовать плод авокадо.)

3. На экране информации о выбранном растении нажмите на значок «палец вверх» (в правом верхнем углу), чтобы оценить растение.

4. Начните заполнять анкету, но остановитесь, когда дойдете до вопроса №3.

5. Для использования жеста «Назад» проведите пальцем от левого (или правого) края экрана внутрь. Обратите внимание, что вместо перехода ко второму вопросу опроса, движение пальцем «Назад» переводит вас к разделу с подробной информацией о растении (в этом примере — на страницу с информацией об авокадо). Это приводит к потере ваших ответов и ухудшает пользовательский опыт.

Давайте теперь приступим к решению этих проблем!

5. Включите функцию прогнозирующего жеста «Назад».

Наше приложение уже использует AndroidX, поэтому вам понадобятся API для навигации «Назад». Они уже поддерживают модель предварительной навигации.

Целевая платформа: Android 13

В проекте Studio нашего приложения обновите конфигурацию сборки, чтобы она соответствовала Android 13, как показано в следующем фрагменте кода.

build.gradle (Проект)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

Обновить зависимости

В файле build.gradle установите значение appCompatVersion равным 1.6.0 или выше.

build.gradle (Проект)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

Обновите AndroidX Activity до версии 1.6.0 или выше.

build.gradle (Модуль)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

Включите функцию прогнозирования жеста "Назад"

Чтобы включить API для прогнозирования жестов «назад», установите enableOnBackInvokedCallback в true в манифесте.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

Объявите и зарегистрируйте метод OnBackPressedCallback для обработки жестов "Назад".

Создайте функцию обратного вызова и переопределите метод handleOnBackPressed для обработки жестов "Назад". В случае с WebView давайте будем использовать жест "Назад", чтобы вернуться назад по стеку страниц, пока не останется ни одной страницы.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

Попробуйте то, что вы создали.

Теперь вам предстоит проверить, правильно ли работает навигация в WebView.

1. В Android Studio снова соберите и запустите приложение.
2. Как и при первом запуске демоверсии, выберите растение по своему вкусу, затем нажмите на значок «палец вверх» и заполняйте опрос, пока не дойдете до вопроса №3.
3. Для использования жеста «Назад» проведите пальцем от левого (или правого) края экрана внутрь. WebView вернет вас ко второму вопросу опроса.

Это именно то поведение, которое нам нужно. Однако мы прошли только половину пути — проблема ещё не решена полностью. Давайте продолжим разбираться, что мы имеем в виду:

4. От вопроса №2 проведите пальцем назад к вопросу №1, затем проведите пальцем назад еще раз, пытаясь вернуться к фрагменту с подробным описанием растения.

Обратите внимание, что вы не можете вернуться от вопроса № 1 к фрагменту с подробным описанием растения. Это потому, что:

• Ваш WebView обрабатывает навигацию «Назад», предотвращая выход из WebView при использовании навигации по ссылке «Назад».
• Вашему приложению необходимо возвращать кнопку «Назад» в систему, когда она больше не нужна. Перейдём к следующему разделу, чтобы это исправить!

6. Исправьте жест "Назад".

На предыдущем шаге наше приложение перехватило жест «Назад», не вернув его во фрагмент с подробной информацией о растении. В результате пользователи не могут покинуть приложение и остаются в WebView, что приводит к неудовлетворительному пользовательскому опыту.

Включение или отключение функции «Назад» с помощью OnBackPressedCallback

1. Переопределите метод doUpdateVisitedHistory , чтобы определить, следует ли перехватывать навигацию «Назад». Логика обработки навигации «Назад» следующая:
   • Если в WebView есть еще страницы, на которые можно вернуться ( webView.canGoBack() ), следует включить метод OnBackPressedCallback .
   • И наоборот, если в WebView больше нет страниц, на которые можно вернуться, метод OnBackPressedCallback следует отключить. В результате жест «Назад» вернет вас к самому верхнему фрагменту в стеке возврата.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

2. Чтобы снова протестировать WebView, пройдите опрос еще раз, пока не дойдете до вопроса №3.
3. С помощью жеста «Назад» вернитесь к подробному описанию растения. Вы должны справиться с этим без проблем.

Обратите внимание, что теперь мы можем выйти из WebView и вернуться к проверке фрагмента с подробной информацией о растении, не застревая при этом.

Вот пример того, как всё это должно выглядеть после исправления:

Предварительный просмотр новой анимации жеста «Вернуться на главный экран»

В следующих версиях Android вы сможете увидеть функцию автоматического возврата назад, как показано в следующей анимации. Мы настоятельно рекомендуем вам как можно скорее внедрить эти изменения!

Вы можете предварительно просмотреть новую функцию навигации жестами при возврате на главный экран, включив параметр "Разработчик" .

7. Поздравляем!

Поздравляем! Вы изучили большой объем информации. Надеемся, вы лучше разобрались в возможностях и API для обновления вашего приложения с учетом функции предиктивного возврата, предлагаемой в Android.

Что мы рассмотрели

• Как настроить ваше приложение для использования API, поддерживающих предиктивный жест «назад»
• Как перехватить вызов функции onback в AndroidX
• Как вернуть кнопку «Назад» в систему
• Другие варианты обработки жестов "Назад"
• В Android 13 появится новый пользовательский интерфейс, обеспечивающий более интуитивно понятный жест «назад».

Завершено практическое занятие.

Скачать архив (завершено)

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

Дополнительные материалы

• Руководство разработчика

Справочная документация

• OnBackPressedDispatcher и OnBackPressedCallback
• OnBackInvokedDispatcher и OnBackInvokedCallback