向量可繪項目總覽

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

重點

  • 向量可繪項目是 XML 檔案中定義的向量圖形，由一組點、線、 曲線和相關的色彩資訊。
  • 向量可繪項目具有可縮放性，也就是說，可以調整大小而不會降低顯示品質。 因此相當適合用於 Android 應用程式， APK 檔案並提升效能。
  • 您可以在 Android Studio 的可繪項目資料夾上按一下滑鼠右鍵 ，依序選取「New」>「New」Vector Asset。您也可以將 SVG 檔案匯入 使用 Android Studio 做為向量可繪項目。
，瞭解如何調查及移除這項存取權。 Google Bard 於 2023 年 7 月 24 日生成的摘要

簡介

VectorDrawable 是定義的向量圖形 以一組點、線、曲線以及相關 色彩資訊。使用向量可繪項目的主要優勢是圖片 擴充性系統可以在不失去畫面品質的情況下進行調整 並根據不同的螢幕密度重新調整同一檔案的大小，而不會降低影像品質。 這可以縮減 APK 檔案的大小，同時減少開發人員維護的時間。你也可以 使用多個 XML 檔案 (而非多個 XML 檔案) 建立向量圖片動畫 每種螢幕解析度的圖像

本網頁和以下影片概述瞭如何在 XML 中建立向量可繪項目。 Android Studio 也可以將 SVG 檔案轉換為向量可繪項目格式，如 使用「新增多種密度的向量圖形」一文。

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

關於 VectorDrawable 類別

VectorDrawable 定義靜態可繪項目 物件。與 SVG 格式類似，每個向量圖形都會定義為樹狀結構 階層，由 path 和 group 物件組成 每個 path 都包含物件外框的幾何圖形， group 包含轉換的詳細資料。所有路徑都已繪製 順序與在 XML 檔案中顯示的順序相同。

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

向量素材資源 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 檔案：

多個 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 中使用的動畫器 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 檔案建構應用程式時， 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)，或使用 fillColor、fillType 和 Android 7.0 (API 級別 24) 以下的 strokeColor 功能， VectorDrawableCompat 和 AnimatedVectorDrawableCompat 可透過兩種支援資料庫取得 support-vector-drawable和animated-vector-drawable， 。

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

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

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

您可以使用「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 evaluator) 用於變形 將兩個路徑帶入另一個路徑
  • 路徑內插：用來定義 內插器 (以路徑表示)，而不是系統定義的 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 中使用的動畫工具 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>