Einführung
Während Android SVG (Scalable Vector Graphics) nicht direkt unterstützt, hat Lollipop eine neue Klasse namens eingeführt VectorDrawableDamit können Designer und Entwickler Assets auf dieselbe Weise nur mit Code zeichnen.
In diesem Artikel erfahren Sie, wie Sie eine erstellen VectorDrawable mit XML-Dateien und animieren Sie sie in Ihren Projekten. Dies wird nur für Geräte mit Android 5.0 oder höher unterstützt, und es gibt derzeit keine Implementierung der Unterstützungsbibliothek. Die Quelldateien für dieses Tutorial finden Sie auf GitHub.
1. Erstellen eines Vektordesigns
Die Hauptähnlichkeit zwischen a VectorDrawable und ein Standard-SVG-Bild ist, dass beide mit a gezeichnet werden Pfad Wert. Während Sie verstehen, wie SVG-Pfade Wenn außerhalb des Geltungsbereichs dieses Artikels gezeichnet wird, finden Sie die offizielle Dokumentation auf der W3C-Website. Für diesen Artikel müssen Sie nur wissen, dass das Pfad-Tag der Ort ist, an dem die Zeichnung ausgeführt wird. Werfen wir einen Blick auf die SVG-Datei, die das folgende Bild zeichnet:
Dieses Bild besteht aus fünf Hauptteilen:
- ein Quadrat für den Körper der CPU, bestehend aus zwei Bögen
- vier Gruppen von fünf Zeilen, die die Prozessorkabel darstellen
Der folgende Code zeichnet dieses Bild als SVG:
Es mag zwar etwas überwältigend erscheinen, aber Sie müssen nicht wirklich verstehen, wie alles gezeichnet wird, um a zu implementieren VectorDrawable in Ihrem Code. Es sollte jedoch beachtet werden, dass ich jeden der fünf Abschnitte zur besseren Lesbarkeit in einen eigenen eindeutigen Block im Code unterteilt habe.
Der obere Abschnitt besteht aus zwei Bögen zum Zeichnen des abgerundeten Quadrats, und die folgenden Abschnitte repräsentieren die unteren, oberen, rechten und linken Liniensätze. Um diesen SVG-Code in einen zu verwandeln VectorDrawablemüssen Sie zuerst die definieren vector Objekt in XML. Der folgende Code stammt aus vector_drawable_cpu.xml Datei im Beispielcode in diesem Artikel.
Dann können Sie die Pfaddaten hinzufügen. Der folgende Code ist in fünf verschiedene Pfad-Tags und nicht in einen großen Pfad unterteilt.
Wie Sie sehen können, verwendet jeder Pfadabschnitt nur das pathData Attribut für die Zeichnung. Sie können jetzt die einschließen VectorDrawable XML-Datei als in einem Standard zeichnbar ImageView und es passt sich jeder Größe an, die Ihre Anwendung benötigt, ohne Java-Code verwenden zu müssen.
2. Animation von Vektordesigns
Jetzt, da Sie wissen, wie Sie Bilder nur mit Code erstellen, ist es Zeit, Spaß zu haben und sie zu animieren. In der folgenden Animation werden Sie feststellen, dass jede der Drahtgruppen zum Prozessor und von diesem weg pulsiert.
Um diesen Effekt zu erzielen, müssen Sie jeden Abschnitt, den Sie animieren möchten, in einen umschließen
Dann möchten Sie erstellen Animatoren für jede Art von Animation. In diesem Fall gibt es für jede Gruppe von Threads einen für insgesamt vier. Unten finden Sie ein Beispiel für die Animation der oberen Gruppe, die Sie auch für die untere, linke und rechte Gruppe benötigen. Jede XML-Datei des Animators befindet sich im Beispielcode.
Wie Sie sehen können, ist die propertyName ist eingestellt auf translateYDies bedeutet, dass sich die Animation entlang der Y-Achse bewegt. valueFrom und valueTo Steuern Sie den Start- und Endort. Durch die Definition repeatMode beim reverse und repeatCount beim infinitewird die Animation auf unbestimmte Zeit wiederholt, solange die VectorDrawable ist sichtbar. das duration Animation ist auf eingestellt 250Dies ist die Zeit in Millisekunden.
Um die Animationen auf Ihre zeichnbare Datei anzuwenden, müssen Sie eine neue erstellen animated-vector XML-Datei, mit der die Animatoren verknüpft werden sollen VectorDrawable Gruppen. Der folgende Code wird zum Erstellen des verwendet animierte_cpu.xml Datei.
Wenn Ihr gesamtes XML bereit ist, können Sie es verwenden das animierte_cpu.xml zeichnbar in a ImageView um es anzuzeigen.
Um Ihre Animation zu starten, müssen Sie eine Instanz von erhalten Animatable von ImageView und Ruf an start.
ImageView mCpuImageView = (ImageView) findViewById( R.id.cpu );
Drawable drawable = mCpuImageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
Nach start Wurde aufgerufen, werden die Threads auf dem CPU-Image mit sehr geringem Java-Code verschoben.
3. Transformieren Sie Vektorzeichnungen
Ein häufiger Anwendungsfall für a VectorDrawable wandelt ein Bild in ein anderes um, z. B. das Aktionsleistensymbol, das sich von einem Hamburger-Symbol in einen Pfeil ändert. Dazu müssen der Quell- und der Zielpfad für die Anzahl der Elemente dasselbe Format haben. In diesem Beispiel definieren wir die oben gezeigten linken und rechten Pfeile als Zeichenfolgen.
M300,70 l 0,70 -70,-70 0,0 70,-70z M300,70 l 0,-70 70,70 0,0 -70,70z
Anschließend müssen Sie eine erste Zeichnung für einen Pfeil unter Verwendung des Pfads für erstellen Linker Pfeil. Im Beispielcode heißt es vector_drawable_left_arrow.xml.
Der Hauptunterschied zwischen CPU-Animation und Transformation ist der animator_left_right_arrow.xml Datei.
Sie werden das bemerken valueFrom und valueTo Eigenschaften verweisen auf die Pfaddaten für den linken und rechten Pfeil valueType ist eingestellt auf pathType und propertyName ist eingestellt auf pathData. Wenn diese festgelegt sind, weiß der Moderator, wie ein Datensatz vom Pfad zum anderen geändert werden kann. Wenn der Moderator fertig ist, müssen Sie die zuordnen VectorDrawable mit dem objectAnimator mit einem neuen animated-vector Objekt.
Schließlich müssen Sie nur den Zeichentrickfilm mit einem verknüpfen ImageView und starten Sie die Animation in Ihrem Java-Code.
mArrowImageView = (ImageView) findViewById( R.id.left_right_arrow );
drawable = mArrowImageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
Fazit
Wie Sie gesehen haben, die VectorDrawable Die Klasse ist recht einfach zu bedienen und ermöglicht viele Anpassungen, um einfache Animationen hinzuzufügen. Während VectorDrawable Die Klasse ist derzeit nur für Geräte mit Android 5.0 und höher verfügbar. Sie werden von unschätzbarem Wert sein, da mehr Geräte Lollipop und zukünftige Versionen von Android unterstützen.
