Najważniejsze punkty
- Obiekt rysowalny wektorowo to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii krzywe oraz powiązane z nimi informacje o kolorze.
- Obiekty rysowane 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żywania w aplikacjach na Androida, ponieważ pomagają zmniejszyć pliki APK i zwiększyć wydajność.
- W Android Studio możesz tworzyć wektorowe obiekty rysunkowe, klikając prawym przyciskiem myszy folder z rysunkami. w projekcie i wybierając Nowy > Zasób wektorowy. Pliki SVG możesz też importować do Android Studio jako elementy graficzne wektorowe.
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 obiektów rysowalnych wektorowych jest to, że są to obrazy
i skalowalność. 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żywaj do animacji obrazów wektorowych, używając wielu plików XML zamiast wielu
dla każdej rozdzielczości.
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 na format rysowalny wektorowy, jak opisano w korzystając z opcji Dodaj grafikę wektorową o wielu gęstościach.
Android 5.0 (poziom interfejsu API 21) był pierwszą wersją, która oficjalnie obsługiwała wektorowe obiekty rysowane przez
VectorDrawable
i AnimatedVectorDrawable
, ale
dla starszych wersji można pomóc, korzystając z biblioteki pomocy Androida, która zawiera
VectorDrawableCompat
i
AnimatedVectorDrawableCompat
zajęć.
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ę obrysu obiektu i
group
zawiera szczegóły dotyczące przekształcenia. Wszystkie ścieżki są rysowane w tej samej kolejności, w jakiej występują w pliku XML.

Rysunek 1. Przykładowa hierarchia zasobu rysowalnego wektorowego
Zasób wektorowy Studio pozwala w prosty sposób dodać grafikę wektorową do projektu. jako plik 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 plik XML renderuje następujący 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
W ten sposób możesz zdefiniować 3 osobne pliki XML:
- Plik XML
VectorDrawable
. -
Plik XML
AnimatedVectorDrawable
, który definiuje obiekt docelowyVectorDrawable
, ścieżki i grupy docelowe do animowania, właściwości oraz animacje zdefiniowane jako obiektyObjectAnimator
lubAnimatorSet
. - Plik XML animatora.
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 animacji używane w pliku XML AnimatedVectorDrawable
plik:
rotation.xml
ipath_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 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 dotyczące zgodności wstecznej obiektów rysowalnych wektorowo
Obsługa elementów rysowalnych wektorowo i animowanych, które można rysować w formie wektorowej na urządzeniach z platformami w wersji starszej niż ta
niż w Androidzie 5.0 (poziom interfejsu API 21) lub używać interfejsów fillColor
, fillType
i
funkcje strokeColor
starszych niż Androida 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ł ograniczoną zgodność ze standardami wektorowymi
obiektów rysowalnych przez wygenerowanie plików PNG podczas kompilacji. Biblioteki obsługujące grafiki wektorowe i animowane grafiki wektorowe są jednak elastyczne i są zgodne z wielu wersjami Androida – od Androida 2.1 (poziom interfejsu API 7 i nowsze). Aby skonfigurować aplikację tak, aby używała bibliotek obsługujących wektory, dodaj element vectorDrawables
do pliku build.gradle
w module aplikacji.
Użyj poniższego fragmentu kodu, aby skonfigurować vectorDrawables
element:
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") } }
Możesz użyć usługi VectorDrawableCompat
oraz
AnimatedVectorDrawableCompat
we wszystkich
na urządzeniach z Androidem 4.0 (poziom interfejsu API 14) lub nowszym. 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ć elementy do rysowania w czasie działania, możesz użyć
setImageResource()
tak jak wcześniej. Używasz AppCompat
a app:srcCompat
to najbardziej niezawodna metoda
wektorowe obiekty rysowane w aplikacji.
Biblioteka pomocy w wersji 25.4.0 lub nowszej obsługuje te funkcje:
- Zmiana przekształcania ścieżki (narzędzie oceniające PathType): przekształcanie z jednej ścieżki na inną.
- Interpolacja ścieżek – służy do definiowania elastycznego interpolatora (reprezentowanego jako ścieżka), a nie zdefiniowanego przez system, np. 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 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 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 przedstawia sposób użycia jednego pliku XML.
aby animować grafikę wektorową. W trakcie tworzenia aplikacji
Tag aapt
tworzy osobne zasoby i odwołuje się do nich w tagu
animowany wektor. 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>