18396人阅读
Android（49）
VectorDrawable
Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源，也就是矢量图。在xml文件中的标签是&vector&，下面是一个例子
xmlns:android="/apk/res/android"
&!-- intrinsic size of the drawable --&
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" /&
这样就定义好了一个静态的矢量图，可以像一般的图片资源使用，设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签，一个path代表一个元素，绘制的内容是pathData下的一长串字符，里面是SVG绘制的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作对应起来，具体可以查看，后面会简要说明一下。
VectorDrawable定义的是一张静态图，还有一个类AnimatedVectorDrawable，可以让矢量图有动画效果。一般需要三个步骤：
定义VectorDrawable
xmlns:android="/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600" &
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" &
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /&
定义AnimatedVectorDrawable，给上面矢量图的元素添加动画
xmlns:android="/apk/res/android"
android:drawable="@drawable/vectordrawable" &
android:name="rotationGroup"
android:animation="@anim/rotation" /&
android:name="v"
android:animation="@anim/path_morph" /&
定义动画文件
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" /&
xmlns:android="/apk/res/android"&
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0
android:valueTo="M300,70 l 0,-70 70,0
0,140 -70,0 z"
android:valueType="pathType"/&
由于矢量图的特点，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这个属性做动画。最初的设计，照着实现一下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：439356次
积分：4397
积分：4397
排名：第4373名
原创：82篇
评论：207条
文章：10篇
阅读：89557
(7)(1)(1)(5)(4)(1)(1)(3)(2)(5)(3)(2)(2)(2)(3)(6)(1)(2)(3)(3)(3)(1)(5)(2)(5)(5)(3)(2)(2)(4)(2)(4)Android矢量图之VectorDrawable类自由填充色彩
作者：iGoach
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Android矢量图之VectorDrawable类自由填充色彩的相关资料，感兴趣的小伙伴们可以参考一下
日的I/O 2014开发者大会上谷歌正式推出了Android L，它带来了全新的设计语言Material Design，新的API也提供了这个类VectorDrawable 。也就是android支持SVG类型的资源也就是矢量图。想到矢量图，自然就会想到位图，何为矢量图，何为位图？先来说说位图吧，我们经常用的png，jpg就是位图了，他是由一个单元一个单元的像素组成的。当小icon遇到大屏幕手机的时候，icon如果被撑开那就是马赛克一样啦。这可不是我们想要的。而矢量图正式和它相反。矢量图是由点，线，矩形，圆，弧线等组成的，它不会失真，而且减小文件的存储空间。学会了，一些简单的icon，我们自己来画，而且更美观，符合Material Design设计，何乐而不为。
说了那么多，还是来看看官网怎么描述的：
在xml定义&vector&标签画出自己的矢量图。
就是这样简单的一句话。
&vector& 包含很多元素来帮助我们画出自己的矢量图，下面，我们就来写两个个例子来使用它们。这里就直接拿官网的例子来学习了。
1. 画一个三角形，如下图。
我们先来定义下vectordrawable.xml ：
&vector xmlns:android="/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600" &
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" &
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /&
基本结构就是这样，我们可以看到他有两个宽高度描述， android:height和android:height支持所有的尺寸单元，一般我们用dp，它指的是矢量图的宽高大小。android:viewportWidth和 android:viewportHeight可以理解为在64dp里面取600个点做为坐标来绘制下面的图形。然后我们可以看到&group&标签，它主要是为下面path绘制的整体部分进行一些操作，比如这里的以轴心（300,300）对它逆时针偏移45度，或者可以通过&group&标签name属性来对它进行动画操作等等。android:pivotX和android:pivotY指的就是轴心x，y轴。有了外面的整体结构，接下来就是通过&path& 标签进行整体的绘制命令。首先是path的名字，有了这个名字我们就可以指向哪个path动画。android:fillColor指的是封闭图形块具体的颜色。然后android:pathData指的就是一些绘制命令。结合下面图来学习绘制命令：
大写绝对小写相对参数加逗号，和canvas绘制差不多。解释下最后一个A， rx和ry指的是以（x，y）为轴心的x轴和y轴的半径，x-rotation指的是x轴旋转角度，large-arc-flag 为0时表示取小弧度，1时取大弧度，sweep-flag 0取逆时针方向，1取顺时针方向 。结合下面图来理解
这里以large-arc-flag=0，sweep-flag=0来写一个path看看真正效果： 代码如下：
android:name="v"
android:strokeColor="#000000"
android:strokeWidth="2"
android:pathData="A 10 10 0 0 0 100 200"
产生的效果图：
是和上面说的一样吧！
2. 画一个心型，如下图。
代码如下：
&?xml version="1.0" encoding="utf-8"?&
&vector xmlns:android="/apk/res/android"
android:height="256dp"
android:width="256dp"
android:viewportWidth="32"
android:viewportHeight="32"&
&!-- draw a path --&
&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" /&
和上面类似，主要是android:pathData改变了。从（20.5,9.5）开始，然后就是后面画贝塞尔曲线，相对起点水平左移1.955，垂直不移动确定一个点，然后相对起点水平左移动-3.83，垂直往下移动1.268确定一个点，再相对起点水平左移4.5，垂直往下移动3确定一个点，通过这三个点画贝塞尔曲线，往下的类似原理。
ps： 一些简单的命令我们是知道了，那么svg这么多命令，android里面这么多icon，总不能让自己画吧，我们怎么去学习这些命令，去画这些icon呢。还好学习命令我们可以用android:path规则 ，画icon的pathData数据 。这样我们就可以画出自己想要的数据来了。
怎么用在ImageView的背景上面呢？很简单，来看下面的代码：
activity_main.xml
&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="/apk/res-auto"&
&ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/vectordrawable" /&
&/LinearLayout&
这样效果是不是可以看到了呢，运行下，效果如上面心型，然后试着去改下他的大小，其实他不会变形的。
矢量图动画AnimatedVectorDrawable
我们还是以官网demo来测试。
新建一个xml文件vector_drawable.xml，放在drawable里面，代码如下：
&vector xmlns:android="/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600" &
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" &
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /&
然后新建一个xml文件vector_drawable_anim.xml,由于AnimatedVectorDrawable在support:appcompat-v7:23.3兼容到android L（5.0）以上。所以我们放置在drawable-v21文件夹下，代码如下：
&animated-vector xmlns:android="/apk/res/android"
android:drawable="@drawable/vector_drawable" &
android:name="rotationGroup"
android:animation="@anim/rotation" /&
android:name="v"
android:animation="@anim/path_morph" /&
&/animated-vector&
这里我们需要指定一个android:drawable,指向vector_drawable_anim.xml文件，然后根据group的name或者path的name进行动画设置。指定的动画分别为rotation和path_morph
新建rotation和path_morph两个动画放置在anim文件夹下，代码如下：
rotation.xml
&?xml version="1.0" encoding="utf-8"?&
&set xmlns:android="/apk/res/android"&
&objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" /&
path_morph.xml
&?xml version="1.0" encoding="utf-8"?&
&set xmlns:android="/apk/res/android"&
&objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType"/&
然后是5.0以下activity_main.xml,放置在layout下:
&LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="/apk/res-auto"&
&ImageView
android:id="@+id/image_view"
android:layout_width="400dp"
android:layout_height="400dp"
app:srcCompat="@drawable/vector_drawable"/&
&/LinearLayout&
然后是5.0以上activity_main.xml，放置在layout-v21文件夹下:
&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="/apk/res-auto"&
&ImageView
android:id="@+id/image_view"
android:layout_width="400dp"
android:layout_height="400dp"
app:srcCompat="@drawable/vector_drawable_anim" /&
&/LinearLayout&
最后MainActivity添加代码：
ImageView imageView = (ImageView) findViewById(R.id.image_view);
Drawable drawable = imageView.getDrawable();
//AnimatedVectorDrawableCompat实现了Animatable接口
if (drawable instanceof Animatable){
((Animatable) drawable).start();
然后我们运行在5.0以下是不带动画效果的。效果和上面三角形效果图一样，这里我们看下5.0以上的效果：
这样我们就实现了简单的动画。
参考文章：
源码下砸：
以上就是本文的全部内容，希望对大家学习Android软件编程有所帮助
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Android Studio support for VectorDrawable-[&...
方式一：扫一扫
支持各类二维码扫描软件
方式二：发一发
免费发送App到手机
看不清验证码不正确
该短信不收取任何费用
方式三：下一下
下载App观看
还有更多攻略和游戏礼包等着你
嵌入代码：
这个支持手机播放哦
专区热点·
大家都在看
手机看视频
宝贝陪你玩
畅游视频网页游戏YOYO手游
完美游戏台
网络视听许可证欢迎光临！
VectorDrawable不同分辨率的drawable资源
VectorDrawable不同分辨率的drawable资源
编辑日期： 字体：
一、VectorDrawable
在android5.0（API Level 21）中，我们可以使用矢量图：vector drawable,vector drawable的特点是它不会因为图像的缩放而失真。在安卓开发中也就意味着你不需要为不同分辨率的设备定义不同大小的图片资源，只需一个vector drawable就够了。在安卓中与vector drawable资源对应的类是VectorDrawable。要创建一个vector drawable，你需要在xml的的元素下定义好vector drawable的形状数据。
下面的例子定义了一个心形的vector drawable：
&!-- res/drawable/heart.xml --&
&vector xmlns:android="/apk/res/android"
&!-- intrinsic size of the drawable --&
android:height="256dp"
android:width="256dp"
&!-- size of the virtual canvas --&
android:viewportWidth="32"
android:viewportHeight="32"&
&!-- draw a path --&
&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" /&
12345678910111213141516171819
&!-- res/drawable/heart.xml --&&vector xmlns:android="/apk/res/android"
&!-- intrinsic size of the drawable --&
android:height="256dp"
android:width="256dp"
&!-- size of the virtual canvas --&
android:viewportWidth="32"
android:viewportHeight="32"&
&!-- draw a path --&
&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&
二、AnimatedVectorDrawable
AnimatedVectorDrawable可以让VectorDrawable动起来。
AnimatedVectorDrawable通过改变VectorDrawable的属性来让VectorDrawable呈现动画效果，其实现实际上是试用了属性动画。
通常定义一个AnimatedVectorDrawable需要以下三个xml文件：
1.vector drawable本身：res/drawable/中定义一个有元素的xml文件，参考上面对VectorDrawable的定义。
2.vector drawable的动画文件（Animated vector drawable）：res/drawable/中定义一个有元素的xml文件。
3.一个或者多个属性动画文件：res/drawable/中定义一个有元素的xml文件。
Animated vector drawable可以让和元素的属性动态变化。定义一组path或者子group，而元素定义需要绘制的路径。当你想让VectorDrawable呈现动画效果，在定义VectorDrawable的时候需要为group和path的android:name属性设置一个唯一的名字，以便在Animated vector drawable中找到它们。比如
其中这里最让人不解的是pathData里面的那些数字，正是这些数字让这个drawable呈现出心形。pathData指的是绘制一个图形所需要的路径信息，那么问题来了，我怎么知道该如何绘制呢？
w3c的文档中详细讲解了绘制的规则：http://www.w3.org/TR/SVG11/paths.html#PathData 。其实在svg格式的图像中也是使用这种规则，而且在安卓中android.graphics.Path api对路径的定义也差不多是这种规则。
虽然有对path 规则的绘制教程，但是要创造出现有安卓中各种图标的效果是很难的，要让VectorDrawable有实际价值，肯定不能让开发者去想办法实现这些图形的绘制，而是原本就有很多现成的图像可用，8000个已分类好的扁平化图标(PNG/SVG/WEBFONT) 从网上的搜索结果来看svg的图标是大有人在。
&!-- res/drawable/vectordrawable.xml --&
&vector xmlns:android="/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600"&
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" &
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /&
1234567891011121314151617
&!-- res/drawable/vectordrawable.xml --&&vector xmlns:android="/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600"&
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" &
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /&
&/group&&/vector&
其中group的android:name为rotationGroup而path的android:name为v。
在Animated vector drawable中就分别通过rotationGroup和v找到vector drawable的group和path：
&!-- res/drawable/animvectordrawable.xml --&
&animated-vector xmlns:android="/apk/res/android"
android:drawable="@drawable/vectordrawable" &
android:name="rotationGroup"
android:animation="@anim/rotation" /&
android:name="v"
android:animation="@anim/path_morph" /&
&/animated-vector&
12345678910
&!-- res/drawable/animvectordrawable.xml --&&animated-vector xmlns:android="/apk/res/android"
android:drawable="@drawable/vectordrawable" &
android:name="rotationGroup"
android:animation="@anim/rotation" /&
android:name="v"
android:animation="@anim/path_morph" /&&/animated-vector&
其中animation代表一个ObjectAnimator或者AnimatorSet ，在本例中，第一个animator将目标group旋转360度：
&!-- res/anim/rotation.xml --&
&objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" /&
&!-- res/anim/rotation.xml --&&objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" /&
第二个animator是将vector drawable的path元素从一个形状转变到另一个形状。但是这两个形状必须满足一定的条件：必须要有一致的命令（command）个数（逗号分割开的为命令），并且每个命令的参数个数也必须一致。
&!-- res/anim/path_morph.xml --&
&set xmlns:android="/apk/res/android"&
&objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0
android:valueTo="M300,70 l 0,-70 70,0
0,140 -70,0 z"
android:valueType="pathType" /&
&!-- res/anim/path_morph.xml --&&set xmlns:android="/apk/res/android"&
&objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0
android:valueTo="M300,70 l 0,-70 70,0
0,140 -70,0 z"
android:valueType="pathType" /&&/set&
本文固定链接:
转载请注明:
作者：leehom
本博客主要是把自己的经验记录于此，方便自己以后查阅及其他遇到类似问题的朋友参考。如果你有觉得不错的文章，可以注册会员发布文章或者邮箱发给我文章地址，谢谢！
如果觉得文章还不错，请麻烦点下广告，算是赞助下本站服务器费用，谢谢！
您可能还会对这些文章感兴趣！下次自动登录
关注移动互联网和移动APP开发工具、开发框架、测试工具、微信开发、Android源码、Android开源类库以及各种开源组件的IT科技网站
现在的位置:
vector-compat——支持VectorDrawable和AnimatedVectorDrawable的Android类库
vector-compat是一个支持Lollipop用引入的VectorDrawable和AnimatedVectorDrawable类的类库。
vector-compat是一个Android类库，支持在低于Lollipop的Android操作系统中使用Lollipop版本引入的VectorDrawable和AnimatedVectorDrawable类。实现图标的动画切换。
【上篇】【下篇】