Andrid5.0新特性——SVG、VectorDrawable

一、SVG相关工具

在线SVG编辑器
Method Draw：http://editor.method.ac
svgedit：https://github.com/SVG-Edit/svgedit

离线SVG编辑器
inkscape：https://inkscape.org/zh/download/
Adobe Illustrator：http://www.adobe.com/cn/products/illustrator.html

svg转换Android VectorDrawable工具
svg2android：http://inloop.github.io/svg2android/
Gtihub：https://github.com/inloop/svg2android

SVG2VectorDrawable：https://github.com/misakuo/svgtoandroid

二、在Android中使用SVG
1、使用Method Draw先编辑一个svg格式的矢量图

2.把svg文件转换为Android的VectorDrawable文件。

手动转换
1. 在drawable目录下新建一个根节点为<vector>的xml文件。
2. 把svg文件中的path数据拷贝到<vector>，比如svg中path的d对应<vector>中path的android:pathData，stroke对应android:strokeColor，stroke-width对应android:strokeWidth等。

使用工具转换
使用svg2android把svg文件转换为Android Drawable文件，把导出文件放到drawable目录下。

3.使用矢量图示例

<ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/vector_drawable_heart" />

目前这种做法只支持Android5.0+，如果想在Android5.0以下正常运行还要做如下兼容处理。

三、VectorDrawable兼容库

1、引入兼容库

compile 'com.android.support:appcompat-v7:23.3.0'

2.ImageView改为使用support库的AppCompatImageView，使用app:srcCompat替换android:src。

<android.support.v7.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/vector_drawable_heart" />

四、为矢量图片添加动画（AnimatedVectorDrawable）

AnimatedVectorDrawable可以让VectorDrawable加上动画效果。

1、VectorDrawable文件，根节点为<vector>的xml文件，矢量图。
2、AnimatedVectorDrawable文件，根节点为<animated-vector>的xml文件，矢量图动画定义文件。
3、一个或多个属性动画文件。

1、矢量图文件android.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="500" android:viewportHeight="500" android:width="500px" android:height="500px">
    <group android:name="android">
        <group android:name="head_eyes">
            <path  android:name="head" android:fillColor="#9FBF3B" android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
            <path  android:name="left_eye" android:fillColor="#FFFFFF" android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
            <path  android:name="right_eye" android:fillColor="#FFFFFF" android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
        </group>
        <group android:name="arms">
            <path  android:name="left_arm" android:fillColor="#9FBF3B" android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
            <path  android:name="right_arm" android:fillColor="#9FBF3B" android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
        </group>
        <path  android:name="body" android:fillColor="#9FBF3B" android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
    </group>
</vector>

2、动画animated_android.xml文件

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android">

    <target  android:animation="@animator/shrug" android:name="head_eyes" />

    <target  android:animation="@animator/shrug" android:name="arms" />
</animated-vector>

3、属性动画shrug.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator  android:propertyName="translateY" android:valueType="floatType" android:valueFrom="0" android:valueTo="-10" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" />
</set>

使用分为两种：
1、布局文件中使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".VectorDrawablesActivity">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/animated_android"
        android:contentDescription="@null" />

</RelativeLayout>

2、代码中使用
使用AnimatedVectorDrawableCompat.create方法加载AnimatedVectorDrawable文件得到AnimatedVectorDrawable对象。

AnimatedVectorDrawableCompat是support库中的类，作用是使AnimatedVectorDrawable兼容Android5.0以下系统。

image1 = (AppCompatImageView) findViewById(R.id.image1);
AnimatedVectorDrawableCompat animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.animated_android);
image1.setImageDrawable(animatedVectorDrawable);
addClickAnimationListener(image1);

注意：目前AnimatedVectorDrawableCompat在Android5.0以下不支持pathData类型属性动画。如果需要用到pathData类型属性动画可以通过以下方法做兼容处理。

1、使用api标识符适配不同版本的系统，在drawable和drawable-v21目录下定义不同的实现。
2、代码中作兼容处理

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
    // 在android5.0+下执行下面代码
}

3、使用vector-compat，VectorDrawable和AnimatedVectorDrawable的一个兼容库。关于vector-compat这个开源库下面会说到。

五、相关开源项目

vector-compat

VectorDrawable和AnimatedVectorDrawable的一个兼容库，目前支持api 14+。

Github地址：https://github.com/wnafee/vector-compat

AndroidSVG

AndroidSVG是Android下的SVG解析、渲染库。目前几乎完全支持SVG 1.1的静态可视元素和SVG 1.2小部分规范(filters除外)。支持API 8+。

Github地址：https://github.com/BigBadaboom/androidsvg
官网：http://bigbadaboom.github.io/androidsvg/

android-pathview

android-pathview是绘制路径的动画库，路径可来自于svg或者标准Paths，使svg或path具有动画效果，并且可以改变路径的颜色、宽度。

Github地址：https://github.com/geftimov/android-pathview

vectalign

Android4.4以后AnimatedVectorDrawable可以让两个SVG图像无缝过渡（称为变形动画），但是这两个svg图像的path必须参数个数要相等，同时这些参数的类型要匹配（也就是说格式要对齐），如果不对齐会产生异常。简单的path可以手动修改对齐，但是复杂点的就比较难了。这个工具就是通过命令行的方式将任意两个svg资源转换成对齐的模式，而不会改变原始图像的外观。

Githu地址：https://github.com/bonnyfone/vectalign

六、素材分享
免费矢量icon分享网站，有十几万个矢量icon

http://www.flaticon.com

8000个已分类好的扁平化图标(PNG/SVG/WEBFONT)

http://www.shejidaren.com/8000-flat-icons.html

原文链接：Andrid5.0新特性——SVG（可缩放矢量图形）