Android Vector Drawable

In deze tutorial zullen we het hebben over Android Vector Drawable. Verder zullen we ze implementeren in onze Android applicatie.

Android Vector Drawable

Vaak gebruiken we PNG als onze drawable afbeeldingen. Om de PNG-afbeeldingen te laten werken voor verschillende schermformaten, maken we meerdere PNG-activa met verschillende maten en dichtheden. Vervolgens nemen PNG-afbeeldingen extra ruimte in beslag en leiden ze tot grote APK-groottes van de Android-apps.

Dit is waar Vector Drawable ons te hulp schiet! Ze zijn uw vervanging voor PNG-afbeeldingen.

Een VectorDrawable is een vectorafbeelding die in een XML-bestand is gedefinieerd als een set punten, lijnen en curven, samen met de bijbehorende kleurinformatie.

Ze kunnen worden geschaald volgens de schermgrootte zonder verlies van kwaliteit. Ze worden ook snel op het scherm gerenderd. VectorDrawable zijn een XML-bestand.

U kunt een nieuwe Vector Asset toevoegen aan uw drawable-map met New | Vector Asset.

Dus kunnen we Vector drawables van Material Design-pictogrammen maken. De code voor de VectorDrawable ziet er als volgt uit:

Ze worden ingesteld in de tag vector. android:viewportWidth en android:viewportHeight worden gebruikt bij het instellen van de breedte en hoogte van de grenzen van de drawable. Binnen deze afmetingen wordt de vector drawable op het canvas getekend.

path is de tag die de drawable maakt. Binnen het pad maken we lijnen, krommen, bogen en stellen we de rand en de achtergrondkleur in. Dat doen we met padcommando’s in de pathData.

Pad maken voor Vector Assets

De padcommando’s bestaan uit een alfabet gevolgd door coördinaten. Stel je het maken van paden voor als het maken van een schilderij. Hoofdletters staan voor absolute positie. Kleine letters staan voor relatieve positie.

• M – moveto commando. Het is een manier om te zeggen verplaats je potlood naar de gegeven coördinaat op het beeldscherm. Voorbeeld M 100 100 verplaatst een denkbeeldig potlood naar de 100, 100 coördinaat op het canvas.
• L – line to commando. Wordt gebruikt om een lijn te trekken van de huidige positie naar de opgegeven positie.
  Voorbeeld : M 100 100, L 120 100 tekent een horizontale lijn.
• z – Dit wordt gebruikt om een pad te sluiten. Het tekent een lijn van de laatste positie naar de eerste positie. Voorbeeld M 100 100 L 120 100 L 120 120 L 100 120 Z maakt een vierkant.
• C – Dit wordt gebruikt om een bezier curve te maken. Hierna moeten we drie reeksen coördinaten opgeven. Het eerste en tweede zijn de twee controlepunten tussen het beginpunt en het eindpunt.
• A – wordt gebruikt om een boog te tekenen. Na een moet je het volgende formaat opgeven: (rx ry x-as-rotatie grote-boog-vlag sweep-vlag x y). rx ry en x-as zijn de twee radii gespecificeerd.

Laten we een aantal willekeurige interessante Vector Drawable in onze Android Applicatie maken met behulp van de bovenstaande kennis.

Android Vector Drawable Voorbeeld Project Structure

Android Vector Drawable Code

De code voor de activity_main.xml lay-out wordt hieronder gegeven:

Laten we eens kijken naar elk van de Vector Drawables implementatie een voor een.

ic_rectangle.xml

In de bovenstaande code hebben we twee paden gemaakt. Elk een rechthoekige driehoek.

Door dit in te stellen op onze LinearLayout zou de achtergrond er zo uitzien:

ic_w.xml

In de bovenstaande code proberen we een W symbool te maken met behulp van lijnen.

Note: In plaats van een afzonderlijk pad, kunnen we ze allemaal samenvoegen in een enkel pad commando. U kunt echter meerdere paden gebruiken om een duidelijk beeld te krijgen van wat elk pad doet.

ic_w_filled.xml
In de onderstaande code gebruiken we het z-commando om de paden te sluiten en er kleur in te vullen:

ic_a.xml
Laten we de letter A maken met behulp van paden.

ic_c.xml

De vectortekenbare letters A en C zien eruit als:

ic_0.xml

Een cirkel wordt gemaakt met behulp van twee bogen die vervolgens worden gesloten.

Nu de laatste. Laten we een JournalDev JD-voorbeeldpictogram maken met behulp van vector drawable.

Tot slot ziet de uitvoer van onze toepassing er als volgt uit:

Dit brengt een einde aan deze tutorial. U kunt het uiteindelijke Android VectorDrawable-project downloaden van de onderstaande link: