向量可繪項目總覽

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

重點

  • 向量可繪項目是 XML 檔案中定義的向量圖形,是由一組點、線、曲線以及相關色彩資訊所組成。
  • 向量可繪項目可以擴充,表示可以調整大小,而不會減損顯示品質。因此非常適合用於 Android 應用程式,因為這有助於縮減 APK 檔案的大小並提升效能。
  • 如要在 Android Studio 中建立向量可繪項目,請在專案的可繪項目資料夾上按一下滑鼠右鍵,然後依序選取「New」>「Vector Asset」。您也可以將 SVG 檔案匯入 Android Studio 做為向量可繪項目。
Google Bard 在 2023 年 7 月 24 日產生的摘要

簡介

VectorDrawable 是 XML 檔案中定義的向量圖形,是由一組點、線、曲線以及相關色彩資訊所組成。使用向量可繪項目的主要好處是圖片可擴充性。圖片可以縮放,而不會減損顯示品質,也就是說,系統可根據不同螢幕密度重新調整同一個檔案的大小,而不會減損影像品質。進而減少 APK 檔案,並減輕開發人員的維護負擔。您也可以利用多個 XML 檔案 (而不是每種螢幕解析度) 來使用向量圖片來呈現動畫。

本頁和以下影片將概略說明如何以 XML 建立向量可繪項目。Android Studio 也可以將 SVG 檔案轉換為向量可繪項目格式,詳情請參閱「新增多種密度的向量圖形」。

Android 5.0 (API 級別 21) 是第一個版本,可正式支援透過 VectorDrawableAnimatedVectorDrawable 支援向量可繪項目。不過,您可以使用 Android 支援資料庫 (提供 VectorDrawableCompatAnimatedVectorDrawableCompat 類別) 來支援較舊版本。

關於 VectorDrawable 類別

VectorDrawable 會定義靜態可繪項目物件。與 SVG 格式類似,每個向量圖形都定義為樹狀結構,由 pathgroup 物件組成。每個 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 檔案的範例

下列 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>
    
  • 動畫向量可繪項目的 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>
    
  • 用於動畫向量可繪項目 XML 檔案的動畫器 XML 檔案:rotation.xmlpath_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) 以下的 fillColorfillTypestrokeColor 功能,VectorDrawableCompatAnimatedVectorDrawableCompat 分別可透過以下兩種支援程式庫使用:support-vector-drawableanimated-vector-drawable

Android Studio 1.4 版在建構期間產生 PNG 檔案,藉此支援對向量可繪項目的有限相容性支援。不過,向量可繪項目和動畫向量可繪項目支援資料庫提供彈性和廣泛的相容性,這些程式庫是支援資料庫,因此可與所有 Android 2.1 (API 級別 7 以上版本) 的 Android 平台搭配使用。如要設定應用程式使用向量支援程式庫,請將 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")
    }
}

您可以在搭載 Android 4.0 (API 級別 14) 以上版本的裝置上使用 VectorDrawableCompatAnimatedVectorDrawableCompat。Android 載入可繪項目的方式,不是每個接受可繪製 ID 的位置 (例如在 XML 檔案中) 都支援載入向量可繪項目。android.support.v7.appcompat 套件新增了多項功能,方便您使用向量可繪項目。首先,將 android.support.v7.appcompat 套件與 ImageView 或子類別 (例如 ImageButtonFloatingActionButton) 搭配使用時,您可以使用新的 app:srcCompat 屬性參照向量可繪項目,以及 android:src 可用的任何其他可繪項目:

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

如要在執行階段變更可繪項目,可以和之前一樣使用 setImageResource() 方法。使用 AppCompatapp: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>
    
  • 動畫向量可繪項目的 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>
    
  • 用於動畫向量可繪項目 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>