Lorsque vous utilisez les API du système pour le Retour, vous pouvez choisir d'afficher des animations dans l'application et de prendre en charge les transitions personnalisées.
Une fois cette option activée, votre application affiche des animations multi-activités, multitâches et de retour à l'écran d'accueil.
Vous pouvez également mettre à niveau la dépendance de votre composant Material vers la version 1.10.0 de MDC Android pour recevoir des animations de composants Material comme celles-ci :
Pour en savoir plus, consultez le guide des composants Material pour les développeurs sur GitHub.
La vidéo présente un court exemple d'animations de prévisualisation du Retour dans le cadre du passage d'une activité à une autre ou du retour à l'écran d'accueil et pour l'application Paramètres d'Android.
- Dans l'animation, l'utilisateur balaie l'écran vers l'arrière pour retourner à l'écran de paramètres précédent. C'est un exemple d'animation multi-activité.
- De retour à l'écran précédent, l'utilisateur commence à balayer l'écran une deuxième fois vers l'arrière pour afficher un aperçu de l'écran d'accueil avec son fond d'écran. C'est un exemple d'animation de retour à l'écran d'accueil.
- L'utilisateur continue de balayer l'écran vers la droite. S'affiche alors une animation de la fenêtre qui rétrécit jusqu'à devenir l'icône de l'écran d'accueil.
- L'utilisateur est à présent pleinement de retour à l'écran d'accueil.
Découvrez comment ajouter la compatibilité de la prévisualisation des gestes Retour.
Ajouter des animations et des transitions personnalisées aux applications
Vous pouvez créer des animations et des transitions personnalisées pour les propriétés intégrées à l'application, les animations multi-activités et les animations personnalisées entre fragments gestes de 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 la prévisualisation du Retour
API Progress permettant de développer des animations personnalisées pour
la prévisualisation du geste Retour dans votre application. Les API Progress permettent d'animer
les vues, mais elles présentent des limites pour l'animation de transitions entre les fragments. Dans
OnBackPressedCallback
nous avons présenté
handleOnBackProgressed
,
handleOnBackCancelled
et
handleOnBackStarted
pour animer des objets lorsque l'utilisateur balaie l'écran vers l'arrière. Utilisez ces méthodes si vous
devez personnaliser davantage que 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 la Preview développeur 1 d'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.
- Utilisez
TransitionManager#controlDelayedTransition
au lieu debeginDelayedTransition
pour activer les transitions lorsque l'utilisateur balaie l'écran pour revenir en arrière. - Créez la transition dans
handleOnBackStarted
. - Lancez la transition avec l'événement de retour en arrière dans
handleOnBackProgressed
en associantcurrentFraction
àBackEvent.progress
, qui indique jusqu'où l'utilisateur a balayé l'écran. - Dans
handleOnBackPressed
, arrêtez la transition une fois que l'utilisateur a terminé son geste. - 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. Nous vous recommandons d'abandonner ce type de transitions.
- 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 votreTransitionSeekController
sur le résultat deTransitionManager.createSeekController
plutôt que sur celui decontrolDelayedTransition
.
Ajouter des transitions d'activité personnalisées sous Android 14 ou version ultérieure
Pour vous assurer que les transitions d'activité personnalisées sont compatibles avec la prévisualisation du Retour sous Android 14 ou version ultérieure, vous pouvez utiliser overrideActivityTransition
au lieu de overridePendingTransition
. Cela signifie que l'animation de transition s'exécute pendant que l'utilisateur balaie l'écran vers l'arrière.
Pour illustrer cette approche, imaginez un scénario dans lequel l'activité B se superpose à l'activité A dans la pile "Retour". Vous géreriez alors les animations d'activité personnalisées comme suit :
- Appel des transitions d'ouverture ou de fermeture dans la méthode
onCreate
de l'activité B. - Lorsque l'utilisateur accède à l'activité B, utilisation de
OVERRIDE_TRANSITION_OPEN
. Lorsque l'utilisateur balaie l'écran pour revenir à l'activité A, utilisation deOVERRIDE_TRANSITION_CLOSE
. Lorsque vous spécifiez
OVERRIDE_TRANSITION_CLOSE
,enterAnim
est l'animation d'entrée de l'activité A etexitAnim
est l'animation de sortie de l'activité B.
Ajouter la prise en charge de la prévisualisation du Retour avec fragments
Lorsque vous implémentez la prévisualisation du Retour avec des fragments, il existe deux approches.
Utiliser des API existantes
Nous vous recommandons d'utiliser les API existantes. Ces API vous permettent de passer bord de l'écran pour manipuler vos transitions Animator ou AndroidX à l'aide de la commande geste. Le fait de déplacer le geste au-delà d'un seuil détermine s'il est terminée et que vous revenez au fragment précédent, ou s'il est annulé et que vous restent sur le fragment actuel. Pour en savoir plus, consultez la section Parcourir les fragments à l'aide d'animations.
Tenez compte des facteurs suivants:
- Importez Transitions 1.5.0 ou version ultérieure et Fragments 1.7.0 ou version ultérieure. Une grande partie de la prise en charge de la prévisualisation du Retour dans les fragments repose sur la capacité des transitions à rechercher des animations, ce qui n'est possible que dans la version 1.5.0 ou ultérieure.
- Utilisez des fragments avec
FragmentManager
ou le composant de navigation pour gérer la pile "Retour". La prévisualisation du Retour n'est pas prise en charge si vous gérez votre propre pile "Retour". - Certaines bibliothèques prennent en charge la prévisualisation du Retour. Consultez la documentation pour vous en assurer.
- La classe
Animator
et la bibliothèqueAndroidX Transition
sont compatibles. - La classe
Animation
et la bibliothèqueTransition
du framework ne sont pas compatibles. - Les animations prédictives ne fonctionnent que sur les appareils qui exécutent Android 14 ou version ultérieure.
Utilisez des interfragments pour la prévisualisation du Retour dans les situations suivantes :
- Animez le composant de navigation.
- Animez vos contenus avec
setCustomAnimations
. - Animer des transitions d'entrée et de sortie avec
setEnterTransition
setExitTransition
,setReenterTransition
etsetReturnTransition
. - Animer des transitions d'éléments partagés avec
setSharedElementEnterTransition
etsetSharedElementReturnTransition
Quelques mouvements de matériaux
prendre en charge la prévisualisation du Retour à partir du
1.12.02-alpha02
ou version ultérieure, y compris MaterialFadeThrough
, MaterialSharedAxis
et
MaterialFade
Remarque : MaterialContainerTransform
n'est pas compatible avec la prédiction
en arrière-plan.
Utiliser des rappels
Vous pouvez créer une transition entre fragments à l'aide de rappels, mais il existe limite connue lors de l'utilisation de rappels où les utilisateurs ne peuvent pas voir fragment lorsque vous balayez l'écran vers l'arrière. Pour créer une transition d'éléments partagés entre plusieurs fragments correspondant à la prévisualisation du Retour conseils de conception, suivantes:
Créez un OnBackPressedCallback
. Dans handleOnBackProgressed
, effectuez le scaling
décaler le fragment. Ensuite, faites-le glisser depuis la pile "Retour". Exécuter ensuite l'élément partagé
transition à l'aide de setSharedElementReturnTransition
en dehors du rappel.
Pour en savoir plus, consultez l'exemple de code sur GitHub.
Conditions requises
Utilisez les tableaux suivants pour comprendre ce qui est contrôlé par les options pour les développeurs, targetSdkVersion
et compileSdkVersion
, la version de l'appareil, les dépendances, les indicateurs de fichier manifeste et les indicateurs de fragment. Le premier tableau fait référence aux exigences de code.
Catégorie | Animation | compileSdk | targetSdk | android:enableOnBackInvokedCallback | Dépendance |
---|---|---|---|---|---|
Animations système | Revenir à l'accueil | 33 | Tout | TRUE | Aucune |
Multiactivité | 34 | Tout | TRUE | Aucune | |
Multitâche | 34 | Tout | TRUE | Aucune | |
Plate-forme | Multi-activité personnalisée | 34 | Tout | TRUE | Aucune |
Plate-forme d'API Progress | 34 | Tout | TRUE | Aucune | |
Composants Material | Bottom sheet | 34 | Tout | TRUE | Composant Material 1.10.0 |
Feuille latérale | 34 | Tout | TRUE | Composant Material 1.10.0 | |
Panneau de navigation | 34 | Tout | TRUE | Composant Material 1.10.0 | |
Rechercher | 34 | Tout | TRUE | Composant Material 1.10.0 | |
Animations Jetpack | Multifragments AndroidX personnalisés | 34 | Tout | TRUE | Fragment AndroidX 1.7 |
Transitions AndroidX personnalisées | 34 | Tout | TRUE | Transition AndroidX 1.5 | |
API Jetpack Progress | 34 | Tout | TRUE | Activité AndroidX 1.8 |
Le tableau suivant fait référence aux exigences qui permettent aux utilisateurs de voir les animations.
Catégorie | Animation | Option pour les développeurs activée | Version de l'appareil |
---|---|---|---|
Animations système | Revenir à l'accueil | TRUE | 33 |
Multiactivité | TRUE | 34 | |
Multitâche | TRUE | 34 | |
Plate-forme | Multi-activité personnalisée | TRUE | 34 |
Plate-forme d'API Progress | FALSE | 34 | |
Composants Material | Bottom sheet | FALSE | 34 |
Feuille latérale | FALSE | 34 | |
Panneau de navigation | FALSE | 34 | |
Rechercher | FALSE | 34 | |
Animations Jetpack | Multifragments AndroidX personnalisés | FALSE | 34 |
Transitions AndroidX personnalisées | FALSE | 34 | |
API Jetpack Progress | FALSE | 34 |
Ressources supplémentaires
- Exemples de code de prévisualisation du Retour
- Principes de base des retours système (vidéo)
- Préparer l'avenir d'Android (vidéo)