前言
SVG在前端中使用的一种语法规范,Vector在Android中使用而且只支持一种Path标签,主要是为了提高SVG的解析效率,减少SVG加载时候效率问题。相对于普通的静态jpg、png等图片来说,SVG能够实现缩放不失真,而且减小了drawable体积;但是SVG相对于静态图片需要更多的处理时间。通常SVG都是由设计提供,如果想自己编辑SVG图片可以使用在线SVG编辑器 http://editor.method.ac/。
SVG语法
Vector常用的命令:
命令 | 释义 | 使用方式 |
---|---|---|
M | MoveTo | M x,y |
L | LineTo | L x,y |
Z | closePath | Z |
H | Horizontal LineTo | H x,y |
V | Vertical LineTo | V x,y |
A | 绘制弧线 | A rx,ry,xrotation,flag1,flag2,x,y |
以上就是一些基本的SVG命令,其中A的参数需要解释一下:
rx、ry:椭圆的半轴大小;xrotation:椭圆X轴与水平方向顺时针方向的夹角大小;flag1:只有两个值,1代表取大角度弧线,0代表取小角度弧线;flag2:只有两个值,确定绘制的方向,1代表顺时针,0代表逆时针;X、Y:终点坐标值。
有几点要注意:坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系。指令和数据间的空格可以省略。同一指令出现多次可以只用一个。
在Android Studio的New->Vector Asset里可以直接添加一个SVG XML文件。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7zM5,18v2h14v-2H5z"/>
</vector>
上面的android:width/android:height代表SVG真正展示的大小,android:viewportWidth/android:viewportHeight则代表将当前的SVG分成多少份,后面的M19,9这样的坐标值就是根据这个划分来确定位置。如果后面把width/height增加缩小那么SVG绘制出来的图像也不会失真。
Android中的SVG目前只支持path标签,fillColor代表填充色,pathData就是绘制SVG图像的指令序列。M19,9代表moveTo 19,9,前面把SVG图像分割成了24*24格,19,9就是将画笔移动到第19行第9列的位置,h-4也就是画横向直线。其实pathData就是指令+参数这样的基本元素持续不断的出现的数据,只有z没有参数,这表示完成了一条路径的绘制。根据上面的图像结果可以看出这个SVG绘制了两条路径,因而有两个z指令。
兼容性
目前只兼容minSDK >= 21的版本,最早几乎没有兼容性。AppCompat23.2静态Vector支持2.1+,动态Vector支持Android3.0+,几乎可以兼容大部分使用场景,现在的AppCompat基本上都能够支持SVG。要使用SVG动画效果,需要配置build.gradle文件,设置高度23的AppCompat依赖支持,如果还是有问题需要在使用的地方增加AppCompatDelegate.setCompatVectorFromResourcesEnabled(true)设置。
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
compile 'com.android.support:appcompat-v7:23+'
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
除了以上的适配方案外,还需要注意一下两点:
1. Path Morphing路径变换动画无法在低于L版本上使用
1. Path Interpolation在低于L版本系统不能使用自定义插值器
VectorDrawable使用
VectorDrawable能够很好的使用动画,如果想要在低于5.0版本上使用动画效果一定要使用ImageView/ImageButton的app:srcCompat属性来设置,直接使用android:src在低于5.0版本无法正确展示。不过笔者目前都是在6.0版本上测试的新动画效果,这里所有的演示都是用android:src属性来做。