新增多種密度的向量圖形 (檢視區塊)

概念和 Jetpack Compose 實作

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 檔案會比較簡單。

Android 4.4 (API 級別 20) 以下版本不支援向量可繪項目。如果最低 API 級別設定為上述其中一個 API 級別，使用 Vector Asset Studio 時可採用兩種做法：產生可攜式網路圖形 (PNG) 檔案 (預設)，或使用 AndroidX 中的回溯相容性做法。

為回溯相容，Vector Asset Studio 會產生向量可繪項目的光柵圖片。向量和光柵可繪項目會一起封裝在 APK 內。在 Java 和 XML 程式碼中，您可以分別利用 Drawable 和 @drawable 參照向量可繪項目；當應用程式執行時，系統會根據 API 級別自動顯示對應的向量或光柵圖片。

AndroidX 中的回溯相容性

這項做法需要 AndroidX 1.0 以上版本，以及 Gradle 適用的 Android 外掛程式 3.2 以上版本，且只使用向量可繪項目。AndroidX 中的 VectorDrawableCompat 類別可讓您在 Android 2.1 (API 級別 7) 以上版本中支援 VectorDrawable。

使用 Vector Asset Studio 之前，您必須在 build.gradle 檔案中新增陳述式：

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

此外，您還必須使用 AndroidX 程式設計做法，確保回溯相容性，例如：向量可繪項目使用 app:srcCompat 屬性，而非 android:src 屬性。詳情請參閱「AndroidX」一文。

在版面配置中加入向量可繪項目

在版面配置檔案中，您可以將 ImageButton、ImageView 等圖示相關小工具設為指向向量可繪項目。舉例來說，下列版面配置會在按鈕中顯示向量可繪項目：

圖 1. 版面配置的按鈕中顯示向量可繪項目。

如何如上圖所示，在小工具中顯示向量可繪項目：

  1. 開啟專案並匯入向量可繪項目。

    這個範例使用的是新專案精靈產生的手機/平板電腦專案。

  2. 在「Project」視窗的「Android view」中，按兩下版面配置 XML 檔案，例如 content_main.xml。

  3. 按一下「Design」分頁標籤，顯示版面配置編輯器。

  4. 將 ImageButton 小工具從「Palette」視窗拖曳至版面配置編輯器。

  5. 在「Resources」對話方塊中，選取左側窗格中的「Drawable」，然後選取您匯入的向量可繪項目。然後點選「OK」。

    向量可繪項目會隨即顯示在版面配置的 ImageButton 中。

  6. 如要將圖片的顏色變更為主題定義的強調色，請在「Properties」視窗中找出「tint」屬性，然後按一下「…」。

  7. 在「Resources」對話方塊中，選取左側窗格中的「Color」，然後選取「colorAccent」。然後點選「確定」。

    在版面配置中，圖片的顏色會變更為強調色。

如果專案使用 AndroidX，ImageButton 程式碼應該會與下列類似：

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

如果專案未使用 AndroidX，向量可繪項目程式碼則會是 android:src="@drawable/ic_build_black_24dp"。

參照程式碼中的向量可繪項目

一般來說，您可以在程式碼中以一般方式參照向量可繪製資源，當應用程式執行時，系統會根據 API 級別自動顯示對應的向量或光柵圖片：

  • 在多數情況下，您可以在 XML 程式碼中將向量可繪項目稱為 @drawable，或在 Java 程式碼中參照 Drawable。

    舉例來說，下列版面配置 XML 程式碼會將圖片套用至檢視畫面：

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:src="@drawable/myimage" />

    以下程式碼會將圖片擷取為 Drawable：

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    getResources() 方法位於 Context 類別，適用於 UI 物件，例如活動、片段、版面配置、檢視畫面等。

  • 如果您的應用程式完全使用 AndroidX (即使 build.gradle 檔案中沒有 vectorDrawables.useSupportLibrary = true 陳述式)，您也可以透過 app:srcCompat 陳述式參照向量可繪項目。例如：

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

  • 您有時可能需要將可繪製資源分到確切的類別，例如需要使用 VectorDrawable 類別的特定功能時。如要進行這項作業，您可以使用下列程式碼：

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

您只能從主執行緒存取向量可繪項目資源。

若為 Android 5.0 (API 級別 21) 以上版本，您可以使用 AnimatedVectorDrawable 類別，為 VectorDrawable 類別的屬性建立動畫。透過 AndroidX，您可以使用 AnimatedVectorDrawableCompat 類別，為 Android 3.0 (API 級別 11) 以上版本的 VectorDrawable 類別製作動畫。詳情請參閱「以動畫方式呈現可繪項目圖形」。