更新應用程式，支援日後的預測返回手勢

1. 簡介

在 Android 13 中，我們新增了 API，做為即將推出的預測返回手勢支援功能基礎。

這項功能可讓使用者在完成返回手勢前先預覽結果，再決定要停留在目前的檢視畫面，還是完成動作並返回主畫面、先前的活動，或是 WebView 中先前造訪的網頁。範例如下：

這段動畫是未來實作的近似版本，展示使用者開啟 Chrome 瀏覽器、在 Android 行動裝置上查看 Chrome 瀏覽器，然後往回滑動，看到主畫面顯示在後方做為下一個目的地。

在本程式碼研究室中，我們將修正實作 WebView 的問卷調查片段。

本程式碼研究室的目標

本程式碼研究室說明如何準備 AndroidX 應用程式，方法是遷移應用程式，使其支援 WebView 的預測返回手勢，並使用實作「預先」返回導覽模型的 API，攔截系統返回動作。換句話說，如要讓新動畫正常運作，系統必須預先知道應用程式是否會攔截返回手勢。

建構項目

在本程式碼研究室中，您將使用 AndroidX API 程式庫，在 Sunflower 應用程式中處理返回手勢。

課程內容

如何攔截 AndroidX 的返回呼叫
如何將「返回」事件傳回系統
處理返回手勢的其他選項
Android 13 以上版本將提供全新使用者體驗，預測返回手勢導覽功能更完善

軟硬體需求

Android Studio
已啟用手勢操作的 Android 裝置
(選用) Git

2. 規劃預測返回手勢的支援功能

使用 AndroidX API 實作這項功能

本程式碼研究室適用於已使用 AndroidX 的應用程式。

您將實作 OnBackPressedDispatcher 和 OnBackPressedCallback，支援返回導覽。

其他選項

我們提供其他選項來處理這項功能，您可以根據應用程式的不同需求選擇：

無法使用 AndroidX 的應用程式 - 如果您屬於這種情況，請放心，使用 Android 13 中推出的新 OnBackInvokedDispatcher 和 OnBackInvokedCallback 平台類別，即可使用預先編譯 API，不必使用 AndroidX。詳情請參閱說明文件。
暫時無法遷移的應用程式 - 如果您屬於這種情況，我們也提供相關服務！如果目前無法遷移至 AndroidX 程式庫或平台 API，可以選擇停用預測返回手勢。詳情請參閱說明文件。

3. 事前準備

安裝 Android Studio

安裝 Android Studio 和 Android 13 SDK。

取得裝置

您可以使用虛擬或實體 Android 裝置，執行在本程式碼研究室中建構的應用程式。

如果您使用 API 級別 29 執行新的模擬器執行個體，系統可能不會預設開啟手勢操作模式。如要啟用手勢操作，請依序選取「系統設定」>「系統」>「系統操作機制」>「手勢操作」。

取得程式碼

請透過下列任一方式取得代碼：

下載 ZIP 檔

透過 Git 下載

如要使用 Git 下載程式碼，請按照下列步驟操作：

安裝 Git。
複製 starter-code 或 main 分支版本，取得本練習的應用程式：

Terminal

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

執行應用程式

操作步驟如下：

在 Android Studio 中開啟並建構應用程式。
建立新的虛擬裝置，然後選取「Tiramisu」。或者，您也可以連線搭載 API 級別 33 以上版本的實體裝置。
執行 Sunflower 應用程式。

接著，您將建立基準，並逐步瞭解 Sunflower 應用程式中體驗不佳的部分。

4. 建立基準

我們從 Sunflower 應用程式開始，其中包含以 WebView 呈現的問卷調查，但無法妥善處理返回手勢。使用者在 WebView 中從左側或右側滑動返回時，應用程式會將他們帶回上一個片段，而不是返回上一個頁面，導致他們遺失任何未提交的資料。

查看示範內容

從主畫面開始，我們來逐步瞭解應用程式的主要工作流程，並檢視 WebView 功能的體驗不佳之處。

在 Sunflower 應用程式的預設畫面中，輕觸「植物清單」。

在植物目錄中輕觸任一植物。(在本範例中，我們將使用酪梨。)

在輕觸的植物資訊畫面中，輕觸右上角的「喜歡」圖示，即可為植物評分。

開始填寫問卷，但填到第 3 個問題時請停止。

從螢幕左側 (或右側) 邊緣向內滑動，即可使用「返回」手勢。請注意，向後滑動不會帶您前往問卷調查的第 2 個問題，而是前往植物詳細資料片段 (在本例中為酪梨資訊頁面)。這會導致您遺失答案，且使用者體驗不佳。

現在就開始修正這些問題吧！

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 (Module)

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 導覽功能是否正常運作。

在 Android Studio 中，再次建構並執行應用程式。
就像第一次執行試用版時一樣，輕觸所選植物，然後輕觸「喜歡」圖示，填寫問卷調查，直到第 3 個問題為止。
從螢幕左側 (或右側) 邊緣向內滑動，即可使用返回手勢。WebView 應會將你帶回問卷調查的第 2 個問題。

這正是我們想要的行為。不過，我們只完成一半，目前尚未完全修正。讓我們繼續瞭解：

從問題 2 向後滑動到問題 1，然後再次向後滑動，嘗試返回植物詳細資料片段。

請注意，您無法從問題 1 返回植物詳細資料片段。可能的原因如下：

您的 WebView 會處理返回瀏覽，避免在使用返回瀏覽時離開 WebView。
應用程式不再需要返回導覽時，必須將其傳回系統。請前往下一節瞭解如何修正！

6. 修正返回手勢

在上一個步驟中，我們的應用程式攔截了「返回」手勢，但未在上一個步驟中將手勢傳回植物詳細資料片段。因此使用者無法離開應用程式，只能停留在 WebView 中，導致使用者體驗不佳。

覆寫 doUpdateVisitedHistory 方法，判斷是否應攔截返回導覽。處理返回導覽的邏輯如下：
- 如果 WebView 中有更多頁面可返回 (webView.canGoBack())，則應啟用 OnBackPressedCallback 方法。
- 反之，如果 WebView 中沒有可返回的頁面，則應停用 OnBackPressedCallback 方法。因此，「返回」手勢會返回返回堆疊中最頂端的片段。