Android Vector Drawable

I den här handledningen kommer vi att diskutera Android Vector Drawable. Dessutom kommer vi att implementera dem i vår Android-applikation.

Android Vector Drawable

Ofta använder vi PNG som våra ritbara bilder. För att PNG-bilderna ska fungera för olika skärmstorlekar skapar vi flera PNG-tillgångar med olika storlekar och densiteter. Därefter tar PNG-bilderna upp extra utrymme och leder till stora APK-storlekar för Android-appar.

Det är här Vector Drawable kommer till vår undsättning! De är din ersättning för PNG-bilder.

En VectorDrawable är en vektorgrafik som definieras i en XML-fil som en uppsättning punkter, linjer och kurvor tillsammans med tillhörande färginformation.

De kan skalas i enlighet med skärmstorleken utan kvalitetsförlust. De återges också snabbt på skärmen. VectorDrawable är en XML-fil.

Du kan lägga till en ny Vector Asset i din drawable-mapp med hjälp av New | Vector Asset.

Därmed kan vi skapa Vector drawables av Material Design-ikoner. Koden för VectorDrawable ser ut så här:

De är inställda i taggen vector. android:viewportWidth och android:viewportHeight används för att ställa in bredden och höjden på gränserna för drawable. Inom dessa dimensioner ritas vektorns drawable på canvas.

path är taggen som skapar drawable. Inom banan skapar vi linjer, kurvor, bågar och ställer in gränsen, bakgrundsfärgen. Vi gör så sökvägskommandon i pathData.

Skapa sökväg för vektortillgångar

Sökvägskommandona består av ett alfabet följt av koordinater. Tänk dig att skapa banor som att göra en målning. Alfabet med stora bokstäver representerar absoluta positioner. Små bokstäver representerar relativ position.

• M – moveto-kommando. Det är ett sätt att säga att flytta pennan till den givna koordinaten på vyn. Exempel M 100 100 100 flyttar en imaginär penna till koordinaten 100, 100 på canvasen.
• L – line to-kommando. Används för att dra en linje från den aktuella positionen till den angivna positionen.
  Exempel : M 100 100, L 120 100 ritar en horisontell linje.
• z – Används för att stänga en bana. Den drar en linje från den sista positionen till den första positionen. Exempel M 100 100 L 120 100 L 120 120 L 100 120 Z skapar en kvadrat.
• C – Detta används för att skapa en bezierkurva. Vi måste ange tre uppsättningar koordinater efter detta. Den första och andra skulle vara de två kontrollpunkterna mellan utgångspunkten och slutpunkten.
• A – används för att rita en båge. Efter en måste du ange följande format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry och x-axel är de två angivna radierna.

Låt oss skapa en slumpmässigt intressant Vector Drawable i vår Android-applikation med hjälp av ovanstående kunskap.

Android Vector Drawable Example Project Structure

Android Vector Drawable Code

Koden för activity_main.xml-layout ges nedan:

Låt oss titta på varje implementering av Vector Drawables en gång för alla.

ic_rectangle.xml

I koden ovan har vi skapat två vägar. Var och en en rätvinklig triangel.

Om vi ställer in detta på vår LinearLayout skulle bakgrunden se ut så här:

ic_w.xml

I koden ovan försöker vi skapa en W-symbol med hjälp av linjer.

Notera: Istället för att skapa en separat bana kan vi slå samman alla i ett enda bankommando. Du kan dock använda flera banor för att få en tydlig förståelse för vad varje bana gör.

ic_w_filled.xml
I koden nedan använder vi kommandot z för att stänga banorna och fylla färg i dem:

ic_a.xml
Låt oss skapa bokstaven A med hjälp av banor.

ic_c.xml

Vektorritningarna av bokstäverna A och C ser ut som:

ic_0.xml

En cirkel skapas med hjälp av två bågar som sedan stängs.

Nu till det sista. Låt oss skapa en JournalDev JD-exempelikon med hjälp av vektor drawable.

Slutligt ser vår applikations utdata ut så här:

Detta avslutar den här handledningen. Du kan ladda ner det slutliga Android VectorDrawable-projektet från länken nedan:

.