用vector drawable加快应用图片加载速度

毕竟是菜鸟，不敢乱写博客去误导大家，但是最近想到的一个问题好像网上没有找到类似的资料，遂自己写了点demo验证一下，用我的第一篇博客来记录下。

android在性能优化方面网上已经有很多很多的方法了，但是我看过来好像没有一条提到 vecotor drawable,也许是因为比较新的缘故，这是在android 5.0之后随着material design推出的，可以看一下关于material design 的翻译，http://blog.csdn.net/jjwwmlp456/article/details/40540233 

简单说一下 矢量图 （vector drawable）的优点：

1：文件小。我下面例子中使用的只有 927 字节，而同样图形的png有 3K

2：缩放不失真。这对于多分辨率适配是极其方便的

3：可以使用 tint 和 tintmode 进行渲染，符合MD设计规范。（知乎上对MD相当的推崇啊）

4：就是我想分享的一点小技巧，相比于png图片用io流（inputstream）的加载方式，vector drawable的xml解析方式明显速度比较快一点，至于快多少，没人说，也没找到资料，所以就自己动手实验了一下。

左边那个是原图，右边是我写的位图（截得图，将就着看一下）

测试的代码很简单 ，给5个imageview  setImageDrawable 5张同样的图片（文件名不同）log打出走完这一段的时间，以下是结果：

就算是同一设备也无法保证每时每刻状态都一样，所以我也不敢说能提升多少百分比，但是可以看个大概。用户都有心理预期，知道连网获取图片等内容是和网络环境有关，需要时间的，但是应用的启动速度用户可不会给多少容忍度，很容易骂娘，所以每一点提升都是很有必要的。特别是图标较多的应用，以每张图片提升10毫秒为例，50张图片就可以减少0.5秒的启动时间，属于那种能明显感受到的提升了。

若有不妥的地方欢迎交流指正，大家一起进步！

以我这次试验用图为例，说说vector drawable 画图的方法。

先贴上代码：

<?xml version="1.0" encoding="utf-8"?><!-- res/drawable/heart.xml --><vector xmlns:android="http://schemas.android.com/apk/res/android"    android:height="147dp"    android:width="147dp"    android:viewportHeight="400"    android:viewportWidth="400">    <path android:fillColor="#e5e5e5"        android:pathData="M200,50                          a150,150 0 1,1 -1,0 "        />    <path android:strokeColor="#ffffff"        android:strokeWidth="10"        android:pathData="M 200,200                          a 25,25 0 1,0 -1,0"        />    <path android:strokeColor="#ffffff"        android:strokeWidth="10"        android:pathData="M 120,180                          a 80,80 0 1,1 160,0"        />    <path android:strokeColor="#ffffff"        android:strokeWidth="10"        android:pathData="M 120,180                          l 80,120                          l 80,-120"        /></vector>

1：height和width就不用解释了，就是这个图片的宽高

2：portHeight和portWidth是虚拟画布的大小，相当于把一个 400X400 的画布铺在147dp大小的图片上，下面 pathData的数据都是在虚拟画布上的位置

3：每一个 <Path />标签就是一个图形

4：pathData可以参考w3c标准的svg画图，大致一样 http://www.w3.org/TR/SVG11/paths.html#PathData

M： move to 移动绘制点
L：line to 直线     H   水平直线   V 垂直直线
Z：close 闭合
C：cubic bezier 三次贝塞尔曲线
Q：quatratic bezier 二次贝塞尔曲线
A：ellipse 圆弧

M200,50     表示移动到画布 X=200  Y=50 的点    (每一个命令，大写表示绝对位置，小写表示距上一点的相对位置)

a150,150 0 1,1 -1,0   从（200，50）做为起始点，画一条到相对当前位置 x -1,y不变的点得圆弧（其实就是一整个圆，但是不能写 0,0 如果这样什么都不会画出来，所以用了（-1，0）相对当前位置 x-1）  150，150 为椭圆的半径，值一样表示是个圆，后面的 0 表示相对x轴的旋转角度，第一个 1 表示去较大的一条弧，第二个 1 表示取顺时针一段的弧

其他的都不难，贝塞尔曲线比较麻烦。有这几个，理论上可以画出所有不怎么复杂的图标。

关于vector drawable还有一点就是可以用AnimatedVectorDrawable给矢量图片添加动画，这个肯定比用图片的帧动画性能提高不少，这里就先不展开讨论了，网上也有一些其他资料的。

最后感谢一下flyme，让我用了两年的手机还能用上 5.0 系统来做真机实验。