Ajouter la prise en charge des animations pour la prévisualisation du Retour dans les vues

Vous pouvez créer des animations et des transitions de propriétés intégrées à l'application, des animations multi-activités personnalisées et des animations multi-fragments personnalisées avec des gestes de prévisualisation du Retour à l'aide de Views ou de Compose. Pour essayer la méthode Compose, consultez Ajouter la prise en charge des animations pour la prévisualisation du Retour.

Ajouter des transitions personnalisées à l'aide de l'API Progress

Avec AndroidX Activity 1.8.0-alpha01 ou version ultérieure, vous pouvez utiliser les API Progress de prévisualisation du Retour pour développer des animations personnalisées pour le geste Retour dans votre application. Les API Progress sont utiles pour animer des vues, mais elles présentent des limites lorsqu'il s'agit d'animer des transitions entre des fragments. Dans OnBackPressedCallback, nous avons introduit les méthodes handleOnBackProgressed, handleOnBackCancelled et handleOnBackStarted pour animer des objets lorsque l'utilisateur balaie l'écran vers l'arrière. Utilisez ces méthodes si vous avez besoin de personnaliser davantage les animations par défaut fournies par le système ou les animations du composant Material.

La plupart des applications devraient utiliser les API AndroidX rétrocompatibles. Toutefois, il existe des API de plate-forme similaires dans l'interface OnBackAnimationCallback que vous pouvez tester dans Android 14 et versions ultérieures.

Utiliser les API Progress avec AndroidX Transitions

À partir d'Android 14, les API Progress peuvent être utilisées avec AndroidX Transitions 1.5.0-alpha01 ou version ultérieure pour créer des transitions de prévisualisation du Retour.

  1. Utilisez TransitionManager#controlDelayedTransition au lieu de beginDelayedTransition pour activer les transitions lorsque l'utilisateur balaie l'écran pour revenir en arrière.
  2. Créez la transition dans handleOnBackStarted.
  3. Lancez la transition avec l'événement de retour en arrière dans handleOnBackProgressed en associant currentFraction à BackEvent.progress, qui indique jusqu'où l'utilisateur a balayé l'écran.
  4. Dans handleOnBackPressed, arrêtez la transition une fois que l'utilisateur a terminé son geste.
  5. Enfin, réinitialisez l'état de la transition dans handleOnBackCancelled.

La vidéo, le code Kotlin et le code XML suivants illustrent une transition personnalisée entre deux zones implémentées avec 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>

Lorsque vous utilisez les transitions de prévisualisation du Retour, gardez à l'esprit les points suivants :

  • Utilisez isSeekingSupported pour vérifier si la transition est compatible avec la prévisualisation du Retour.
  • Forcez isSeekingSupported afin de renvoyer la valeur "true" pour vos transitions personnalisées.
  • Créez un contrôleur par animation.
  • Les transitions de prévisualisation du Retour sont compatibles avec les transitions AndroidX, mais pas avec les transitions de framework. Migrez depuis les transitions de framework et utilisez plutôt Animator et les transitions AndroidX.
  • Les transitions de prévisualisation du Retour sont compatibles avec les appareils exécutant Android 14 ou version ultérieure et ne sont pas rétrocompatibles.
  • Les transitions créées avec des scènes XML sont également prises en charge. Dans handleOnBackStarted, définissez votre TransitionSeekController sur le résultat de TransitionManager.createSeekController plutôt que sur celui de controlDelayedTransition.

Autres ressources