Le transizioni di attività nelle app di Material Design forniscono connessioni visive tra diversi stati attraverso il movimento e le trasformazioni tra elementi comuni. Puoi specificare animazioni personalizzate per le transizioni di entrata e uscita e per le transizioni di elementi condivisi tra attività.
- Una transizione di entrata determina il modo in cui le visualizzazioni di un'attività entrano nella scena. Ad esempio, nella transizione di invio
explode
, le visualizzazioni entrano nella scena dall'esterno e volano verso il centro dello schermo. - Una transizione di uscita determina il modo in cui le visualizzazioni in un'attività escono dalla scena. Ad esempio, nella transizione di uscita
explode
, le visualizzazioni escono dalla scena rispetto al centro. - Una transizione degli elementi condivisi determina il modo in cui le visualizzazioni
condivise tra due attività vengono trasferite tra queste attività. Ad esempio, se due attività hanno la stessa immagine in posizioni e dimensioni diverse, la transizione dell'elemento condiviso
changeImageTransform
traduce e ridimensiona l'immagine in modo uniforme tra queste attività.
Android supporta le seguenti transizioni di entrata e uscita:
explode
: sposta le visualizzazioni verso l'interno o verso l'esterno rispetto al centro della scena.slide
: sposta le visualizzazioni all'interno o all'esterno di uno dei bordi della scena.fade
: aggiunge o rimuove una visualizzazione dalla scena modificandone l'opacità.
Qualsiasi transizione che estende la classe Visibility
è supportata come transizione di entrata o uscita.
Per ulteriori informazioni, consulta il riferimento API per la classe Transition
.
Android supporta anche le seguenti transizioni degli elementi condivisi:
changeBounds
: anima le modifiche nei limiti del layout delle viste target.changeClipBounds
: anima le variazioni nei limiti del clip delle visualizzazioni target.changeTransform
: anima le variazioni di scala e di rotazione delle visualizzazioni di destinazione.changeImageTransform
: anima le variazioni di dimensioni e scala delle immagini di destinazione.
Quando abiliti le transizioni delle attività nella tua app, viene attivata la transizione predefinita con dissolvenza incrociata tra le attività di entrata e di uscita.
Per un esempio di codice che si anima tra le attività utilizzando elementi condivisi, consulta ActivitySceneTransizioneBasic.
Controlla la versione del sistema
Le API di transizione delle attività sono disponibili su Android 5.0 (API 21) e versioni successive. Per preservare la compatibilità con le versioni precedenti di Android, controlla il sistema version
in fase di runtime prima di richiamare le API per una di queste funzionalità:
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 }
Specifica transizioni personalizzate
Innanzitutto, attiva le transizioni dei contenuti delle finestre con l'attributo android:windowActivityTransitions
quando definisci uno stile che eredita dal tema Material. Puoi anche specificare le transizioni di entrata, uscita ed elementi condivisi nella definizione dello stile:
<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>
La transizione change_image_transform
in questo esempio è definita come segue:
<!-- res/transition/change_image_transform.xml --> <!-- (see also Shared Transitions below) --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeImageTransform/> </transitionSet>
L'elemento changeImageTransform
corrisponde alla
classe ChangeImageTransform
. Per ulteriori informazioni, consulta la documentazione di riferimento API per Transition
.
Per attivare invece le transizioni dei contenuti delle finestre nel codice, chiama la funzione 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());
Per specificare le transizioni nel codice, chiama queste funzioni con un
oggetto Transition
:
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
Le funzioni setExitTransition()
e setSharedElementExitTransition()
definiscono la transizione di uscita per l'attività di chiamata. Le funzioni setEnterTransition()
e setSharedElementEnterTransition()
definiscono la transizione di invio per l'attività chiamata.
Per ottenere il massimo effetto di una transizione, devi abilitare le transizioni dei contenuti delle finestre sia nelle attività di chiamata sia nelle attività di chiamata. In caso contrario, l'attività di chiamata avvia la transizione di uscita, ma poi vedrai le transizioni di finestre, come la scala o la dissolvenza.
Per avviare una transizione di invio il prima possibile, utilizza la funzione Window.setAllowEnterTransitionOverlap()
sull'attività chiamata. In questo modo puoi ottenere transizioni di entrata più marcate.
Avviare un'attività usando le transizioni
Se abiliti le transizioni e imposti una transizione di uscita per un'attività, la transizione si attiva quando avvii un'altra attività, come segue:
Kotlin
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
Java
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
Se imposti una transizione di immissione per la seconda attività, viene attivata anche quando inizia l'attività. Per disabilitare le transizioni quando avvii un'altra attività, fornisci un pacchetto di opzioni null
.
Avviare un'attività con un elemento condiviso
Per creare un'animazione di transizione dello schermo tra due attività che hanno un elemento condiviso, procedi nel seguente modo:
- Attiva le transizioni dei contenuti delle finestre nel tema.
- Specifica una transizione degli elementi condivisi nel tuo stile.
- Definisci la transizione come risorsa XML.
- Assegna un nome comune agli elementi condivisi in entrambi i layout con
l'attributo
android:transitionName
. - Utilizza la funzione
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()); } });
Per le viste dinamiche condivise generate nel codice, utilizza la funzione View.setTransitionName()
per specificare un nome elemento comune in entrambe le attività.
Per invertire l'animazione di transizione della scena al termine della seconda attività, chiama la funzione
Activity.finishAfterTransition()
invece di Activity.finish()
.
Avviare un'attività con più elementi condivisi
Per creare un'animazione di transizione di scena tra due attività che hanno più di un elemento condiviso, definisci gli elementi condivisi in entrambi i layout con l'attributo android:transitionName
oppure utilizza la funzione View.setTransitionName()
in entrambe le attività e crea un oggetto ActivityOptions
nel seguente modo:
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"));