Android Studio 包含一个名为 Vector Asset Studio 的工具,可帮助您添加 Material 图标并将可缩放矢量图形 (SVG) 和 Adobe Photoshop 文档 (PSD) 文件导入到您的项目中,作为矢量可绘制资源。使用矢量可绘制对象而不是位图可以减小 APK 的大小,因为同一个文件可以调整为不同的屏幕密度而不会损失图像质量。对于不支持矢量可绘制对象的旧版 Android,Vector Asset Studio 可以在构建时将您的矢量可绘制对象转换为每个屏幕密度的不同位图大小。
关于 Vector Asset Studio
Vector Asset Studio 将矢量图形作为描述图像的 XML 文件添加到项目中。维护一个 XML 文件可能比更新各种分辨率下的多个光栅图形更容易。
Android 4.4(API 级别 20)及以下版本不支持矢量图形。如果您的最低 API 级别设置为这些 API 级别之一,则在使用矢量资源工作室时有两个选项:生成便携式网络图形 (PNG) 文件(默认设置)或使用支持库。
为了向后兼容,矢量资源工作室会生成矢量图形的栅格图像。矢量和栅格图形一起打包在 APK 中。您可以在 Java 代码中将矢量图形引用为Drawable
,或在 XML 代码中引用为@drawable
;当您的应用运行时,相应的矢量或栅格图像会根据 API 级别自动显示。
如果您只想使用矢量图形,可以使用 Android 支持库 23.2 或更高版本。此方法需要在运行矢量资源工作室之前更改您的build.gradle
文件,如支持库向后兼容性中所述。支持库中的VectorDrawableCompat
类允许您在 Android 2.1(API 级别 7)及更高版本中支持VectorDrawable
。
支持的矢量图形类型
Google Material Design 规范提供了Material 图标,您可以在 Android 应用中使用这些图标。矢量资源工作室可帮助您选择、导入和调整 Material 图标的大小,以及定义不透明度和从右到左 (RTL) 镜像设置。
矢量资源工作室还允许您导入自己的 SVG 和 PSD 文件。SVG 是万维网联盟 (W3C) 的基于 XML 的开放标准。PSD 文件格式支持 Adobe Photoshop 功能。矢量资源工作室支持基本标准,但不支持所有 SVG 和 PSD 功能。指定 SVG 或 PSD 文件时,矢量资源工作室会立即反馈图形代码是否受支持。它会将文件转换为包含VectorDrawable
代码的 XML 文件。如果收到错误,您应该验证矢量图形是否按预期显示。有关允许的 PSD 功能的更多信息,请参阅PSD 文件的支持和限制。
对于 Android 5.0(API 级别 21)及更高版本,您可以使用AnimatedVectorDrawable
类来动画化VectorDrawable
类的属性。使用支持库,您可以使用AnimatedVectorDrawableCompat
类来动画化 Android 3.0(API 级别 11)及更高版本中的VectorDrawable
类。有关更多信息,请参阅矢量图形动画。
SVG 和 PSD 文件的注意事项
矢量图形适用于简单的图标。Material 图标提供了应用中作为矢量图形效果良好的图像类型的良好示例。相反,许多应用启动图标确实有很多细节,因此作为栅格图像效果更好。
矢量图形的初始加载可能会消耗比相应栅格图像更多的 CPU 周期。之后,两个图像之间的内存使用和性能相似。我们建议您将矢量图像限制在最大 200 x 200 dp;否则,绘制时间可能过长。
尽管矢量图形确实支持一种或多种颜色,但在许多情况下,将图标颜色设置为黑色(android:fillColor="#FF000000"
)是有意义的。使用此方法,您可以向放置在布局中的矢量图形添加着色,图标颜色会更改为着色颜色。如果图标颜色不是黑色,则图标颜色可能会与着色颜色混合。
矢量图形向后兼容性解决方案
下表总结了您可以用于向后兼容性的两种方法
方法 | APK 中的图形 | VectorDrawable XML 元素 | 版本 | 构建标志 | 应用代码 |
---|---|---|---|---|---|
PNG 生成 | 矢量和栅格 | 支持的子集 | SVG:Gradle 的 Android 插件 1.5.0 或更高版本 PSD:Android Studio 2.2 或更高版本 |
默认 | 支持各种编码方法 |
支持库 23.2 或更高版本 | 矢量 | 完全支持 | Gradle 的 Android 插件 2.0 或更高版本 | 需要支持库语句 | 支持的编码方法子集 |
使用矢量图形可以生成更小的 APK,但矢量图形的初始加载可能需要更长时间。
PNG 生成
Android 5.0(API 级别 21)及更高版本提供了矢量图形支持。如果您的应用具有较低的最低 API 级别,则矢量资源工作室会将矢量图形文件添加到您的项目中;此外,在构建时,Gradle 会在各种分辨率下创建 PNG 栅格图像。Gradle 会生成build.gradle
文件中域特定语言 (DSL)generatedDensities 属性指定的 PNG 密度。
对于 Android 5.0(API 级别 21)及更高版本,矢量资源工作室支持所有VectorDrawable
元素。为了与 Android 4.4(API 级别 20)及以下版本向后兼容,矢量资源工作室支持以下 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
您可以更改矢量资源工作室生成的 XML 代码,尽管这不是最佳做法。更改代码中的值不应导致任何问题,只要它们有效且是静态的。如果要添加 XML 元素,则需要确保它们根据最低 API 级别得到支持。
支持库
此方法需要 Android 支持库 23.2 或更高版本以及 Gradle 的 Android 插件 2.0 或更高版本,并且仅使用矢量图形。VectorDrawableCompat
支持库中的类允许您在 Android 2.1(API 级别 7)及更高版本中支持VectorDrawable
。
在使用矢量资源工作室之前,您必须向build.gradle
文件中添加一个语句
Groovy
android { defaultConfig { vectorDrawables.useSupportLibrary = true } } dependencies { implementation 'com.android.support:appcompat-v7:23.2.0' }
Kotlin
android { defaultConfig { vectorDrawables.useSupportLibrary = true } } dependencies { implementation("com.android.support:appcompat-v7:23.2.0") }
您还必须使用与支持库兼容的编码方法,例如,对于矢量图形,使用app:srcCompat
属性而不是android:src
属性。有关更多信息,请参阅Android 支持库 23.2。
运行矢量资源工作室
要启动矢量资源工作室
- 在 Android Studio 中,打开一个 Android 应用项目。
- 在“项目”窗口中,选择Android 视图。
- 右键单击 **res** 文件夹,然后选择 **新建** > **矢量资源**。
- 如果改为出现“需要更新的 Gradle 的 Android 插件”对话框,请按如下方式更正 Gradle 版本
- 选择 **文件** > **项目结构**。
- 在“项目结构”对话框中,选择 **项目**。
- 在 **Android 插件版本** 字段中,将 Gradle 的 Android 插件版本更改为 **1.5.0** 或更高版本,然后单击 **确定**。
- 在“项目”窗口的Android 视图中,右键单击 **res** 文件夹,然后选择 **新建** > **矢量资源**。
- 继续执行导入矢量图形。
其他一些项目视图和文件夹也具有此菜单项。
矢量资源工作室将出现。
Gradle 会同步项目。
矢量资源工作室将出现。
导入矢量图形
矢量资源工作室可帮助您将矢量图形文件导入到应用项目中。请按照以下步骤操作之一
添加 Material 图标
在您打开矢量资源工作室后,您可以按如下方式添加 Material 图标
- 在矢量资源工作室中,选择 **Material 图标**。
- 在“图标”字段中,单击按钮。
将出现“选择图标”对话框。您可以通过从左侧列表中选择图标类别或在搜索字段中键入内容来筛选可见的图标,如图 2 所示。
- 可以选择更改资源名称、大小、不透明度和从右到左 (RTL) 镜像设置
- **名称** - 如果不想使用默认名称,请键入新名称。如果项目中已存在该资源名称,则矢量资源工作室会自动创建唯一名称(在名称末尾添加数字)。名称只能包含小写字符、下划线和数字。
- **覆盖** - 如果要调整图像的大小,请选择此选项。键入新大小时,更改会显示在预览区域中。
- **不透明度** - 使用滑块调整图像的不透明度。更改会显示在预览区域中。
- **为 RTL 布局启用自动镜像** - 如果希望在布局从右到左而不是从左到右时显示镜像图像,请选择此选项。例如,某些语言是从右到左阅读的;在这种情况下,如果有一个箭头图标,您可能希望显示其镜像图像。请注意,如果您使用的是较旧的项目,您可能还需要向应用清单中添加
android:supportsRtl="true"
。自动镜像在 Android 5.0(API 级别 21)及更高版本以及使用支持库时受支持。
默认值为 24 x 24 dp,这在Material Design规范中定义。取消选中复选框以恢复为默认值。
- 单击 **下一步**。
- 可以选择更改模块和资源目录
- 资源目录 - 选择要添加矢量可绘制对象的资源源集:
src/main/res
、src/debug/res
、src/release/res
或用户定义的源集。主源集适用于所有构建变体,包括调试和发布。调试和发布源集会覆盖主源集,并应用于构建的一个版本。调试源集仅用于调试。要定义新的源集,请选择文件 > 项目结构 > app > 构建类型。例如,您可以定义一个 beta 源集并创建包含在右下角显示“BETA”文本的图标版本。有关更多信息,请参阅配置构建变体。 - 点击完成。
- 构建项目。
选择一个 Material 图标,然后单击 **确定**。图标将显示在“矢量图形预览”中。
输出目录区域显示矢量可绘制对象及其将显示到的目录。
矢量资源工作室将定义矢量可绘制对象的 XML 文件添加到项目中的 app/src/main/res/drawable/
文件夹中。在项目窗口的Android 视图中,您可以在drawable文件夹中查看生成的矢量 XML 文件。
如果最低 API 级别为 Android 4.4(API 级别 20)及更低版本,并且您尚未启用支持库技术,则矢量资源工作室将生成 PNG 文件。在项目窗口的项目文件视图中,您可以在 app/build/generated/res/pngs/debug/
文件夹中查看生成的 PNG 和 XML 文件。
您不应编辑这些生成的栅格文件,而应使用矢量 XML 文件。构建系统会在需要时自动重新生成栅格文件,因此您无需维护它们。
导入 SVG 或 PSD 文件
在您打开矢量资源工作室后,您可以按如下方式导入 SVG 或 PSD 文件
- 在矢量资源工作室中,选择本地文件。
- 通过点击… 指定图像文件。
- 可以选择更改资源名称、大小、不透明度和从右到左 (RTL) 镜像设置
- **名称** - 如果不想使用默认名称,请键入新名称。如果项目中已存在该资源名称,则矢量资源工作室会自动创建唯一名称(在名称末尾添加数字)。名称只能包含小写字符、下划线和数字。
- 覆盖 - 如果要调整图像的大小,请选择此选项。选择后,大小将更改为图像本身的大小。每当您更改大小时,更改都会显示在预览区域中。默认值为 24 x 24 dp,这在材料设计规范中定义。
- **不透明度** - 使用滑块调整图像的不透明度。更改会显示在预览区域中。
- 为 RTL 布局启用自动镜像 - 如果希望在布局从左到右变为从右到左时显示镜像图像,而不是从左到右显示,请选择此选项。例如,某些语言是从右到左读取的;在这种情况下,如果您有箭头图标,则可能希望显示其镜像图像。请注意,如果您正在使用较旧的项目,则可能需要将
android:supportsRtl="true"
添加到您的应用清单中。Android 5.0(API 级别 21)及更高版本以及支持库支持自动镜像。 - 单击 **下一步**。
- 可选更改资源目录
- 资源目录 - 选择要添加矢量可绘制对象的资源源集:
src/main/res
、src/debug/res
、src/release/res
或用户定义的源集。主源集适用于所有构建变体,包括调试和发布。调试和发布源集会覆盖主源集,并应用于构建的一个版本。调试源集仅用于调试。要定义新的源集,请选择文件 > 项目结构 > app > 构建类型。例如,您可以定义一个 beta 源集并创建包含在右下角显示“BETA”文本的图标版本。有关更多信息,请参阅配置构建变体。 - 点击完成。
- 构建项目。
该文件必须位于本地驱动器上。例如,如果它位于网络上,则需要先将其下载到本地驱动器。
图像将显示在矢量可绘制对象预览中。
如果 SVG 或 PSD 文件包含不受支持的功能,则矢量资源工作室底部会出现错误,如图 3 所示。
如果看到错误,则需要确保导入的矢量可绘制对象能够正确渲染。滚动浏览列表以查看错误。
有关支持的元素列表,请参阅矢量可绘制对象向后兼容性解决方案。有关允许的 PSD 文件的更多信息,请参阅PSD 文件的支持和限制。
输出目录区域显示矢量可绘制对象及其将显示到的目录。
矢量资源工作室将定义矢量可绘制对象的 XML 文件添加到项目中的 app/src/main/res/drawable/
文件夹中。在项目窗口的Android 视图中,您可以在drawable文件夹中查看生成的矢量 XML 文件。
如果最低 API 级别为 Android 4.4(API 级别 20)及更低版本,并且您尚未启用支持库技术,则矢量资源工作室将生成 PNG 文件。在项目窗口的项目文件视图中,您可以在 app/build/generated/res/pngs/debug/
文件夹中查看生成的 PNG 和 XML 文件。
您不应编辑这些生成的栅格文件,而应使用矢量 XML 文件。构建系统会在需要时自动重新生成栅格文件,因此您无需维护它们。
将矢量可绘制对象添加到布局
在布局文件中,您可以将任何与图标相关的窗口小部件(例如 ImageButton
、ImageView
等)设置为指向矢量可绘制对象。例如,以下布局显示了在按钮上显示的矢量可绘制对象
要在窗口小部件上显示矢量可绘制对象,如图所示
- 打开一个项目并导入矢量可绘制对象。
- 在项目窗口的Android 视图中,双击布局 XML 文件(例如
content_main.xml
)。 - 点击设计选项卡以显示布局编辑器。
- 将
ImageButton
窗口小部件从调色板窗口拖到布局编辑器中。 - 在资源对话框中,在左侧窗格中选择可绘制对象,然后选择您导入的矢量可绘制对象。点击确定。
- 要将图像的颜色更改为主题中定义的强调色,请在属性窗口中找到色调属性并点击… 。
- 在资源对话框中,在左侧窗格中选择颜色,然后选择colorAccent。点击确定。
此示例使用通过新建项目向导生成的手机/平板电脑项目。
矢量可绘制对象将显示在布局中的 ImageButton
上。
图像的颜色将更改为布局中的强调色。
如果项目使用支持库,则 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" />
如果项目不使用支持库,则矢量可绘制对象代码将改为 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" />
以下 Java 代码将图像检索为 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 对象,例如活动、片段、布局、视图等。
build.gradle
文件中没有 vectorDrawables.useSupportLibrary = true
语句),您也可以使用 app:srcCompat
语句引用矢量可绘制对象。例如<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" app:srcCompat="@drawable/myimage" />
VectorDrawable
类的特定功能时。为此,您可以使用以下 Java 代码Kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val vectorDrawable = drawable as VectorDrawable } else { val bitmapDrawable = drawable as BitmapDrawable }
Java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { VectorDrawable vectorDrawable = (VectorDrawable) drawable; } else { BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable; }
您只能从主线程访问矢量可绘制对象资源。
对于支持库技术,您必须使用与支持库兼容的编码技术。有关更多信息,请参阅Android 支持库 23.2。
修改矢量资源工作室生成的 XML 代码
您可以修改矢量可绘制对象 XML 代码,但不能修改在构建时生成的 PNG 和相应的 XML 代码。但是,我们不建议这样做。
使用 PNG 生成技术时,矢量资源工作室会确保矢量可绘制对象和 PNG 匹配,并且清单包含正确的代码。如果您添加了在 Android 4.4(API 级别 20)及更低版本上不受支持的代码,则您的矢量和 PNG 图像可能会有所不同。您还需要确保清单包含支持您更改的代码。
在不使用支持库技术时修改矢量 XML 文件
- 在项目窗口中,双击drawable文件夹中生成的矢量 XML 文件。
- 根据最低 API 级别支持的内容编辑 XML 代码
- Android 5.0(API 级别 21)及更高版本 - 矢量资源工作室支持所有
Drawable
和VectorDrawable
元素。您可以添加 XML 元素并更改值。 - Android 4.4(API 级别 20)及更低版本 - 矢量资源工作室支持所有
Drawable
元素和VectorDrawable
元素的一个子集。请参阅矢量可绘制对象向后兼容性解决方案了解列表。您可以更改生成代码中的值并添加支持的 XML 元素。 - 构建项目并检查矢量可绘制对象和相应的栅格图像是否看起来相同。
XML 文件将显示在编辑器和预览窗口中。
请记住,由于不同的渲染引擎以及在构建之前对矢量可绘制对象所做的任何更改,生成的 PNG 在预览窗口中的显示方式可能与应用中的显示方式不同。如果将代码添加到矢量资源工作室创建的矢量 XML 文件中,则 Android 4.4(API 级别 20)及更低版本中不受支持的任何功能都不会显示在生成的 PNG 文件中。因此,在添加代码时,应始终检查生成的 PNG 是否与矢量可绘制对象匹配。为此,您可以双击项目窗口的项目文件视图中的 PNG;当您的代码引用可绘制对象时,代码编辑器的左侧边距也会显示 PNG 图像,如图 6 所示。
从项目中删除矢量可绘制对象
要从项目中删除矢量可绘制对象
- 在项目窗口中,通过选择文件并按Delete键(或选择编辑 > 删除)删除生成的矢量 XML 文件。
- 可选选择选项以查找项目中使用文件的位置,然后点击确定。
- 选择构建 > 清理项目。
将出现安全删除对话框。
Android Studio 将从项目和驱动器中删除该文件。但是,如果您选择搜索项目中使用文件的位置并找到了一些用法,则可以查看它们并决定是否删除该文件。
与已删除的矢量可绘制对象相对应的任何自动生成的 PNG 和 XML 文件都将从项目和驱动器中删除。
交付包含矢量可绘制对象的应用
如果您使用了支持库技术或您的最低 API 级别为 Android 5.0(API 级别 21)或更高版本,则您的 APK 将包含您使用矢量资源工作室添加的矢量可绘制对象。这些 APK 的大小将小于将矢量图像转换为 PNG 的情况。
当您的最低 API 级别包含 Android 4.4(API 级别 20)或更低版本,并且您的项目中包含相应的矢量可绘制对象和栅格图像时,您有两种选择来交付 APK 文件
- 创建一个包含矢量可绘制对象及其相应栅格表示的 APK。此解决方案最易于实施。
- 为不同的 API 级别创建单独的 APK。当您不包含 Android 5.0(API 级别 21)及更高版本的 APK 中相应的栅格图像时,APK 的大小可以大大减小。有关更多信息,请参阅 多 APK 支持。
PSD 文件的支持和限制
矢量资源工作室不支持所有 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 的描边和填充颜色。
转换细节
- 如果描边是虚线、使用剪贴基准进行剪辑或使用与中心不同的对齐方式,矢量资源工作室会将其转换为矢量可绘制对象中的填充形状。
不支持
- 除纯色以外的颜色填充和描边,例如渐变。
不透明度
支持
- 不透明度为 0 的形状图层。
转换细节
- 矢量资源工作室将填充不透明度与图层不透明度相乘以计算填充 Alpha 值。
- 该工具将剪贴基准(如果有剪贴基准)的不透明度与填充 Alpha 值相乘以计算最终的填充 Alpha 值。
- 该工具将描边不透明度与图层不透明度相乘以计算描边 Alpha 值。
- 该工具将剪贴基准(如果有剪贴基准)的不透明度与描边 Alpha 值相乘以计算最终的描边 Alpha 值。
图层
支持
- 任何可见的形状图层。
转换细节
- 矢量资源工作室保留矢量可绘制对象文件中的图层名称。
不支持
- 图层效果。
- 调整和文字图层。
- 混合模式(忽略)。
SVG 文件的支持和限制
矢量资源工作室不支持所有 SVG 文件功能。以下部分总结了该工具将 SVG 文件转换为 VectorDrawable
时支持和不支持的功能,以及其他转换细节。
支持的功能
VectorDrawable
支持 Tiny SVG 1.2 中的所有功能,除了 文本。
形状
VectorDrawable
支持 SVG 路径。
该工具将诸如圆形、正方形和多边形之类的基本 形状 转换为路径。
变换
该工具支持变换矩阵,并将其直接应用于子路径。
组
该工具支持用于平移、缩放和旋转的组元素。组不支持不透明度属性。
该工具还将任何组样式或不透明度应用于子路径。
填充和描边
路径可以使用纯色或渐变(线性、径向或角度)进行填充和描边。仅支持居中描边。不支持混合模式。不支持虚线路径。
蒙版
该工具支持每个组一个剪贴蒙版。
SVG 导入程序不支持的功能
上面 支持的功能 部分中未列出的任何功能均不受支持。值得注意的不支持的功能包括以下内容
- 滤镜效果:不支持诸如阴影、模糊和颜色矩阵之类的效果。
- 文本:建议使用其他工具将文本转换为形状。
- 图案填充