Omówienie elementów rysowanych wektorowych

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu na Androida. Dowiedz się, jak wyświetlać grafikę w Compose.
ImageVector →

Najważniejsze punkty

  • Obiekt rysowalny wektorowo to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii i krzywych wraz z powiązanymi informacjami o kolorach.
  • Obiekty rysowalne wektorowo są skalowalne, co oznacza, że można zmieniać ich rozmiar bez utraty jakości wyświetlania. Dzięki temu idealnie nadają się do użycia w aplikacjach na Androida, ponieważ mogą pomóc w zmniejszeniu rozmiaru plików APK i poprawie wydajności.
  • Obiekty rysowalne wektorowo możesz tworzyć w Android Studio, klikając prawym przyciskiem myszy folder obiektów rysowalnych w projekcie i wybierając Nowy > Zasób wektorowy. Możesz też importować pliki SVG do Android Studio jako obiekty rysowalne wektorowo.
Podsumowanie wygenerowane przez Google Bard 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ą używania obiektu rysowalnego wektorowo jest skalowalność obrazu. Można go skalować bez utraty jakości wyświetlania, co oznacza, że ten sam plik można dostosować do różnych gęstości ekranu bez utraty jakości obrazu. Dzięki temu pliki APK są mniejsze, a programiści mają mniej pracy przy ich utrzymaniu. Możesz też używać obrazów wektorowych do animacji, korzystając z 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 obiektów rysowalnych wektorowo w języku XML. Android Studio może też konwertować pliki SVG na format obiektów rysowalnych wektorowo, jak opisano w sekcji Dodawanie grafiki wektorowej o wielu gęstościach.

Android 5.0 (interfejs API na poziomie 21) był pierwszą wersją, która oficjalnie obsługiwała obiekty rysowalne wektorowo z VectorDrawable i AnimatedVectorDrawable, ale możesz obsługiwać starsze wersje za pomocą biblioteki pomocy 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 zdefiniowana jako hierarchia drzewa, 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 przekształcenia. Wszystkie ścieżki są rysowane w tej samej kolejności, w jakiej występują w pliku XML.

Rysunek 1. Przykładowa hierarchia komponentu obiektu rysowalnego wektorowo

Narzędzie Vector Asset Studio umożliwia łatwe dodawanie grafiki wektorowej do projektu w postaci pliku XML.

Przykładowy plik 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 renderuje ten obraz:

Informacje o klasie 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 obiekt rysowalny. Aby lepiej zrozumieć oba podejścia, przyjrzyjmy się im: Wiele plików XML i Pojedynczy plik XML.

Wiele plików XML

W ten sposób 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 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 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 narzędzi Build Tools w wersji 24 lub nowszej, a wyniki są zgodne wstecznie.

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 zapewniające zgodność wsteczną obiektów rysowalnych wektorowo

Aby obsługiwać obiekty rysowalne wektorowo i animowane obiekty rysowalne wektorowo na urządzeniach z platformą w wersji starszej niż Android 5.0 (poziom interfejsu API 21) lub korzystać z funkcji fillColor, fillType i strokeColor w systemie Android w wersji starszej niż 7.0 (poziom interfejsu API 24), możesz użyć VectorDrawableCompat i AnimatedVectorDrawableCompat dostępnych w 2 bibliotekach pomocy: odpowiednio support-vector-drawable i animated-vector-drawable.

W Android Studio 1.4 wprowadzono ograniczoną obsługę zgodności obiektów rysowalnych wektorowo przez generowanie plików PNG podczas kompilacji. Biblioteki obsługi obiektów rysowalnych wektorowo i animowanych obiektów rysowalnych wektorowo zapewniają jednak elastyczność i szeroką zgodność. Są to biblioteki obsługi, więc możesz ich używać ze wszystkimi wersjami platformy Androida, począwszy od Androida 2.1 (interfejs API na poziomie 7 lub wyższym). Aby skonfigurować aplikację do korzystania z bibliotek obsługi obiektów wektorowych, dodaj element vectorDrawables do pliku build.gradle w module aplikacji.

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

Dynamiczny

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

Kotlin

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

Dynamiczny

// 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")
    }
}

Możesz używać VectorDrawableCompat i AnimatedVectorDrawableCompat na wszystkich urządzeniach z Androidem 4.0 (poziom interfejsu API 14) lub nowszym. Ze względu na sposób, w jaki Android wczytuje obiekty rysowalne, nie każde miejsce, które akceptuje identyfikator obiektu rysowalnego, np. w pliku XML, obsługuje wczytywanie obiektów rysowalnych wektorowo. Pakiet android.support.v7.appcompat zawiera wiele funkcji, które ułatwiają korzystanie z obiektów rysowalnych wektorowo. Po pierwsze, gdy używasz pakietu android.support.v7.appcompat z ImageView lub podklasami takimi jak ImageButton i FloatingActionButton, możesz użyć nowego atrybutu app:srcCompat, aby odwoływać się do obiektów rysowalnych wektorowo oraz 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ć elementy rysowalne w czasie działania, możesz użyć metody setImageResource(), tak jak wcześniej. Używanie AppCompat i app:srcCompat to najbardziej niezawodna metoda integracji obiektów rysowalnych wektorowo z aplikacją.

Biblioteka pomocy w wersji 25.4.0 i nowszych obsługuje te funkcje:

  • Przekształcanie ścieżki (ewaluator PathType) – służy do przekształcania jednej ścieżki w inną.
  • 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 i nowszych obsługuje te funkcje:

  • Przesuwanie po ścieżce – obiekt geometryczny może się przemieszczać po dowolnej ścieżce w ramach animacji.

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

Poniższe pliki XML pokazują, jak używać 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 AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Pojedynczy plik XML

Poniższy plik XML pokazuje, jak użyć 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 narzędzi Build Tools w wersji 24 lub nowszej, a wyniki są zgodne wstecznie.

Przykład pojedynczego pliku XML korzystającego z biblioteki obsługi 

<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>