VectorDrawable的简单使用

矢量图在安卓Lollipop中已经实现，相关的类就是VectorDrawable。目前以兼容全版本的安卓系统VectorDrawable未出现之前我们需要把图片资源放在不同分辨率的文件夹中，现在只要是适合用矢量图描述的，如图标，目前只用一个VectorDrawable替代就可以了。

• SVG：在前端中使用，是一套语法规范
• Vector:在Android中使用,Vector只实现了SVG语法的Path标签（Android通过Path标签描述图片）
  

Vector的常用语法：

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

PNG、SVG、Vector三种格式之间的比较：

（显示效果相同，Vector占用的内存最小）
可以使用AndroidStudio中使用Google提供的一些无版权的图标，也可以从一些设计网站上下载SVG格式的图片，使用自带工具转换成Vector使用即可：

创建好的Vector文件：

VectorDrawable的兼容性：Gradle Plugin 1.5 增加了对sdk21一下设备的兼容性：    设备版本>=21 使用原生的Vector    设备版本<21  将Vector转换成PNGAppCompat23.2几乎可以兼容大部分的使用场景

在项目中使用VectorDrawable:

在bulid.gradle添加：

同时保证appcompat的版本在23.2以上

Vector的使用：

实现如下的动画效果：

实现的步骤很简单，需要书写的代码也不多，基本上都是通过xml实现：

1.准备Vector格式的图片 ,将arrow的左右箭头分别放置在标签，分别命名。

<vector xmlns:android="http://schemas.android.com/apk/res/android"    android:width="24dp"    android:height="24dp"    android:viewportHeight="24.0"    android:viewportWidth="24.0">    <group android:name="arrow_left">        <path            android:fillColor="#FF000000"            android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z" />    </group>    <group android:name="arrow_right">        <path            android:fillColor="#FF000000"            android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z" />    </group></vector>

2.创建左右箭头运动的属性动画：
左：

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"    android:propertyName="translateX"    android:valueFrom="0"    android:valueTo="10"    android:duration="1000"    android:repeatMode="reverse"    android:interpolator="@android:anim/accelerate_interpolator"    android:repeatCount="infinite"    android:valueType="floatType" />

右：

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"    android:propertyName="translateX"    android:valueFrom="0"    android:valueTo="-10"    android:duration="1000"    android:interpolator="@android:anim/accelerate_interpolator"    android:repeatMode="reverse"    android:repeatCount="infinite"    android:valueType="floatType" />

3.配置动画粘合剂——animated-vector

<?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/arrow"    >    <target        android:animation="@animator/arrow_left"        android:name="arrow_left"        />    <target        android:animation="@animator/arrow_right"        android:name="arrow_right"/></animated-vector>

4.将Vector图片设置到ImageView,点击ImageView开始动画
activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"   android:orientation="vertical"    tools:context="com.example.studyimoocanimation.MainActivity">    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_gravity="center"        app:srcCompat="@drawable/arrow_animated_vector" <!--设置imageview-->        android:onClick="imageview"        /></LinearLayout>

MainActivity.java

 public void imageview(View view){        ImageView img = (ImageView)view;        Drawable drawable = img.getDrawable();        if(drawable instanceof Animatable){            ((Animatable)drawable).start();        }    }

整个流程下来的实现还是比较简单的，注意的是动画效果的实现实在一张图片的基础上完成的，突然觉得VectorDrawable太强大了。