Key points
- Obiekt rysowalny wektorowo to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii i krzywych wraz z powiązanymi informacjami 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ć rozmiar plików APK i zwiększać wydajność.
- W Android Studio możesz tworzyć wektorowe obiekty rysunkowe. Aby to zrobić, kliknij prawym przyciskiem folder z możliwością rysowania w projekcie i wybierz Nowy > Zasób wektorowy. Pliki SVG możesz też importować do Android Studio jako obiekty rysunkowe wektorowe.
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 rozmiar tego samego pliku jest dostosowywany do różnej 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żywać obrazów wektorowych do animacji, stosując wiele plików XML zamiast wielu obrazów dla każdej rozdzielczości wyświetlacza.
Ta strona oraz film poniżej zawierają omówienie tworzenia wektorowych obiektów rysowalnych 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 wektorowe obiekty rysowane za pomocą usług VectorDrawable i AnimatedVectorDrawable. Możesz jednak obsługiwać starsze wersje dzięki bibliotece pomocy Androida, która zawiera klasy VectorDrawableCompat i AnimatedVectorDrawableCompat.
Informacje o klasie VectorDrawable
VectorDrawable definiuje statyczny obiekt rysowalny. Podobnie jak w formacie SVG, każda grafika wektorowa jest definiowana jako hierarchia drzewa, na którą składają się obiekty path i group.
Każdy element path zawiera geometrię obrysu obiektu, a 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 zasobu rysowalnego wektorowego
Narzędzie Vector Asset Studio pozwala w prosty sposób dodać grafikę wektorową 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 plik XML renderuje następujący 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. Przyjrzyjmy się dwóm podejściom, które ułatwiają zrozumienie treści: wiele plików XML i pojedynczy plik XML.
Wiele plików XML
W ten sposób możesz zdefiniować 3 osobne pliki XML:
- Plik XML
VectorDrawable. -
Plik XML
AnimatedVectorDrawableokreślający element docelowyVectorDrawable, docelowe ścieżki i grupy do animacji, właściwości i animacje zdefiniowane jako obiektyObjectAnimatorlub obiektyAnimatorSet. - Plik XML animatora.
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 animacji używane w pliku XML AnimatedVectorDrawable:
rotation.xmlipath_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 tej metodzie możesz scalić powiązane pliki XML w jeden plik XML za pomocą formatu XML Bundle Format. W momencie tworzenia aplikacji tag aapt tworzy osobne zasoby i odwołuje się do nich w animowanym wektorze. Ta metoda wymaga narzędzi Build Tools w wersji 24 lub nowszej, a dane wyjściowe są zgodne wstecznie.
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 do rysowania wektorowego elementów wektorowych
Aby umożliwić obsługę rysowalnych i animowanych wektorów wektorowych i rysowanych w wersjach wektorowych na urządzeniach z wersjami platformy starszych niż Android 5.0 (poziom interfejsu API 21) lub korzystanie z funkcji fillColor, fillType i strokeColor w wersjach starszych niż Androida 7.0 (poziom interfejsu API 24), funkcje VectorDrawableCompat i AnimatedVectorDrawableCompat są dostępne w 2 bibliotekach pomocy: odpowiednio support-vector-drawable i animated-vector-drawable.
Android Studio 1.4 wprowadził ograniczoną zgodność z elementami rysunkowymi wektorowymi dzięki generowaniu plików PNG podczas kompilacji. Biblioteki pomocy, które można rysować wektorowo oraz animowane wektory, zapewniają jednak zarówno elastyczność, jak i szeroką zgodność. Jest to biblioteka pomocy, więc można jej używać ze wszystkimi wersjami platformy Androida aż do Androida 2.1 (poziom interfejsu API 7 lub nowszego). Aby skonfigurować aplikację do korzystania z bibliotek obsługi wektorów, dodaj element vectorDrawables do pliku build.gradle w module aplikacji.
Aby skonfigurować element vectorDrawables, użyj tego fragmentu kodu:
Odlotowe
// For Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Kotlin
// For Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Odlotowe
// 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")
}
}
Z usług VectorDrawableCompat i AnimatedVectorDrawableCompat możesz korzystać na wszystkich urządzeniach z Androidem 4.0 (poziom interfejsu API 14) lub nowszym. Sposób, w jaki Android wczytuje obiekty rysowalne, a nie każde miejsce, które akceptuje rysowalne identyfikatory, np. w pliku XML, obsługuje obiekty rysowalne wektorowe. Pakiet android.support.v7.appcompat dodał kilka funkcji, które ułatwiają korzystanie z obiektów rysunków wektorowych. Po pierwsze, gdy używasz pakietu android.support.v7.appcompat z klasą ImageView lub z podklasami, takimi jak ImageButton i FloatingActionButton, możesz użyć nowego atrybutu app:srcCompat, aby odwoływać się do wektorowych obiektów rysowalnych, a także innych obiektów możliwych do rysowania dostępnych w android:src:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Aby zmienić elementy, które można przeciągać w czasie działania, możesz użyć metody setImageResource() tak jak wcześniej. 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:
- Zmiana przekształcania ścieżki (tester 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 lub nowszej obsługuje te funkcje:
- Poruszanie się po ścieżce – w ramach animacji obiekt geometrii może się poruszać po dowolnej ścieżce.
Przykład wielu plików XML korzystających z biblioteki pomocy
Poniższe pliki XML pokazują sposób użycia 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 animacji 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 przedstawia sposób użycia jednego pliku XML do animowania grafiki wektorowej. W momencie tworzenia aplikacji tag aapt tworzy osobne zasoby i odwołuje się do nich w animowanym wektorze. Ta metoda wymaga narzędzi Build Tools w wersji 24 lub nowszej, a dane wyjściowe są zgodne wstecznie.
Przykład pojedynczego pliku XML wykorzystującego bibliotekę 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>