SVG zu Vektorgrafiken: Der bessere Weg, um Android-Symbole anzupassen

Garret Cole
Garret Cole

Folgen Sie

21.Oktober 2016 · 2 Minuten Lesezeit

Eine der beliebtesten Methoden zum Umgang mit benutzerdefinierten Symbolen im Android-Entwicklungsprojekt ist die Verwendung von Vektorzeichnungen. Dies sind XML-Dateien, die den Pfad beschreiben, in dem ein Drawable zur Laufzeit in der Android-App gerendert werden kann. Um den Vektor zeichnbar zu machen, können Sie eine SVG-Datei in dieses Format konvertieren. Vor kurzem wurde dies mit den neuesten Updates für Android Studio erleichtert. Wenn Sie jedoch wie einige von uns sind, die an die alte Pipeline gewöhnt sind, können Sie SVGs mit diesem praktischen Tool in Vektor-Drawables konvertieren.

Der offensichtliche Vorteil der Verwendung von Vektor-Drawables ist die Größe Ihres APK. Der Unterschied in der Größe einer App mit Vektoren im Vergleich zu Bildern ist ziemlich signifikant. Anstatt mehrere gepackte Bilder für jede DPI-Auflösung zu haben, die die App unterstützt, haben Sie eine einzige, mäßig kleine Textdatei mit dem Pfad des Bildes als Inhalt.

Wenn Sie normale Bilder wie PNGs für Ihre Symbole verwenden, ist es einfach, die native Auflösung zu bestimmen, indem Sie das Bild auf seine Abmessungen in Bezug auf seine DPI-Werte untersuchen. Es ist noch einfacher mit Vektor-Drawables, aber es gibt zwei verschiedene deklarierte Höhen und Breiten innerhalb der XML. Sie haben viewportWidth und width . Die viewportWidth ist tatsächlich die Größe, die das Asset in diesem Ansichtsfenster gezeichnet wird. Wenn der Pfad darin gezeichnet wird, wird er auf die Größe dieses Ansichtsfensters beschränkt. Die andere „Breite“ ist die tatsächliche Breite, die der Entwickler beim Aufblasen in eine Ansicht als native DPI-Größe behandeln würde.

<vector android:height="24dp" android:viewportHeight="22.0"android:width="24dp" android:viewportWidth="15.0"

Sobald Sie Ihren Vektor zeichnbar haben, können Sie die Variationen seines Aussehens erweitern, indem Sie für jede Variation, auf die Sie Zugriff haben möchten, ein weiteres XML in Ihren Android-Ressourcen erstellen. Während dies auch für RAW-Bilder möglich ist, ist es etwas einfacher, damit zu arbeiten, wenn Sie entweder eine Bitmaske verwenden oder den Farbstatus eines Symbols ändern möchten, ohne eine Reihe von Assets ersetzen zu müssen.

Luminance ist ein großartiges Icon-Set für diejenigen, die mit Icons experimentieren möchten. Alle Symbole sind kostenlos und im SVG-Format verfügbar.

Noch einmal, um diese Pipeline zusammenzufassen, mit der man herumspielen kann:

  1. Laden Sie Luminance herunter und wählen Sie ein Symbol aus, das Sie im SVG-Format verwenden möchten.
  2. Legen Sie die SVG in Android SVG in VectorDrawable und konvertieren Sie sie in eine Android vector drawable XML.
  3. Legen Sie die XML-Datei in Ihr res/drawable-Verzeichnis.
  4. Verwenden Sie in Ihrer ImageView, ImageButtons oder an einer anderen Stelle, an der Sie ein zeichnbares Asset verwenden möchten!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.