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转换成PNG
AppCompat23.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太强大了。