重點
- 向量可繪項目是 XML 檔案中定義的向量圖形,是由一組點、線、曲線以及相關色彩資訊所組成。
- 向量可繪項目可以擴充,表示可以調整大小,而不會減損顯示品質。因此非常適合用於 Android 應用程式,因為這有助於縮減 APK 檔案的大小並提升效能。
- 如要在 Android Studio 中建立向量可繪項目,請在專案的可繪項目資料夾上按一下滑鼠右鍵,然後依序選取「New」>「Vector Asset」。您也可以將 SVG 檔案匯入 Android Studio 做為向量可繪項目。
簡介
VectorDrawable
是 XML 檔案中定義的向量圖形,是由一組點、線、曲線以及相關色彩資訊所組成。使用向量可繪項目的主要好處是圖片可擴充性。圖片可以縮放,而不會減損顯示品質,也就是說,系統可根據不同螢幕密度重新調整同一個檔案的大小,而不會減損影像品質。進而減少 APK 檔案,並減輕開發人員的維護負擔。您也可以利用多個 XML 檔案 (而不是每種螢幕解析度) 來使用向量圖片來呈現動畫。
本頁和以下影片將概略說明如何以 XML 建立向量可繪項目。Android Studio 也可以將 SVG 檔案轉換為向量可繪項目格式,詳情請參閱「新增多種密度的向量圖形」。
Android 5.0 (API 級別 21) 是第一個版本,可正式支援透過 VectorDrawable
和 AnimatedVectorDrawable
支援向量可繪項目。不過,您可以使用 Android 支援資料庫 (提供 VectorDrawableCompat
和 AnimatedVectorDrawableCompat
類別) 來支援較舊版本。
關於 VectorDrawable 類別
VectorDrawable
會定義靜態可繪項目物件。與 SVG 格式類似,每個向量圖形都定義為樹狀結構,由 path
和 group
物件組成。每個 path
皆包含物件輪廓的幾何圖形,而 group
則包含轉換的詳細資料。所有路徑的繪製順序都與 XML 檔案中顯示的順序相同。
您可以使用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 檔案:
VectorDrawable
XML 檔案。-
AnimatedVectorDrawable
XML 檔案,用於定義目標VectorDrawable
、要建立動畫的目標路徑和群組、屬性,以及定義為ObjectAnimator
物件或AnimatorSet
物件的動畫。 - 動畫器 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.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
功能,VectorDrawableCompat
和 AnimatedVectorDrawableCompat
分別可透過以下兩種支援程式庫使用:support-vector-drawable
和 animated-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) 以上版本的裝置上使用 VectorDrawableCompat
和 AnimatedVectorDrawableCompat
。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>
- 動畫向量可繪項目的 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>