添加多密度矢量图形（视图）

概念和 Jetpack Compose 实现

Android Studio 包含一个名为 Vector Asset Studio 的工具，可帮助您添加 Material 图标以及将可缩放矢量图形 (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 代码中以 Drawable 的形式引用矢量可绘制对象，或在 XML 代码中以 @drawable 的形式引用矢量可绘制对象；当您的应用运行时，系统会根据 API 级别自动显示对应的矢量 或光栅图片。

AndroidX 中的向后兼容性

此方法需要 AndroidX 1.0 或更高版本以及 Android Plugin for Gradle 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. 布局中的按钮上显示的矢量可绘制对象。

如需在 widget 上显示矢量可绘制对象（如图所示），请执行以下操作：

  1. 打开一个项目并导入一个矢量可绘制对象。

    本示例使用通过“New Project”向导生成的“Phone/Tablet”项目。

  2. 在“Project”窗口的 Android 视图中，双击某个布局 XML 文件，例如 content_main.xml。

  3. 点击 Design 标签页以显示 布局编辑器。

  4. 将 ImageButton 微件从“Palette”窗口拖动到布局编辑器中。

  5. 在“Resources”对话框中，选择左侧窗格中的 Drawable ，然后选择您导入的矢量可绘制对象。 点击确定 。

    该矢量可绘制对象将显示在布局中的 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 类中，它 适用于界面对象，如 Activity、Fragment、布局和视图 等。

  • 如果您的应用在任何情况下都使用 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 类添加动画效果。如需了解详情，请参阅 为可绘制图形添加动画。