Les transitions d'activité dans les applications Material Design permettent de créer des liens visuels entre différents états par le mouvement et les transformations entre des éléments communs. Vous pouvez spécifier des animations personnalisées pour les transitions d'entrée et de sortie, ainsi que pour les transitions d'éléments partagés entre les activités.
Figure 1 : A avec des éléments partagés.
- Une transition Entrée détermine la façon dont les vues dans une activité
d'entrer dans la scène. Par exemple, dans la transition d'entrée
explode
, le entrent dans la scène depuis l'extérieur et s'envolent vers le centre l'écran. - Une transition de sortie détermine la façon dont les vues d'une sortie d'activité
la scène. Par exemple, dans la transition de sortie
explode
, les vues pour sortir du centre de la scène. - Une transition d'éléments partagés détermine la façon dont les vues sont
partagée entre deux activités passe de l'une à l'autre. Par exemple :
Si deux activités ont la même image dans des positions et des tailles différentes,
changeImageTransform
: la transition d'élément partagé se traduit et adapte l'image de manière fluide entre ces activités.
Android est compatible avec les transitions d'entrée et de sortie suivantes:
explode
: déplace les vues vers ou depuis le centre de la scène.slide
: déplace les vues vers l'intérieur ou à partir de l'un des bords de la .fade
: ajoute ou supprime une vue de la scène en modifiant sa l'opacité.
Toute transition qui étend la classe Visibility
est acceptée en tant que transition d'entrée ou de sortie.
Pour en savoir plus, consultez la documentation de référence de l'API
Transition
.
Android est également compatible avec les transitions d'éléments partagés suivantes:
changeBounds
: anime les modifications des limites de mise en page de la cible. de vues.changeClipBounds
: anime les modifications des limites de clip de la cible. de vues.changeTransform
: anime les changements d'échelle et de rotation de des vues cibles.changeImageTransform
: anime les changements de taille et d'échelle des des images cibles.
Lorsque vous activez les transitions d'activité dans votre application, le fondu enchaîné par défaut entre les activités d'entrée et de sortie.
Figure 2. Transition de scène avec un élément partagé.
Pour obtenir un exemple de code animé entre des activités à l'aide d'éléments partagés, voir ActivitySceneTransitionBasic.
Vérifier la version du système
Les API de transition d'activité sont disponibles sur Android 5.0 (API 21) ou version ultérieure. Pour préserver la compatibilité avec les versions antérieures d'Android, cochez la case
système version
au moment de l'exécution
appeler les API pour les fonctionnalités suivantes:
Kotlin
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
Java
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
Spécifier des transitions personnalisées
Commencez par activer les transitions de contenu de fenêtre avec android:windowActivityTransitions
.
lorsque vous définissez un style qui hérite du thème Material. Vous pouvez également spécifier
Entrée, sortie et transitions d'éléments partagés dans la définition de votre style:
<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowActivityTransitions">true</item> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <!-- specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform</item> </style>
Dans cet exemple, la transition change_image_transform
est définie comme suit:
<!-- res/transition/change_image_transform.xml --> <!-- (see also Shared Transitions below) --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeImageTransform/> </transitionSet>
L'élément changeImageTransform
correspond à l'élément
ChangeImageTransform
. Pour en savoir plus, consultez l'API
référence pour Transition
.
Pour activer les transitions de contenu de fenêtre dans votre code, appelez plutôt la méthode
Fonction Window.requestFeature()
:
Kotlin
// Inside your activity (if you did not enable transitions in your theme) with(window) { requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS) // Set an exit transition exitTransition = Explode() }
Java
// Inside your activity (if you did not enable transitions in your theme) getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS); // Set an exit transition getWindow().setExitTransition(new Explode());
Pour spécifier des transitions dans votre code, appelez ces fonctions avec une
Objet Transition
:
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
Les setExitTransition()
et
Les fonctions setSharedElementExitTransition()
définissent la sortie
pour l'activité d'appel. Les setEnterTransition()
et
Les fonctions setSharedElementEnterTransition()
définissent l'entrée
pour l'activité appelée.
Pour profiter pleinement de la transition, vous devez activer le contenu de la fenêtre sur les appels et les activités appelées. Dans le cas contraire, l'appel active la transition de sortie, mais la fenêtre des transitions, comme l'échelle ou le fondu.
Pour démarrer une transition "Entrée" dès que possible, utilisez l'
Window.setAllowEnterTransitionOverlap()
sur l'activité appelée. Vous pouvez ainsi réaliser des transitions plus spectaculaires.
Démarrer une activité à l'aide de transitions
Si vous activez les transitions et que vous définissez une transition de sortie pour une activité, le s'active lorsque vous lancez une autre activité, comme suit:
Kotlin
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
Java
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
Si vous définissez une transition d'entrée pour la deuxième activité, cette transition
s'active au début de l'activité. Pour désactiver les transitions au démarrage
une autre activité, fournissez un lot d'options null
.
Démarrer une activité avec un élément partagé
Pour créer une animation de transition d'écran entre deux activités ayant une un élément partagé, procédez comme suit:
- Activez les transitions de contenu de fenêtre dans votre thème.
- Spécifiez une transition d'éléments partagés dans votre style.
- Définissez votre transition en tant que ressource XML.
- Attribuez un nom commun aux éléments partagés dans les deux mises en page à l'aide de la
android:transitionName
. - Utilisez la fonction
ActivityOptions.makeSceneTransitionAnimation()
.
Kotlin
// Get the element that receives the click event val imgContainerView = findViewById<View>(R.id.img_container) // Get the common element for the transition in this activity val androidRobotView = findViewById<View>(R.id.image_small) // Define a click listener imgContainerView.setOnClickListener( { val intent = Intent(this, Activity2::class.java) // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" val options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot") // Start the new activity startActivity(intent, options.toBundle()) })
Java
// Get the element that receives the click event final View imgContainerView = findViewById(R.id.img_container); // Get the common element for the transition in this activity final View androidRobotView = findViewById(R.id.image_small); // Define a click listener imgContainerView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(this, Activity2.class); // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot"); // Start the new activity startActivity(intent, options.toBundle()); } });
Pour les affichages dynamiques partagés que vous générez dans votre code, utilisez la méthode
View.setTransitionName()
pour spécifier un nom d'élément commun dans les deux
activités.
Pour inverser l'animation de transition de scène lorsque vous avez terminé la deuxième activité, appelez la méthode
Activity.finishAfterTransition()
au lieu de Activity.finish()
.
Démarrer une activité avec plusieurs éléments partagés
Pour créer une animation de transition de scène entre deux activités qui en contiennent davantage
plusieurs éléments partagés, définissez les éléments partagés dans les deux mises en page avec le paramètre
android:transitionName
) ou utilisez l'attribut
View.setTransitionName()
dans les deux activités, et
créer un
ActivityOptions
comme suit:
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptions.makeSceneTransitionAnimation(this, UtilPair.create(view1, "agreedName1"), UtilPair.create(view2, "agreedName2"))
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "agreedName1"), Pair.create(view2, "agreedName2"));