添加多密度矢量图形

Android Studio 包含一个名为 Vector Asset Studio 的工具，可帮助您添加 Material 图标以及将可缩放矢量图形 (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 级别在此范围内，Vector Asset Studio 会提供两个选项：

  • 生成 PNG 文件（默认）：Vector Asset Studio 会生成矢量可绘制对象的光栅图片，并将矢量和光栅可绘制对象都打包到 APK 中。您可以在 Kotlin 代码中以 Drawable 的形式引用矢量可绘制对象，或在 XML 代码中以 @drawable 的形式引用矢量可绘制对象；当您的应用运行时，系统会根据 API 级别自动显示对应的矢量或光栅图片。
  • 使用 AndroidX 1.0.0 或更高版本：如需仅使用矢量可绘制对象，请在运行 Vector Asset Studio 之前更改 build.gradle 文件，如 AndroidX 中所述。利用 AndroidX 中的 VectorDrawableCompat 类，您可以在 Android 2.1（API 级别 7）及更高版本中支持 VectorDrawable。

支持的矢量图形类型

Google Material Design 规范提供了可在 Android 应用中使用的 Material 图标。Vector Asset Studio 可帮助您选择、导入 Material 图标并调整其大小，以及定义不透明度和从右到左 (RTL) 镜像设置。

Vector Asset Studio 还支持您导入自己的 SVG 和 PSD 文件。SVG 是万维网联盟 (W3C) 基于 XML 的开放标准。PSD 文件格式支持 Adobe Photoshop 功能。Vector Asset Studio 支持基本标准，但不支持所有 SVG 和 PSD 功能。当您指定 SVG 或 PSD 文件时，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 图标。应用启动图标通常包含许多细节，因此它们作为光栅图片显示时效果更好。

与对应的光栅图片相比，初次加载矢量可绘制对象时会耗费更多 CPU 周期。之后，两者的内存用量和性能相当。我们建议您将矢量图像限制为不超过 200 x 200 dp；否则，绘制时间可能会过长。

尽管矢量可绘制对象确实支持一种或多种颜色，但在很多情况下，最好将图标颜色设置为黑色 (android:fillColor="#FF000000")。使用此方法，您可以向放置在布局中的矢量可绘制对象添加色调，然后图标颜色就会变为色调颜色。如果图标颜色不是黑色，图标颜色就可能与色调颜色混合。

矢量可绘制对象向后兼容性解决方案

下表总结了可用于向后兼容的两种技术：

技术 APK 中的可绘制对象 VectorDrawable XML 元素 版本 编译标记 应用代码
PNG 生成 矢量和光栅 支持一部分

SVG：Android Plugin for Gradle 1.5.0 或更高版本

PSD：Android Studio 2.2 或更高版本

 默认 支持各种编码方法
AndroidX 1.0 或更高版本 向量 完全支持 Android Plugin for Gradle 3.2 或更高版本 需要支持库声明 支持一部分编码方法

使用矢量可绘制对象可以生成较小的 APK，但矢量可绘制对象的初始加载可能需要更长时间。

PNG 生成

Android 5.0（API 级别 21）及更高版本支持矢量可绘制对象。如果应用的最低 API 级别较低，Vector Asset Studio 会将矢量可绘制对象文件添加到您的项目中；此外，在构建时，Gradle 会创建各种分辨率的 PNG 光栅图片。Gradle 会以 build.gradle 文件中的领域特定语言 (DSL) generatedDensities 属性所指定的密度生成 PNG。

对于 Android 5.0（API 级别 21）及更高版本，Vector Asset Studio 支持所有 VectorDrawable 元素。为了向后兼容 Android 4.4（API 级别 20）及更低版本，Vector Asset Studio 支持以下 XML 元素：

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

您可以更改 Vector Asset Studio 生成的 XML 代码，不过这不是最佳实践。更改代码中的值应该不会导致任何问题，但前提是这些值是有效的静态值。如果您想添加 XML 元素，则需要确保这些元素受支持（基于您的最低 API 级别）。

AndroidX

此方法需要 AndroidX 1.0 或更高版本以及 Android Plugin for Gradle 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，请执行以下操作：

  1. 在 Android Studio 中，打开一个 Android 应用项目。

  2. 在 Project 窗口中，选择 Android 视图。

  3. 右键点击 res 文件夹，然后依次选择 New > 矢量资源。

    一些其他项目视图和文件夹也具有此菜单项。

    此时将显示 Vector Asset Studio。

    Vector Asset Studio 显示 Material 图标选择。
    图 1. Vector Asset Studio。

  4. 如果显示的是“Need Newer Android Plugin for Gradle”对话框，请更正您的 Gradle 版本，具体操作步骤如下：

    1. 依次选择 File > Project Structure。

    2. 在“Project Structure”对话框中，选择 Project。

    3. 在 Android Plugin Version 字段中，将 Android Plugin for Gradle 版本更改为 1.5.0 或更高版本，然后点击 OK。

      Gradle 将同步项目。

    4. 在 Project 窗口的 Android 视图中，右键点击 res 文件夹，然后依次选择 New > 矢量资源。

      此时将显示 Vector Asset Studio。

  5. 继续导入矢量图形。

导入矢量图形

Vector Asset Studio 可帮助您将矢量图形文件导入到应用项目中。请执行以下任一操作：

添加 Material 图标

打开 Vector Asset Studio 后，您可以按照以下步骤添加 Material 图标：

  1. 在 Vector Asset Studio 中，选择剪贴画。

  2. 在“剪贴画”字段中，点击相应按钮。

  3. 此时将显示 Select Icon 对话框。您可以过滤哪些图标可见，方法是从菜单中选择一个图标类别，或在搜索字段中输入图标类别，如图 2 所示。

    在 Vector Asset Studio 中过滤 Material 图标。
    图 2. 在 Vector Asset Studio 中过滤 Material 图标。

    选择一个 Material 图标，然后点击 OK。该图标将显示在矢量可绘制对象预览中。

  4. 您可以视需要更改资源名称、大小、不透明度和从右到左 (RTL) 镜像设置：

    • Name - 如果您不想使用默认名称，请输入新名称。 如果项目中已存在该资源名称，Vector Asset Studio 会自动创建一个唯一名称（在名称末尾添加一个数字）。名称只能包含小写字符、下划线和数字。

    • 替换 - 如果您想调整图片大小，请选择此选项。当您输入新尺寸时，系统会在预览区域中显示相应的变化。

      默认值为 24 x 24 dp，此值是在 Material Design 规范中定义的。取消选中该复选框即可恢复为默认设置。

    • Opacity - 使用滑块调整图片的不透明度。系统会在预览区域中显示相应的变化。

    • 为 RTL 布局启用自动镜像 - 如果您希望在布局为从右到左（而非从左到右）时显示镜像，请选择此选项。例如，某些语言是从右到左阅读的；如果您有一个箭头图标，则可能需要在此情况下显示其镜像。请注意，如果您使用的是之前的项目，则还可能需要向应用清单中添加 android:supportsRtl="true"。Android 5.0（API 级别 21）及更高版本以及 AndroidX 均支持自动镜像。

  5. 点击下一步。

  6. （可选）更改模块和资源目录：

    • Res Directory - 选择要在其中添加矢量可绘制对象的资源源代码集：src/main/res、src/debug/res、src/release/res 或用户定义的源代码集。主源代码集适用于所有 build 变体，包括调试和发布 build。调试和发布源代码集将替换主源代码集，并应用于 build 的一个版本。调试源代码集仅用于调试。如需定义新的源代码集，请依次选择 File > Project Structure > app > Build Types。例如，您可以定义一个 Beta 版源代码集，并创建一个在右下角包含“BETA”文本的图标版本。如需了解详情，请参阅配置 build 变体。

    Output Directories 区域会显示矢量可绘制对象以及它将出现在的目录中。

  7. 点击 Finish。

    Vector Asset Studio 会向项目中的 app/src/main/res/drawable/ 文件夹添加一个定义矢量可绘制对象的 XML 文件。在“Project”窗口的 Android 视图中，您可以在 drawable 文件夹中查看生成的矢量 XML 文件。

  8. 构建项目。

    如果最低 API 级别为 Android 4.4（API 级别 20）及更低版本，并且您尚未启用 AndroidX 方法，Vector Asset Studio 会生成 PNG 文件。在“Project”窗口的“Project Files”视图中，您可以在 app/build/generated/res/pngs/debug/ 文件夹中查看生成的 PNG 和 XML 文件。

    您不应修改这些生成的光栅文件，而应使用矢量 XML 文件。构建系统会在需要时自动重新生成光栅文件，因此您无需维护这些文件。

导入 SVG 或 PSD 文件

打开 Vector Asset Studio 后，您可以导入 SVG 或 PSD 文件，具体操作步骤如下：

  1. 在 Vector Asset Studio 中，选择 Local file。

    该文件必须位于本地驱动器上。例如，如果文件位于网络上，您需要先将其下载到本地驱动器。

  2. 点击 … 以指定一个图片文件。

    该图片将显示在 Vector Drawable Preview 中。

    如果 SVG 或 PSD 文件包含不受支持的功能，Vector Asset Studio 底部会显示错误，如图 3 所示。

    Vector Asset Studio 显示 SVG 导入错误。
    图 3. Vector Asset Studio 显示一些错误。

    如果您看到错误，则需要确保导入的矢量可绘制对象正确渲染。滚动列表以查看错误。

    如需查看支持的元素列表，请参阅矢量可绘制对象向后兼容性解决方案。如需详细了解允许的 PSD 文件，请参阅对 PSD 文件的支持和限制。

  3. 您可以视需要更改资源名称、大小、不透明度和从右到左 (RTL) 镜像设置：

    • Name - 如果您不想使用默认名称，请输入新名称。 如果项目中已存在该资源名称，Vector Asset Studio 会自动创建一个唯一名称（在名称末尾添加一个数字）。名称只能包含小写字符、下划线和数字。

    • 替换 - 如果您想调整图片大小，请选择此选项。选择后，尺寸会更改为图片本身的尺寸。每当您更改尺寸时，系统都会在预览区域中显示相应的变化。默认值为 24 x 24 dp，此值是在 Material Design 规范中定义的。

    • Opacity - 使用滑块调整图片的不透明度。系统会在预览区域中显示相应的变化。

    • 为 RTL 布局启用自动镜像 - 如果您希望在布局为从右到左（而非从左到右）时显示镜像，请选择此选项。例如，某些语言是从右向左阅读的；如果您有一个箭头图标，则可能需要在此情况下显示其镜像。请注意，如果您使用的是之前的项目，则可能需要向应用清单中添加 android:supportsRtl="true"。Android 5.0（API 级别 21）及更高版本以及 AndroidX 均支持自动镜像。

  4. 点击下一步。

  5. （可选）更改资源目录：

    • Res Directory - 选择要在其中添加矢量可绘制对象的资源源代码集：src/main/res、src/debug/res、src/release/res 或用户定义的源代码集。主源代码集适用于所有 build 变体，包括调试和发布 build。调试和发布源代码集将替换主源代码集，并应用于 build 的一个版本。调试源代码集仅用于调试。如需定义新的源代码集，请依次选择 File > Project Structure > app > Build Types。例如，您可以定义一个 Beta 版源代码集，并创建一个在右下角包含“BETA”文本的图标版本。如需了解详情，请参阅配置 build 变体。

    Output Directories 区域会显示矢量可绘制对象以及它将出现在的目录中。

  6. 点击 Finish。

    Vector Asset Studio 会向项目中的 app/src/main/res/drawable/ 文件夹添加一个定义矢量可绘制对象的 XML 文件。在“Project”窗口的 Android 视图中，您可以在 drawable 文件夹中查看生成的矢量 XML 文件。

  7. 构建项目。

    如果最低 API 级别为 Android 4.4（API 级别 20）及更低版本，并且您尚未启用 AndroidX 方法，Vector Asset Studio 会生成 PNG 文件。在“Project”窗口的“Project Files”视图中，您可以在 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 文件，请执行以下操作：

  1. 在“Project”窗口中，在 drawable 文件夹中双击生成的矢量 XML 文件。

    该 XML 文件将显示在编辑器和“Preview”窗口中。

    代码编辑器和预览窗口中显示的矢量 XML 文件。
    图 4. 代码编辑器和“Preview”窗口中显示的矢量 XML 文件。

  2. 根据最低 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 元素。

  3. 构建项目，并检查矢量可绘制对象和相应的光栅图片是否看起来相同。

    请注意，由于采用不同的渲染引擎并且可能在构建前对矢量可绘制对象进行了任何更改，因此生成的 PNG 在“Preview”窗口中的显示方式可能与在应用中不同。如果您向 Vector Asset Studio 创建的矢量 XML 文件添加代码，则 Android 4.4（API 级别 20）及更低版本不支持的任何功能都不会出现在生成的 PNG 文件中。因此，在添加代码时，您应始终检查生成的 PNG 是否与矢量可绘制对象匹配。为此，您可以在“Project”窗口的“Project Files”视图中双击相应的 PNG。当您的代码引用相应的可绘制对象时，代码编辑器的左侧空白处也会显示 PNG 图片，如图 5 所示。

    代码编辑器的左侧空白处显示的一张 PNG 图片。
    图 5.代码编辑器的左侧空白处显示的一张 PNG 图片。

从项目中删除矢量可绘制对象

要从项目中移除矢量可绘制对象，请执行以下操作：

  1. 在 Project 窗口中，选择生成的矢量 XML 文件，然后按 Delete 键（或依次选择 Edit > Delete），将其删除。

    此时将显示 Safe Delete 对话框。

  2. （可选）选择适当的选项以在项目中查找使用该文件的位置，然后点击 OK。

    Android Studio 会从项目和驱动器中删除该文件。不过，如果您选择在项目中搜索使用该文件的位置，在找到部分位置后，您可以查看这些位置，再决定是否删除该文件。

  3. 依次选择 Build > Clean Project。

    与已删除的矢量可绘制对象对应的所有自动生成的 PNG 和 XML 文件都会从项目和驱动器中移除。

交付包含矢量可绘制对象的应用

如果您使用了 AndroidX 方法或您的最低 API 级别为 Android 5.0（API 级别 21）或更高版本，则 APK 将包含您使用 Vector Asset Studio 添加的矢量可绘制对象。这些 APK 的大小将小于将矢量图像转换为 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 特征，以及一些转换细节。

文档

支持的转换类型：

  • PSD 颜色模式：位图、灰度模式、索引、RGB、Lab 或 CMYK。
  • 色深：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 导入程序不支持的功能

前面的支持的功能部分中未列出的功能都不受支持。值得注意的不支持的功能包括：

  • 滤镜效果：不支持阴影、模糊和颜色矩阵等效果。
  • 文本：建议使用其他工具将文本转换为形状。
  • 图案填充

其他资源

如需详细了解矢量图形，请参阅下面列出的其他资源：

文档

查看内容