Omówienie elementów rysowanych wektorowych

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu na Androidzie. 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.
  • Grafiki wektorowe 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 zmniejszyć rozmiar plików APK i poprawić wydajność.
  • Grafiki wektorowe możesz tworzyć w Android Studio, klikając prawym przyciskiem myszy folder drawable w projekcie i wybierając New > Vector Asset (Nowy > Zasób wektorowy). Możesz też importować pliki SVG do Android Studio jako grafiki wektorowe.
Podsumowanie wygenerowane przez Google Bard 24 lipca 2023 r.

Wprowadzenie

A 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 ją skalować bez utraty jakości wyświetlania, co oznacza, że ten sam plik jest zmieniany pod kątem różnych gęstości ekranu bez utraty jakości obrazu. Dzięki temu pliki APK są mniejsze, a deweloperzy muszą poświęcać mniej czasu na konserwację. Możesz też używać 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 grafik wektorowych w formacie XML. Android Studio może też konwertować pliki SVG na format obiektu rysowalnego wektorowo, jak opisano w artykule Dodawanie grafiki wektorowej o wielu gęstościach.

Android 5.0 (poziom API 21) był pierwszą wersją, która oficjalnie obsługiwała grafiki wektorowe za pomocą VectorDrawable i AnimatedVectorDrawable, ale możesz obsługiwać starsze wersje za pomocą biblioteki pomocy Androida, która udostępnia VectorDrawableCompat i AnimatedVectorDrawableCompat klasy.

Informacje o klasie VectorDrawable

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

Rysunek 1. Przykładowa hierarchia zasobu obiektu rysowalnego wektorowo

Narzędzie Studio zasobów wektorowych umożliwia łatwe dodawanie grafiki wektorowej do projektu jako pliku XML.

Przykład w formacie 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 jeden plik XML definiujący cały obiekt rysowalny. Aby lepiej zrozumieć, przyjrzyjmy się obu podejściom: wiele plików XML i jeden plik XML.

Wiele plików XML

W tym podejściu 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 file: 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>

Jeden plik XML

W tym podejściu możesz połączyć 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 animowanej grafice wektorowej. To podejście wymaga narzędzi do kompilacji w wersji 24 lub nowszej, a dane wyjściowe są zgodne wstecz.

Przykład jednego 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ą grafik wektorowych

Aby obsługiwać obiekt rysowalny wektorowo i animowany obiekt rysowalny wektorowo na urządzeniach z platformą w wersji niższej niż Android 5.0 (poziom API 21) lub używać funkcji fillColor, fillType i strokeColor w wersjach Androida starszych niż 7.0 (poziom API 24), klasy VectorDrawableCompat i AnimatedVectorDrawableCompat są dostępne w 2 Bibliotekach pomocy: support-vector-drawable i animated-vector-drawable, .

Android Studio 1.4 wprowadził ograniczoną obsługę zgodności z grafikami wektorowymi , generując pliki PNG podczas kompilacji. Biblioteki pomocy dotyczące obiektów rysowalnych wektorowo i animowanych obiektów rysowalnych wektorowo zapewniają jednak zarówno elastyczność, jak i szeroką zgodność – jest to Biblioteka pomocy, więc możesz jej używać we wszystkich wersjach platformy Androida, począwszy od Androida 2.1 (poziom API 7+). Aby skonfigurować aplikację do korzystania z bibliotek pomocy dotyczących obiektów rysowalnych wektorowo, 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")
    }
}

Klas VectorDrawableCompat i AnimatedVectorDrawableCompat możesz używać na wszystkich urządzeniach z Androidem 4.0 (poziom API 14) lub nowszym. Sposób, w jaki Android wczytuje obiekty rysowalne, sprawia, że 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 dodał kilka funkcji, które ułatwiają korzystanie z grafik wektorowych. Po pierwsze, gdy używasz android.support.v7.appcompat pakietu 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 rysowalnych wektorowo oraz do innych obiektów rysowalnych dostępnych w android:src: 

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

Aby zmieniać grafiki w czasie działania aplikacji, możesz użyć metody setImageResource() jak wcześniej. Używanie AppCompat i app:srcCompat to najbardziej niezawodna metoda integrowania grafik wektorowych z aplikacją.

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

  • Przekształcanie ścieżki (ocena PathType) Używane do przekształcania jednej ścieżki w inną.
  • Interpolacja ścieżki Używana do definiowania elastycznego interpolatora (reprezentowanego jako ścieżka) zamiast interpolatorów zdefiniowanych w systemie, takich jak LinearInterpolator.

Biblioteka pomocy w wersji 26.0.0-beta1 i nowszych obsługuje te funkcje:

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

Przykład wielu plików XML używających biblioteki pomocy

Te pliki XML pokazują podejście polegające na używaniu 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: plik: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Jeden plik XML

Ten plik XML pokazuje podejście polegające na używaniu jednego pliku XML do animowania grafiki wektorowej. Podczas tworzenia aplikacji tag aapt tworzy osobne zasoby i odwołuje się do nich w animowanej grafice wektorowej. To podejście wymaga narzędzi do kompilacji w wersji 24 lub nowszej, a dane wyjściowe są zgodne wstecz.

Przykład jednego pliku XML używającego biblioteki pomocy 

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