O introducere în tranzițiile Android

Introducere

Cadrul de tranziții Android vă permite să configurați apariția modificărilor în interfața de utilizare a aplicației. Puteți anima modificările într-un ecran de aplicație, definind fiecare fază ca scenă și controlând modul în care tranziția schimbă aspectul aplicației dintr-o scenă în alta.

În acest tutorial, vom construi o aplicație simplă cu o tranziție animată în ea. Aceasta va implica pregătirea layout-ului și a fișierelor trase în XML, apoi configurarea și aplicarea tranziției în Java. Vom defini două scene în care aceleași elemente de vizualizare sunt aranjate diferit pe ecran. Pe măsură ce folosim o tranziție, Android va anima automat schimbarea de la o scenă la alta.

1. Creați aplicația

Pasul 1

Începeți prin a crea o aplicație nouă în IDE-ul ales. Aveți nevoie de un SDK minim de 19 pentru clasele de tranziții, deci va trebui să urmați pași suplimentari dacă intenționați să sprijiniți versiunile mai vechi.

Dați aplicației principale Activitate și fișierul de aspect, alegerea numelui start_layout.xml pentru aspect. Vom adăuga un alt fișier de dispunere mai târziu, folosind tranziția pentru a schimba unul de la altul. Următoarele imagini arată procesul din Android Studio.

Pasul 2

Să pregătim acum niște forme atrăgătoare pe care să le folosim în tranziție. Vom folosi patru forme de cerc cu gradient de culori diferite. În directorul de resurse al aplicațiilor de desenare, începeți prin crearea unui nou fișier numit shape1.xml. Introduceți următoarea formă:

    

Forma este un cerc cu umplutură de gradient radial. Toate cele patru forme vor fi aceleași, cu excepția culorilor folosite în ele. Poate doriți să creați versiuni diferite ale desenelor pentru diferite densități ale dispozitivelor. Adăuga shape2.xml Următor →:

    

Acum adăugați shape3.xml:

    

În final, adăugați shape4.xml:

    

Vom folosi aceste forme ca ImageButtons în cele două scene de aspect.

2. Creați scenele de aspect

Pasul 1

Să definim cele două scene pe care le vom trece ca structuri XML. Începeți cu fișierul de aspect principal pe care l-ați adăugat atunci când ați creat aplicația, start_layout.xml. Deschideți-l și treceți la fila de editare XML. Folosește o RelativeLayout așa cum se arată mai jos:

  

Adăugăm o culoare de fundal și un ID pentru aspect. ID-ul este esențial pentru a vă asigura că tranziția Android între scenele dvs., vom folosi același ID în cea de-a doua scenă. Când treceți între două scene, Android va anima modificările atâta timp cât fiecare vizualizare are același ID în ambele scene, în caz contrar se va trata vizualizările ca fiind diferite și pur și simplu se estompează în sau out atunci când are loc tranziția.

În interiorul RelativeLayout, adăugați un ImageButton pentru fiecare forma pe care am creat-o:

   

Observați că fiecare buton de formă are un ID, care va fi același în al doilea aspect pe care îl creăm și un onClick atribut. Vom include această metodă în principal Activitate mai târziu și va începe tranziția atunci când utilizatorul face clic pe oricare dintre forme.

Veți vedea o previzualizare a aspectului în IDE, deși în unele cazuri, gradientul și / sau transparența nu vor fi afișate până când nu executați aplicația pe un dispozitiv sau emulator. Formele sunt aranjate să stea în fiecare colț al ecranului, după cum se arată mai jos.

Pasul 2

Primul aspect pe care l-am creat va reprezenta începutul tranziției. Să creați acum un al doilea fișier de aspect pentru scena în care se va schimba tranziția. Adăugați un fișier nou în directorul de resurse pentru aspectul aplicațiilor, denumindu-l end_layout.xml. Treceți la fila de editare a textului și introduceți următoarele:

      

Ia-ți puțin timp să te uiți la codul de aspect. Este identic cu primul aspect, cu excepția pozițiilor butoanelor de formă. Fiecare formă se află în colțul opus față de poziția sa în primul aspect. Prin urmare, tranziția va schimba formele, mutându-și pozițiile în diagonală pe ecran.

3. Trecerea între scenele

Pasul 1

Avem cele două definiții definite, să folosim acum o tranziție pentru a se deplasa între ele. Deschideți aplicația principală Activitate clasă. Veți avea nevoie de următoarele declarații de import:

import android.transition.AutoTransition; import android.transition.Scene; import android.transition.Transition; import șiroid.view.View; import șiroid.view.ViewGroup; import android.view.animation.AccelerateDecelerateInterpolator; import șiroid.widget.RelativeLayout; import android.transition.TransitionManager;

În interiorul Activitate declarație de clasă, înainte de onCreate , adăugați următoarele variabile de instanță pe care le vom folosi pentru a aplica tranziția:

// scene pentru trecerea scena privată Scene1, scene2; // tranziție pentru a trece între scene tranziție privată de tranziție; // flag pentru a schimba între scene pornire booleană privată;

Pasul 2

Acum, să ne pregătim pentru tranziție, care va începe când utilizatorul face clic pe o formă. În onCreate, după codul existent introdus de IDE, adăugați următoarele:

// obține aspectul de referință RelativeLayout baseLayout = (RelativeLayout) findViewById (R.id.base); // prima scenă ViewGroup startViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.start_layout, baseLayout, false); // a doua scenă ViewGroup endViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.end_layout, baseLayout, false);

Mai intai definim scena de baza, care este ID-ul pe care l-am dat aspectul continut in ambele fisiere de layout. În continuare, definim cele două scene între care trecem, precizând numele fișierelor de aspect și scena de bază care conține. Acest lucru va indica Android că vrem să tranziim vizualizările în cele două scene, tratând orice vizualizare cu același ID în ambele scene ca același obiect, pentru a anima schimbarea de la o scenă la alta.

Apoi, definim cele două scene la care vrem să trecem, încă în onCreate:

// creați cele două scene scena1 = Scena nouă (baseLayout, startViews); scene2 = Scene noi (baseLayout, endViews);

Transmitem aspectul de bază și schemele relevante de scenă fiecărui constructor. Acum ne putem referi la aceste scene când definim tranziția.

Pasul 3

Să facem tranziția pregătită, încă înăuntru onCreate:

// creați tranziția, setați proprietățile transition = new AutoTransition (); transition.setDuration (5000); transition.setInterpolator (noul AccelerateDecelerateInterpolator ()); // inițializează flagul start = true;

Android oferă o serie de tipuri de tranziții în funcție de modul în care doriți să fie animate modificările din scenele dvs. În acest caz, alegem un AutoTransition, astfel încât Android va calcula modul de efectuare a modificării pe baza proprietăților modificate între scene. Consultați referința Transitions pentru mai multe opțiuni.

Am stabilit o durată și un interpolator pentru tranziție. De asemenea, puteți seta opțional o întârziere de pornire pentru modificare. În final, inițializăm flagul boolean la adevărat. Pentru simplificare vom folosi acest lucru pentru a schimba între cele două scene ori de câte ori utilizatorul face clic pe o formă, dar acest lucru este doar pentru a demonstra funcționalitatea implicată.

Pasul 4

Amintiți-vă că am adăugat un onClick atribuiți butoanelor de formă atunci când am creat aspectul XML. Să adăugăm acea metodă la Activitate acum:

public void changeScene (Vezi v) // bifați pavilion dacă (începe) TransitionManager.go (scenă2, tranziție); start = false;  altceva TransitionManager.go (scene1, tranziție); start = true; 

Noi folosim TransitionManager pentru a trece de la scena curentă la cealaltă scenă, cu steagul boolean care urmărește care dintre noi suntem pe. Specificăm Tranziție obiect pe care l-am creat pentru a adapta modul în care se desfășoară schimbarea.

Acum ar trebui să puteți rula aplicația dvs. și să vedeți tranziția ori de câte ori faceți clic pe o formă. De fiecare dată când faceți clic, tranziția ar trebui să mute formele lentă în colțurile opuse, apoi să le schimbați înapoi când faceți clic din nou.

Concluzie

În acest tutorial am început să explorăm ce puteți face cu cadrul de tranziții Android. Pentru a vă dezvolta în continuare tranzițiile, consultați metodele suplimentare din TransitionManager clasa, cum ar fi beginDelayedTransition și transitionTo. De asemenea, puteți utiliza a TransitionSet pentru a combina mai multe tranziții, de exemplu, pentru a configura efecte de estompare și mișcare. În funcție de complexitatea tranzițiilor dvs., puteți beneficia de asemenea de TransitionValues , care oferă o referință la valorile datelor relevante pentru tranziție. Pentru mai multe despre ceea ce puteți face cu scenele, verificați Scenă și clasa.

Cod