Android Vector曲折的兼容之路

两年前写书的时候，就在研究Android L提出的Vector，可研究下来发现，完全不具备兼容性，相信这也是它没有被广泛使用的一个原因，经过Google的不懈努力，现在Vector终于迎来了它的春天。

在文章后面，会给出本文的Demo和效果图，并开源在Github

Vector Drawable

Android 5.0发布的时候，Google提供了Vector的支持。Vector Drawable相对于普通的Drawable来说，有以下几个好处：

• Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片
• Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一
• 使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像
• 功能强大，不用写很多代码就可以实现非常复杂的动画
• 成熟、稳定，前端已经非常广泛的进行使用了

Vector图像刚发布的时候，是只支持Android 5.0+的，对于Android pre-L的系统来说，并不能使用，所以，可以说那时候的Vector并没有什么卵用。不过自从AppCompat 23.2之后，Google对p-View的Android系统也进行了兼容，也就是说，Vector可以使用于Android 2.1以上的所有系统，只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了，这时候，Vector应该算是迎来了它的春天。

如何获得Vector图像

概念

首先，需要讲解两个概念——SVG和Vector。

SVG，即Scalable Vector Graphics 矢量图，这种图像格式在前端中已经使用的非常广泛了，详见WIKI：https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图，详见：https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

因此，可以说Vector就是Android中的SVG实现，因为Android中的Vector并不是支持全部的SVG语法，也没有必要，因为完整的SVG语法是非常复杂的，但已经支持的SVG语法已经够用了，特别是Path语法，几乎是Android中Vector的标配，详细可以参考：http://www.w3.org/TR/SVG/paths.html

Vector语法简介

Android以一种简化的方式对SVG进行了兼容，这种方式就是通过使用它的Path标签，通过Path标签，几乎可以实现SVG中的其它所有标签，虽然可能会复杂一点，但这些东西都是可以通过工具来完成的，所以，不用担心写起来会很复杂。

Path指令解析如下所示：

1. 支持的指令：
   • M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
   • L = lineto(L X,Y) ：画直线到指定的坐标位置
   • H = horizontal lineto(H X)：画水平线到指定的X坐标位置
   • V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
   • C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
   • S = smooth curveto(S X2,Y2,ENDX,ENDY)
   • Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
   • T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
   • A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
   • Z = closepath()：关闭路径
2. 使用原则:
   • 坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下
   • 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
   • 指令和数据间的空格可以省略
   • 同一指令出现多次可以只用一个

注意，’M’处理时，只是移动了画笔， 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。

关于这些语法，开发者需要的并不是全部精通，而是能够看懂即可，其它的都可以交给工具来实现。

从PNG到SVG

• 设计师

要从一般使用的PNG图像转换到SVG图像，对于设计师来说，并不是一件难事，因为大部分的设计工具（PS、Illustrator等等）都支持导出各种格式的图像，如PNG、JPG，当然，也包括SVG，因此，设计师可以完全按照原有的方式进行设计，只是最后导出的时候，选择SVG即可。

• 程序员

不要求开发者都去学习使用这些设计工具，开发者可以利用一些工具，自己转换一些比较基础的图像，http://inloop.github.io/svg2android/ 就是这样一个非常牛逼的网站，可以在线将普通图像转换为Android Vector Drawable。如图所示：

或者，还可以使用SVG的编辑器来进行SVG图像的编写，例如http://editor.method.ac/

使用Android Studio

利用Android Studio的Vector Asset，可以非常方便的创建Vector图像，甚至可以直接通过本地的SVG图像来生成Vector图像，如图所示：

进去之后，就可以生成Vector图像，如图所示：

Google的兼容之路

只兼容L+

Vector是在Android L中提出来的新概念，所以在刚开始的时候是只兼容L+的。

Gradle Plugin 1.5的兼容

从Gradle Plugin 1.5开始，Google支持了一种兼容方式，即在Android L之上，使用Vector，而在L之下，则使用Gradle将Vector生成PNG图像。

Android gradle plugin 1.5发布以后，加入了一个跟VectorDrawable有关的新功能。Android build tools 提供了另外一种解决兼容性的方案，如果编译的版本是5.0之前的版本，那么build tools 会把VectorDrawable生成对应的png图片，这样在5.0以下的版本则使用的是生成的png图，而在5.0以上的版本中则使用VectorDrawable.在build.gradle添加generatedDensities配置，可以配置生成的png图片的密度。

AppCompat23.2的兼容

从AppCompat23.2开始，Google开始支持在低版本上使用Vector。

静态Vector图像

我们有很多方法能够得到这些Vector，那么如何使用它们呢，Android 5.0以上的使用就不讲了，不太具有普遍代表性，我们从pre-L版本的兼容开始做起。

pre-L版本兼容

VectorDrawableCompat依赖于AAPT的一些功能，它能保持最近矢量图使用的添加的属性ID，以便他们可以被pre-L版本之前的引用。

在Android 5.0之前使用Vector，需要aapt来对资源进行一些处理，这一过程可以在aapt的配置中进行设置，如果没有启用这样一个flag，那么在5.0以下的设备上运行就会发生android.content.res.Resources$NotFoundException。

首先，你需要在项目的build.gradle脚本中，增加对Vector兼容性的支持，代码如下所示：

使用Gradle Plugin 2.0以上：

使用Gradle Plugin 2.0以下，Gradle Plugin 1.5以上：

像前面提到的，这种兼容方式实际上是先关闭AAPT对pre-L版本使用Vector的妥协，即在L版本以上，使用Vector，而在pre-L版本上，使用Gradle生成相应的PNG图片，generatedDensities这个数组，实际上就是要生成PNG的图片分辨率的数组，使用appcompat后就不需要这样了。

当然，最重要的还是添加appcompat的支持：

同时，确保你使用的是AppCompatActivity而不是普通的Activity。

Vector图像

一个基本的Vector图像，实际上也是一个xml文件，如下所示：

显示如图所示：

这里需要解释下这里的几个标签：

• android:width \ android:height:定义图片的宽高
• android:viewportHeight \ android:viewportWidth:定义图像被划分的比例大小，例如例子中的500，即把200dp大小的图像划分成500份，后面Path标签中的坐标，就全部使用的是这里划分后的坐标系统。

这样做有一个非常好的作用，就是将图像大小与图像分离，后面可以随意修改图像大小，而不需要修改PathData中的坐标。

• android:fillColor:PathData中的这些属性就不详细讲了，与Canvas绘图的属性基本类似。

在控件中使用

有了静态的Vector图像，就可以在控件中使用了。

可以发现，这里我们使用的都是普通的ImageView，好像并不是AppcomatImageView，这是因为使用了Appcomat后，系统会自动把ImageView转换为AppcomatImageView。

ImageView\ImageButton

对于ImageView这样的控件，要兼容Vector图像，只需要将之前的android:src属性，换成app:srcCompat即可，示例代码如下所示：

在代码中设置的话，代码如下所示：

setBackgroundResource也是可以设置Vector的API

Button

Button并不能直接使用app:srcCompat来使用Vector图像，需要通过Selector来进行使用，首先，创建两个图像，用于Selector的两个状态，代码如下所示：

selector1.xml

selector2.xml

selector.xml

非常简单，只是把普通的Selector中的图像换成了Vector图像而已，接下来，在Button中使用这个Selector即可：

然后运行，如果你认为可以运行，那就是太天真了，都说了是兼容，怎么能没有坑呢，这里就是一个坑……

这个坑实际上是有历史渊源的，Google的一位开发者在博客中写到：

First up, this functionality was originally released in 23.2.0, but then we found some memory usage and Configuration updating issues so we it removed in 23.3.0. In 23.4.0 (technically a fix release) we’ve re-added the same functionality but behind a flag which you need to manually enable.

实际上，他们的这个改动，就影响了类似DrawableContainers（DrawableContainers which reference other drawables resources which contain only a vector resource）这样的类，它的一个典型，就是Selector（StateListDrawable也是）。这个开发者在文中提到的flag，就是下面的这段代码，放在Activity的前面就可以了：

开启这个flag后，你就可以正常使用Selector这样的DrawableContainers了。同时，你还开启了类似android:drawableLeft这样的compound drawable的使用权限，以及RadioButton的使用权限，以及ImageView’s src属性。

RadioButton

RadioButton的Button同样可以定义，代码如下所示：

动态Vector基础

动态Vector才是Android Vector Drawable的精髓所在

动态的Vector需要通过animated-vector标签来进行实现，它就像一个粘合剂，将控件与Vector图像粘合在了一起，一个基础的animated-vector代码如下所示：