Share
Il framework delle transizioni Android ti consente di configurare l'aspetto delle modifiche nell'interfaccia utente della tua app. Puoi animare le modifiche nella schermata di un'app, definendo ogni fase come scena e controllando il modo in cui la transizione cambia l'aspetto dell'app da una scena all'altra.
In questo tutorial, costruiremo una semplice app con una transizione animata. Ciò comporterà la preparazione del layout e dei file disegnabili in XML, quindi la configurazione e l'applicazione della transizione in Java. Definiremo due scene in cui le stesse voci di visualizzazione sono disposte in modo diverso sullo schermo. Mentre utilizziamo una transizione, Android animerà automaticamente la modifica da una scena all'altra.
Inizia creando una nuova app nel tuo IDE scelto. Per le classi di transizione è necessario un SDK minimo di 19, pertanto è necessario intraprendere ulteriori passaggi se si intende supportare versioni precedenti.
Dai un'app principale Attività e file di layout, scegliendo il nome start_layout.xml per il layout. Aggiungeremo un altro file di layout in un secondo momento, usando la transizione per passare da uno all'altro. Le immagini seguenti mostrano il processo in Android Studio.
Ora prepariamo alcune forme disegnabili da utilizzare nella transizione. Useremo quattro forme circolari con riempimenti sfumati colorati diversi. Nella directory delle risorse dei file eseguibili della tua app, inizia creando un nuovo file chiamato shape1.xml. Inserisci la seguente forma:
La forma è un cerchio con un riempimento sfumato radiale. Tutte e quattro le forme saranno uguali ad eccezione dei colori utilizzati al loro interno. Potresti voler creare diverse versioni dei drawable per diverse densità del dispositivo. Inserisci shape2.xml Il prossimo:
Adesso aggiungi shape3.xml:
Infine aggiungi shape4.xml:
Useremo queste forme come ImageButtons nelle due scene di layout.
Definiamo le due scene che passeremo tra i layout XML. Inizia con il file di layout principale che hai aggiunto quando hai creato l'app, start_layout.xml. Aprilo e passa alla scheda di modifica XML. Usare un RelativeLayout come mostrato di seguito:
Aggiungiamo un colore di sfondo e un ID per il layout. L'ID è essenziale per garantire che le transizioni Android tra le scene, useremo lo stesso ID nella seconda scena. Quando passi da una scena all'altra, Android animerà le modifiche a condizione che ciascuna vista abbia lo stesso ID in entrambe le scene, altrimenti tratterà le viste come diverse e semplicemente le dissolverà in avanti o indietro quando si verifica la transizione.
Dentro il RelativeLayout, aggiungi un ImageButton per ogni forma che abbiamo creato:
Si noti che ogni pulsante di forma ha un ID, che sarà lo stesso nel secondo layout che creiamo e un al clic attributo. Includeremo questo metodo nel modo principale Attività più tardi e inizierà la transizione quando l'utente fa clic su una delle forme.
Vedrai un'anteprima del layout nel tuo IDE, anche se in alcuni casi il gradiente e / o la trasparenza non verranno visualizzati finché non eseguirai effettivamente l'app su un dispositivo o sull'emulatore. Le forme sono disposte in modo da sedersi in ogni angolo dello schermo come mostrato di seguito.
Il primo layout che abbiamo creato rappresenterà l'inizio della transizione. Creiamo ora un secondo file di layout per la scena in cui la transizione cambierà. Aggiungi un nuovo file nella directory delle risorse del layout dell'app, assegnandogli un nome end_layout.xml. Passa alla scheda di modifica del testo e inserisci quanto segue:
Prenditi un momento per osservare il codice del layout. È identico al primo layout ad eccezione delle posizioni dei pulsanti di forma. Ogni forma è nell'angolo opposto rispetto alla sua posizione nel primo layout. La transizione cambierà quindi le forme, spostando le loro posizioni in diagonale sullo schermo.
Abbiamo definito i due layout, ora usiamo una transizione per spostarci tra di loro. Apri la tua app principale Attività classe. Avrai bisogno delle seguenti dichiarazioni di importazione:
import android.transition.AutoTransition; import android.transition.Scene; import android.transition.Transition; importa android.view.View; import android.view.ViewGroup; import android.view.animation.AccelerateDecelerateInterpolator; import android.widget.RelativeLayout; import android.transition.TransitionManager;
Dentro il Attività dichiarazione di classe, prima del onCreate metodo, aggiungere le seguenti variabili di istanza che useremo per applicare la transizione:
// scene per la transizione scena scena privata1, scena2; // transizione per spostarsi tra le scene Transizione privata di transizione; // flag per scambiare tra le scene l'avvio booleano privato;
Ora prepariamo la transizione, che inizierà quando l'utente fa clic su una forma. Nel onCreate, dopo il codice esistente inserito nell'IDI, aggiungere quanto segue:
// ottiene l'ID del layout RelativeLayout baseLayout = (RelativeLayout) findViewById (R.id.base); // prima scena ViewGroup startViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.start_layout, baseLayout, false); // seconda scena ViewGroup endViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.end_layout, baseLayout, false);
Per prima cosa definiamo la scena base, che è l'ID che abbiamo fornito al layout di contenimento in entrambi i file di layout di scena. Quindi definiamo le due scene che stiamo attraversando, specificando i loro nomi di file di layout e la scena di base di contenimento. Questo dirà ad Android che vogliamo passare le viste all'interno delle due scene, trattando qualsiasi vista con lo stesso ID in entrambe le scene come lo stesso oggetto, in modo che animi il passaggio da una scena all'altra.
Successivamente, definiamo le due scene in cui vogliamo passare tra, ancora in onCreate:
// crea le due scene scene1 = new Scene (baseLayout, startViews); scene2 = new Scene (baseLayout, endViews);
Passiamo il layout di base e i layout di scena rilevanti a ciascun costruttore. Ora possiamo riferirci a queste scene quando definiamo la transizione.
Prepariamo la transizione, ancora in onCreate:
// crea transizione, imposta proprietà transition = new AutoTransition (); transition.setDuration (5000); transition.setInterpolator (new AccelerateDecelerateInterpolator ()); // initialize flag start = true;
Android offre una gamma di tipi di transizione a seconda di come si desidera animare le modifiche alle scene. In questo caso, scegliamo un AutoTransition, quindi Android calcolerà come eseguire la modifica in base alle proprietà che vengono alterate tra le scene. Vedi il riferimento Transizioni per più opzioni.
Impostiamo una durata e un interpolatore per la transizione. Opzionalmente è anche possibile impostare un ritardo di avvio per la modifica. Infine, inizializziamo il flag booleano su true. Per semplicità lo useremo per scambiare tra le due scene ogni volta che l'utente fa clic su una forma, ma questo è solo per dimostrare la funzionalità coinvolta.
Ricorda che abbiamo aggiunto un al clic attributo ai pulsanti di forma quando abbiamo creato il layout XML. Aggiungiamo questo metodo al Attività adesso:
public void changeScene (View v) // check flag if (start) TransitionManager.go (scene2, transition); start = false; else TransitionManager.go (scene1, transizione); start = true;
Noi usiamo il TransitionManager per passare dalla scena corrente all'altra scena, con la bandiera booleana che tiene traccia di quale siamo. Specifichiamo il Transizione oggetto che abbiamo creato per personalizzare il modo in cui il cambiamento si svolge.
Ora dovresti essere in grado di eseguire la tua app e vedere la transizione ogni volta che fai clic su una forma. Ogni volta che fai clic, la transizione dovrebbe spostare le forme lentamente negli angoli opposti, quindi scambiarli di nuovo quando fai nuovamente clic.
In questo tutorial abbiamo solo iniziato a esplorare ciò che puoi fare con il framework delle transizioni Android. Per sviluppare ulteriormente le transizioni, controlla i metodi aggiuntivi in TransitionManager classe, come beginDelayedTransition e transitionTo. Puoi anche usare a TransitionSet combinare più transizioni, ad esempio, per configurare effetti di dissolvenza e spostamento. A seconda della complessità delle transizioni, puoi anche trarre vantaggio da TransitionValues classe, che fornisce un riferimento ai valori dei dati rilevanti per la transizione. Per ulteriori informazioni su cosa puoi fare con le scene, guarda il Scena classe pure.
Accentsconagua