Thêm tính năng hỗ trợ cho ảnh động xem trước thao tác quay lại

Khi sử dụng API quay lại hệ thống, bạn có thể chọn nhận các ảnh động trong ứng dụng và hỗ trợ các hiệu ứng chuyển đổi tuỳ chỉnh.

Video 1: Ảnh động xem trước thao tác quay lại

Sau khi chọn tham gia, ứng dụng của bạn sẽ hiện ảnh động cho thao tác quay lại trang chủ, giữa các hoạt động và tác vụ.

Bạn cũng có thể nâng cấp phần phụ thuộc thành phần Material lên phiên bản 1.10.0 của MDC Android để nhận được các ảnh động của thành phần Material như sau:

Hãy xem hướng dẫn dành cho nhà phát triển thành phần Material trên GitHub để biết thêm thông tin.

Video này minh hoạ nhanh về ảnh động xem trước thao tác quay lại cho nhiều hoạt động và thao tác quay lại trang chủ qua ứng dụng Cài đặt của Android.

  1. Ví dụ về ảnh động của nhiều hoạt động: Trong ảnh động, người dùng vuốt ngược lại để quay lại màn hình cài đặt trước đó.
  2. Ví dụ về ảnh động quay lại trang chủ: Lúc này, trên màn hình trước, người dùng bắt đầu vuốt ngược lại lần thứ hai, thì bản xem trước của màn hình chính cùng với hình nền sẽ hiện ra.
  3. Người dùng tiếp tục vuốt sang phải, thì ảnh động cho thấy cửa sổ hiện tại bị thu nhỏ thành biểu tượng trên màn hình chính sẽ xuất hiện.
  4. Giờ đây, người dùng hoàn toàn đã trở lại màn hình chính.

Tìm hiểu thêm về cách Thêm hoạt động hỗ trợ cho tính năng xem trước thao tác quay lại.

Thêm hiệu ứng chuyển đổi và ảnh động tuỳ chỉnh trong ứng dụng

Bạn có thể tạo ảnh động và hiệu ứng chuyển đổi tuỳ chỉnh cho thuộc tính trong ứng dụng, ảnh động tuỳ chỉnh trên nhiều hoạt động và ảnh động tuỳ chỉnh trên nhiều mảnh bằng cử chỉ xem trước thao tác quay lại.

Thêm hiệu ứng chuyển đổi tuỳ chỉnh bằng Progress API

Trên AndroidX Activity 1.8.0-alpha01 trở lên, bạn có thể sử dụng API Dần dần xem trước thao tác quay lại để phát triển các ảnh động tuỳ chỉnh cho cử chỉ xem trước thao tác quay lại trong ứng dụng. API Tiến trình rất hữu ích trong việc tạo ảnh động cho thành phần hiển thị nhưng có những hạn chế khi tạo ảnh động cho hiệu ứng chuyển đổi giữa các mảnh. Trong OnBackPressedCallback, chúng tôi đã giới thiệu các phương thức handleOnBackProgressed, handleOnBackCancelled và handleOnBackStarted để tạo ảnh động cho đối tượng trong khi người dùng vuốt để quay lại. Sử dụng các phương thức này nếu bạn cần tuỳ chỉnh nhiều hơn ảnh động mặc định do hệ thống cung cấp hoặc ảnh động Thành phần Material.

Chúng tôi dự kiến rằng hầu hết ứng dụng sẽ dùng các API AndroidX tương thích ngược. Tuy nhiên, trong OnBackAnimationCallback cũng có sẵn các API nền tảng tương tự để kiểm thử trong Bản dùng thử 1 cho nhà phát triển trên Android 14 trở lên.

Sử dụng Progress API với hiệu ứng chuyển đổi AndroidX

Bạn có thể sử dụng Progress API với AndroidX Transitions 1.5.0-alpha01 trở lên trên Android 14 trở lên để tạo các hiệu ứng chuyển đổi Xem trước thao tác quay lại.

  1. Sử dụng TransitionManager#controlDelayedTransition thay vì beginDelayedTransition để phát các hiệu ứng chuyển đổi khi người dùng vuốt ngược lại.
  2. Tạo hiệu ứng chuyển đổi trong handleOnBackStarted.
  3. Phát hiệu ứng chuyển đổi với sự kiện quay lại trong handleOnBackProgressed bằng cách liên kết currentFraction với BackEvent.progress để cho biết khoảng cách mà người dùng đã vuốt ngược lại.
  4. Hoàn tất hiệu ứng chuyển đổi sau khi người dùng thực hiện cử chỉ quay lại trong handleOnBackPressed.
  5. Cuối cùng, đặt lại hiệu ứng chuyển đổi trong handleOnBackCancelled.

Video, mã Kotlin và XML sau đây minh hoạ hiệu ứng chuyển đổi tuỳ chỉnh giữa 2 hộp được triển khai bằng OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

Khi sử dụng hiệu ứng chuyển đổi Xem trước thao tác quay lại, hãy lưu ý làm như sau:

  • Dùng isSeekingSupported để kiểm tra xem hiệu ứng chuyển đổi có hỗ trợ cử chỉ Xem trước thao tác quay lại hay không.
  • Ghi đè isSeekingSupported để trả về giá trị true cho hiệu ứng chuyển đổi tuỳ chỉnh.
  • Tạo một bộ điều khiển cho mỗi ảnh động.
  • Hiệu ứng chuyển đổi Xem trước thao tác quay lại được hỗ trợ với hiệu ứng chuyển đổi AndroidX, nhưng không được hỗ trợ với hiệu ứng chuyển đổi khung. Di chuyển khỏi các hiệu ứng chuyển đổi khung và sử dụng hiệu ứng chuyển đổi Animator và AndroidX.
  • Hiệu ứng chuyển đổi Xem trước thao tác quay lại được hỗ trợ trên các thiết bị chạy Android 14 trở lên và không tương thích ngược.
  • Các hiệu ứng chuyển đổi được tạo bằng cảnh XML cũng được hỗ trợ. Trong handleOnBackStarted, hãy đặt TransitionSeekController thành kết quả của TransitionManager.createSeekController thay vì kết quả của controlDelayedTransition.

Thêm hiệu ứng chuyển đổi tuỳ chỉnh cho hoạt động trên Android 14 trở lên

Để đảm bảo các hiệu ứng chuyển đổi tuỳ chỉnh của Hoạt động hỗ trợ tính năng Xem trước thao tác quay lại trên Android 14 trở lên, bạn có thể sử dụng overrideActivityTransition thay vì overridePendingTransition. Điều này có nghĩa là ảnh động hiệu ứng chuyển đổi sẽ phát khi người dùng vuốt ngược lại.

Để có một ví dụ về cách hoạt động của điều này, hãy tưởng tượng một tình huống trong đó Hoạt động B nằm ở trên Hoạt động A trong ngăn xếp lui. Bạn sẽ xử lý ảnh động tuỳ chỉnh của Hoạt động theo cách sau:

  • Gọi chuyển đổi mở hoặc đóng trong phương thức onCreate của Hoạt động B.
  • Khi người dùng chuyển đến Hoạt động B, hãy sử dụng OVERRIDE_TRANSITION_OPEN. Khi người dùng vuốt để quay lại Hoạt động A, hãy sử dụng OVERRIDE_TRANSITION_CLOSE.

  • Khi chỉ định OVERRIDE_TRANSITION_CLOSE, enterAnim là ảnh động tiến nhập của Hoạt động A và exitAnim là ảnh động rời khỏi của Hoạt động B.

Thêm hoạt động hỗ trợ cho tính năng Xem trước thao tác quay lại bằng các mảnh

Khi triển khai tính năng Xem trước thao tác quay lại bằng các mảnh, có hai phương pháp.

Sử dụng các API hiện có

Bạn nên sử dụng các API hiện có. Các API này cho phép bạn vuốt từ cạnh màn hình để thao tác với Animator hoặc hiệu ứng chuyển đổi Androidx bằng cử chỉ. Việc bạn di chuyển cử chỉ qua một ngưỡng sẽ xác định liệu thao tác đã hoàn tất và bạn quay lại mảnh trước hay thao tác đó đã bị huỷ và bạn vẫn ở trên mảnh hiện tại. Để biết thêm thông tin, hãy xem bài viết Điều hướng giữa các mảnh bằng ảnh động.

Hãy lưu ý đến những yếu tố sau:

  • Nhập Transitions 1.5.0 trở lên và Fragments 1.7.0 trở lên. Đa số tính năng hỗ trợ xem trước thao tác quay lại bằng các Mảnh dựa trên hiệu ứng Chuyển đổi có khả năng tìm kiếm các ảnh động, điều này chỉ có thể thực hiện trong phiên bản Transitions 1.5.0 trở lên.
  • Sử dụng các Mảnh, với FragmentManager hoặc thành phần Điều hướng, để xử lý ngăn xếp lui. Tính năng Xem trước thao tác quay lại không được hỗ trợ nếu bạn quản lý ngăn xếp lui của riêng mình. Di chuyển khỏi các ngăn xếp lui mà FragmentManager không biết.
  • Một số thư viện có hỗ trợ tính năng Xem trước thao tác quay lại. Hãy xem tài liệu để biết chắc chắn.
  • Lớp Animator và thư viện AndroidX Transition được hỗ trợ.
  • Lớp Animation và thư viện Transition của khung không được hỗ trợ.
  • Ảnh động xem trước chỉ hoạt động trên các thiết bị chạy Android 14 trở lên.

Bạn có thể dùng tính năng xem trước thao tác quay lại trên nhiều mảnh trong các trường hợp sau:

Một số chuyển động Material hỗ trợ tính năng xem trước thao tác quay lại kể từ 1.12.02-alpha02 trở lên, bao gồm MaterialFadeThrough, MaterialSharedAxis và MaterialFade. Lưu ý MaterialContainerTransform không hỗ trợ tính năng dự đoán thao tác quay lại.

Sử dụng lệnh gọi lại

Bạn có thể tạo hiệu ứng chuyển đổi giữa các mảnh bằng lệnh gọi lại, tuy nhiên, có một giới hạn đã biết khi sử dụng lệnh gọi lại, trong đó người dùng không thể xem mảnh trước đó khi vuốt ngược lại. Để tạo hiệu ứng chuyển đổi phần tử dùng chung trên nhiều mảnh tương ứng với hướng dẫn thiết kế về tính năng xem trước thao tác quay lại, hãy làm như sau:

Tạo một OnBackPressedCallback. Trong handleOnBackProgressed, hãy điều chỉnh tỷ lệ và chuyển mảnh. Sau đó, kéo ra khỏi ngăn xếp lui. Tiếp theo, hãy chạy hiệu ứng chuyển đổi phần tử dùng chung bằng cách sử dụng setSharedElementReturnTransition bên ngoài lệnh gọi lại.

Để biết thêm thông tin, hãy xem mã mẫu trên GitHub.

Yêu cầu

Sử dụng bảng sau để tìm hiểu những nội dung do targetSdkVersion và compileSdkVersion, phiên bản thiết bị, phần phụ thuộc, cờ tệp kê khai và cờ mảnh kiểm soát. Bảng này đề cập đến các yêu cầu đối với mã.

Danh mục Ảnh động compileSdk targetSdk Phiên bản thiết bị android:enableOnBackInvokedCallback Phần phụ thuộc
Ảnh động hệ thống Quay lại trang chủ 33 Khán giả có 35 TRUE Không có
Nhiều hoạt động 34 Khán giả có 35 TRUE Không có
Nhiều nhiệm vụ 34 Khán giả có 35 TRUE Không có
Nền tảng Nhiều hoạt động tuỳ chỉnh 34 Khán giả có 35 TRUE Không có
Nền tảng API tiến trình 34 Khán giả có 34 TRUE Không có
Thành phần Material Bảng dưới cùng 34 Khán giả có 34 TRUE Thành phần Material 1.10.0
Trang bên 34 Khán giả có 34 TRUE Thành phần Material 1.10.0
Ngăn điều hướng 34 Khán giả có 34 TRUE Thành phần Material 1.10.0
Tìm kiếm 34 Khán giả có 34 TRUE Thành phần Material 1.10.0
Ảnh động Jetpack Phân mảnh tuỳ chỉnh của AndroidX 34 Khán giả có 34 TRUE AndroidX Fragment 1.7
Chuyển đổi AndroidX tuỳ chỉnh 34 Khán giả có 34 TRUE AndroidX Transition 1.5
Jetpack API tiến trình 34 Khán giả có 34 TRUE AndroidX Activity 1.8

Tài nguyên khác