Android Vector Drawable

In diesem Tutorial werden wir Android Vector Drawable besprechen. Außerdem werden wir sie in unserer Android-Anwendung implementieren.

Android Vector Drawable
Pfad für Vector Assets erstellen
Android Vector Drawable Beispiel Projektstruktur
Android Vector Drawable Code

Android Vector Drawable

Oft verwenden wir PNG als unsere Drawable-Bilder. Damit die PNG-Bilder für verschiedene Bildschirmgrößen funktionieren, erstellen wir mehrere PNG-Assets mit unterschiedlichen Größen und Dichten. In der Folge nehmen PNG-Bilder zusätzlichen Platz ein und führen zu großen APK-Größen der Android-Apps.

Hier kommt Vector Drawable zu unserer Rettung! Sie sind Ihr Ersatz für PNG-Bilder.

Ein VectorDrawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven zusammen mit den zugehörigen Farbinformationen definiert ist.

Sie können ohne Qualitätsverlust auf die Bildschirmgröße skaliert werden. Sie werden auch schnell auf dem Bildschirm gerendert. VectorDrawable sind eine XML-Datei.

Sie können ein neues Vector Asset in Ihrem Drawable-Ordner mit New | Vector Asset hinzufügen.

So können wir Vector Drawables von Material Design Icons erstellen. Der Code für das VectorDrawable sieht wie folgt aus:

Sie werden im vector-Tag gesetzt. android:viewportWidth und android:viewportHeight werden verwendet, um die Breite und Höhe der zeichenbaren Begrenzungen festzulegen. Innerhalb dieser Abmessungen wird die Vektor-Zeichenfläche auf der Leinwand gezeichnet.

path ist das Tag, das die Zeichenfläche erstellt. Innerhalb des Pfades erstellen wir Linien, Kurven, Bögen und legen den Rahmen und die Hintergrundfarbe fest. Wir tun so Pfadbefehle in der pathData.

Vector Drawables wurden seit Android Lollipop und höher eingeführt, aber dank der Abwärtskompatibilität sind sie auch mit früheren Versionen kompatibel.

Pfad für Vector Assets erstellen

Die Pfadbefehle bestehen aus einem Alphabet, gefolgt von Koordinaten. Stellen Sie sich das Erstellen von Pfaden wie das Malen vor. Großbuchstaben stehen für die absolute Position. Kleinbuchstaben stehen für die relative Position.

M – moveto Befehl. Es ist eine Art zu sagen, bewegen Sie Ihren Stift auf die angegebene Koordinate in der Ansicht. Beispiel M 100 100 bewegt einen imaginären Bleistift zur Koordinate 100, 100 auf der Leinwand.
L – line to command. Wird verwendet, um eine Linie von der aktuellen Position zu der angegebenen Position zu zeichnen.
Beispiel : M 100 100, L 120 100 zeichnet eine horizontale Linie.
z – Wird verwendet, um einen Pfad zu schließen. Es wird eine Linie von der letzten Position zur ersten Position gezeichnet. Beispiel M 100 100 L 120 100 L 120 120 L 100 120 Z erstellt ein Quadrat.
C – Hiermit wird eine Bézier-Kurve erstellt. Danach müssen wir drei Koordinatensätze angeben. Der erste und der zweite wären die beiden Kontrollpunkte zwischen dem Anfangs- und dem Endpunkt.
A – wird verwendet, um einen Bogen zu zeichnen. Nach einem müssen Sie das folgende Format angeben: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry und x axis sind die beiden angegebenen Radien.

Wir können mehr als einen Pfad in einem Vektor angeben, indem wir die Pfad-Tags innerhalb eines group-Tags setzen.

Lassen Sie uns einige zufällige interessante Vector Drawable in unserer Android-Anwendung mit dem oben genannten Wissen erstellen.

Android Vector Drawable Beispiel Projektstruktur

Android Vector Drawable Code

Der Code für das activity_main.xml-Layout ist unten angegeben:

Schauen wir uns jede der Vector Drawables-Implementierungen einzeln an.

ic_rectangle.xml

In dem obigen Code haben wir zwei Pfade erstellt. Jeder ein rechtwinkliges Dreieck.

Wenn wir dies auf unser LinearLayout setzen, würde der Hintergrund wie folgt aussehen:

ic_w.xml

Im obigen Code versuchen wir, ein W-Symbol mithilfe von Linien zu erstellen.

Hinweis: Anstelle eines separaten Pfades können wir alle in einem einzigen Pfadbefehl zusammenfassen. Sie können jedoch mehrere Pfade verwenden, um ein klares Verständnis dafür zu bekommen, was jeder Pfad tut.

ic_w_filled.xml
Im folgenden Code verwenden wir den z-Befehl, um die Pfade zu schließen und sie mit Farbe zu füllen: