Share
În timp ce Android nu acceptă direct SVG (Scalable Vector Graphics), Lollipop a introdus o nouă clasă numită VectorDrawable, care permite designerilor și dezvoltatorilor să deseneze active într-o manieră similară folosind doar coduri.
În acest articol, veți învăța cum să creați un VectorDrawable cu fișiere XML și animați-le în proiectele dvs. Acest lucru este acceptat numai pentru dispozitive care rulează Android 5.0 sau o versiune ulterioară și în prezent nu există implementări de bibliotecă de suport. Fișierele sursă ale acestui tutorial pot fi găsite pe GitHub.
Principala asemănare între a VectorDrawable și o imagine SVG standard este că ambele sunt extrase folosind a cale valoare. În timp ce înțelegeți calea SVGsunt extrase din domeniul de aplicare al acestui articol, documentația oficială poate fi găsită pe site-ul W3C. Pentru acest articol, pur și simplu trebuie să știți că eticheta căii este locul în care are loc desenul. Să aruncăm o privire la fișierul SVG care trage următoarea imagine:
Există cinci părți importante ale acestei imagini:
Următorul cod desenează această imagine ca SVG:
În timp ce acest lucru ar putea părea un pic copleșitor, nu trebuie să înțelegeți pe deplin modul în care totul este scos pentru a implementa o VectorDrawable în codul dvs. Cu toate acestea, trebuie remarcat faptul că am separat fiecare dintre cele cinci secțiuni în blocul lor unic în codul de citire.
Secțiunea de sus este alcătuită din două arcade pentru a extrage pătratul rotunjit, iar secțiunile care urmează reprezintă secțiunile de linii de fund, de sus, dreapta și stânga. Pentru a transforma acest cod SVG într-un VectorDrawable, trebuie mai întâi să definiți vector obiect în XML. Următorul cod este preluat din vector_drawable_cpu.xml fișier în exemplul de cod pentru acest articol.
Apoi, puteți adăuga datele despre cale. Următorul cod este împărțit în cinci etichete de cale diferite, mai degrabă decât o singură cale mare.
După cum puteți vedea, fiecare secțiune de cale utilizează pur și simplu pathData atribut pentru desen. Acum puteți include VectorDrawable Fișier XML ca trasabil într-un standard ImageView și va scala la orice dimensiune necesită aplicația dvs., fără a fi nevoie să utilizați niciun cod Java.
Acum că știți cum să creați imagini folosind doar cod, este timpul să vă distrați puțin și să le animați. În următoarea animație, veți observa că fiecare dintre grupurile de fire pulsează spre și departe de CPU.
Pentru a realiza acest efect, va trebui să înfășurați fiecare secțiune pe care doriți să o animați într-o
În continuare, veți dori să creați animatorii pentru fiecare tip de animație. În acest caz, există câte unul pentru fiecare grup de fire pentru un total de patru. Mai jos este un exemplu de animație a grupului de sus și veți avea nevoie, de asemenea, de unul pentru partea de jos, spre stânga și spre dreapta. Fiecare fișier XML animator poate fi găsit în exemplul de cod.
După cum puteți vedea, numele proprietatii este setat sa translateY, ceea ce înseamnă că animația se va deplasa de-a lungul axei Y. valueFrom și valueTo controlați locația de început și de sfârșit. Prin setare Mod Repetare la inversa și repeatCount la infinit, animația se va rupe pentru totdeauna atâta timp cât VectorDrawable este vizibil. durată din animație este setată la 250, care este timpul în milisecunde.
Pentru a aplica animațiile în fișierul dvs. trasabil, va trebui să creați un nou animat-vector Fișier XML pentru a asocia animatorii cu VectorDrawable grupuri. Următorul cod este utilizat pentru a crea animated_cpu.xml fişier.
Când toate documentele XML sunt gata de utilizare, puteți utiliza animated_cpu.xmldesenat într-un ImageView pentru ao afișa.
Pentru a începe animația, va trebui să obțineți o instanță a Animatable de la ImageView și sunați start.
ImageView mCpuImageView = (ImagineView) findViewById (R.id.cpu); Desene tractabile = mCpuImageView.getDrawable (); dacă (exemplul trasabil de Animatabil) ((Animatabil) trasabil) .start ();
După start a fost apelat, firele de pe imaginea procesorului vor începe să se miște cu un cod Java foarte minim folosit.
Un caz comun de utilizare pentru o VectorDrawable transformă o imagine în alta, cum ar fi pictograma bara de acțiune care se schimbă dintr-o pictogramă de hamburger într-o săgeată. Pentru a face acest lucru, atât calea sursă cât și destinația trebuie să urmeze un format identic pentru numărul de elemente. Pentru acest exemplu vom defini săgețile orientate spre stânga și spre dreapta văzute mai sus ca șiruri de caractere.
M300,70 l 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
Apoi, va trebui să creați un trasabil inițial pentru o săgeată utilizând calea pentru sageata stanga. În codul eșantion, se numește vector_drawable_left_arrow.xml.
Principala diferență între animația procesorului și transformare constă în animator_left_right_arrow.xml fişier.
Veți observa valueFrom și valueTo proprietățile se referă la datele căii pentru săgețile din stânga și din dreapta, tipul valorii este setat sa pathType și numele proprietatiieste setat sa pathData. Când acestea sunt setate, animatorul va ști să schimbe un set de date de cale către cealaltă. Când animatorul este terminat, trebuie să asociați VectorDrawable cu objectAnimator folosind un nou animat-vector obiect.
În cele din urmă, va trebui pur și simplu să asociați trasabilul animat cu un ImageView și începeți animația în codul dvs. Java.
mArrowImageView = (ImagineView) findViewById (R.id.left_right_arrow); tractabil = mArrowImageView.getDrawable (); dacă (exemplul trasabil de Animatabil) ((Animatabil) trasabil) .start ();
După cum ați văzut, VectorDrawable clasa este destul de simplă de utilizat și permite o mulțime de personalizare pentru a adăuga animații simple. In timp ce VectorDrawable clasa este disponibilă în prezent numai pentru dispozitive care rulează Android 5.0 și versiuni ulterioare, acestea vor fi de neprețuit, deoarece mai multe dispozitive acceptă Lollipop și lansările Android.
Accentsconagua