Android开罐头———初识VectorDrawable

什么是矢量动画？我们为何要使用它？如何生成？和SVG有什么区别?

image.png

一、矢量图SVG和VectorDrawable

1.1 SVG和Vector差异

• SVG----前端中使用，是一套有很多标签的语法规范
• Vector----在Android中使用，Vector只实现了SVG语法的Path标签

1.2 Android不直接使用SVG的原因

SVG解析效率低下，Android只使用Path标签去绘制图形，语句复杂但是效率大大提升了，和canvas理由类似。同时，文件体积上，vector<svg<<png

1.3 Vector语法

pathData标签一般由字母跟数字组成，字母多为命令关键字（这里有个大小写的区别，大写的字母是基于原点坐标系的偏移量，即绝对位置；小写字母是基于当前点坐标系的偏移量，即相对位置），数字多为坐标，

M(x y): 没什么好说的，移动画笔到指定点，并不进行绘制，默认在(0,0)点。与Paint里面moveTo可以理解成一样的概念

L(l) (x y) : 画直线，与它类似的有H(h)跟V(v)。这里有一个方向的概念，pathData中的方向与View绘制的方向是一样的。H就是画一条横线，V就是画一条竖线，L就是画点到点之间的线

Z :没有参数，就是连接起点跟终点

二、生成矢量图VectorDrawable

2.1 as自带

• 右键res，选择vector asset后选择

2.2 svg导入

• 网址在线制作svg
• 阿里的矢量图标下载

2.3 自己编写

如下,其中android:viewportHeight表示把宽高分成几份，这样在pathData中可以用份数做单位，从而下次可以直接改宽高dp，而不用改pathData

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="200"
    android:viewportWidth="200">

    <path
        android:fillColor="#dc33cdcd"
        android:pathData="M100,100 L150,100 L150,150 L100,150 Z"/>
</vector>

效果图就是一个青色的正方形：

效果图.png

三、VectorDrawable兼容性

3.1 兼容性的坎坷之路

• Android L （5.0）是它的诞生，但是只允许API>=21的设备使用，基本残废
• **Gradle Plugin 1.5 **是一个里程碑，设备>=21则使用vector，设备<21则将vector在编译时转化为png使用，局限性很大
• AppCompat 23.2 才是真正的春天，静态vector支持到android2.1+，动态vector支持到android3.0+，于是几乎兼容所有的设备

四、静态VectorDrawable的配置与应用

4.1 gradle项目配置

• app子项目的bulid.gradle下添加一句话：

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

• 确保AppCompat兼容库版本为23.2以上

• 同时更新根目录下bulid.gradle中的**Gradle Plugin **版本，至少要升级到2.1以上，否则还是会自动转换vector为png(原因见3.1）

classpath 'com.android.tools.build:gradle:2.3.1'

4.2 控件使用vectorDrawable

4.2.1 ImageView/ImageButton

ImageView/ImageButton设置背景，直接用标签app:srcCompat

<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        app:srcCompat="@drawable/ic_camera"
        />

4.2.2 Button

Button设置背景不能直接使用标签app:srcCompat，只能利用selector标签间接引用

• selector文件如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_rec" android:state_pressed="false"/>
    <item android:drawable="@drawable/ic_camera" android:state_pressed="true"/>

</selector>

• Button设置背景为selector:

<Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/camera_imageview"
        android:background="@drawable/button_bg"/>

---

• 大坑注意
  还要在代码中加以下这句话：

static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

4.3 总结

使用低版本的手机进行实验，若是显示成功则说明配置成功了。
最终效果图：

vector.gif