向量可繪項目總覽

試用 Compose

Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中顯示圖形。

ImageVector →

重點

• 向量可繪項目是 XML 檔案中定義的向量圖形，由一組點、線、 曲線和相關的色彩資訊。
• 向量可繪項目可縮放，也就是說，您可以調整大小，而不會影響顯示品質。這類檔案可縮減 APK 檔案大小並提升效能，因此非常適合用於 Android 應用程式。
• 您可以在 Android Studio 中建立向量可繪項目，方法是在專案中的「drawable」資料夾上按一下滑鼠右鍵，然後依序選取「New」>「Vector Asset」。您也可以將 SVG 檔案匯入 Android Studio 做為向量可繪項目。

，瞭解如何調查及移除這項存取權。 Google Bard 於 2023 年 7 月 24 日生成的摘要

簡介

VectorDrawable 是定義的向量圖形 以一組點、線、曲線以及相關 色彩資訊。使用向量可繪項目的主要優點是圖片可擴充性。可縮放而不會降低顯示品質，也就是說，系統可根據不同的螢幕密度重新調整同一檔案的尺寸，既不會造成影像品質下降，也不需額外的檔案。這樣一來，APK 檔案就會縮小，開發人員也能減少維護工作。您也可以使用多個 XML 檔案，而非為每個顯示解析度使用多個圖片，藉此使用向量圖片製作動畫。

本頁面和下方的影片將概略說明如何在 XML 中建立向量 drawable。Android Studio 也可以將 SVG 檔案轉換為向量可繪格式，如「新增多種密度的向量圖形」一文所述。

Android 5.0 (API 級別 21) 是第一個正式支援向量可繪項目的版本，可使用 VectorDrawable 和 AnimatedVectorDrawable，但您可以透過 Android 支援資料庫支援舊版，該資料庫提供 VectorDrawableCompat 和 AnimatedVectorDrawableCompat 類別。

關於 VectorDrawable 類別

VectorDrawable 定義靜態可繪物件。與 SVG 格式類似，每個向量圖形都會定義為樹狀階層，由 path 和 group 物件組成。每個 path 都包含物件輪廓的幾何圖形，而 group 則包含轉換的詳細資料。所有路徑都會按照 XML 檔案中的順序繪製。

圖 1. 向量可繪項目素材資源的階層結構範例

Vector Asset Studio 工具提供簡單的方式，可將向量圖形做為 XML 檔案新增至專案。

XML 範例

以下是會轉譯圖片的範例 VectorDrawable XML 檔案 電池的運算過程

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

此 XML 會轉譯以下圖片：

關於 AnimatedVectorDrawable 類別

AnimatedVectorDrawable 會將動畫新增至向量的屬性 圖形。您可以將動畫向量圖形定義為三個獨立的資源檔案，也可以定義為單一 XML 檔案，以定義整個可繪項目。我們 如要進一步瞭解，可以參考這兩種做法：多個 XML 檔案和單一 XML 檔案 XML 檔案。

多個 XML 檔案

使用這個方法時，您可以定義三個獨立的 XML 檔案：

• VectorDrawable XML 檔案。
• AnimatedVectorDrawable XML 檔案， 會定義目標 VectorDrawable， 要建立動畫效果的目標路徑和群組、屬性以及定義的動畫 做為 ObjectAnimator 物件 AnimatorSet 物件。
• Animator XML 檔案。

多個 XML 檔案範例

以下 XML 檔案示範向量圖形的動畫。

• VectorDrawable 的 XML 檔案：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>

• 動畫向量 Drawable 的 XML 檔案：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>

• 在 AnimatedVectorDrawable 的 XML 檔案中使用的 Animator XML 檔案：rotation.xml 和 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>

單一 XML 檔案

使用這種方法，您可以透過 XML 套件格式，將相關 XML 檔案合併為單一 XML 檔案。建構應用程式時， aapt 標記會建立獨立的資源，並參照 動畫向量。這個方法需要建構工具 24 以上版本，且 而且輸出內容具回溯相容性

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

向量可繪項目的回溯相容性解決方案

如要在搭載 Android 5.0 (API 級別 21) 以下平台版本的裝置上支援向量可繪項目和動畫向量可繪項目，或使用 Android 7.0 (API 級別 24) 以下版本的 fillColor、fillType 和 strokeColor 功能，請分別透過兩個支援程式庫 support-vector-drawable 和 animated-vector-drawable 使用 VectorDrawableCompat 和 AnimatedVectorDrawableCompat。

Android Studio 1.4 在建構期間產生 PNG 檔案，為向量可繪項目提供有限的相容性支援。不過向量可繪項目 和動畫向量可繪項目支援資料庫 具備多種相容性；這是一個支援資料庫，因此您可以與 Android 平台版本回溯至 Android 2.1 (API 級別 7 以上)。如何設定 應用程式即可使用向量支援資料庫，請新增 vectorDrawables 加入應用程式模組中的 build.gradle 檔案。

使用以下程式碼片段設定 vectorDrawables 元素：

GroovyKotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

GroovyKotlin

// 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"
    }
}

// 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")
    }
}

您可以使用「VectorDrawableCompat」 和 所有主題的 AnimatedVectorDrawableCompat 在搭載 Android 4.0 (API 級別 14) 以上版本的裝置上。Android 的使用方式 會載入可繪項目，而非每個接受可繪項目 ID 的地點，例如 XML 格式 檔案，支援載入向量可繪項目。android.support.v7.appcompat 套件新增了多項功能，可讓您輕鬆使用向量可繪項目。首先，當您使用 android.support.v7.appcompat 套件搭配 ImageView，或是搭配 ImageButton 和 FloatingActionButton 等子類別時，可以使用新的 app:srcCompat 屬性參照向量可繪項目，以及 android:src 可用的任何其他可繪項目：

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

如要在執行階段變更可繪項目，您可以使用前述的 setImageResource() 方法。使用 AppCompat 和 app:srcCompat 是將向量可繪項目整合至應用程式最可靠的方法。

支援資料庫 25.4.0 以上版本支援下列功能：

• 路徑轉換 (PathType 評估工具) 用於將一個路徑轉換為另一個路徑。
• 路徑內插：用於定義彈性內插器 (以路徑表示)，而非系統定義的內插器 (例如 LinearInterpolator)。

支援資料庫 26.0.0-beta1 以上版本支援下列功能：

• 沿著路徑移動 幾何物件可沿著任意路徑移動，做為動畫的一部分。

使用支援資料庫的多個 XML 檔案範例

以下 XML 檔案示範如何使用多個 XML 檔案 為向量圖形加上動畫效果

• VectorDrawable 的 XML 檔案：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>

• 動畫向量 Drawable 的 XML 檔案：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>

• 在 AnimatedVectorDrawable 的 XML 檔案中使用的 Animator XML 檔案：rotation.xml
• <objectAnimator
     android:duration="6000"
     android:propertyName="rotation"
     android:valueFrom="0"
     android:valueTo="360" />

單一 XML 檔案

以下 XML 檔案示範了使用單一 XML 檔案的方法 為向量圖形加上動畫效果建構應用程式時， aapt 標記會建立獨立的資源，並參照 動畫向量。這個方法需要建構工具 24 以上版本，且 而且輸出內容具回溯相容性

使用支援資料庫的單一 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 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>