Omówienie elementów rysowanych wektorowych

Wypróbuj tworzenie 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 Barda Google 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 kolorach. Główną zaletą stosowania wektorowych obiektów rysowanych jest możliwość skalowania. 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. W efekcie pliki APK są mniejsze, a ich utrzymanie nie wymaga od dewelopera tak dużo pracy. 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 może też konwertować pliki SVG do formatu wektorowego drawable, jak opisano w artykule Dodawanie grafik wektorowych o różnych gęstościach pikseli.

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:

Klasa AnimatedVectorDrawable

AnimatedVectorDrawable dodaje animację do właściwości grafiki wektorowej. Animowaną grafikę wektorową możesz zdefiniować jako 3 osobne pliki zasobów lub jako pojedynczy plik XML definiujący cały element 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

Te 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 animowanego obiektu wektorowego: 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 dotyczące zgodności wstecznej obiektów rysowalnych wektorowo

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 2 bibliotekach pomocniczych: support-vector-drawable i animated-vector-drawable.

Android Studio 1.4 wprowadziło ograniczoną obsługę obiektów rysowalnych wektorowych przez generowanie plików PNG w czasie 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:

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 poziomem ImageView lub podklasami takimi jak ImageButton i FloatingActionButton, możesz użyć nowego atrybutu app:srcCompat, aby odwoływać się do obiektów rysowalnych wektorowych, a także do dowolnych innych obiektów rysowalnych dostępnych dla android:src: 

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

Aby zmienić obiekty rysowane w czasie działania, możesz użyć metody setImageResource(), tak jak poprzednio. Korzystanie z bibliotek AppCompat i app:srcCompat to najprostsza metoda integrowania wektorów do rysowania w aplikacji.

Biblioteka wsparcia w wersji 25.4.0 i nowszych 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 interpolowanych definiowanych przez system, takich jak LinearInterpolator.

Biblioteka wsparcia w wersji 26.0.0-beta1 i nowszych 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 wsparcia

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 animowanego obiektu wektorowego: 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 kompilacji 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>