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

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 bằng cách sử dụng Khung hiển thị hoặc Compose. Để dùng cách của Compose, hãy xem phần Thêm tính năng hỗ trợ cho ảnh động 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 Predictive Back Progress API để 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. Progress API rất hữu ích trong việc tạo ảnh động cho các khung hiển thị nhưng có những hạn chế khi tạo ảnh động cho các hiệu ứ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. Hãy sử dụng các phương thức này nếu bạn cần tuỳ chỉnh nhiều hơn số ảnh động mặc định do hệ thống hoặc ảnh động Thành phần Material cung cấp.

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 giao diện OnBackAnimationCallback cũng có sẵn các API nền tảng tương tự để kiểm thử trong 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 lượt chuyển đổi khung và thay vào đó sử dụng Animator và các lượt chuyển đổi 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.

Tài nguyên khác