在 Views 中新增預測返回動畫支援功能

您可以使用 Views 或 Compose,透過預測返回手勢建立自訂應用程式內屬性動畫和轉場效果、自訂跨活動動畫,以及自訂跨片段動畫。如要試用 Compose 方法,請參閱「新增預測返回動畫支援功能」。

使用 Progress API 新增自訂轉場效果

在 AndroidX Activity 1.8.0-alpha01 以上版本中,您可以使用 Predictive Back Progress API,為應用程式的預測返回手勢開發自訂動畫。Progress API 有助於為檢視區塊建立動畫,但在為片段間的轉場效果建立動畫時,則有其限制。OnBackPressedCallback 中已導入 handleOnBackProgressedhandleOnBackCancelledhandleOnBackStarted 方法,可在使用者滑動返回時為物件建立動畫。如果除了系統或 Material 元件動畫提供的預設動畫,您還需要其他自訂動畫,請使用這些方法。

我們預期大部分應用程式都會使用回溯相容的 AndroidX API,但 OnBackAnimationCallback 介面也提供類似的平台 API,方便您在 Android 14 以上版本中進行測試。

搭配使用 AndroidX 轉場效果與 Progress API

在 Android 14 以上版本,Progress API 可搭配使用 AndroidX Transitions 1.5.0-alpha01 以上版本,建立預測返回轉場效果。

  1. 使用 TransitionManager#controlDelayedTransition (而非 beginDelayedTransition),在使用者滑動返回時顯示轉場效果。
  2. handleOnBackStarted 中建立轉場效果。
  3. currentFractionBackEvent.progress 建立關聯,公開使用者已滑動返回的距離,藉此在 handleOnBackProgressed 中的返回事件顯示轉場效果。
  4. 在使用者於 handleOnBackPressed 中採取返回手勢後完成轉場效果。
  5. 最後在 handleOnBackCancelled 內重設轉場效果的狀態。

以下影片、Kotlin 程式碼和 XML 示範如何使用 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>

使用預測返回轉場效果時,請注意下列事項:

  • 使用 isSeekingSupported,檢查轉場效果是否支援預測返回手勢。
  • 覆寫 isSeekingSupported,針對自訂轉場效果傳回 true。
  • 為每個動畫建立一個控制器。
  • AndroidX 轉換支援預測返回轉場效果,但架構轉換不支援。請從架構轉換遷移,改用 Animator 和 AndroidX 轉換。
  • 預測返回轉場效果適用於搭載 Android 14 以上版本的裝置,且無法回溯相容。
  • 系統也支援使用 XML 場景建立的轉場效果。在 handleOnBackStarted 中,請將 TransitionSeekController 設為 TransitionManager.createSeekController 的結果,而非 controlDelayedTransition 的結果。

其他資源