Cập nhật ứng dụng để hỗ trợ tính năng xem trước thao tác quay lại trong tương lai

1. Giới thiệu

Trong Android 13, chúng tôi đã thêm các API đóng vai trò là nền tảng cho tính năng hỗ trợ sắp tới đối với cử chỉ xem trước thao tác quay lại.

Tính năng này sẽ cho phép người dùng xem trước kết quả của cử chỉ Quay lại trước khi hoàn tất cử chỉ đó. Về cơ bản, tính năng này cho phép người dùng quyết định ở lại chế độ xem hiện tại hoặc hoàn tất thao tác và quay lại Màn hình chính, một hoạt động trước đó hoặc một trang đã truy cập trước đó trong WebView. Sau đây là ví dụ về hình thức của giao diện:

Ảnh động này cho thấy một bản triển khai gần đúng trong tương lai về giao diện khi người dùng mở trình duyệt Chrome, xem trình duyệt Chrome trên thiết bị di động Android, sau đó vuốt ngược lại để xem màn hình chính là đích đến tiếp theo xuất hiện phía sau.

Trong lớp học lập trình này, chúng ta sẽ sửa một fragment khảo sát triển khai WebView.

Mục tiêu của lớp học lập trình này

Lớp học lập trình này hướng dẫn bạn cách chuẩn bị một ứng dụng AndroidX chặn thao tác Quay lại của hệ thống bằng cách di chuyển ứng dụng đó để hỗ trợ cử chỉ xem trước thao tác quay lại bằng WebView, bằng cách sử dụng các API triển khai mô hình điều hướng quay lại trước thời gian. Nói cách khác, để ảnh động mới hoạt động, hệ thống cần biết trước liệu ứng dụng có chặn cử chỉ điều hướng quay lại hay không.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ dùng các thư viện API AndroidX để xử lý cử chỉ Quay lại trong ứng dụng Sunflower.

Kiến thức bạn sẽ học được

Cách chặn lệnh gọi quay lại cho AndroidX
Cách trả về sự kiện Quay lại cho hệ thống
Các lựa chọn khác để xử lý cử chỉ Quay lại
Trải nghiệm người dùng mới trên Android 13 trở lên cung cấp tính năng điều hướng bằng cử chỉ xem trước thao tác quay lại dễ đoán hơn

Bạn cần có

Android Studio
Một thiết bị Android đã bật chế độ điều hướng bằng cử chỉ
(Không bắt buộc) Git

2. Lập kế hoạch hỗ trợ cử chỉ xem trước thao tác quay lại

Sử dụng các API AndroidX để triển khai tính năng này

Lớp học lập trình này được thiết kế cho những ứng dụng đã sử dụng AndroidX.

Bạn sẽ triển khai OnBackPressedDispatcher và OnBackPressedCallback để hỗ trợ thao tác điều hướng Quay lại.

Tuỳ chọn khác

Chúng tôi có những lựa chọn khác để xử lý tính năng này, tuỳ thuộc vào các nhu cầu khác nhau mà ứng dụng của bạn có thể có:

Đối với những ứng dụng không thể sử dụng AndroidX – Nếu bạn thuộc trường hợp này, chúng tôi sẽ hỗ trợ bạn. Dùng các lớp nền tảng OnBackInvokedDispatcher và OnBackInvokedCallback mới mà chúng tôi ra mắt trong Android 13. Nhờ đó, bạn có thể dùng các API trước thời gian mà không cần AndroidX. Hãy xem tài liệu để biết thông tin chi tiết.
Đối với những ứng dụng tạm thời không thể di chuyển – Nếu bạn thuộc trường hợp này, chúng tôi cũng sẽ hỗ trợ bạn! Bạn có thể chọn không sử dụng cử chỉ xem trước thao tác quay lại nếu hiện tại không thể di chuyển sang thư viện AndroidX hoặc API nền tảng. Hãy xem tài liệu để biết thông tin chi tiết.

3. Trước khi bắt đầu

Cài đặt Android Studio

Cài đặt Android Studio và SDK Android 13.

Mua thiết bị

Bạn có thể dùng thiết bị Android ảo hoặc thiết bị Android thực để chạy ứng dụng mà bạn tạo bằng lớp học lập trình này.

Nếu bạn chạy một phiên bản trình mô phỏng mới có cấp độ API 29, thì chế độ điều hướng bằng cử chỉ có thể không được bật theo mặc định. Để bật chế độ điều hướng bằng cử chỉ, hãy chọn Cài đặt hệ thống > Hệ thống > Điều hướng hệ thống > Điều hướng bằng cử chỉ.

Lấy mã

Lấy mã theo một trong những cách sau:

Tải tệp zip xuống

Tải xuống qua Git

Nếu bạn muốn tải mã xuống bằng Git, hãy làm theo các bước sau:

Cài đặt Git.
Sao chép nhánh starter-code hoặc main để lấy ứng dụng cho bài tập này:

Nhà ga

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

Chạy ứng dụng

Hãy hoàn tất các bước sau:

Mở và tạo ứng dụng trong Android Studio.
Tạo một thiết bị ảo mới và chọn Tiramisu. Ngoài ra, bạn có thể kết nối một thiết bị thực chạy cấp độ API 33 trở lên.
Chạy ứng dụng Sunflower.

Tiếp theo, bạn sẽ thiết lập một đường cơ sở và xem xét một trải nghiệm kém chất lượng trong ứng dụng Sunflower.

4. Thiết lập đường cơ sở

Điểm xuất phát của chúng ta là ứng dụng Sunflower, bao gồm một bản khảo sát được trình bày trong WebView và xử lý cử chỉ Quay lại không hiệu quả. Khi người dùng vuốt từ cạnh trái hoặc cạnh phải để quay lại trong WebView, ứng dụng sẽ đưa họ trở lại một fragment trước đó thay vì quay lại trang trước, khiến họ mất mọi dữ liệu chưa gửi.

Khám phá bản minh hoạ

Bắt đầu từ màn hình chính, hãy xem quy trình làm việc chính của ứng dụng để đánh giá trải nghiệm kém với chức năng WebView.

Trong màn hình mặc định của ứng dụng Sunflower, hãy nhấn vào DANH SÁCH CÂY.

Trong danh mục thực vật, hãy nhấn vào một loại cây bất kỳ. (Trong ví dụ này, chúng ta sẽ sử dụng quả bơ.)

Trong màn hình thông tin của cây mà bạn đã nhấn vào, hãy nhấn vào biểu tượng thích (ở góc trên cùng bên phải) để đánh giá cây.

Bắt đầu điền vào bản khảo sát, nhưng dừng lại khi bạn đến Câu hỏi số 3.

Vuốt từ cạnh trái (hoặc cạnh phải) của màn hình vào trong để dùng cử chỉ Quay lại. Xin lưu ý rằng thay vì đưa bạn đến Câu hỏi 2 trong khảo sát, thao tác vuốt ngược sẽ đưa bạn đến fragment thông tin chi tiết về cây (trong ví dụ này là trang thông tin về Quả bơ). Điều này khiến bạn mất câu trả lời và mang lại trải nghiệm không tốt cho người dùng.

Giờ hãy bắt đầu khắc phục những vấn đề này!

5. Bật tính năng xem trước thao tác quay lại

Ứng dụng của chúng ta đã sử dụng AndroidX, vì vậy bạn sẽ sử dụng API điều hướng Quay lại. Các thư viện này đã hỗ trợ mô hình trước thời hạn.

Nhắm đến Android 13

Trong dự án Studio của ứng dụng, hãy cập nhật cấu hình bản dựng của ứng dụng để nhắm đến Android 13, như minh hoạ trong đoạn mã sau.

build.gradle (Dự án)

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

Nâng cấp phần phụ thuộc

Trong build.gradle, hãy đặt appCompatVersion thành 1.6.0 trở lên.

build.gradle (Dự án)

buildscript {
   ext {

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

...
}

Nâng cấp lên AndroidX Activity 1.6.0 trở lên.

build.gradle (Mô-đun)

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

Bật tính năng xem trước thao tác quay lại

Để bật các API xem trước thao tác quay lại, hãy đặt enableOnBackInvokedCallback thành true trong tệp kê khai.

AndroidManifest.xml

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

Khai báo và đăng ký OnBackPressedCallback để xử lý cử chỉ Quay lại

Tạo lệnh gọi lại và ghi đè phương thức handleOnBackPressed để xử lý cử chỉ Quay lại. Đối với trường hợp sử dụng WebView, hãy dùng cử chỉ Quay lại để quay lại ngăn xếp trang cho đến khi không còn trang nào nữa.

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)
}

Dùng thử những gì bạn đã tạo

Giờ đây, bạn sẽ kiểm thử để đảm bảo rằng hoạt động điều hướng WebView hoạt động đúng cách.

Trong Android Studio, hãy tạo và chạy lại ứng dụng.
Giống như khi bạn chạy bản minh hoạ lần đầu tiên, hãy nhấn vào một cây bạn chọn rồi nhấn vào biểu tượng thích, sau đó điền vào bản khảo sát cho đến khi bạn đến Câu hỏi số 3.
Vuốt từ cạnh trái (hoặc cạnh phải) của màn hình vào trong để dùng cử chỉ Quay lại. WebView sẽ đưa bạn quay lại Câu hỏi số 2 trong bản khảo sát.

Đây chính xác là hành vi mà chúng ta muốn. Tuy nhiên, chúng tôi mới chỉ khắc phục được một nửa vấn đề và vẫn chưa hoàn toàn khắc phục được. Hãy tiếp tục xem ví dụ sau:

Từ Câu hỏi số 2, hãy vuốt ngược lại Câu hỏi số 1, sau đó vuốt ngược lại một lần nữa để cố gắng quay lại mảnh chi tiết về cây.

Xin lưu ý rằng bạn không thể quay lại từ Câu hỏi số 1 đến fragment thông tin chi tiết về cây. Nguyên nhân là do:

WebView của bạn xử lý thao tác điều hướng Quay lại bằng cách tránh rời khỏi WebView khi sử dụng thao tác điều hướng quay lại.
Ứng dụng của bạn cần trả lại thao tác Điều hướng quay lại cho hệ thống khi không cần dùng đến nữa. Hãy chuyển sang phần tiếp theo để khắc phục vấn đề đó!

6. Khắc phục cử chỉ Quay lại

Ở bước trước, ứng dụng của chúng ta đã chặn cử chỉ Quay lại mà không trả về cử chỉ đó cho fragment chi tiết về cây ở các bước trước. Do đó, người dùng không thể thoát khỏi ứng dụng và bị mắc kẹt trong WebView với trải nghiệm người dùng kém.

Ghi đè phương thức doUpdateVisitedHistory để xác định xem có nên chặn thao tác điều hướng Quay lại hay không. Logic xử lý thao tác quay lại như sau:
- Nếu có nhiều trang để quay lại trong WebView (webView.canGoBack()), bạn nên bật phương thức OnBackPressedCallback.
- Ngược lại, nếu không còn trang nào để quay lại trong WebView, thì phương thức OnBackPressedCallback sẽ bị vô hiệu hoá. Do đó, cử chỉ Quay lại sẽ quay lại fragment trên cùng trong ngăn xếp lui.

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

    }
  }
}

Để kiểm thử lại WebView, hãy điền lại vào bản khảo sát cho đến khi bạn đến Câu hỏi số 3.
Sử dụng cử chỉ Quay lại để quay lại chế độ xem chi tiết về cây. Bạn có thể thực hiện việc này mà không gặp vấn đề gì.

Sau đây là ví dụ về giao diện của tất cả các thành phần này sau khi bạn đã khắc phục:

Xem trước ảnh động mới của cử chỉ quay lại màn hình chính

Trong các phiên bản Android sắp tới, bạn sẽ bắt đầu trải nghiệm tính năng xem trước thao tác quay lại như minh hoạ trong ảnh động sau. Bạn nên bắt đầu triển khai những thay đổi này càng sớm càng tốt!

Bạn có thể xem trước chế độ điều hướng bằng cử chỉ quay lại màn hình chính mới bằng cách bật tùy chọn cho nhà phát triển.

7. Xin chúc mừng

Xin chúc mừng! Bạn đã học được rất nhiều nội dung. Chúng tôi hy vọng bạn đã hiểu rõ hơn về các lựa chọn và API để bắt đầu cập nhật ứng dụng của mình theo cử chỉ xem trước khi quay lại mà Android cung cấp.

Nội dung đã đề cập

Cách cho phép ứng dụng bắt đầu sử dụng các API hỗ trợ cử chỉ xem trước thao tác quay lại
Cách chặn lệnh gọi quay lại cho AndroidX
Cách trả thao tác Quay lại cho hệ thống
Các lựa chọn khác để xử lý cử chỉ Quay lại
Trải nghiệm người dùng mới trong Android 13, mang đến thao tác xem trước thao tác quay lại chính xác hơn

Lớp học lập trình đã hoàn thành

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

Tài liệu bổ sung

Hướng dẫn cho nhà phát triển

Cập nhật ứng dụng để hỗ trợ tính năng xem trước thao tác quay lại trong tương lai

1. Giới thiệu

Mục tiêu của lớp học lập trình này

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Lập kế hoạch hỗ trợ cử chỉ xem trước thao tác quay lại

Sử dụng các API AndroidX để triển khai tính năng này

Tuỳ chọn khác

3. Trước khi bắt đầu

Cài đặt Android Studio

Mua thiết bị

Bật chế độ điều hướng bằng cử chỉ

Lấy mã

Tải tệp zip xuống

Tải xuống qua Git

Chạy ứng dụng

4. Thiết lập đường cơ sở

Khám phá bản minh hoạ

5. Bật tính năng xem trước thao tác quay lại

Nhắm đến Android 13

Nâng cấp phần phụ thuộc

Bật tính năng xem trước thao tác quay lại

Khai báo và đăng ký OnBackPressedCallback để xử lý cử chỉ Quay lại

Dùng thử những gì bạn đã tạo

6. Khắc phục cử chỉ Quay lại

Bật hoặc tắt thao tác điều hướng quay lại bằng OnBackPressedCallback

Xem trước ảnh động mới của cử chỉ quay lại màn hình chính

7. Xin chúc mừng

Nội dung đã đề cập

Lớp học lập trình đã hoàn thành

Tài liệu bổ sung

Tài liệu tham khảo