Najważniejsze punkty
- Obiekt rysowalny wektorowo to grafika wektorowa zdefiniowana w pliku XML jako zbiór punktów, linii i 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 możliwością rysowania. w projekcie i wybierając Nowy > Zasób wektorowy. Pliki SVG można też importować do Android Studio jako obiekty rysowalne wektorowe.
Wprowadzenie
VectorDrawable
to grafika wektorowa
w pliku XML jako zestaw punktów, linii i krzywych wraz z powiązanymi
informacje o kolorze. 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,
jest zmieniany rozmiar tego samego pliku dla 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.
Ta strona oraz film poniżej zawierają omówienie tworzenia wektorowych obiektów rysowalnych 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
możesz pomóc w starszych wersjach, korzystając z biblioteki pomocy Androida, która zawiera
VectorDrawableCompat
i
AnimatedVectorDrawableCompat
zajęć.
Informacje o klasie VectorDrawable
VectorDrawable
definiuje statyczny element rysowalny
obiektu. Podobnie jak w formacie SVG, każda grafika wektorowa jest zdefiniowana jako drzewo
hierarchię, 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 takiej samej kolejności, w jakiej występują w pliku XML.
![](https://developer.android.google.cn/static/images/guide/topics/graphics/vectorpath.png?authuser=8&hl=pl)
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:
![](https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=8&hl=pl)
Informacje o klasie AnimatedVectorDrawable
AnimatedVectorDrawable
dodaje animację do właściwości wektora
drastyczne. Animowaną grafikę wektorową można zdefiniować jako
plików zasobów lub pojedynczego pliku XML definiującego cały obiekt rysowalny. Zacznijmy
zapoznaj się z obydwoma podejściami: wiele plików XML i pojedynczy
XML.
Wiele plików XML
W ten sposób możesz zdefiniować 3 osobne pliki XML:
- Plik XML
VectorDrawable
. -
Plik XML
AnimatedVectorDrawable
, który określa docelowy elementVectorDrawable
, docelowe ścieżki i grupy do animacji, właściwości oraz animacje jako obiektyObjectAnimator
lubAnimatorSet
obiektów. - 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
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
Stosując tę metodę, możesz scalić powiązane pliki XML w jeden
XML w formacie pakietu XML. W trakcie tworzenia aplikacji
Tag aapt
tworzy osobne zasoby i odwołuje się do nich w komponencie
animowany wektor. Ta metoda wymaga Build Tools w wersji 24 lub nowszej,
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 wektorowych elementów wektorowych
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ść z formatami wektorowymi
obiektów rysowalnych przez wygenerowanie plików PNG podczas kompilacji. Natomiast obiekt rysowalny wektorowo
i animowanego wektora, które można rysować w bibliotekach.
szeroką zgodność – to biblioteka pomocy, więc można jej używać ze wszystkimi
wersje platformy Androida do wersji 2.1 (poziom interfejsu API 7 lub nowszego). Aby skonfigurować
aby korzystać z bibliotek obsługujących wektory, dodaj vectorDrawables
do pliku build.gradle
w module aplikacji.
Użyj poniższego fragmentu kodu, aby skonfigurować vectorDrawables
element:
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") } }
Możesz użyć usługi VectorDrawableCompat
oraz
AnimatedVectorDrawableCompat
we wszystkich
na urządzeniach z Androidem 4.0 (poziom interfejsu API 14) lub nowszym. Jak Android
wczytuje elementy, które można przeciągać, a nie wszystkie miejsca, które akceptują obiekty rysowalne, takie jak w formacie XML
obsługuje wczytywane obiekty rysunkowe wektorowe.
android.support.v7.appcompat
pakiet dodał numer
ułatwiając korzystanie z elementów rysunków wektorowych. Po pierwsze, gdy korzystasz
android.support.v7.appcompat
przesyłka z
ImageView
lub z podklasami takimi jak
ImageButton
i
FloatingActionButton
, możesz
użyj nowego atrybutu app:srcCompat
, aby wskazać obiekty rysunkowe wektorowe
oraz dowolne inne elementy, które mogą być rysowane na urządzeniu 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 skuteczna metoda
wektorowe obiekty rysowalne w aplikacji.
Biblioteka pomocy w wersji 25.4.0 lub nowszej obsługuje te funkcje:
- Zmiana przekształcania ścieżki (narzędzia PathType) używane do przekształcania ścieżki 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:
- Poruszaj się po ścieżce – obiekt geometryczny może się poruszać. po dowolnej ścieżce, jako część animacji.
Przykład wielu plików XML korzystających z biblioteki pomocy
Poniższe pliki XML ilustrują metodę korzystania z wielu plików XML. aby animować grafikę wektorową.
- 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
plik:
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. Ta metoda wymaga Build Tools w wersji 24 lub nowszej,
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>