VectorDrawable基础知识

1、概述

VectorDrawable是用xml文件定义一系列点、线、曲线及其颜色信息的矢量图。其最主要的优点是缩放不损失图片质量。我们也可以通过使用多个xml矢量图文件来做动画，从而避免适配多分辨率使用多张图片。 从android 5.0（api 21），系统提供了VectorDrawable与AnimatedVectorDrawable来支持矢量图。

2、 关于VectorDrawable

VectorDrawable定义一个静态的drawable对象。类似svg格式，每个矢量图被定义成由path和gourp对象构成的树状结构。
每个path包含了对象的几何轮廓，group包含了变化的具体规则。所有的path会按照xml中定义的顺序依次绘制。
此处插入官网图

android studio中的vector asset studio提供了非常简单的添加xml文件矢量图的功能。
如下为一个矢量电池图片的xml文件。

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
    android:height="24dp"
    android:width="24dp"
    <!-- size of the virtual canvas -->
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用矢量图xml文件必须在AppCompatImageView中使用或者利用StateListDrawable，如下

<android.support.v7.widget.AppCompatImageView
        android:id="@+id/iv_scale_test"
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:srcCompat="@drawable/test_vector_battery"/>
1
2
3
4
5

渲染后的图形如下

3、关于AnimatedVectorDrawable

AnimatedVectorDrawable为矢量图增加了动画信息。动画矢量图可以通过三个单独的资源文件定义，也可以通过一个单独的文件定义整个drawable。

3.1、利用多个文件定义动画矢量图

构建动画矢量图时，需要如下文件
- Vecotr Drawable xml文件
- AnimatedVectorDrawable xml文件，其中定义了目标Vector Drawable，要动画的目标paths及groups，及其通过ObjectAnimator或者AnimatorSet定义的目标对象。
- animator动画文件
三个示例文件分别如下

VectorDrawable xml文件

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

AnimatedVectorDrawable xml文件

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
1
2
3
4
5
6
7
8
9

animator xml文件，如下定义两个动画

<objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

 <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在项目中使用如下代码开始动画
((AnimatedVectorDrawableCompat) mTestImg.getDrawable()).start(); 或者转型为Animatedable对象，然后调用start()方法。

3.2、利用单个文件定义动画矢量图

示例代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

其中aapt标记创建了单独的资源并且在矢量文件中引用。这种方式需要24版本以上的构建工具。

4、xml矢量文件中的元素

path的可选项释义

android:name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径

android:pathData 和 SVG 中 d 元素一样的路径信息。

android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径

android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框

android:strokeWidth 定义路径边框的粗细尺寸

android:strokeAlpha 定义路径边框的透明度

android:fillAlpha 定义填充路径颜色的透明度

android:trimPathStart 从路径起始位置截断路径的比率，取值范围从 0 到1

android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从 0 到1

android:trimPathOffset 设置路径截取的范围，取值范围从 0 到1

android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.

android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.

android:strokeMiterLimit 设置斜角的上限

group的可选项释义

group ：主要是用来设置路径做动画的关键属性的

android:name 定义 group 的名字

android:rotation 定义该 group 的路径旋转多少度

android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。

android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。

android:scaleX 定义 X 轴的缩放倍数

android:scaleY 定义 Y 轴的缩放倍数

android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。

android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。

clip-path释义

clip-path定义当前绘制的剪切路径。clip-path只对当前的group和子group有效。

android:name 定义clip path的名字

android:pathData 和 path中的 android:pathData 的取值一样。

vector可选项释义

android:name 定义该drawable的名字

android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸，通常使用 dp

android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸，通常使用 dp

android:viewportWidth 定义矢量图视图的宽度，视图就是矢量图 path 路径数据所绘制的虚拟画布

android:viewportHeight 定义矢量图视图的高度，视图就是矢量图 path 路径数据所绘制的虚拟画布

android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的

android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in

android:autoMirrored 设置当系统为 RTL (right-to-left)
布局的时候，是否自动镜像该图片。比如 阿拉伯语

android:alpha 该图片的透明度属性

5、Vector Drawables的兼容问题

为了兼容api21以下版本，系统提供了2个支持库support-vector-drawable及animated-vector-drawable，其中分别包含了VectorDrawableCompat和AnimatedVectorDrawableCompat。其中VectorDrawableCompat可以兼容到api 7，AnimatedVectorDrawableCompat可以兼容到api11。

通过如下配置来使用vectorDrawable支持库

//For Gradle Plugin 2.0+
 android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }
（低于1.5或者更低版本的gradle配置方法见官网）
1
2
3
4
5
6
7

在加载drawable时，不是所有接受drawable id的地方都可以使用vector drawable的。当在使用矢量图像时用app:srcCompat替换android:src，在代码中可以使用 setImageResource() 来设置图片源。
为了更好的渲染，建议在定义矢量图片时设置为黑色，然后利用android：tint着色。

6、版本问题

com.android.support:appcompat-v7包25.4.0及以上版本的支持库才有以下特性：
1.path渐变 从一个path渐变到另外一个path。（即使使用了在api21以下的手机上无效，只是不报错而已）
2.path变化的插值器
com.android.support:appcompat-v7包26.0.0-beta1及更高的支持库有以下特性：
1.沿着path移动任意对象。（这一点不是很理解）
注意，在不支持的版本上应用以上特性可能会造成crash。

7、参考：

1. https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html
2. https://developer.android.com/studio/write/vector-asset-studio.html#importing