矢量图像资源详解（Vector drawables）

原创

于 2020-12-02 17:22:40 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#android #VectorDrawable #矢量图

本文介绍了Android中矢量图的相关知识。矢量图在XML中定义，缩放不失真，可减少APK大小并添加动画。详细讲解了定义节点，介绍了使用Vector Asset Studio和根据SVG文件参数创建矢量图的方法，还提及在布局中使用的注意事项。

一、前言

在 Android 中，矢量图是在 XML 中定义的一系列点、线、曲线，以及相关联的颜色信息。使用矢量图的主要优势是在缩放过程中不会损失显示质量（即不会模糊或者像素方格化），这就意味着一个矢量图可以缩放支持不同的屏幕，可以减少开发维护和消减 APK 文件的大小。另外，还可以为矢量图添加动画效果，详情参考：使用 AnimatedVectorDrawable。

本篇幅将介绍如何在 XML 中定义矢量图。还可以通过 Android Studio，将 SVG 格式图片转换成矢量图格式图片资源。但是需要注意的是，从 Android 5.0 (API level 21) 开始系统 API 才支持 VectorDrawable 和 AnimatedVectorDrawable，如果需要在旧版本系统中使用，可以使用 Android 支持库实现（支持库对应 VectorDrawableCompat 和 AnimatedVectorDrawableCompat 两个类）。

注意事项：为了优化重绘的性能，每一个 VectorDrawable 都有一个位图缓存，因此引用同一个 VectorDrawable 意味着使用相同的位图缓存。如果这些引用不是采用相同的尺寸，那么位图就会在每次尺寸改变的时候都会重新创建和绘制，换句话说，如果 VectorDrawable 用于不同尺寸的情形，最高效的做法就是每一个尺寸创建一个 VectorDrawable 。

二、`VectorDrawable` 详解

VectorDrawable 定义一个静态的绘制对象，跟 SVG 图片类似。VectorDrawable 的定义使用 XML 文件，是由 path 和 group 组成的树状层次结构，每一个 path 包含对象轮廓的几何图形，每一个 group 包含转换的详细信息，一个 group 内部可以包含多个 path 或者子 group。所有的路径都会根据 XML 中定义顺序进行绘制。

矢量图资源层次结构示意图

2.1 `VectorDrawable` 定义节点详解

VectorDrawable 是用XML 资源文件定义的，包含的节点如下：

2.1.1 `<vector>` 节点

<vector> 节点是根节点，定义一个矢量图，节点内可使用的属性如下：

android:name：定义矢量图的名称
android:width：定义图像固有的宽度（支持所有的像素单位，通常使用 dp 指定）
android:height：定义图像固有的高度（支持所有的像素单位，通常使用 dp 指定）
android:viewportWidth：定义视口空间的宽度，视口基本是就是用来绘制路径的虚拟画布（换句话说就是虚拟画布的宽度，无像素单位）
android:viewportHeight：定义视口空间的高度，视口基本是就是用来绘制路径的虚拟画布（换句话说就是虚拟画布的搞度，无像素单位）
android:tint：定义绘可制图像着色颜色，默认没有着色
android:tintMode：定义可绘制图像的混合着色模式，默认是 src_in
android:autoMirrored：指定可绘制图像在布局中的布局方向是 RTL（right-to-left）时是否自动镜像，默认 false
android:alpha：定义 VectorDrawable 的透明度，取值 0.0~1.0，默认是 1.0

2.1.2 `<group>` 节点

<group> 节点定义多个路径或者子组，包含变换的详细信息。变换是在与视口相同的坐标中定义，并且按照缩放、旋转、平移的的顺序进行。该节点包含的属性如下：

android:name：定义组的名称（用作标识）
android:rotation：设定组的旋转角度。默认是 0
android:pivotX：设定组缩放和旋转的轴心点 X 坐标，在视口空间中定义，默认是 0
android:pivotY：设定组缩放和旋转的轴心点 Y 坐标，在视口空间中定义，默认是 0
android:scaleX：设定组在 X 轴方向上的缩放比例，默认值是 1
android:scaleX：设定组在 Y 轴方向上的缩放比例，默认值是 1
android:translateX：设定组在 X 轴方向的平移量，在视口空间中定义，默认是 0
android:translateY：设定组在 Y 轴方向的平移量，在视口空间中定义，默认是 0

注意事项：节点属性中提到的 “在视口空间中定义”，即属性的值范围是视口大小范围，并不是图标大小范围。

2.1.3 `<path>` 节点

<path> 节点定义需要绘制的轨迹路径。该节点包含的属性如下：

android:name：定义路径的名称（用作标识）
android:pathData：定义路径数据，使用跟 SVG 路径数据中 “d” 属性完全相同的格式定义。在视口控件中定义。
android:fillColor：设定路径的填充颜色，可以是颜色值。在 API 24+，可以是带状态的颜色列表（ColorStateList）或者渐变颜色。如果这个属性添加动画，动画中设置的只将覆盖原始值。如果没有指定改属性值，不会对路径进行填充。
android:strokeColor：设定路径轮廓绘制的画笔颜色，可以是颜色值。在 API 24+，可以是带状态的颜色列表（ColorStateList）或者渐变颜色，如果这个属性添加动画，动画中设置的只将覆盖原始值。如果没有指定改属性值，不会对路径进行填充。
android:strokeWidth：设定路径轮廓绘制的画笔宽度，默认是 0（需先指定 android:strokeColor 属性，值为 0 是最小宽度）
android:strokeAlpha：设定路径轮廓绘制的透明度，默认是1 （需先指定 android:strokeColor 属性）
android:fillAlpha：设定路径的填充透明度，默认值是 1（需先指定 android:fillColor 属性）
android:trimPathStart：设定路径从开始部分修剪的比例，取值范围 0 ~ 1，默认是 0
android:trimPathEnd：设定路径从结尾部分修剪的比例，取值范围 0 ~ 1，默认是 0
android:trimPathOffset：设定路径修剪位移（允许显示路径的开始和结束部分），取值范围 0 ~ 1，默认是0
android:strokeLineCap：设定路径轮廓绘制的线帽，取值为 butt（对接）、round（圆形）和 square（方形），默认是 butt
android:strokeLineJoin：设定路径轮廓绘制的线条连接方式，取值为 miter（斜接）、round（圆角）和 bevel（斜角），默认是 miter
android:strokeMiterLimit：设定路径轮廓绘制的线条斜接极限（当 android:strokeLineJoin="miter" 时有效），默认值是 4。
android:fillType：设定路径填充类型，取值为 evenOdd 或 nonZero，行为与 SVG 的 “fill-rule” 属性相同，默认值是 nonZero。此属性仅在 SDK 24+ 才有效。