Android Vector Drawable

I denne vejledning vil vi diskutere Android Vector Drawable. Desuden vil vi implementere dem i vores Android-applikation.

Android Vector Drawable
Skabelse af sti til vektoraktiver
Android Vector Drawable Eksempel projektstruktur
Android Vector Drawable kode

Android Vector Drawable

Ofte bruger vi PNG som vores drawable-billeder. For at PNG-billederne kan fungere for forskellige skærmstørrelser, opretter vi flere PNG-aktiver med forskellige størrelser og tætheder. Efterfølgende optager PNG-billeder ekstra plads og fører til store APK-størrelser i Android-apps.

Det er her, Vector Drawable kommer os til undsætning! De er din erstatning for PNG-billeder.

En VectorDrawable er en vektorgrafik, der er defineret i en XML-fil som et sæt punkter, linjer og kurver sammen med de tilhørende farveoplysninger.

De kan skaleres i overensstemmelse med skærmstørrelsen uden tab i kvalitet. De gengives også hurtigt på skærmen. VectorDrawable er en XML-fil.

Du kan tilføje et nyt Vector Asset i din drawable-mappe ved hjælp af New | Vector Asset.

Dermed kan vi oprette Vector drawables af Material Design-ikoner. Koden for VectorDrawable ser således ud:

De er indstillet i vector-tagget. android:viewportWidth og android:viewportHeight bruges til at indstille bredden og højden af grænserne for drawable’en. Inden for disse dimensioner tegnes vektor drawable på lærredet.

path er det tag, der opretter drawable’en. Inden for stien opretter vi linjer, kurver, buer og indstiller grænsen, baggrundsfarven. Vi gør det stikommandoer i pathData.

Vector Drawables blev indført siden Android Lollipop og højere, men takket være bagudkompatibilitet er de også kompatible med tidligere versioner.

Skabelse af sti til vektoraktiver

Stikommandoerne består af et alfabet efterfulgt af koordinater. Forestil dig at oprette stier som at lave et maleri. Alfabeter med store bogstaver repræsenterer absolutte positioner. Små bogstaver repræsenterer en relativ position.

M – moveto kommando. Det er en måde at sige, at du skal flytte din blyant til den givne koordinat på visningen. Eksempel M 100 100 100 flytter en imaginær blyant til koordinaten 100, 100 på lærredet.
L – line to-kommando. Bruges til at tegne en linje fra den aktuelle position til den angivne position.
Eksempel : M 100 100, L 120 100 tegner en vandret linje.
z – Bruges til at lukke en sti. Den tegner en linje fra den sidste position til den første position. Eksempel M 100 100 L 120 100 L 120 120 L 100 120 Z skaber en firkant.
C – Dette bruges til at skabe en bezier-kurve. Vi skal angive tre sæt koordinater efter dette. Det første og det andet ville være de to kontrolpunkter mellem begyndelsespunktet og slutpunktet.
A – bruges til at tegne en bue. Efter en skal du angive følgende format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry og x axis er de to radius, der er angivet.

Vi kan angive mere end én sti i en vektor ved at indstille sti-tags inden for et group tag.group.

Lad os oprette nogle tilfældige interessante Vector Drawable i vores Android-applikation ved hjælp af ovenstående viden.

Android Vector Drawable Eksempel projektstruktur

Android Vector Drawable kode

Koden for activity_main.xml-layoutet er angivet nedenfor:

Lad os se på hver af implementeringen af Vector Drawables én gang for én.

ic_rectangle.xml

I ovenstående kode har vi oprettet to stier. Hver en retvinklet trekant.

Hvis vi indstiller dette på vores LinearLayout, vil baggrunden se sådan ud:

ic_w.xml

I ovenstående kode forsøger vi at skabe et W-symbol ved hjælp af linjer.

OBS: I stedet for en separat sti kan vi slå alle sammen i en enkelt sti-kommando. Selvom du kan bruge flere stier for at få en klar forståelse af, hvad hver enkelt sti gør.

ic_w_filled.xml
I nedenstående kode bruger vi z-kommandoen til at lukke stierne og fylde farve i dem: