Android Studio 提供一款名為 Vector Asset Studio 的工具,可協助您新增 Material Design 圖示,並將可擴充的向量圖形 (SVG) 和 Adobe Photoshop Document (PSD) 檔案匯入專案中,作為向量可繪項目資源。以向量可繪項目取代點陣圖可縮減 APK 的大小,因為同一個檔案可以針對不同的螢幕密度調整大小,不會降低畫質。如果舊版 Android 不支援向量可繪項目,Vector Asset Studio 可在建構期間將向量可繪項目轉換為各種螢幕密度適用的點陣圖大小。
關於 Vector Asset Studio
Vector Asset Studio 會將向量圖形加入專案,做為描述圖片的 XML 檔案。比起維護解析度各異的多個光柵圖形,維護單一 XML 檔案會比較簡單。
如要搭配 Jetpack Compose 使用向量可繪項目,您必須將最低 API 級別設為 Android 5.0 (API 級別 21) 以上版本。
Android 4.4 (API 級別 20) 以下版本不支援向量可繪項目。如果最低 API 級別設定為上述其中一個 API 級別,使用 Vector Asset Studio 時可採用兩種做法:產生可攜式網路圖形 (PNG) 檔案 (預設),或使用 AndroidX 中的回溯相容性做法。
為回溯相容,Vector Asset Studio 會產生向量可繪項目的光柵圖片。向量和光柵可繪項目會一起封裝在 APK 內。在 Kotlin 程式碼中,您可以利用 Drawable 參照向量可繪項目,或在 XML 程式碼中參照 @drawable;當應用程式執行時,系統會根據 API 級別自動顯示對應的向量或光柵圖片。
如果您只想使用向量可繪項目,可以使用 AndroidX 1.0.0 以上版本。這項做法需要先變更 build.gradle 檔案,再執行 Vector Asset Studio,詳情請見「AndroidX」一節。AndroidX 中的 VectorDrawableCompat 類別可讓您在 Android 2.1 (API 級別 7) 以上版本中支援 VectorDrawable。
支援的向量圖形類型
Google Material Design 規格具備多種Material Design 圖示,供您在 Android 應用程式中運用。Vector Asset Studio 能協助您挑選及匯入質感設計圖示、設定圖示的大小,並且定義不透明度和從右到左 (RTL) 的鏡像設定。
您也可在 Vector Asset Studio 中匯入自己的 SVG 和 PSD 檔案。SVG 是全球資訊網協會 (World Wide Web Consortium,W3C) 的 XML 公開標準,PSD 檔案格式支援 Adobe Photoshop 功能。Vector Asset Studio 支援基本標準,但並非所有 SVG 和 PSD 功能均受支援。指定 SVG 或 PSD 檔案時,Vector Asset Studio 會立即告知是否支援該圖形程式碼。Vector Asset Studio 會將檔案轉換為包含 VectorDrawable 程式碼的 XML 檔案,如果發生錯誤,請確認向量可繪項目是否正常顯示。如要進一步瞭解允許的 PSD 功能,請參閱「PSD 檔案的支援和限制」。
若為 Android 5.0 (API 級別 21) 以上版本,您可以使用 AnimatedVectorDrawable 類別,為 VectorDrawable 類別的屬性建立動畫。透過 AndroidX,您可以使用 AnimatedVectorDrawableCompat 類別,為 Android 3.0 (API 級別 11) 以上版本的 VectorDrawable 類別製作動畫。詳情請參閱「Compose 中的動畫向量圖片」。
SVG 與 PSD 檔案的注意事項
向量可繪項目適合用於簡單的圖示。Material Design 圖示相關文章提供良好的範例,說明哪些圖片類型適合在應用程式中設為向量可繪項目。反之,如果應用程式啟動圖示的細節較多,則較適合設為光柵圖片。
向量可繪項目的初始載入作業,可能會比對應的光柵圖片耗用更多 CPU 週期,但之後兩者的記憶體用量和效能類似。建議您將向量圖片限制在 200 x 200 dp 以內,否則繪製時間可能過長。
雖然向量可繪項目支援一或多種顏色,但在多數情況下,最好將圖示繪製成黑色 (android:fillColor="#FF000000")。如此一來,您就能為版面配置中的向量可繪項目加上色調,使圖示顏色變成色調顏色。如果不是黑色,圖示顏色可能會和色調顏色混合。
向量可繪項目的回溯相容解決方案
下表說明兩種回溯相容做法:
| 做法 | APK 中的可繪項目 | VectorDrawable XML 元素 | 版本 | 建構旗標 | 應用程式的程式碼 |
|---|---|---|---|---|---|
| 產生 PNG | 向量與光柵 | 支援部分元素 | SVG:Gradle 適用的 Android 外掛程式 1.5.0 以上版本 PSD:Android Studio 2.2 以上版本 |
預設 | 支援多種程式設計做法 |
| AndroidX 1.0 以上版本 | 向量 | 完整支援 | Gradle 適用的 Android 外掛程式 3.2 以上版本 | 需要支援資料庫陳述式 | 支援部分程式設計做法 |
使用向量可繪項目產出的 APK 較小,但初始載入時間可能較長。
產生 PNG
Android 5.0 (API 級別 21) 以上版本支援向量可繪項目。如果應用程式的最低 API 級別較低,Vector Asset Studio 會將向量可繪項目檔案加入專案,Gradle 則會在建構期間建立不同解析度的 PNG 光柵圖片。Gradle 產生的 PNG 密度以 build.gradle 檔案的特定領域語言 (DSL) generatedDensities 屬性為準。
若為 Android 5.0 (API 級別 21) 以上版本,Vector Asset Studio 支援所有 VectorDrawable 元素。為與 Android 4.4 (API 級別 20) 以下版本回溯相容,Vector Asset Studio 支援以下 XML 元素:
<vector>
android:widthandroid:heightandroid:viewportWidthandroid:viewportHeightandroid:alpha
<group>
android:rotationandroid:pivotXandroid:pivotYandroid:scaleXandroid:scaleYandroid:translateXandroid:translateY
<path>
android:pathDataandroid:fillColorandroid:strokeColorandroid:strokeWidthandroid:strokeAlphaandroid:fillAlphaandroid:strokeLineCapandroid:strokeLineJoinandroid:strokeMiterLimit
您可以修改 Vector Asset Studio 產生的 XML 程式碼,但這不是最佳做法。變更程式碼的值應該不會造成問題,但前提是這些值是有效的靜態值。如要新增 XML 元素,請根據您的 API 最低級別,確認系統支援這些元素。
AndroidX
這項做法需要 AndroidX 1.0 以上版本,以及 Gradle 適用的 Android 外掛程式 3.2 以上版本,且只使用向量可繪項目。AndroidX 中的 VectorDrawableCompat 類別可讓您在 Android 2.1 (API 級別 7) 以上版本中支援 VectorDrawable。
使用 Vector Asset Studio 之前,您必須在 build.gradle 檔案中新增陳述式:
Kotlin
android { defaultConfig { vectorDrawables.useSupportLibrary = true } } dependencies { implementation("androidx.appcompat:appcompat:1.7.1") }
Groovy
android { defaultConfig { vectorDrawables.useSupportLibrary = true } } dependencies { implementation 'androidx.appcompat:appcompat:1.7.1' }
執行 Vector Asset Studio
如何開始使用 Vector Asset Studio:
在 Android Studio 中開啟 Android 應用程式專案。
在「res」資料夾上按一下滑鼠右鍵,然後依序選取「New」 >「Vector Asset」。
其他專案檢視畫面和資料夾也有這個選單項目。
畫面上會出現 Vector Asset Studio。
圖 1. Vector Asset Studio。
如果顯示的是「Need Newer Android Plugin for Gradle」對話方塊,請依照下列步驟改用正確的 Gradle 適用的 Android 外掛程式版本:
依序選取「File」>「Project Structure」。
在「Project Structure」對話方塊中選取「Project」。
在「Android Plugin Version」欄位中,將 Gradle 適用的 Android 外掛程式改為 1.5.0 以上版本,然後按一下「OK」。
Gradle 會同步處理專案。
開啟「Project」視窗的 Android 檢視畫面,在「res」資料夾上按一下滑鼠右鍵,然後依序選取「New」 >「Vector Asset」。
畫面上會出現 Vector Asset Studio。
請繼續匯入向量圖形。
匯入向量圖形
Vector Asset Studio 可協助您將向量圖形檔案匯入應用程式專案中。請按照下列任一程序操作:
新增 Material Design 圖示
開啟 Vector Asset Studio 後,您可以按照下列方式新增 Material Design 圖示:
在 Vector Asset Studio 中選取「Clip art」。
按一下「美工剪貼畫」欄位中的按鈕。
系統會隨即顯示「Select Icon」對話方塊。您可以從選單中選取圖示類別,或在搜尋欄位中輸入搜尋條件 (如圖 2 所示),篩選要顯示哪些圖示。
圖 2. 在 Vector Asset Studio 中篩選 Material 圖示。
選取 Material Design 圖示,然後按一下「OK」。圖示會顯示在「Vector Drawable Preview」中。
視需要變更資源名稱、大小、不透明度和從右到左 (RTL) 的鏡像設定:
「Name」:如果不想使用預設名稱,請輸入新的名稱。如果專案中已有同名資源,Vector Asset Studio 會自動在名稱結尾加上數字,以免名稱重複。這個名稱只能由小寫字元、底線和數字組成。
「Override」:如要調整圖片大小,請選取這個選項。輸入新的大小後,預覽區域會顯示變更內容。
預設值為 24 x 24 dp,詳情請參閱「質感設計」規格。如要回復預設值,請取消勾選這個核取方塊。
「Opacity」:使用滑桿調整圖片的不透明度。變更內容會顯示在預覽區域中。
「Enable auto mirroring for RTL layout」:如要在版面配置從右到左顯示 (而非從左到右) 時使用鏡像圖片,請選取這個選項。例如,某些語言是由右至左書寫,如果要用箭頭圖示,請顯示鏡像圖片。請注意,如果您使用的是較舊的專案,可能也需要將
android:supportsRtl="true"加入應用程式資訊清單。Android 5.0 (API 級別 21) 以上版本及 AndroidX 都支援自動鏡像功能。
點選 [下一步]。
視需要變更模組和資源目錄:
- 「Res Directory」:選取要新增向量可繪項目的資源來源集:
src/main/res、src/debug/res、src/release/res,或使用者定義的來源集。主要來源集會套用至所有建構變數,包括偵錯和發布版本。偵錯和發布來源集則會覆寫主要來源集,並套用至單一建構版本。偵錯來源集僅適用於偵錯。如要定義新的來源集,請依序選取「File」 >「Project Structure」 >「app」 >「Build Types」。舉例來說,您可以定義 Beta 版來源集,並建立右下角顯示「BETA」文字的圖示版本。詳情請參閱「設定建構變數」。
「Output Directories」區域會顯示向量可繪項目及其所屬目錄。
- 「Res Directory」:選取要新增向量可繪項目的資源來源集:
按一下「Finish」。
Vector Asset Studio 會新增 XML 檔案,定義
app/src/main/res/drawable/資料夾中的專案向量可繪項目。在「Project」視窗的 Android 檢視畫面中,您可以在「drawable」資料夾中查看產生的向量 XML 檔案。建構專案。
如果最低 API 級別為 Android 4.4 (API 級別 20) 以下版本,且您尚未啟用 AndroidX 方法,Vector Asset Studio 會產生 PNG 檔案。在「Project」視窗的專案檔案檢視畫面中,您可以在
app/build/generated/res/pngs/debug/資料夾中查看產生的 PNG 和 XML 檔案。請勿編輯這些產生的點陣檔案,而應使用向量 XML 檔案。建構系統會在需要時自動重新產生光柵檔案,因此無需自行維護。
匯入 SVG 或 PSD 檔案
開啟 Vector Asset Studio 後,您可以按照下列方式匯入 SVG 或 PSD 檔案:
在 Vector Asset Studio 中選取「Local file」。
檔案必須位於本機磁碟中。如果檔案位於網路中,您必須先下載到本機磁碟。
按一下「…」指定圖片檔。
圖片會顯示在「Vector Drawable Preview」中。
如果 SVG 或 PSD 檔案含有不支援的功能,Vector Asset Studio 的底部會顯示錯誤,如圖 3 所示。
圖 3. Vector Asset Studio 顯示一些錯誤。
如果看到錯誤,務必確認匯入的向量可繪項目顯示正確。請捲動清單檢視錯誤。
如需支援的元素清單,請參閱「向量可繪項目的回溯相容解決方案」一節。如要進一步瞭解允許的 PSD 檔案,請參閱「PSD 檔案的支援和限制」。
視需要變更資源名稱、大小、不透明度和從右到左 (RTL) 的鏡像設定:
「Name」:如果不想使用預設名稱,請輸入新的名稱。如果專案中已有同名資源,Vector Asset Studio 會自動在名稱結尾加上數字,以免名稱重複。這個名稱只能由小寫字元、底線和數字組成。
「Override」:如要調整圖片大小,請選取這個選項。選取之後,圖片大小就會改變。每當大小變更時,預覽區域就會顯示變更內容。預設值為 24 x 24 dp,詳情請參閱質感設計規格。
「Opacity」:使用滑桿調整圖片的不透明度。變更內容會顯示在預覽區域中。
「Enable auto mirroring for RTL layout」:如要在版面配置從右到左顯示 (而非從左到右) 時使用鏡像圖片,請選取這個選項。例如,某些語言是由右至左書寫,如果要用箭頭圖示,在這種情況下,您可能會想要顯示鏡像圖片。請注意,如果您使用的是較舊的專案,可能需要將
android:supportsRtl="true"加入應用程式資訊清單。Android 5.0 (API 級別 21) 以上版本及 AndroidX 支援自動鏡像功能。
點選 [下一步]。
視需要變更資源目錄:
- 「Res Directory」:選取要新增向量可繪項目的資源來源集:
src/main/res、src/debug/res、src/release/res,或使用者定義的來源集。主要來源集會套用至所有建構變數,包括偵錯和發布。偵錯和發布來源集會覆寫主要來源集,並套用至單一建構版本。偵錯來源集僅適用於偵錯。如要定義新的來源集,請依序選取「File」 >「Project Structure」 >「app」 >「Build Types」。舉例來說,您可以定義 Beta 版來源集,並建立右下角顯示「BETA」文字的圖示版本。詳情請參閱「設定建構變數」。
「Output Directories」區域會顯示向量可繪項目及其所屬目錄。
- 「Res Directory」:選取要新增向量可繪項目的資源來源集:
按一下「Finish」。
Vector Asset Studio 會新增 XML 檔案,定義
app/src/main/res/drawable/資料夾中的專案向量可繪項目。在「Project」視窗的 Android 檢視畫面中,您可以在「drawable」資料夾中查看產生的向量 XML 檔案。建構專案。
如果最低 API 級別為 Android 4.4 (API 級別 20) 以下版本,且您尚未啟用 AndroidX 方法,Vector Asset Studio 會產生 PNG 檔案。在「Project」視窗的專案檔案檢視畫面中,您可以在
app/build/generated/res/pngs/debug/資料夾中查看產生的 PNG 和 XML 檔案。請勿編輯這些產生的點陣檔案,而應使用向量 XML 檔案。建構系統會在需要時自動重新產生光柵檔案,因此無需自行維護。
在 Jetpack Compose 中參照向量資產
使用 Vector Asset Studio 將資產新增至 res/drawable 資料夾後,您可以在程式碼中參照該資產。
在 Jetpack Compose 中,顯示向量最常見的方式是使用 Icon 或 Image 可組合項。
Icon 可組合項是顯示小型單色素材資源的標準方式。它內建支援 Material Design 原則,例如根據 Material 3 主題套用動態色調,以及透過內容說明自動提供無障礙功能。
使用 painterResource API 將 XML 向量資產提供給可組合函式:
Icon( painter = painterResource(id = R.drawable.ic_speedometer), tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color contentDescription = "Current Speed", // Essential for accessibility )
如要處理複雜的多色向量,請使用 Image 可組合函式:
Image( painter = painterResource(id = R.drawable.ic_complex_vector), contentDescription = null // Decorative element )
如需其他複雜情境 (例如自訂映像檔或提升效能),請參閱「使用映像檔」。如要製作向量動畫,請參閱「Compose 中的動畫向量圖片」。
修改 Vector Asset Studio 產生的 XML 程式碼
您可以修改向量可繪項目 XML 程式碼,但無法修改建構時間產生的 PNG 和對應的 XML 程式碼。不過,我們不建議這麼做。
如果採用產生 PNG 的做法,Vector Asset Studio 會確保向量可繪項目與 PNG 相符,且資訊清單包含正確的程式碼。如果您新增的程式碼不支援 Android 4.4 (API 級別 20) 以下版本,向量和 PNG 圖片可能會不同。您也需要檢查資訊清單的程式碼是否支援您的變更。
如要在不使用 AndroidX 技術的情況下修改向量 XML 檔案,請按照下列步驟操作:
在「Project」視窗中,按兩下「drawable」資料夾中產生的向量 XML 檔案。
XML 檔案會顯示在編輯器和「Preview」(預覽) 視窗中。
圖 4. 程式碼編輯器和預覽視窗中顯示的向量 XML 檔案。
根據 API 最低級別支援的功能編輯 XML 程式碼:
Android 5.0 (API 級別 21) 以上版本 - Vector Asset Studio 支援所有
Drawable和VectorDrawable元素。您可以新增 XML 元素並變更值。如果是 Jetpack Compose,您可以將向量可繪項目載入ImageVector,進一步自訂。Android 4.4 (API 級別 20) 以下版本 - Vector Asset Studio 支援所有
Drawable元素和部分VectorDrawable元素。請參閱「向量可繪項目的回溯相容解決方案」一節,查看支援元素清單。您可以在產生的程式碼中變更值,並新增支援的 XML 元素。
建立專案,檢查向量可繪項目和對應的光柵圖片外觀相同。
提醒您,由於算繪引擎不同,加上向量可繪項目在建構前若有變更,產生的 PNG 檔案在「Preview」視窗中顯示的外觀就會與應用程式中不同。如果您在 Vector Asset Studio 建立的向量 XML 檔案中新增程式碼,Android 4.4 (API 級別 20) 以下版本不支援的功能不會顯示在產生的 PNG 檔案中。因此,當您新增程式碼時,務必檢查產生的 PNG 是否與向量可繪項目相符。檢查方法為開啟「Project」視窗,按兩下專案檔案檢視畫面中的 PNG;如果程式碼參照該可繪項目,程式碼編輯器的左側邊界也會顯示 PNG 圖片,如圖 5 所示。
圖 5:顯示在程式碼編輯器左側邊界的 PNG 圖片。
從專案中刪除向量可繪項目
如何從專案中移除向量可繪項目:
如要刪除產生的向量 XML 檔案,請在「Project」視窗中選取要刪除的檔案,然後按下 Delete 鍵,或依序選取「Edit」 >「Delete」。
系統隨即會顯示「Safe Delete」對話方塊。
選取適用選項,找出專案中的哪些部分會使用該檔案,然後按一下「OK」。
Android Studio 會從專案和磁碟中刪除檔案。不過,如果您剛才選擇在專案中搜尋該檔案,並發現多個使用位置,則可先查看這些位置,再決定是否刪除。
依序選取「Build」>「Clean Project」。
刪除向量可繪項目後,系統會一併從專案和磁碟中移除自動產生的相對應 PNG 和 XML 檔案。
提供包含向量可繪項目的應用程式
如果您使用 AndroidX 方法,或最低 API 級別為 Android 5.0 (API 級別 21) 以上版本,APK 就會含有您使用 Vector Asset Studio 新增的向量可繪項目。比起將向量圖片轉換為 PNG,這些 APK 會較小。
如果最低 API 級別包含 Android 4.4 (API 級別 20) 以下版本,且專案中有對應的向量可繪項目和光柵圖片,您可以使用兩種方法提供 APK 檔案:
- 建立一個包含向量可繪項目和相對應光柵圖片的 APK。這是最容易實行的解決方案。
- 針對不同 API 級別建立多個 APK。如果不在 Android 5.0 (API 級別 21) 以上版本的 APK 中加入對應的光柵圖片,APK 會小上許多。詳情請參閱「支援多個 APK」。
PSD 檔案的支援和限制
Vector Asset Studio 不支援部分 PSD 檔案功能。下方列出了支援與不支援的 PSD 特性,以及部分轉換細節。
文件
支援:
- 點陣圖、灰階、索引、RGB、Lab 或 CMYK 等 PSD 色彩模式。
- 8、16 或 32 位元等色彩深度。
轉換詳細資料:
- PSD 文件尺寸就是向量可繪項目和可視區域的尺寸。
不支援:
- 雙色調或多重色版等 PSD 色彩模式。
形狀
支援:
- 剪裁遮色片 (如果剪裁基本圖層是其他形狀)。
- 形狀操作,包括合併/新增、相交、減去和排除。
不支援:
Photoshop 形狀使用的奇偶填色規則。在 Android 6.0 (API 級別 23) 以下版本中,向量可繪項目僅支援非零填色規則。在自相交的形狀中,這項限制可能導致 PSD 和產生的向量可繪項目出現不同的算繪結果。如要修正這個問題,請將
android:fillType="evenOdd"加入向量可繪項目的形狀。例如:<vector xmlns:android="https://schemas.android.com/apk/res/android" android:viewportHeight="168" android:height="24dp" android:viewportWidth="209" android:width="24dp"> <path android:fillAlpha="1.0" android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/> </vector>
筆劃和填色
支援:
- 筆劃,包括顏色、不透明度、寬度、合併、端點、虛線和對齊方式。
- 純色填滿和筆劃。
- 指定 RGB、Lab 或 CMYK 的筆劃和填滿色彩。
轉換詳細資料:
- 如果某個筆劃是虛線、經過剪裁基本圖層裁切,或使用置中以外的對齊方式,Vector Asset Studio 會將筆劃轉換為向量可繪項目中的填滿形狀。
不支援:
- 純色以外的填色和筆劃,例如漸層。
不透明度
支援:
- 不透明度為 0 的形狀圖層。
轉換詳細資料:
- Vector Asset Studio 會將填色不透明度乘以圖層不透明度,計算填色 Alpha 值。
- 工具會將剪裁基本圖層的不透明度 (如果有) 乘以填色 Alpha 值,計算最終的填色 Alpha 值。
- 工具會將筆劃不透明度乘以圖層不透明度,計算筆劃 Alpha 值。
- 工具會將剪裁基本圖層的不透明度 (如果有) 乘以筆劃 Alpha 值,計算最終筆劃 Alpha 值。
圖層
支援:
- 任何「可見」的形狀圖層。
轉換詳細資料:
- Vector Asset Studio 會保留向量可繪項目檔案中的圖層名稱。
不支援:
- 圖層效果。
- 調整項目和文字圖層。
- 混合模式 (忽略)。
SVG 檔案的支援和限制
Vector Asset Studio 不支援部分 SVG 檔案功能。本節概述工具將 SVG 檔案轉換為 VectorDrawable 時支援和不支援的功能,以及其他轉換細節。
支援的功能
VectorDrawable 支援 Tiny SVG 1.2 的所有功能,但文字除外。
形狀
VectorDrawable 支援 SVG 路徑。
這項工具會將原始形狀 (例如圓形、正方形和多邊形) 轉換為路徑。
轉換
這項工具支援變形矩陣,且會直接套用至子項路徑。
群組
這項工具支援平移、縮放及旋轉的群組元素。群組不支援不透明度屬性。
這項工具也會將群組樣式或不透明度套用至子項路徑。
填色和筆劃
路徑可以使用純色或漸層(線性、放射或角度)的填色和筆劃。僅支援置中的筆劃,不支援混合模式。 不支援虛線路徑。
面具
這項工具支援每個群組一個剪裁遮色片。
SVG 匯入工具不支援的功能
先前「支援的功能」一節未列出的功能皆不受支援。不支援的常見功能包括:
- 濾鏡效果:不支援投射陰影、模糊效果和色彩矩陣等效果。
- 文字:建議使用其他工具將文字轉換成形狀。
- 圖樣填滿。
其他資源
如要進一步瞭解向量繪圖,請參閱下列其他資源: