Android(安卓)VectorDrawable与SVG

转载:http://blog.csdn.net/jjwwmlp456/article/details/40614919

Material Design系列

Android(Lollipop/5.0) Material Design(一) 简介

Android(Lollipop/5.0) Material Design(二) 入门指南

Android(Lollipop/5.0) Material Design(三) 使用Material主题

Android(Lollipop/5.0) Material Design(四) 创建列表和卡片

Android(Lollipop/5.0) Material Design(五) 定义阴影和裁剪View

Android(Lollipop/5.0) Material Design(六) 使用图片

Android(Lollipop/5.0) Material Design(七) 自定义动画

Android(Lollipop/5.0) Material Design(八) 保持兼容性

官网地址：https://developer.android.com/training/material/drawables.html

以下图片的功能能帮助你在app中实现Material设计：

·图片着色

·颜色提取

·矢量图片

Tint Drawable Resources 为图片资源染色

在Android 5.0(API级别21)及以上，你可以将图片和9-patch定义为掩饰透明度。你能使用颜色资源(如，?android:attr/colorPrimary)或主题属性来给它们上色。通常，你只需创建这些资源一次，且自动匹配你的主题为它们上色。

可以为BitmapDrawable和NinePatchDrawable 的对象使用setTint(int tint)进行染色。也可以在xml中定义android:tint和android:tintMode属性。

·关于setTint(int tint)的参数，可以是一个@color/下的属性，也可以是一个xml的selector,selector中的item是使用了数字的，如：

  xmlns:android="http://schemas.android.com/apk/res/android">    android:state_focused="true" android:color="@color/testcolor1"/>    android:state_pressed="true" android:state_enabled="false" android:color="@color/testcolor2" />    android:state_enabled="false" android:color="@color/testcolor3" />    android:color="@color/testcolor5"/>

·关于xml中定义属性，如：

<?xmlversion="1.0"encoding="utf-8"?>

<nine-patchxmlns:android="http://schemas.android.com/apk/res/android"

android:tint="@color/abc_primary_text_material_light"

android:tintMode="src_over"

... >

nine-patch>

Extract Prominent Colors from an Image 从图片抽取明显的颜色

在api21上的support-v7库中有一个android-support-v7-palette.jar，它能够让你从图片中抽取一些显眼的颜色：

Palette p = Palette.generate(Bitmap bitmap);

·鲜艳的 p.getVibrantColor(int defaultColor); ·鲜艳的黑暗 p.getDarkVibrantColor(int defaultColor); ·鲜艳的明亮 p.getLightVibrantColor(int defaultColor); ·柔和的 p.getMutedColor(int defaultColor); ·柔和的黑暗 p.getDarkMutedColor(int defaultColor); ·柔和的明亮 p.getLightMutedColor(int defaultColor); Palette.generate()，用于在后台线程中执行，如果在前台线程中创建Palette对象，那么可以使用Palette.generateAsync()。

Create Vector Drawables 创建矢量图片

在Android 5.0(API级别21)及以上可以创建矢量图片，如下面的例子可以绘制一个心形的矢量图：

    android:height="256dp"    android:width="256dp"        android:viewportWidth="32"    android:viewportHeight="32">     android:fillColor="#8fff"      android:pathData="M20.5,9.5                        c-1.955,0,-3.83,1.268,-4.5,3                        c-0.67,-1.732,-2.547,-3,-4.5,-3                        C8.957,9.5,7,11.432,7,14                        c0,3.53,3.793,6.257,9,11.5                        c5.207,-5.242,9,-7.97,9,-11.5                        C25,11.432,23.043,9.5,20.5,9.5z" />

矢量图片在Android中使用VectorDrawble对象与之对应。path的更多信息请见：http://www.w3.org/TR/SVG11/paths.html#PathData。

VectorDrawable

Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源，也就是矢量图。在xml文件中的标签是，下面是一个例子

<vector xmlns:android="http://schemas.android.com/apk/res/android"    -- intrinsic size of the drawable -->    android:height="256dp"    android:width="256dp"        android:viewportWidth="32"    android:viewportHeight="32">    <path android:fillColor="#8fff"      android:pathData="M20.5,9.5                        c-1.955,0,-3.83,1.268,-4.5,3                        c-0.67,-1.732,-2.547,-3,-4.5,-3                        C8.957,9.5,7,11.432,7,14                        c0,3.53,3.793,6.257,9,11.5                        c5.207,-5.242,9,-7.97,9,-11.5                        C25,11.432,23.043,9.5,20.5,9.5z" />vector>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样就定义好了一个静态的矢量图，可以像一般的图片资源使用，设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签，一个path代表一个元素，绘制的内容是pathData下的一长串字符，里面是SVG绘制的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作对应起来，具体可以查看SVG path Ref，后面会简要说明一下。
VectorDrawable定义的是一张静态图，还有一个类AnimatedVectorDrawable，可以让矢量图有动画效果。一般需要三个步骤：

定义VectorDrawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:height="64dp"     android:width="64dp"     android:viewportHeight="600"     android:viewportWidth="600" >     <group         android:name="rotationGroup"         android:pivotX="300.0"         android:pivotY="300.0"         android:rotation="45.0" >         <path             android:name="v"             android:fillColor="#000000"             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />     group> vector>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

定义AnimatedVectorDrawable，给上面矢量图的元素添加动画

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/vectordrawable" >     <target         android:name="rotationGroup"         android:animation="@anim/rotation" />     <target         android:name="v"         android:animation="@anim/path_morph" /> animated-vector>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

定义动画文件

<objectAnimator     android:duration="6000"     android:propertyName="rotation"     android:valueFrom="0"     android:valueTo="360" />1
2
3
4
5
1
2
3
4
5

<set xmlns:android="http://schemas.android.com/apk/res/android">     <objectAnimator         android:duration="3000"         android:propertyName="pathData"         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"         android:valueType="pathType"/> set>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

由于矢量图的特点，AnimatedVectorDawable可以实现一些很特别的效果，对VectorDrawable里的pathData做动画，可以从一个图形渐变到另一个图形，比如Material Design里的toolbar icon；对trimPathStart、trimPathEnd做动画，可以得到图形的绘制轨迹。

SVG Path Data

主要有以下一些命令

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

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开

命令详解：

M (x y) 移动到x,y
L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
Z，没有参数，连接起点和终点
C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
Q(x1 y1 x y)，控制点x1,y1，终点x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度，1时取大弧度
sweep-flag 0取逆时针方向，1取顺时针方向
有个图解：

应用

在github上看到一个VectorDrawable应用的例子，实现了一个动态效果的searchbar，原理就是对VectorDrawable trimPathStart这个属性做动画。最初的设计在这里，照着实现一下：

Reference

https://developer.android.com/training/material/drawables.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
http://www.w3.org/TR/SVG11/paths.html#PathData