Omówienie elementów rysowanych wektorowych

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak wyświetlać grafikę w funkcji Compose
ImageWector →

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.
. Podsumowanie wygenerowane przez Google Barda 24 lipca 2023 r.

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.

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:

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:

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

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ść ze standardami 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>