Suche…


Einführung

Wie der Name schon sagt, basieren Vektorzeichnungen auf Vektorgrafiken. Vektorgrafiken sind eine Möglichkeit, grafische Elemente mit geometrischen Formen zu beschreiben. Auf diese Weise können Sie eine Zeichnung erstellen, die auf einer XML-Vektorgrafik basiert. Jetzt müssen Sie kein Bild mit unterschiedlicher Größe für mdpi, hdpi, xhdpi usw. erstellen. Mit Vector Drawable müssen Sie das Bild nur einmal als xml-Datei erstellen und es für alle dpi und verschiedene Geräte skalieren. Dies spart nicht nur Platz, sondern vereinfacht auch die Wartung.

Parameter

Parameter Einzelheiten
<vector> Wird verwendet, um einen Vektor zu definieren, der gezeichnet werden kann
<group> Definiert eine Gruppe von Pfaden oder Untergruppen sowie Transformationsinformationen. Die Transformationen werden in denselben Koordinaten wie das Ansichtsfenster definiert. Die Transformationen werden in der Reihenfolge der Skalierung angewendet, drehen und verschieben.
<path> Definiert die zu zeichnenden Pfade.
<clip-path> Definiert den Pfad als aktuellen Clip. Beachten Sie, dass der Clippfad nur für die aktuelle Gruppe und ihre untergeordneten Objekte gilt.

Bemerkungen

Aktualisieren Sie die Datei build.gradle .

dependencies {
    ...
   compile 'com.android.support:appcompat-v7:23.2.1'
}

Wenn Sie Version 2.0 oder höher des Gradle-Plugins verwenden , fügen Sie den folgenden Code hinzu.

// Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }

Wenn Sie Version 1.5 oder niedriger des Gradle-Plugins verwenden , fügen Sie den folgenden Code hinzu.

// Gradle Plugin 1.5  
 android {  
   defaultConfig {  
     generatedDensities = []  
  }  

  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }

Weitere Informationen finden Sie in der Android Support Library 23.2 Versionshinweise.

HINWEIS: Auch mit AppCompat funktioniert Vector Drawables in älteren Android-Versionen nicht außerhalb Ihrer App. Sie können beispielsweise keine Vektorzeichnungen als Benachrichtigungssymbole übergeben, da diese vom System und nicht von der App verarbeitet werden. Siehe diese Antwort für eine Problemumgehung.

VectorDrawable-Verwendungsbeispiel

Hier ist ein Beispiel für ein Vektor-Asset, das wir in AppCompat verwenden:

res / drawable / ic_search.xml

<vector xmlns:android="..."
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal">

    <path
        android:pathData="..."
        android:fillColor="@android:color/white"/>

</vector>

Bei Verwendung dieser Zeichenweise wäre eine ImageView Deklaration beispielsweise:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_search"/>

Sie können es auch zur Laufzeit einstellen:

ImageView iv = (ImageView) findViewById(...);
iv.setImageResource(R.drawable.ic_search);

Dasselbe Attribut und Aufrufe funktionieren auch für ImageButton .

VectorDrawable-XML-Beispiel

Hier ist eine einfache VectorDrawable in dieser Datei vectordrawable.xml .

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:height="64dp"
     android:width="64dp"
     android:viewportHeight="600"
     android:viewportWidth="600" >
     <group
         android:name="rotationGroup"
         android:pivotX="300.0"
         android:pivotY="300.0"
         android:rotation="45.0" >
         <path
             android:name="v"
             android:fillColor="#000000"
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

SVG-Datei als VectorDrawable importieren

Sie können eine SVG- Datei als VectorDrawable in Android Studio importieren. VectorDrawable folgendermaßen vor:

Klicken Sie mit der rechten Maustaste auf den Ordner " res " und wählen Sie " Neu" > " Vektor-Asset" .

Geben Sie hier die Bildbeschreibung ein

Wählen Sie die Option Lokale Datei und navigieren Sie zu Ihrer SVG-Datei. Ändern Sie die Optionen nach Ihren Wünschen und klicken Sie auf Weiter. Erledigt.

Geben Sie hier die Bildbeschreibung ein



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow