手把手教学， android 使用 SVG

简单介绍:

SVG在Web上的应用非常广泛，在Android 5.X之前的Android版本上，大家可以通过一些第三方开源库来在Android中使用SVG。而在Android 5.X之后，Android中添加了对SVG的标签支持。从而让开发者可以使用SVG来创建更加丰富的动画效果。

1.什么是svg

可伸缩矢量图形
定义用于网络的基于矢量的图形
使用XML格式定义图形
万维网联盟的标准
与诸如DOM和XSL之类的W3C标准是一个整体
图像在放大或改变尺寸的情况下其图形质量不会有所损失

针对最后一点说一下，可能大家对SVG没那么熟悉，那么拿一个大家熟悉的Bitmap来跟SVG作个比较。Bitmap通过在每个像素点上存储色彩信息来表达图像，而SVG是一个绘图标准。与Bitmap相比，SVG最大的优点就是放大不会是真。而且Bitmap需要为不同分辨率设计多套图标，而矢量图则不需要。

2.标签

SVG可使用标签来创建，为了提高大家兴趣，先看看使用效果图

Paste_Image.png

加入我想要上图左上角的那个箭头，就可以用来画，再也不用网上找图片了。这里留个悬念，后面再说说怎么画。

简单介绍一下标签，大家粗略地看一下就好：
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()：关闭路径

有几点要注意：

坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

3.Android中使用SVG

Google在Android 5.X中提供了两个新API来帮助支持SVG:

VectorDrawable
AnimatedVectorDrawable

其中，VectorDrawable让你可以创建基于XML的SVG图形，并结合AnimatedVectorDrawable来实现动画效果。

首先来讲讲VectorDrawable的使用：
在Android Studio中我们可以用独特的姿势创建SVG，如下图

Paste_Image.png

点击Vector Asset后可以看到：

Paste_Image.png

英文不好朋友我给大家翻译一下：
Local SVG file : 可以选择本地的SVG文件
Material Icon : 可以选择自带的SVG
Resource name : 当然就是xml文件的名字
Size : 图片大小
Override defalut size from Material Design : 勾选后替代默认的大小
Opactity : 透明度
Enable atuo mirroring for RTL layout : 用于镜像显示

我们可以在 Material Icon 下choose一个箭头

Paste_Image.png

然后自动生成xml文件

在preview里面可以看到效果

Paste_Image.png

其中包含两组宽高属性，分别具有不同含义。width，height表示该SVG图形的具体大小，而viewportHeight，viewportWidth表示SVG图形划分比例。后面在绘制path时所使用的参数，就是根据这两个值来进行转换，比如上面的代码，将24dp划分为24份，如果在绘制图形时使用坐标(12,12)，则意味着该坐标位于该SVG图形正中间。所以，如果width，height的比例与viewportHeight，viewportWidth的比例不一致，就会使图形发生压缩，形变。

标签内我们看看：
pathData 就是绘制SVG图形所用到的指令。
fillColor 这个属性表明绘制出来的是一个填充的图形，我在这个属性里设了一个白色，如果想要绘制一个非填充的图形，可以使用 strokeColor 。

Paste_Image.png

然后我们只需在控件里使用这个xml文件就行了

再来说说AnimatedVectorDrawable

AnimatedVectorDrawable 的作用是给 VectorDrawable 提供动画效果。在XML文件中通过标签来声明对 AnimatedVectorDrawable 的使用，并指定其作用的或。

举个例子，线性动画:

我们先创建一个静态的 VectorDrawable ,取名为 line.xml

在preview里面是这样子：

Paste_Image.png

在path1和path2分别绘制了两条直线，每条直线由三个点控制（ M 20,80 L 50,80 80,80），（ M 20,20 L 50,20 80,20），接下来创建两个 objectAnimator

分别用来控制上面 VectorDrawable 里的的位置(注意: objectAnimator 放在 res/animator 里)

最后写一个 animated-vector ,把 VectorDrawable 和 objectAnimator 连起来

那么整个动画就写完了，接下来在布局文件中引用 VectorDrawable

然后在activity中

ImageView imageView = (ImageView) findViewById(R.id.imageView );
Drawable drawable = imageView.getDrawable();
if(drawable instanceof Animatable){
   ((Animatable) drawable).start();
}

运行代码，可以看见两条线慢慢从中间断开，最后形成"X"状