Animazione delle modifiche al layout mediante una transizione

Prova Compose
Jetpack Compose è il toolkit UI consigliato per Android. Scopri come utilizzare le animazioni in Compose.
AnimatedContent →

Il framework di transizione di Android ti consente di animare tutti i tipi di movimento nella UI fornendo i layout di inizio e fine. Puoi selezionare il tipo di animazione che vuoi, ad esempio per visualizzare o nascondere le visualizzazioni o per modificarne le dimensioni, e il framework di transizione determina come animare dal layout iniziale a quello finale.

Il framework di transizione include le seguenti funzionalità:

  • Animazioni a livello di gruppo: applica effetti di animazione a tutte le visualizzazioni in una gerarchia di oggetti View.
  • Animazioni integrate: utilizza animazioni predefinite per effetti comuni come la dissolvenza o il movimento.
  • Supporto dei file di risorse: carica gerarchie di visualizzazioni e animazioni integrate dai file di risorse di layout.
  • Callback del ciclo di vita: ricevi callback che forniscono il controllo sul processo di animazione e modifica della gerarchia.

La procedura di base per animare tra due layout è la seguente:

  1. Crea un oggetto Scene per i layout di inizio e fine. Tuttavia, la scena del layout iniziale viene spesso determinata automaticamente dal layout corrente.
  2. Crea un Transition oggetto per definire il tipo di animazione che vuoi.
  3. Chiama TransitionManager.go(), e il sistema esegue l'animazione per scambiare i layout.

Il diagramma nella Figura 1 illustra la relazione tra i layout, le scene, la transizione e l'animazione finale.

Figura 1. Illustrazione di base di come il framework di transizione crea un'animazione.

Creare una scena

Le scene memorizzano lo stato di una gerarchia di visualizzazioni, incluse tutte le visualizzazioni e i relativi valori delle proprietà. Il framework di transizioni può eseguire animazioni tra una scena iniziale e una finale.

Puoi creare le scene da un file di risorse di layout o da un gruppo di visualizzazioni nel codice. Tuttavia, la scena iniziale per la transizione viene spesso determinata automaticamente dalla UI corrente.

Una scena può anche definire le proprie azioni che vengono eseguite quando apporti una modifica alla scena. Questa funzionalità è utile per pulire le impostazioni di visualizzazione dopo la transizione a una scena.

Creare una scena da una risorsa di layout

Puoi creare un'istanza Scene direttamente da un file di risorse di layout. Utilizza questa tecnica quando la gerarchia di oggetti View nel file è per lo più statica. La scena risultante rappresenta lo stato della gerarchia di oggetti View al momento della creazione dell'istanza Scene. Se modifichi la gerarchia di oggetti View, ricrea la scena. Il framework crea la scena dall'intera gerarchia di visualizzazioni nel file. Non puoi creare una scena da una parte di un file di layout.

Per creare un'istanza Scene da un file di risorse di layout, recupera la radice della scena dal layout come un ViewGroup. Poi, chiama la Scene.getSceneForLayout() funzione con la radice della scena e l'ID risorsa del file di layout che contiene la gerarchia di oggetti View per la scena.

Definire i layout per le scene

Gli snippet di codice nel resto di questa sezione mostrano come creare due scene diverse con lo stesso elemento principale della scena. Gli snippet dimostrano anche che puoi caricare più oggetti Scene non correlati senza implicare che siano correlati tra loro.

L'esempio è costituito dalle seguenti definizioni di layout:

  • Il layout principale di un'attività con un'etichetta di testo e un figlio FrameLayout.
  • Un ConstraintLayout per la prima scena con due campi di testo.
  • Un ConstraintLayout per la seconda scena con gli stessi due campi di testo in un ordine diverso.

L'esempio è progettato in modo che tutta l'animazione avvenga all'interno del layout figlio del layout principale dell'attività. L'etichetta di testo nel layout principale rimane statica.

Il layout principale dell'attività è definito come segue:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

Questa definizione di layout contiene un campo di testo e un FrameLayout figlio per la radice della scena. Il layout della prima scena è incluso nel file di layout principale. In questo modo, l'app può visualizzarlo come parte della UI iniziale e caricarlo in una scena, poiché il framework può caricare solo un intero file di layout in una scena.

Il layout della prima scena è definito come segue:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Il layout della seconda scena contiene gli stessi due campi di testo, con gli stessi ID, disposti in un ordine diverso. È definito come segue:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Generare scene dai layout

Dopo aver creato le definizioni per i due layout di vincoli, puoi ottenere una scena per ognuno di essi. In questo modo puoi passare da una configurazione UI all'altra. Per ottenere una scena, devi avere un riferimento alla radice della scena e all'ID risorsa del layout.

Il seguente snippet di codice mostra come ottenere un riferimento alla radice della scena e creare due oggetti Scene dai file di layout:

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Java

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

Nell'app sono ora presenti due oggetti Scene basati su gerarchie di visualizzazioni. Entrambe le scene utilizzano la radice della scena definita dall'elemento FrameLayout in res/layout/activity_main.xml.

Creare una scena nel codice

Puoi anche creare un'istanza Scene nel codice da un oggetto ViewGroup. Utilizza questa tecnica quando modifichi le gerarchie di visualizzazioni direttamente nel codice o quando le generi dinamicamente.

Per creare una scena da una gerarchia di oggetti View nel codice, utilizza il Scene(sceneRoot, viewHierarchy) costruttore. La chiamata a questo costruttore equivale alla chiamata alla Scene.getSceneForLayout() funzione quando hai già espanso un file di layout.

Il seguente snippet di codice mostra come creare un'istanza Scene dall'elemento root della scena e dalla gerarchia di oggetti View per la scena nel codice:

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Java

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

Creare azioni di scena

Il framework ti consente di definire azioni di scena personalizzate che il sistema esegue quando entra o esce da una scena. In molti casi, la definizione di azioni di scena personalizzate non è necessaria, poiché il framework anima automaticamente la modifica tra le scene.

Le azioni di scena sono utili per gestire questi casi:

  • Per animare le visualizzazioni che non si trovano nella stessa gerarchia. Puoi animare le visualizzazioni per le scene di inizio e fine utilizzando le azioni di scena di uscita e di entrata.
  • Per animare le visualizzazioni che il framework di transizioni non può animare automaticamente, ad esempio gli oggetti ListView. Per ulteriori informazioni, consulta la sezione relativa alle limitazioni.

Per fornire azioni di scena personalizzate, definisci le azioni come Runnable oggetti e passali alle Scene.setExitAction() o Scene.setEnterAction() funzioni. Il framework chiama la funzione setExitAction() nella scena iniziale prima di eseguire l'animazione di transizione e la funzione setEnterAction() nella scena finale dopo l'esecuzione dell'animazione di transizione.

Applicare una transizione

Il framework di transizione rappresenta lo stile di animazione tra le scene con un oggetto Transition. Puoi creare un'istanza di Transition utilizzando sottoclassi integrate, come AutoTransition e Fade, o definire la tua transizione. Poi, puoi eseguire l' animazione tra le scene passando la Scene e la Transition a TransitionManager.go().

Il ciclo di vita della transizione è simile al ciclo di vita dell'attività e rappresenta gli stati di transizione che il framework monitora tra l'inizio e il completamento di un'animazione. Negli stati importanti del ciclo di vita, il framework richiama le funzioni di callback che puoi implementare per regolare la UI in diverse fasi della transizione.

Creare una transizione

La sezione precedente mostra come creare scene che rappresentano lo stato di diverse gerarchie di visualizzazioni. Dopo aver definito le scene di inizio e fine tra cui vuoi passare, crea un oggetto Transition che definisca un'animazione. Il framework ti consente di specificare una transizione integrata in un file di risorse e di espanderla nel codice oppure di creare un'istanza di una transizione integrata direttamente nel codice.

Tabella 1. Tipi di transizione integrati.

Classe Tag Effetto
AutoTransition <autoTransition/> Transizione predefinita. Dissolve, sposta e ridimensiona e visualizza le visualizzazioni, in questo ordine.
ChangeBounds <changeBounds/> Sposta e ridimensiona le visualizzazioni.
ChangeClipBounds <changeClipBounds/> Acquisisce View.getClipBounds() prima e dopo la modifica della scena e anima queste modifiche durante la transizione.
ChangeImageTransform <changeImageTransform/> Acquisisce la matrice di un ImageView prima e dopo la modifica della scena e la anima durante la transizione.
ChangeScroll <changeScroll/> Acquisisce le proprietà di scorrimento delle destinazioni prima e dopo la modifica della scena e anima le modifiche.
ChangeTransform <changeTransform/> Acquisisce la scala e la rotazione delle visualizzazioni prima e dopo la modifica della scena e anima queste modifiche durante la transizione.
Explode <explode/> Monitora le modifiche alla visibilità delle visualizzazioni di destinazione nelle scene di inizio e fine e sposta le visualizzazioni verso l'interno o l'esterno dai bordi della scena.
Fade <fade/> fade_in visualizza le visualizzazioni.
fade_out nasconde le visualizzazioni.
fade_in_out (impostazione predefinita) esegue un fade_out seguito da un fade_in.
Slide <slide/> Monitora le modifiche alla visibilità delle visualizzazioni di destinazione nelle scene di inizio e fine e sposta le visualizzazioni verso l'interno o l'esterno da uno dei bordi della scena.

Creare un'istanza di transizione da un file di risorse

Questa tecnica ti consente di modificare la definizione della transizione senza modificare il codice dell'attività. Questa tecnica è utile anche per separare le definizioni di transizione complesse dal codice dell'applicazione, come mostrato nella sezione relativa alla specifica di più transizioni.

Per specificare una transizione integrata in un file di risorse:

  • Aggiungi la directory res/transition/ al progetto.
  • Crea un nuovo file di risorse XML all'interno di questa directory.
  • Aggiungi un nodo XML per una delle transizioni integrate.

Ad esempio, il seguente file di risorse specifica la transizione Fade:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

Il seguente snippet di codice mostra come espandere un'istanza Transition all'interno dell'attività da un file di risorse:

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Java

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

Creare un'istanza di transizione nel codice

Questa tecnica è utile per creare oggetti di transizione in modo dinamico se modifichi la UI nel codice e per creare istanze di transizione integrate semplici con pochi o nessun parametro.

Per creare un'istanza di una transizione integrata, richiama uno dei costruttori pubblici nelle sottoclassi della classe Transition. Ad esempio, il seguente snippet di codice crea un'istanza della transizione Fade:

Kotlin

var fadeTransition: Transition = Fade()

Java

Transition fadeTransition = new Fade();

Applicare una transizione

In genere, applichi una transizione per passare da una gerarchia di visualizzazioni all'altra in risposta a un evento, ad esempio un'azione dell'utente. Ad esempio, considera un'app di ricerca: quando l'utente inserisce un termine di ricerca e tocca il pulsante di ricerca, l'app passa a una scena che rappresenta il layout dei risultati applicando una transizione che nasconde il pulsante di ricerca e visualizza i risultati di ricerca.

Per apportare una modifica alla scena durante l'applicazione di una transizione in risposta a un evento nell'attività, chiama la funzione di classe TransitionManager.go() con la scena finale e l'istanza di transizione da utilizzare per l'animazione, come mostrato nel seguente snippet:

Kotlin

TransitionManager.go(endingScene, fadeTransition)

Java

TransitionManager.go(endingScene, fadeTransition);

Il framework modifica la gerarchia di oggetti View all'interno della radice della scena con la gerarchia di oggetti View della scena finale durante l'esecuzione dell'animazione specificata dall'istanza di transizione. La scena iniziale è la scena finale dell'ultima transizione. Se non è presente una transizione precedente, la scena iniziale viene determinata automaticamente dallo stato attuale della UI.

Se non specifichi un'istanza di transizione, il gestore delle transizioni può applicare una transizione automatica che esegue un'operazione ragionevole per la maggior parte delle situazioni. Per ulteriori informazioni, consulta il riferimento API per la TransitionManager classe.

Scegliere visualizzazioni di destinazione specifiche

Per impostazione predefinita, il framework applica le transizioni a tutte le visualizzazioni nelle scene di inizio e fine. In alcuni casi, potresti voler applicare un'animazione solo a un sottoinsieme di visualizzazioni in una scena. Il framework ti consente di selezionare le visualizzazioni specifiche che vuoi animare. Ad esempio, il framework non supporta l'animazione delle modifiche agli oggetti ListView, quindi non provare ad animarli durante una transizione.

Ogni visualizzazione animata dalla transizione è chiamata destinazione. Puoi selezionare solo le destinazioni che fanno parte della gerarchia di oggetti View associata a una scena.

Per rimuovere una o più visualizzazioni dall'elenco delle destinazioni, chiama il removeTarget() metodo prima di avviare la transizione. Per aggiungere solo le visualizzazioni specificate all' elenco delle destinazioni, chiama la addTarget() funzione. Per ulteriori informazioni, consulta il riferimento API per la Transition classe.

Specificare più transizioni

Per ottenere il massimo impatto da un'animazione, abbinala al tipo di modifiche che si verificano tra le scene. Ad esempio, se rimuovi alcune visualizzazioni e ne aggiungi altre tra le scene, un'animazione di dissolvenza o visualizzazione fornisce un'indicazione evidente che alcune visualizzazioni non sono più disponibili. Se sposti le visualizzazioni in punti diversi dello schermo, è meglio animare il movimento in modo che gli utenti notino la nuova posizione delle visualizzazioni.

Non devi scegliere una sola animazione, poiché il framework di transizioni ti consente di combinare gli effetti di animazione in un set di transizioni che contiene un gruppo di singole transizioni integrate o personalizzate.

Per definire un set di transizioni da una raccolta di transizioni in XML, crea un file di risorse nella directory res/transitions/ ed elenca le transizioni nell'elemento TransitionSet. Ad esempio, il seguente snippet mostra come specificare un set di transizioni che ha lo stesso comportamento della classe AutoTransition:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

Per espandere il set di transizioni in un TransitionSet oggetto nel codice, chiama la TransitionInflater.from() funzione nell'attività. La classe TransitionSet estende la classe Transition quindi puoi utilizzarla con un gestore delle transizioni come qualsiasi altra istanza Transition.

Applicare una transizione senza scene

La modifica delle gerarchie di visualizzazioni non è l'unico modo per modificare la UI. Puoi anche apportare modifiche aggiungendo, modificando e rimuovendo le visualizzazioni secondarie all'interno della gerarchia corrente.

Ad esempio, puoi implementare un'interazione di ricerca con un singolo layout. Inizia con il layout che mostra un campo di immissione di ricerca e un'icona di ricerca. Per modificare la UI in modo da mostrare i risultati, rimuovi il pulsante di ricerca quando l'utente lo tocca chiamando la ViewGroup.removeView() e aggiungi i risultati di ricerca chiamando la ViewGroup.addView().

Puoi utilizzare questo approccio se l'alternativa è avere due gerarchie quasi identiche. Anziché creare e gestire due file di layout separati per una piccola differenza nell'interfaccia utente, puoi avere un file di layout contenente una gerarchia di oggetti View che modifichi nel codice.

Se apporti modifiche all'interno della gerarchia di oggetti View corrente in questo modo, non devi creare una scena. Puoi invece creare e applicare una transizione tra due stati di una gerarchia di visualizzazioni utilizzando una transizione ritardata. Questa funzionalità del framework di transizioni inizia con lo stato attuale della gerarchia di visualizzazioni, registra le modifiche apportate alle visualizzazioni e applica una transizione che anima le modifiche quando il sistema ridisegna la UI.

Per creare una transizione ritardata all'interno di una singola gerarchia di visualizzazioni:

  1. Quando si verifica l'evento che attiva la transizione, chiama la TransitionManager.beginDelayedTransition() funzione, fornendo la vista genitore di tutte le visualizzazioni che vuoi modificare e la transizione da utilizzare. Il framework memorizza lo stato attuale delle visualizzazioni secondarie e i relativi valori delle proprietà.
  2. Apporta le modifiche alle visualizzazioni secondarie in base alle esigenze del tuo caso d'uso. Il framework registra le modifiche apportate alle visualizzazioni secondarie e alle relative proprietà.
  3. Quando il sistema ridisegna la UI in base alle modifiche, il framework anima le modifiche tra lo stato originale e il nuovo stato.

L'esempio seguente mostra come animare l'aggiunta di una visualizzazione di testo a una gerarchia di visualizzazioni utilizzando una transizione ritardata. Il primo snippet mostra il file di definizione del layout:

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Lo snippet successivo mostra il codice che anima l'aggiunta della visualizzazione testo:

MainActivity

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

Java

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

Definire i callback del ciclo di vita della transizione

Il ciclo di vita della transizione è simile al ciclo di vita dell'attività. Rappresenta gli stati di transizione che il framework monitora durante il periodo tra una chiamata alla funzione TransitionManager.go() e il completamento dell'animazione. Negli stati importanti del ciclo di vita, il framework richiama i callback definiti dall'interfaccia TransitionListener.

I callback del ciclo di vita della transizione sono utili, ad esempio, per copiare il valore di una proprietà di visualizzazione dalla gerarchia di oggetti View iniziale alla gerarchia di oggetti View finale durante una modifica della scena. Non puoi semplicemente copiare il valore dalla visualizzazione iniziale alla visualizzazione nella gerarchia di oggetti View finale, perché la gerarchia di oggetti View finale non viene sottoposta a inflate fino al completamento della transizione. Devi invece memorizzare il valore in una variabile e poi copiarlo nella gerarchia di visualizzazioni finale quando il framework ha completato la transizione. Per ricevere una notifica al termine della transizione, implementa la TransitionListener.onTransitionEnd() funzione nell'attività.

Per ulteriori informazioni, consulta il riferimento API per la TransitionListener classe.

Limitazioni

Questa sezione elenca alcune limitazioni note del framework di transizioni:

  • Le animazioni applicate a un SurfaceView potrebbero non essere visualizzate correttamente. Le istanze SurfaceView vengono aggiornate da un thread non UI, quindi gli aggiornamenti potrebbero non essere sincronizzati con le animazioni di altre visualizzazioni.
  • Alcuni tipi di transizione specifici potrebbero non produrre l'effetto di animazione desiderato se applicati a un TextureView.
  • Le classi che estendono AdapterView, come ListView, gestiscono le visualizzazioni secondarie in modi incompatibili con il framework di transizioni. Se provi ad animare una visualizzazione basata su AdapterView, la visualizzazione del dispositivo potrebbe smettere di rispondere.
  • Se provi a ridimensionare un TextView con un'animazione, il testo viene visualizzato in una nuova posizione prima che l'oggetto venga completamente ridimensionato. Per evitare questo problema, non animare il ridimensionamento delle visualizzazioni che contengono testo.