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.

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:

• Bảng dưới cùng
• Bảng bên
• Tìm kiếm

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

Với 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 ảnh động tuỳ chỉnh cho tính năng xem trước thao tác quay lại trong ứng dụng. Progress API rất hữu ích khi tạo ảnh động cho các khung hiển thị nhưng có một số hạn chế khi tạo ảnh động chuyển đổi giữa các mảnh. Trong OnBackPressedCallback, chúng tôi đã ra mắt 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 ngược 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 các ảnh động mặc định do hệ thống cung cấp hoặc các ảnh động trong 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. Bạn nên thoát khỏi các hiệu ứng chuyển đổi khung.
• 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

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

Sử dụng 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 của màn hình để thao tác với hiệu ứng chuyển đổi của Animator hoặc 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 các 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.
• 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:

• Tạo ảnh động cho thành phần điều hướng.
• Tạo ảnh động bằng setCustomAnimations.
• Tạo ảnh động cho quá trình chuyển đổi vào và thoát bằng setEnterTransition, setExitTransition, setReenterTransition và setReturnTransition.
• Tạo ảnh động cho các quá trình chuyển đổi phần tử dùng chung bằng setSharedElementEnterTransition và setSharedElementReturnTransition.

Một số chuyển động Material có 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 ý rằng MaterialContainerTransform không hỗ trợ tính năng xem trước thao tác quay lại.

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

Bạn có thể tạo chuyển đổi trên nhiều mảnh bằng lệnh gọi lại. Tuy nhiên, có một hạn chế đã biết khi sử dụng lệnh gọi lại mà người dùng không thể thấy 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ế 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à thay đổi mảnh. Sau đó đẩy ra khỏi ngăn xếp lui. Tiếp theo, hãy chạy hiệu ứng chuyển đổi phần tử được chia sẻ 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 các bảng sau đây để xem nội dung nào được kiểm soát bởi các tuỳ chọn cho nhà phát triển, targetSdkVersion và compileSdkVersion, phiên bản thiết bị, phần phụ thuộc, cờ tệp kê khai và cờ mảnh. Bảng đầu tiên đề cập đến các yêu cầu đối với mã.

Bảng sau đây đề cập đến các yêu cầu cho phép người dùng xem ảnh động.

Tài nguyên khác

• Mã mẫu xem trước thao tác quay lại
• Kiến thức cơ bản về video trước đây của hệ thống
• Xây dựng tương lai của video trên Android