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 hỗ trợ sắp tới cho tính năng 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 một thao tác Quay lại trước khi hoàn tất thao tác đó. Về cơ bản, tính năng này cho phép người dùng quyết định ở lại khung hiển thị 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à một ví dụ về hình thức của tính năng này:

Ả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 trường hợp lớp học lập trình này, chúng ta sẽ khắc phục một phân mảnh 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ợ tính năng xem trước thao tác quay lại bằng WebView, thông qua việc sử dụng các API triển khai mô hình điều hướng quay lại trước thời hạn. Nói cách khác, để các ảnh động mới hoạt động, hệ thống cần biết trước thời hạn nếu ứng dụng đang chặn thao tác điều hướng quay lại.

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

Trong lớp học lập trình này, bạn sẽ sử dụng các thư viện API AndroidX để xử lý thao tác 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ý thao tác Quay lại
Trải nghiệm người dùng mới sắp có trong 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

Bạn cần có

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

2. Lập kế hoạch hỗ trợ tính năng xem trước thao tác quay lại

Sử dụng 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 các ứng dụng đã sử dụng AndroidX.

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

Tuỳ chọn khác

Chúng tôi có các 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 các ứng dụng không thể sử dụng AndroidX – Nếu bạn thuộc trường hợp này, thì chúng tôi đã có giải pháp cho bạn. Hãy sử dụng các lớp nền tảng OnBackInvokedDispatcher và OnBackInvokedCallback mới mà chúng tôi đang giới thiệu trong Android 13. Các lớp này cho phép bạn sử dụng các API trước thời hạn mà không cần AndroidX. Hãy xem tài liệu để biết thông tin chi tiết.
Đối với các ứ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, thì chúng tôi cũng đã có giải pháp cho bạn! Bạn có thể chọn không sử dụng tính năng xem trước thao tác quay lại nếu không thể di chuyển sang thư viện AndroidX hoặc API nền tảng vào thời điểm này. 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.

Lấy một thiết bị

Bạn có thể sử dụng một thiết bị Android ảo hoặc 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 thực thể trình mô phỏng mới có cấp độ API 29, thì tính năng điều hướng bằng cử chỉ có thể không được bật theo mặc định. Để bật tính năng đ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.
Nhân bản nhánh starter-code hoặc main để lấy ứng dụng cho bài tập này:

Terminal

// 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 rồi 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à tìm hiểu một trải nghiệm kém là một phần của ứ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 cuộc khảo sát được trình bày trong WebView xử lý kém thao tác Quay lại. 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 phân mảnh 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 tìm hiểu quy trình làm việc chính của ứng dụng để xem xét 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 PLANT LIST (DANH SÁCH CÂY).

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

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

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

Vuốt vào trong từ cạnh trái (hoặc cạnh phải) của màn hình để sử dụng thao tác Quay lại. Xin lưu ý rằng thay vì đưa bạn đến Câu hỏi số 2 trong cuộc khảo sát, thao tác vuốt Quay lại 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.

Bây 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 các API điều hướng Quay lại. Các API 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ý thao tác Quay lại

Tạo lệnh gọi lại và ghi đè phương thức handleOnBackPressed để xử lý thao tác Quay lại. Đối với trường hợp sử dụng WebView, hãy sử dụng thao tác 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

Bây giờ, bạn sẽ kiểm thử để đảm bảo rằng tính nă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 mà bạn chọn rồi nhấn vào biểu tượng ngón tay cái giơ lên, sau đó điền vào cuộc khảo sát cho đến khi bạn đến Câu hỏi số 3.
Vuốt vào trong từ cạnh trái (hoặc cạnh phải) của màn hình để sử dụng thao tác Quay lại. WebView sẽ đưa bạn trở lại Câu hỏi số 2 trong cuộc khảo sát.

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

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 fragment thông tin chi tiết về cây.

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

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

6. Khắc phục thao tác Quay lại

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

Ghi đè phương thức doUpdateVisitedHistory để xác định xem có nên chặn tính năng điều hướng Quay lại hay không. Logic để xử lý tính năng điều hướng Quay lại như sau:
- Nếu có nhiều trang để quay lại trong WebView (webView.canGoBack()), thì OnBackPressedCallback phương thức sẽ được bật.
- 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ị tắt. Do đó, thao tác 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 vào cuộc khảo sát một lần nữa cho đến khi bạn đến Câu hỏi số 3.
Sử dụng thao tác Quay lại, hãy điều hướng quay lại chế độ xem thông tin 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à một ví dụ về hình thức của tất cả những nội dung này sau khi bạn khắc phục:

Xem trước ảnh động mới cho thao tác 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 tính năng đ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 đã tìm hiểu 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 tính năng xem trước thao tác quay lại được cung cấp trong Android.

Nội dung đã đề cập

Cách cho phép ứng dụng của bạn bắt đầu sử dụng các API hỗ trợ tính năng 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ả về tính năng điều hướng Quay lại cho hệ thống
Các lựa chọn khác để xử lý thao tác Quay lại
Trải nghiệm người dùng mới sắp có trong Android 13, cung cấp tính năng xem trước thao tác quay lại

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ợ tính năng xem trước thao tác quay lại

Sử dụng 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

Lấy một thiết bị

Bật tính năng đ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ý thao tác Quay lại

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

6. Khắc phục thao tác Quay lại

Bật hoặc tắt tính năng điều hướng Quay lại bằng OnBackPressedCallback

Xem trước ảnh động mới cho thao tác 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