Omówienie elementów rysowanych wektorowych

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak wyświetlać grafiki w sekcji „Utwórz”.
ImageVector →

Najważniejsze punkty

  • Obiekt rysowalny wektorowo to wektorowa grafika zdefiniowana w pliku XML jako zbiór punktów, linii i krzywych wraz z powiązanymi informacjami o kolorach.
  • Elementy wektorowe można skalować, czyli zmieniać ich rozmiar bez utraty jakości wyświetlania. Dzięki temu są one idealne do stosowania w aplikacjach na Androida, ponieważ mogą pomóc w zmniejszeniu rozmiaru plików APK i poprawie wydajności.
  • W Android Studio możesz tworzyć wektory drawable, klikając prawym przyciskiem myszy folder drawable w projekcie i wybierając Nowy > Zasób wektorowy. Pliki SVG możesz też importować do Android Studio jako elementy graficzne wektorowe.
Podsumowanie wygenerowane przez Google Barda 24 lipca 2023 r.

Wprowadzenie

VectorDrawable to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii i krzywych wraz z powiązanymi informacjami o kolorze. Główną zaletą korzystania z obiektu rysowania wektorowego jest skalowalność obrazów. Można go skalować bez utraty jakości wyświetlania, co oznacza, że ten sam plik jest dostosowywany do różnych gęstości ekranu bez utraty jakości obrazu. Dzięki temu pliki APK są mniejsze, a deweloperzy mogą potrzebować mniej czasu na obsługę. Możesz też użyć obrazów wektorowych do animacji, używając wielu plików XML zamiast wielu obrazów dla każdej rozdzielczości wyświetlania.

Na tej stronie i w filmie poniżej znajdziesz omówienie tworzenia wektorów w formacie XML. Android Studio umożliwia też konwertowanie plików SVG na format rysowalny wektorowo, jak opisano w sekcji Dodawanie grafiki wektorowej o wielu gęstości.

Android 5.0 (poziom interfejsu API 21) był pierwszą wersją, która oficjalnie obsługiwała obiekty rysowania wektorów za pomocą klas VectorDrawable i AnimatedVectorDrawable, ale można obsługiwać starsze wersje za pomocą biblioteki obsługi Androida, która udostępnia klasy VectorDrawableCompat i AnimatedVectorDrawableCompat.

Informacje o klasie VectorDrawable

VectorDrawable definiuje statyczny obiekt rysowalny. Podobnie jak w przypadku formatu SVG, każda grafika wektorowa jest definiowana jako hierarchia drzewikowa, która składa się z obiektów path i group. Każdy element path zawiera geometrię konturu obiektu, a element group zawiera szczegóły transformacji. Wszystkie ścieżki są rysowane w tej samej kolejności, w jakiej występują w pliku XML.

Rysunek 1. Przykładowa hierarchia wektorowego zasobu rysunkowego

Narzędzie studio obiektów wektorowych umożliwia łatwe dodawanie do projektu grafiki wektorowej w pliku XML.

Przykładowy kod XML

Oto przykładowy plik XML VectorDrawable, który renderuje obraz baterii w trybie ładowania. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

Ten kod XML generuje ten obraz:

Informacje o klasie AnimatedVectorDrawable

AnimatedVectorDrawable dodaje animację do właściwości grafiki wektorowej. Animowaną grafikę wektorową można zdefiniować jako 3 osobne pliki zasobów lub jako pojedynczy plik XML definiujący cały obiekt rysowalny. Aby lepiej zrozumieć obie metody, przyjrzyjmy się im: kilku plikach XML i pliku XML.

Wiele plików XML

Dzięki temu możesz zdefiniować 3 osobne pliki XML:

Przykład wielu plików XML

Poniższe pliki XML pokazują animację grafiki wektorowej.

  • Plik XML VectorDrawable: vd.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="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • Plik XML AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • Pliki XML animatora używane w pliku XML obiektu AnimatedVectorDrawable: rotation.xml i path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />
     
    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

Pojedynczy plik XML

Dzięki temu możesz scalić powiązane pliki XML w jeden plik XML za pomocą formatu pakietu XML. Podczas tworzenia aplikacji tag aapt tworzy osobne zasoby i odwołuje się do nich w animowanym wektorze. To podejście wymaga wersji narzędzi do kompilacji 24 lub nowszej, a wynik jest zgodny ze starszymi wersjami.

Przykład pojedynczego pliku XML 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

Rozwiązanie do rysowania wektorowych elementów wektorowych

Aby obsługiwać obiekty drawable wektorowe i animowane obiekty drawable wektorowe na urządzeniach z Androidem w wersji niższej niż 5.0 (poziom interfejsu API 21) lub używać funkcji fillColor, fillType i strokeColor w wersjach Androida niższych niż 7.0 (poziom interfejsu API 24), VectorDrawableCompat i AnimatedVectorDrawableCompat są dostępne w ramach 2 bibliotek pomocniczych: support-vector-drawable i animated-vector-drawable.

Android Studio 1.4 wprowadziło ograniczoną obsługę obiektów rysowalnych wektorowych przez wygenerowanie plików PNG w momencie kompilacji. Biblioteki obsługujące rysunki wektorowe i animowane rysunki wektorowe są jednak elastyczne i są zgodne z wielu wersjami Androida – są to biblioteki pomocnicze, więc możesz ich używać we wszystkich wersjach Androida od 2.1 w górę (poziom API 7 i wyższy). Aby skonfigurować aplikację tak, aby używała bibliotek pomocniczych wektorów, dodaj element vectorDrawables do pliku build.gradle w module aplikacji.

Aby skonfigurować element vectorDrawables, użyj tego fragmentu kodu:

Groovy

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

Kotlin

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

Groovy

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

Funkcji VectorDrawableCompat i AnimatedVectorDrawableCompat można używać na wszystkich urządzeniach z Androidem w wersji 4.0 (poziom interfejsu API 14) lub nowszej. Z powodu sposobu wczytywania przez Androida plików drawable nie wszystkie miejsca, które akceptują identyfikator drawable, na przykład plik XML, obsługują wczytywanie wektorów drawable. Pakiet android.support.v7.appcompat zawiera funkcje ułatwiające korzystanie z rysunków wektorowych. Po pierwsze, gdy używasz pakietu android.support.v7.appcompat z ImageView lub z podklasami takimi jak ImageButton i FloatingActionButton, możesz użyć nowego atrybutu app:srcCompat, aby odwoływać się do obiektów rysowanych wektorowo, a także do dowolnych innych obiektów rysowanych dostępnych dla android:src: 

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

Aby zmienić obiekty rysowalne w czasie działania, możesz użyć metody setImageResource(), tak jak poprzednio. Użycie AppCompat i app:srcCompat to najbardziej niezawodna metoda integrowania wektorowych obiektów rysowanych z Twoją aplikacją.

Biblioteka pomocy w wersji 25.4.0 lub nowszej obsługuje te funkcje:

  • Przekształcanie ścieżki (sprawdzający PathType) służy do przekształcania jednej ścieżki w drugą.
  • Interpolacja ścieżki – służy do definiowania elastycznego interpolatora (reprezentowanego jako ścieżka) zamiast interpolatorów zdefiniowanych przez system, takich jak LinearInterpolator.

Biblioteka pomocy w wersji 26.0.0-beta1 lub nowszej obsługuje te funkcje:

  • Przesuwanie wzdłuż ścieżki Obiekt geometryczny może się poruszać wzdłuż dowolnej ścieżki w ramach animacji.

Przykład wielu plików XML korzystających z biblioteki pomocy

Poniższe pliki XML pokazują podejście polegające na użyciu wielu plików XML do animowania grafiki wektorowej.

  • Plik XML VectorDrawable: vd.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="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • Plik XML AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • Plik XML animatora używany w pliku XML obiektu AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Pojedynczy plik XML

Poniższy plik XML pokazuje podejście polegające na użyciu pojedynczego pliku XML do animowania grafiki wektorowej. Podczas tworzenia aplikacji tag aapt tworzy osobne zasoby i odwołuje się do nich w animowanym wektorze. To podejście wymaga wersji narzędzi do tworzenia 24 lub nowszej, a wynik jest zgodny ze starszymi wersjami.

Przykład pojedynczego pliku XML korzystającego z biblioteki pomocniczej 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>