android中drawable资源的解释及例子
文章中的内容参考Dev Guide中的Drawable Resources，英文好的朋友可以直接去读英文。总结这篇文章的目的是自己在使用drawable资源遇到一些问题跟大家分享下，同时整理下自己对drawable的理解。
drawable资源共有10种，包括Bitmap文件、Nine-Path文件、Layer List、State List、Level list、Transition Drawable、Inset Drawable、Clip Drawable、Scale Drawable、Shape Drawable。下面分别介绍下各种文件的用法和其中主要属性的作用：
一、Bitmap文件：就是普通的jpg、png和gif图片文件；
二、Nine-Path文件：以.9.png结尾的图片文件，其中图片中有够伸缩的区域，可以根据内容改变图片大小。在android sdk的tools目录下有一个draw9patch.bat可以制作9.png图片；
三、Layer List： 可以用于把多张图片组合成一张图片，例如：
<bitmap android:src="@drawable/android_red"
android:gravity="center" />
<bitmap android:src="@drawable/android_green"
android:gravity="center" />
<bitmap android:src="@drawable/android_blue"
android:gravity="center" />
四、State List：作用是在相同的图形中展示不同的图片，比如ListView中的子项背景，可以设置点击时是一种背景，没有焦点时是另一种背景。例如：
<selector xmlns:android="/apk/res/android"
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_hovered=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_window_focused=["true" | "false"] />
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" />
<item android:state_focused="true"
android:drawable="@drawable/button_focused" />
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" />
五、Level list：可以通过程序imageView.getDrawable().setImageLevel(value)来设置需要在ImageView中显示的图片（在xml中声明的图片）。例子：
android:drawable="@drawable/status_off"
android:maxLevel="0" />
android:drawable="@drawable/status_on"
android:maxLevel="1" />
可以在程序中设置imageView.getDrawable().setImageLevel(0)或imageView.getDrawable().setImageLevel(1)来切换图片。
六、Transition Drawable：可以通过调用startTransition()和reverseTransition()实现两张图片的切换。例子：
XML文件存放在res/drawable/transition.xml
在XML中的引用：
<ImageButton
android:id="@&#43;id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/transition" />
在程序中的使用
ImageButton button = (ImageButton) findViewById(R.id.button);TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();drawable.startTransition(500);
七、Inset Drawable：用于通过指定的间距把图片插入到XML中，它在View需要比自身小的背景时常用。有些像padding的作用。例子：
第一步：drawable文件中建立inset_drawable.xml
xmlns:android="/apk/res/android"
android:drawable="@drawable/photo2"
android:insetTop="100dp"
android:insetRight="100dp"
android:insetBottom="200dp"
android:insetLeft="100dp" />
第二部，在xml中引用
<LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/inset_drawable">
八、Clip Drawable：可以剪载图片显示，例如，可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。其中的gravity设置从整个部件的哪里开始。例子：
第一步，在drawable文件中建立：clip_drawable.xml
<clip xmlns:android="/apk/res/android"
android:drawable="@drawable/test_img"
android:clipOrientation="horizontal"
android:gravity="left" />
第二步，在ImageView中引用：
<LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@&#43;id/clipimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/clip_drawable"/>
Dev Guide中在ImageView中设置的是android:background="@drawable/clip_drawable"，但是我使用background的时，会在程序中报空指针的错误。
最后，使用程序控制：
ImageView imageView=(ImageView)findViewById(R.id.clipimage);
ClipDrawable clipDrawable=(ClipDrawable)imageView.getDrawable();
clipDrawable.setLevel(5000);
level的&#20540;为0到10000 。当&#20540;为10000时图全部显示。
九、Scale Drawable：在原图的基础上改变图片的大小。例子：
第一步：drawable文件中建立scale_drawable.xml
<scale xmlns:android="/apk/res/android"
android:drawable="@drawable/test_img"
android:scaleGravity="center_vertical|center_horizontal"
android:scaleHeight="50%"
android:scaleWidth="80%" />
第二步：在xml中引用
第三步，在程序中设置level
ImageView scaleImage=(ImageView)findViewById(R.id.scaleimage);
ScaleDrawable scale=(ScaleDrawable)scaleImage.getDrawable();
scale.setLevel(10000);
这里设置level为10000表示可以整个显示图片。
十、Shape Drawable：在xml中定义图形。可以自定义一个图形，包括边框、渐变、圆角等。例子：
第一步：shape_drawable.xml
<shape xmlns:android="/apk/res/android"
android:shape="rectangle">
android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="45"/>
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
android:radius="8dp" />
第二步：xml中引用
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'后使用快捷导航没有帐号？
只需一步，快速开始
查看: 31891|回复: 730
在线时间0 小时经验值147 最后登录注册时间帖子阅读权限40UID
高中生, 积分 147, 距离下一级还需 53 积分
TA的每日心情开心 09:37签到天数: 22 天[LV.4]偶尔看看III
G币103 最后登录注册时间
马上注册，结交更多机友，下载更多应用，让你轻松玩转手机。
已有帐号？　　　下载游戏和软件，请【】进入机锋市场！
本帖最后由 鹰雪CJ 于
20:02 编辑
[ 本帖最后由 淡写佳华 于
20:52 编辑 ]\n\n在android 5.0和更高版本中，可以创建矢量的drawable，在缩放的时候不会失真。你只需要定义一个矢量图片文件，相反的，使用bitmap位图则需要针对不同的分辨率创建多个文件，很麻烦。那么创建一个矢量图片，你需要用一些命令及代码详细描述图形的轨迹。下面的代码（网上查阅，非本人原创）在imageView显示为一个心形矢量图（也是网上截图）。图片镇楼
&!-- res/drawable/heart.xml --&
&vector xmlns:android=&/apk/res/android&& & android:height=&256.0dip&& & android:width=&256.0dip&& & android:viewportWidth=&32&& & android:viewportHeight=&32&&
&path android:fillColor=&#ffff8fff&& && &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&/&
& &看着这么复杂神奇的代码，好奇之下，于是我从网上搜索查看整理了相关语法教程已打包成附件，希望我的这个教程能大家搞机起一些帮助，欢迎各位机友加入 安卓手机美化群进行交流学习，我就是小件，小件就是太极，由于本人超喜欢太极，故此自己研究了很久，用代码写了本人最爱的八卦太极阵，效果如下图
09:52 上传
19:56 上传
19:56 上传
19:55 上传
语法教程附件：
(26.35 KB)
09:55 上传
点击文件名下载附件
下载积分: G币 -1
& && && & 完美版八卦太极阵代码附件：
(1020 Bytes)
19:57 上传
点击文件名下载附件
下载积分: G币 -1
<p id="rate_92545" onmouseover="showTip(this)" tip="赞一个!&经验值 + 4
" class="mtn mbn">
在线时间0 小时经验值147 最后登录注册时间帖子阅读权限40UID
高中生, 积分 147, 距离下一级还需 53 积分
TA的每日心情开心 09:37签到天数: 22 天[LV.4]偶尔看看III
G币103 最后登录注册时间
本帖最后由 鹰雪CJ 于
16:25 编辑
沙发 这是我用代码做的太极机器人及太极阵
23:07 上传
16:23 上传
在线时间0 小时经验值325 最后登录注册时间帖子阅读权限1UID
头像被屏蔽
该用户从未签到
G币5 最后登录注册时间
提示: 作者被禁止或删除 内容自动屏蔽
在线时间0 小时经验值147 最后登录注册时间帖子阅读权限40UID
高中生, 积分 147, 距离下一级还需 53 积分
TA的每日心情开心 09:37签到天数: 22 天[LV.4]偶尔看看III
G币103 最后登录注册时间
求美化版主隐藏附件
在线时间0 小时经验值501 最后登录注册时间帖子阅读权限1UID
头像被屏蔽
该用户从未签到
G币50 最后登录注册时间
提示: 作者被禁止或删除 内容自动屏蔽
在线时间155 小时经验值6796 最后登录注册时间帖子阅读权限100UID4792545
TA的每日心情慵懒 14:39签到天数: 12 天[LV.3]偶尔看看II
G币13585 最后登录注册时间
如何使用Android的VectorDrawable类绘制矢量图
尽管Android系统并不能够直接支持SVG（即可缩放矢量图形），但Lollipop版本却引入了一个名为VectorDrawable的新类，其允许设计人员及开发人员以纯代码方式生成类似的绘制效果。
绘制矢量图形非难事——如何使用Android的VectorDrawable类
尽管Android系统并不能够直接支持SVG（即可缩放矢量图形），但Lollipop版本却引入了一个名为VectorDrawable的新类，其允许设计人员及开发人员以纯代码方式生成类似的绘制效果。
在今天的文章中，我们将共同学习如何利用XML文件创建一个VectorDrawable，并将其以动画方式显示在自己的项目当中。这项功能只能在运行有Android 5.0或者更高版本的设备上实现，而且目前还不具备任何支持库实现。
1. 创建Vector Drawable
从相似角度来看，VectorDrawable与标准SVG图形都是利用path值绘制完成的。不过如何利用SVG path绘制图形并不在本篇文章的探讨范围之内，大家可以点击此处从W3C网站处获取必要的说明资料。在本文当中，我们只需要了解到path标签的作用是进行图形绘制即可。让我们首先从SVG文件入手，看看以下图形是如何被绘制出来的：
这一图形共由五个主要部分所组成：
?一个圆角四边形作为CPU主体，该四边形由两条拱状弧线构成。
?四组各自包含五根线条的图形，用于充当CPU的外延线路。
以下代码所示为如何以SVG方式绘制以上图形：
&?xml version=&1.0& encoding=&utf-8&?&
&!DOCTYPE svg PUBLIC &-//W3C//DTD SVG 1.1//EN& &http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&&
&svg version=&1.1& xmlns=&http://www.w3.org/2000/svg& xmlns:xlink=&http://www.w3.org/1999/xlink& x=&0px& y=&0px&
& &&&width=&512px& height=&512px& viewBox=&0 0 512 512& style=&enable-background:new 0 0 512 512;& xml:space=&preserve&&
&path id=&cpu& d=&
& & M341.087,157.478c7.417,0,13.435,6.018,13.435,13.435v170.174 c0,7.417-6.018,13.435-13.435,13.435H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913 c0-7.417,6.018-13.435,13.435-13.435H341.087z
& & M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785 0,35.826-16.041,35.826-35.826V157.478z
& & M193.304,408.261V462h-17.913 v-53.739H193.304z
& & M264.957,408.261V462h-17.914v-53.739H264.957z
& & M300.783,408.261V462h-17.914v-53.739H300.783z
& & M229.13,408.261 V462h-17.913v-53.739H229.13z
& & M336.609,408.261V462h-17.914v-53.739H336.609z
& & M193.304,50v53.739h-17.913V50H193.304z
& & M264.957,50 v53.739h-17.914V50H264.957z
& & M300.783,50v53.739h-17.914V50H300.783z
& & M229.13,50v53.739h-17.913V50H229.13z
& & M336.609,50v53.739 h-17.914V50H336.609z
& & M408.261,318.695H462v17.914h-53.739V318.695z
& & M408.261,247.043H462v17.914h-53.739V247.043z
& & M408.261,211.217 H462v17.913h-53.739V211.217z
& & M408.261,282.869H462v17.914h-53.739V282.869z
& & M408.261,175.391H462v17.913h-53.739V175.391z
& & M50,318.695h53.739v17.914H50V318.695z
& & M50,247.043h53.739v17.914H50V247.043z
& & M50,211.217h53.739v17.913H50V211.217z
& & M50,282.869 h53.739v17.914H50V282.869z
& & M50,175.391h53.739v17.913H50V175.391z& /&
虽然看起来有点繁杂，但大家其实用不着纠结于以上代码的具体含义，而且这完全不会影响到我们接下来要进行的VectorDrawable绘制工作。不过需要强调的是，我将前面提到的五大图形组成部分在代码中作为独立的区块来处理，这是为了增强代码内容的可读性。
首先，我们需要利用两条拱形弧线来绘制出圆角四边形，而在接下来的内容中我们会探讨如何分别表现出上、下、左、右四个方位的外延线条。为了将上述SVG代码转化为VectorDrawable，大家首先需要在XML当中定义vector对象。以下代码提取自本篇文章示例代码当中的vector_drawable_cpu.xml文件。
&vector xmlns:android=&/apk/res/android&
& & android:height=&64dp&
& & android:width=&64dp&
& & android:viewportHeight=&600&
& & android:viewportWidth=&600& &
在此之后，大家可以向其中添加path数据。下列代码同样被拆分成了五个不同的path标签而非将其作为整体处理，这当然也是为了保证内容的可读性。
&vector xmlns:android=&/apk/res/android&
& & android:height=&64dp&
& & android:width=&64dp&
& & android:viewportHeight=&600&
& & android:viewportWidth=&600& &
& && &&&&path
& && && && &android:name=&cpu&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && && & M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z
& && && && && & M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z&
& && &&&/&
& && &&&&path
& && && && &android:name=&wires_bottom&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && && & M193.304,408.261V462h-17.913 v-53.739H193.304z
& && && && && & M264.957,408.261V462h-17.914v-53.739H264.957z
& && && && && & M300.783,408.261V462h-17.914v-53.739H300.783z
& && && && && & M229.13,408.261 V462h-17.913v-53.739H229.13z
& && && && && & M336.609,408.261V462h-17.914v-53.739H336.609z&
& && &&&/&
& && &&&&path
& && && && &android:name=&wires_top&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && && & M193.304,50v53.739h-17.913V50H193.304z
& && && && && & M264.957,50 v53.739h-17.914V50H264.957z
& && && && && & M300.783,50v53.739h-17.914V50H300.783z
& && && && && & M229.13,50v53.739h-17.913V50H229.13z
& && && && && & M336.609,50v53.739 h-17.914V50H336.609z&
& && &&&/&
& && &&&&path
& && && && &android:name=&wires_right&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && && & M408.261,318.695H462v17.914h-53.739V318.695z
& && && && && & M408.261,247.043H462v17.914h-53.739V247.043z
& && && && && & M408.261,211.217 H462v17.913h-53.739V211.217z
& && && && && & M408.261,282.869H462v17.914h-53.739V282.869z
& && && && && & M408.261,175.391H462v17.913h-53.739V175.391z&
& && &&&/&
& && &&&&path
& && && && &android:name=&wires_left&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && && & M50,318.695h53.739v17.914H50V318.695z
& && && && && & M50,247.043h53.739v17.914H50V247.043z
& && && && && & M50,211.217h53.739v17.913H50V211.217z
& && && && && & M50,282.869 h53.739v17.914H50V282.869z
& && && && && & M50,175.391h53.739v17.913H50V175.391z&
& && &&&/&
正如大家所见，每个path片段都只需要利用pathData属性进行绘制。现在我们可以将VectorDrawable XML文件作为一个可绘制对象纳入到标准ImageView当中，而且其能够根据应用程序的实际需要任意进行尺寸缩放——完全不需要再修改任何Java代码。
2. 为Vector Drawables添加动画效果
现在我们已经了解了如何以纯代码方式创建图形，接下来要做的是找点乐子——为其添加动画效果。在以下动画中，大家会发现作为延伸线路的各组线条会不断指向并远离CPU本体进行移动。
为了达到这一目标，大家需要将包含动画效果的每个片段包含在一个&group&标签当中。经过修改的vector_drawable_cpu.xml版本将如下所示：
&vector xmlns:android=&/apk/res/android&
& & android:height=&64dp&
& & android:width=&64dp&
& & android:viewportHeight=&600&
& & android:viewportWidth=&600& &
& & &group
& && &&&android:name=&cpu_box&&
& && &&&&path
& && && && &android:name=&cpu&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && && && &M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z
& && && && &M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z &/&
& & &/group&
& & &group
& && &&&android:name=&bottom&&
& && &&&&path
& && && && &android:name=&wires_bottom&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && &&&M193.304,408.261V462h-17.913 v-53.739H193.304z
& && &&&M264.957,408.261V462h-17.914v-53.739H264.957z
& && &&&M300.783,408.261V462h-17.914v-53.739H300.783z
& && &&&M229.13,408.261 V462h-17.913v-53.739H229.13z
& && &&&M336.609,408.261V462h-17.914v-53.739H336.609z& /&
& & &/group&
& & &group android:name=&top&&
& && &&&&path
& && && && &android:name=&wires_top&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && &&&M193.304,50v53.739h-17.913V50H193.304z
& && &&&M264.957,50 v53.739h-17.914V50H264.957z
& && &&&M300.783,50v53.739h-17.914V50H300.783z
& && &&&M229.13,50v53.739h-17.913V50H229.13z
& && &&&M336.609,50v53.739 h-17.914V50H336.609z & /&
& & &/group&
& & &group android:name=&right&&
& && &&&&path
& && && && &android:name=&wires_right&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && &&&M408.261,318.695H462v17.914h-53.739V318.695z
& && &&&M408.261,247.043H462v17.914h-53.739V247.043z
& && &&&M408.261,211.217 H462v17.913h-53.739V211.217z
& && &&&M408.261,282.869H462v17.914h-53.739V282.869z
& && &&&M408.261,175.391H462v17.913h-53.739V175.391z& /&
& & &/group&
& & &group android:name=&left&&
& && &&&&path
& && && && &android:name=&wires_left&
& && && && &android:fillColor=&#000000&
& && && && &android:pathData=&
& && &&&M50,318.695h53.739v17.914H50V318.695z
& && &&&M50,247.043h53.739v17.914H50V247.043z
& && &&&M50,211.217h53.739v17.913H50V211.217z
& && &&&M50,282.869 h53.739v17.914H50V282.869z
& && &&&M50,175.391h53.739v17.913H50V175.391z& /&
& & &/group&
接下来，我们需要为每个动画类型创建animator文件。在本次示例中，每组线路各使用一个animator，这就意味着共需要四个animator。以下代码所示为上方线路的动画效果，大家还需要为下、左、右线路设定类似的效果。每个animator XML文件都被包含在了本项目的示例代码当中。
&?xml version=&1.0& encoding=&utf-8&?&
&set xmlns:android=&/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& /&
如大家所见，propertyName被设定为translateY，这意味着该动画将沿Y轴方向移动。而valueFrom与valueTo则控制着位移的起点与终点。通过将repeatMode设置为reverse而repeatCount设置为infinite，整个动画会一直循环下去，其效果则在VectorDrawable处体现出来。该动画的duration被设定为250，其时长单位为毫秒。
为了将该动画应用到自己的可绘制文件当中，大家需要创建一个新的animated-vector XML文件，从而将这些animator分配给各VectorDrawable组。以下代码的作用是创建该animated_cpu.xml文件。
&?xml version=&1.0& encoding=&utf-8&?&
&animated-vector xmlns:android=&/apk/res/android&
& & android:drawable=&@drawable/vector_drawable_cpu&&
& & &target
& && &&&android:animation=&@animator/pulse_top&
& && &&&android:name=&top& /&
& & &target
& && &&&android:animation=&@animator/pulse_right&
& && &&&android:name=&right& /&
& & &target
& && &&&android:animation=&@animator/pulse_left&
& && &&&android:name=&left& /&
& & &target
& && &&&android:animation=&@animator/pulse_bottom&
& && &&&android:name=&bottom& /&
&/animated-vector&
当所有必要的XML文件都已经准备完成后，大家就可以将animated_cpu.xml加入到ImageView当中进行显示了。
&ImageView
& & android:id=&@+id/cpu&
& & android:layout_width=&64dp&
& & android:layout_height=&64dp&
& & android:src=&@drawable/animated_cpu& /&
要开始播放动画效果，大家需要从ImageView当中获取Animatable实例并调用start。
ImageView mCpuImageView = (ImageView) findViewById( R.id.cpu );
Drawable drawable = mCpuImageView.getDrawable();
if (drawable instanceof Animatable) {
& & ((Animatable) drawable).start();
在start被调用之后，CPU图形当中的线路图形就会开始移动——整个过程只需要使用少量Java代码即可实现。
3. Vector Drawables的变化方式
对于VectorDrawable来说，最常见的一种使用方式就是将一个图形转化至另一个图形，例如操作栏中的图标由汉堡变成箭头。要做到这一点，源与目标path二者都必须具备同样的格式以保证元素数量上的一致。在本次示例中，我们将如前文图片所示尝试将左箭头转化为右箭头。
&string name=&left_arrow&&M300,70 l 0,70 -70,-70 0,0 70,-70z&/string&
&string name=&right_arrow&&M300,70 l 0,-70 70,70 0,0 -70,70z&/string&
接下来，大家需要利用path为left_arrow建立一个初始drawable。在示例代码中，我们将其命名为vector_drawable_left_arrow.xml。
&vector xmlns:android=&/apk/res/android&
& &android:height=&64dp&
& &android:width=&64dp&
& &android:viewportHeight=&600&
& &android:viewportWidth=&600& &
& && & android:name=&left_arrow&
& && & android:fillColor=&#000000&
& && & android:pathData=&@string/left_arrow&/&
CPU动画与这里提到的图形变化示例之间，最主要的区别就体现在animator_left_right_arrow.xml文件当中。
&?xml version=&1.0& encoding=&utf-8&?&
&set xmlns:android=&/apk/res/android&&
& & &objectAnimator
& && &&&android:duration=&1000&
& && &&&android:propertyName=&pathData&
& && &&&android:valueFrom=&@string/left_arrow&
& && &&&android:valueTo=&@string/right_arrow&
& && &&&android:valueType=&pathType&
& && &&&android:repeatMode=&reverse&
& && &&&android:repeatCount=&-1&/&
大家可能已经注意到了，valueFrom与valueTo两项属性会引用左箭头与右箭头的path数据，valueType被设定为pathType而propertyName则被设定为pathData。当以上设定完成之后，该animator将明确如何将一组path数据转化为另一组。当该animator结束之后，我们还需要利用新的animated-vector对象将VectorDrawable分配至objectAnimator。
&?xml version=&1.0& encoding=&utf-8&?&
&animated-vector xmlns:android=&/apk/res/android&
& & android:drawable=&@drawable/vector_drawable_left_arrow&&
& & &target
& && &&&android:name=&left_arrow&
& && &&&android:animation=&@animator/animator_left_right_arrows& /&
&/animated-vector&
最后，大家还需要将该动画drawable分配至ImageView，而后在自己的Java代码中开始运行。
&ImageView&&
& & android:id=&@+id/left_right_arrow&&&
& & android:layout_width=&64dp&&&
& & android:layout_height=&64dp&&&
& & android:layout_below=&@+id/cpu&&&
& & android:src=&@drawable/animated_arrow& /&&&
mArrowImageView = (ImageView) findViewById( R.id.left_right_arrow );&&
drawable = mArrowImageView.getDrawable();&&
if (drawable instanceof Animatable) {&&
& & ((Animatable) drawable).start();&&
正如大家所见，VectorDrawable类非常易于使用而且允许开发者以自定义方式实现大量简单的动画效果。尽管VectorDrawable类目前只适用于运行有Android 5.0以及更高版本的设备，但随着更多设备开始支持Lollipop及其后续Android版本，其必将发挥更为重要的作用。
在线时间0 小时经验值147 最后登录注册时间帖子阅读权限40UID
高中生, 积分 147, 距离下一级还需 53 积分
TA的每日心情开心 09:37签到天数: 22 天[LV.4]偶尔看看III
G币103 最后登录注册时间
淡写佳华 发表于
如何使用Android的VectorDrawable类绘制矢量图
尽管Android系统并不能够直接支持SVG（即可缩放矢量图形） ...
非常感谢版主的这么详细的知识补充
在线时间11 小时经验值23244 最后登录注册时间帖子阅读权限190UID7681316
TA的每日心情怒 20:10签到天数: 1052 天[LV.10]以坛为家III
G币9334 最后登录注册时间
在线时间0 小时经验值1146 最后登录注册时间帖子阅读权限80UID
研究生, 积分 1146, 距离下一级还需 554 积分
TA的每日心情无聊 10:25签到天数: 81 天[LV.6]常住居民II
G币510 最后登录注册时间
赞赞的~感谢分享~~
在线时间0 小时经验值284 最后登录注册时间帖子阅读权限50UID
大学专科, 积分 284, 距离下一级还需 116 积分
TA的每日心情奋斗 12:58签到天数: 1 天[LV.1]初来乍到
G币0 最后登录注册时间
guieafguyg个 hoe也可好
Powered by