ビューで予測型「戻る」アニメーションのサポートを追加

ビューまたは Compose を使用して、カスタムのアプリ内プロパティ アニメーションと遷移、カスタムのアクティビティ間アニメーション、カスタムのフラグメント間アニメーションを予測型「戻る」ジェスチャーで作成できます。Compose の方法を試すには、予測型「戻る」アニメーションのサポートを追加するをご覧ください。

Progress API を使用してカスタム遷移を追加する

AndroidX Activity 1.8.0-alpha01 以降では、Predictive Back Progress API を使用して、アプリ内の予測型「戻る」ジェスチャーのカスタム アニメーションを開発できます。Progress API はビューのアニメーション化に役立ちますが、フラグメント間の遷移のアニメーション化には制限があります。OnBackPressedCallback 内に handleOnBackProgressed メソッド、handleOnBackCancelled メソッド、handleOnBackStarted メソッドを導入し、ユーザーが後方にスワイプしている間にオブジェクトをアニメーション化するようにしました。これらのメソッドは、システムやマテリアル コンポーネントのアニメーションで提供されるデフォルトのアニメーションよりも高度なカスタマイズが必要な場合に使用します。

ほとんどのアプリでは、下位互換性のある AndroidX API が使用されることが想定されますが、OnBackAnimationCallback インターフェース内には、Android 14 以降でテストできる同様のプラットフォーム API もあります。

AndroidX の遷移で Progress API を使用する

Android 14 以降では、AndroidX Transitions 1.5.0-alpha01 以降で Progress API を使用して、予測型「戻る」遷移を作成できます。

  1. ユーザーが後方にスワイプしたときに遷移を再生するには、beginDelayedTransition ではなく TransitionManager#controlDelayedTransition を使用します。
  2. handleOnBackStarted 内に遷移を作成します。
  3. currentFraction を BackEvent.progress に関連付けることで、handleOnBackProgressed 内の「戻る」イベントで遷移を再生します。これにより、ユーザーが過去にスワイプした距離が開示されます。
  4. ユーザーが handleOnBackPressed で「戻る」操作を確定したら、遷移を終了します。
  5. 最後に、handleOnBackCancelled 内で遷移の状態をリセットします。

次の動画、Kotlin コード、XML は、OnBackPressedCallback で実装された 2 つのボックス間のカスタム遷移を示しています。

    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 を使用して、遷移が予測型「戻る」をサポートしているかどうかを確認します。
  • カスタム遷移について true を返すように isSeekingSupported をオーバーライドします。
  • アニメーションごとに 1 つのコントローラを作成します。
  • 予測型「戻る」遷移は AndroidX 遷移でサポートされていますが、フレームワーク遷移ではサポートされていません。フレームワークのトランジションから移行し、代わりに Animator と AndroidX トランジションを使用します。
  • 予測型「戻る」遷移は Android 14 以降を搭載したデバイスでサポートされており、下位互換性はありません。
  • XML シーンで作成された遷移もサポートされています。handleOnBackStarted で、TransitionSeekController を controlDelayedTransition の結果ではなく TransitionManager.createSeekController の結果に設定します。

参考情報