Android Vector Drawable

În acest tutorial, vom discuta despre Android Vector Drawable. Mai mult, le vom implementa în aplicația noastră Android.

Android Vector Drawable
Crearea de trasee pentru active vectoriale
Android Vector Drawable Example Project Structure
Android Vector Drawable Code

Android Vector Drawable

De multe ori folosim PNG ca imagini desenabile. Pentru ca imaginile PNG să funcționeze pentru diferite dimensiuni de ecran, creăm mai multe active PNG cu dimensiuni și densități diferite. Ulterior, imaginile PNG ocupă spațiu suplimentar și conduc la dimensiuni mari ale APK-urilor aplicațiilor Android.

Aici intervine Vector Drawable pentru a ne salva! Acestea sunt înlocuitorul dvs. pentru imaginile PNG.

Un VectorDrawable este un grafic vectorial definit într-un fișier XML ca un set de puncte, linii și curbe, împreună cu informațiile de culoare asociate.

Ele pot fi scalate în funcție de dimensiunea ecranului fără pierderi de calitate. De asemenea, sunt redate rapid pe ecran. VectorDrawable sunt un fișier XML.

Puteți adăuga un nou Vector Asset în folderul drawable folosind New | Vector Asset.

Așa putem crea Vector drawables ale pictogramelor Material Design. Codul pentru VectorDrawable arată astfel:

Ele sunt setate în tag-ul vector. și android:viewportHeight sunt folosite la setarea lățimii și înălțimii limitelor drawable. În cadrul acestor dimensiuni, desenabilul vectorial este desenat pe pânză.

path este eticheta care creează desenabilul. În interiorul traiectoriei se creează linii, curbe, arcuri și se setează marginea, culoarea de fundal. Facem astfel de comenzi de traseu în pathData.

Comenzile de trasabilitate vectorială au fost introduse începând cu Android Lollipop și versiunile superioare, dar datorită compatibilității cu versiunile anterioare, ele sunt compatibile și cu versiunile anterioare.

Crearea de trasee pentru active vectoriale

Comenzile de traseu constau dintr-un alfabet urmat de coordonate. Imaginați-vă crearea de trasee ca și cum ați face o pictură. Alfabetul cu majuscule reprezintă poziția absolută. Literele minuscule reprezintă poziția relativă.

M – comanda moveto. Este un mod de a spune mută-ți creionul la coordonata dată pe vedere. Exemplu M 100 100 100 deplasează un creion imaginar la coordonata 100, 100 de pe pânză.
L – comanda line to. Se folosește pentru a trasa o linie de la poziția curentă la poziția specificată.
Exemplu : M 100 100, L 120 100 trasează o linie orizontală.
z – Se utilizează pentru a închide o traiectorie. Aceasta trasează o linie de la ultima poziție la prima poziție. Exemplu: M 100 100 L 120 100 L 120 120 L 100 120 Z creează un pătrat.
C – Se utilizează pentru a crea o curbă bezier. Trebuie să specificăm trei seturi de coordonate după aceasta. Primul și al doilea ar fi cele două puncte de control între punctul inițial și punctul final.
A – se utilizează pentru a desena un arc. După a trebuie să specificați următorul format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry și axa x sunt cele două raze specificate.

Potem specifica mai multe trasee într-un vector prin setarea etichetelor de traseu în interiorul unei etichete group.

Să creăm niște Vector Drawable interesante aleatorii în aplicația noastră Android folosind cunoștințele de mai sus.

Android Vector Drawable Example Project Structure

Android Vector Drawable Code

Codul pentru activity_main.xml este prezentat mai jos:

Să ne uităm pe rând la fiecare dintre implementările Vector Drawables.

ic_rectangle.xml

În codul de mai sus, am creat două căi. Fiecare un triunghi dreptunghic.

Stabilind acest lucru pe LinearLayout-ul nostru ar face ca fundalul să arate astfel:

ic_w.xml

În codul de mai sus, încercăm să creăm un simbol W folosind linii.

Nota: În loc de o cale separată, le putem unifica pe toate într-o singură comandă de cale. Deși puteți folosi mai multe trasee pentru a înțelege clar ce face fiecare traseu.

ic_w_filled.xml
În codul de mai jos, vom folosi comanda z pentru a închide traseele și a umple culoarea în interiorul lor: