如何使用Android的VectorDrawable类绘制矢量图绘制软件

Android中使用Vectors(2)绘制优美的路径动画
作者:SpikeKing
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了Android中使用Vectors(2)绘制优美的路径动画的相关资料,需要的朋友可以参考下
&随着互联网技术的不断进步,Android的Vector图像的时代已经到来. 在Google的最新支持库v23.2中, AppCompat类已经使用Vector图像, 使得AAR包减少9%, 大约70KB, 惠及所有高版本的应用. 当然我们也可以使用Vector, 瘦身应用. Vector图像是SVG格式在Android的表现形式. SVG图像适应屏幕, 图片较小, 还有很多优点, 参考.
关于Vectors的分析, 主要分为两节:
(1) 使用SVG图像瘦身应用, 参考.
(2) 绘制优美的路径动画, 参考.
本文是第二节, 关于Vector动画.
SDK Manager提示支持库更新
使用Vector动画主要有三个部分: Vector图像, 路径动画, Animated-Vector图像.
本文源码的
1. Vector图像
SVG格式的图片, 转换为Vector图像资源, 可以使用AS2.0的转换工具, 也可以是在线转换工具, 参考. 图像需要路径(path)样式, 便于绘制, 如
&vector xmlns:android="/apk/res/android"
android:width="256dp"
android:height="256dp"
android:viewportHeight="70"
android:viewportWidth="70"&
android:name="heart1"
android:pathData="..."
android:strokeColor="#E91E63"
android:strokeWidth="1"/&
android:name="heart2"
android:pathData="..."
android:strokeColor="#E91E63"
android:strokeWidth="1"/&
2. 路径动画
使用属性动画, 控制绘制状态.
&?xml version="1.0" encoding="utf-8"?&
&objectAnimator
xmlns:android="/apk/res/android"
android:duration="6000"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"/&
ObjectAnimator的trimPathEnd属性决定绘制path的数量, 其余部分不会绘制, 其取值区间是0到1. duration属性表示持续时间, 6000即6秒.
3. Animated-Vector图像
把Vector图像的路径(path), 应用于路径动画(objectAnimator), 控制绘制.
&animated-vector
xmlns:android="/apk/res/android"
android:drawable="@drawable/v_heard"&
android:name="heart1"
android:animation="@animator/heart_animator"/&
android:name="heart2"
android:animation="@animator/heart_animator"/&
&/animated-vector&
4. 显示动画
需要Android 5.0(21)以上版本, 才能使用Vector动画, 即AnimatedVectorDrawable类.
// 只支持5.0以上.
private void animateImage() {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.LOLLIPOP) {
// 获取动画效果
AnimatedVectorDrawable mAnimatedVectorDrawable = (AnimatedVectorDrawable)
ContextCompat.getDrawable(getApplication(), R.drawable.v_heard_animation);
mIvImageView.setImageDrawable(mAnimatedVectorDrawable);
if (mAnimatedVectorDrawable != null) {
mAnimatedVectorDrawable.start();
AnimatedVectorDrawable的start方法就是动画启动功能.
使用Vector动画比gif动画节省应用资源, 可以给用户更好的体验. 推荐一个有趣的SVG库.
以上所述是小编给大家介绍的Android中使用Vectors(2)绘制优美的路径动画,希望对大家有所帮助!
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具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& /&
二、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& /&
其中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&
其中animation代表一个ObjectAnimator或者AnimatorSet ,在本例中,第一个animator将目标group旋转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& /&
本文固定链接:
转载请注明:
作者:leehom
本博客主要是把自己的经验记录于此,方便自己以后查阅及其他遇到类似问题的朋友参考。如果你有觉得不错的文章,可以注册会员发布文章或者邮箱发给我文章地址,谢谢!
如果觉得文章还不错,请麻烦点下广告,算是赞助下本站服务器费用,谢谢!
您可能还会对这些文章感兴趣!VectorDrawable 详解
来源:open开发经验库
Android 5.0系统中引入了
来支持矢量图(SVG),同时还引入了
来支持矢量图动画。但是一年半过去了,使用矢量图的应用还是比较少,主要原因之一是兼容性问题,在 5.0 之前的版本上还是要使用 png 或者 jpg 图片。现在 随着 Android Studio 和 Gradle plugin 的功能进一步完善,已经可以大部分情况下满足兼容性的需求了。所以是时候使用 矢量图 了。 本文就来详解下 Android 中对矢量图的支持。 
SVG 和 VectorDrawable 的基本知识
VectorDrawable 并没有支持所有的 SVG 规范,目前只支持
和有限的 Group 功能。另外还有一个 clip-path 属性来支持后面绘图的区域。 所以对于使用 VectorDrawable 而言,我们只需要了解 SVG 的 PathData 规范即可。通过查看
文档,可以看到 path 数据包含了一些绘图命令,比如 : 
* moveto 命令 M or m ,移动到新的位置 (大写的命令为绝对坐标命令;小写的命令为相对坐标命令, 下同)
* closepath 命令 Z or z,封闭路径,从当前的位置画一条直线到该路径或者子路径起始位置
* lineto 命令 L or l,从当前的位置画一条线到指定的位置
* horizontal lineto 命令 H or h,水平画一条直线到指定位置
* vertical lineto 命令 V or v,垂直画一条直线到指定位置
* … 还有很多其他命令,详情请参考文档
在 文档中有个绘制三角形的示例:
XHTML 
&svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" /&
&path d="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3" /&
&/svg&&svgwidth="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&rectx="1" y="1" width="398" height="398"
fill="none" stroke="blue"/&
&pathd="M 100 100 L 300 100 L 200 300 z"
fill="red" stroke="blue" stroke-width="3"/&
&/svg&
该示例的画布大小为 400 X 400像素(左上角坐标为0,0; 右下角坐标为400,400), path 路径为: 移动到 100、100 位置,然后画一条线到绝对坐标 300、100位置,然后画一条线到绝对坐标 200、300位置,然后画一条线到该路径的起始位置。这样一个倒三角形就绘制出来了。
只需要把上面的 path 路径中的数据放到 VectorDrawable 定义xml文件中,就可以实现一个 Android 版本的 矢量图了。例如 在 drawable 目录中创建一个 triangle.xml 文件,内容如下: 
XHTML 
&?xml version="1.0" encoding="utf-8"?&
&vector xmlns:android="/apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400"&
&path
android:pathData="M 100 100 L 300 100 L 200 300 z"
android:strokeColor="#000000"
android:strokeWidth="5"
android:fillColor="#FF0000"
&/vector&&?xmlversion="1.0" encoding="utf-8"?&
&vectorxmlns:android="/apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400"&
&path
android:pathData="M 100 100 L 300 100 L 200 300 z"
android:strokeColor="#000000"
android:strokeWidth="5"
android:fillColor="#FF0000"
&/vector&
需要注意的是, 在根元素 vector 上有两个宽高设置,其中 viewport 是指矢量图里面的画布大小,而android:width 和 android:height 是指该矢量图所对应的 VectorDrawable 的大小。
path 元素里面的 pathData 就是矢量图的路径数据,除此之外还可以设置其他属性。 path 元素一共包含如下属性:
android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限,Sets the Miter limit for a stroked path. 注: 当strokeLineJoin设置为 “miter” 的时候, 绘制两条线段以锐角相交的时候,所得的斜面可能相当长。当斜面太长,就会变得不协调。strokeMiterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10,意味着一个斜面的长度不应该超过线条宽度的 10 倍。如果斜面达到这个长度,它就变成斜角了。当 strokeLineJoin 为 “round” 或 “bevel” 的时候,这个属性无效。 
根元素 vector 是用来定义这个矢量图的,该元素包含如下属性:
android:name 定义该drawable的名字
android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的
模式,默认值为 src_in 
android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。
android:alpha 该图片的透明度属性
有时候我们需要对几个路径一起处理,这样就可以使用 group 元素来把多个 path 放到一起。 group 支持的属性如下:
android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。
通过上面的属性可以看出, group 主要是用来设置路径做动画的关键属性的。
最后, vector 还支持 clip-path 元素。定义当前绘制的剪切路径。注意,clip-path 只对当前的 group 和子 group 有效。
android:name 定义 clip path 的名字
android:pathData 和 android:pathData 的取值一样。
从上面 vector 支持的属性可以看出,功能还是比较丰富的。例如 前面提到的三角形,通过 group 可以把其旋转 90度。 
XHTML 
&?xml version="1.0" encoding="utf-8"?&
&vector xmlns:android="/apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400"&
&group
android:name="name"
android:pivotX="200"
android:pivotY="200"
android:rotation="90"&
&path
android:fillColor="#FF0000"
android:pathData="M 100 100 L 300 100 L 200 300 z"
android:strokeColor="#000000"
android:strokeWidth="5" /&
&/group&
&/vector&&?xmlversion="1.0" encoding="utf-8"?&
&vectorxmlns:android="/apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400"&
&group
android:name="name"
android:pivotX="200"
android:pivotY="200"
android:rotation="90"&
&path
android:fillColor="#FF0000"
android:pathData="M 100 100 L 300 100 L 200 300 z"
android:strokeColor="#000000"
android:strokeWidth="5"/&
&/group&
&/vector&
来自: 
免责声明:本站部分内容、图片、文字、视频等来自于互联网,仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益,请向本站发送有效通知,我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询,奖学金返现,名师点评,等你来互动Android使用矢量图(SVG, VectorDrawable)实践篇 - 简书
Android使用矢量图(SVG, VectorDrawable)实践篇
是时候全面使用矢量图了。——哲鸠斯·沃硕德
本文是以读者对SVG有一定了解为前提的,否则请先百(谷)度(歌)了解下。
实践都是从坑里爬出来的,因此本文的子题目也可叫做Android使用矢量图填坑记。
文章开始前,先墙裂安利一个网站,阿里的,海量在线矢量图,早收藏早致富。本文主要涉及到的矢量图资源均来自该网站。放图镇楼:
iconfont首页
可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。——摘自
.svg格式相对于.jpg、.png甚至.webp具有较多优势,我认为核心有两点:
省时间。图像与分辨率无关,收放自如,适配安卓机坑爹的分辨率真是一劳永逸;
省空间。体积小,一般复杂图像也能在数KB搞定,图标更不在话下。
VectorDrawable
VectorDrawable是Google从Android 5.0开始引入的一个新的Drawable子类,能够加载矢量图。到现在通过support-library已经至少能适配到Android 4.0了(通过统计的Android版本分布来看,Android 4.1以下(api&15)几乎可以不考虑了)。Android中的VectorDrawable只支持SVG的部分属性,相当于阉割版。
它虽然是个类,但是一般通过配置xml再设置到要使用的控件上。在Android工程中,在资源文件夹res/drawable/的目录下(没有则需新建),通过&vector&&/vector&标签描述,例如svg_ic_arrow_right.xml:
&vector xmlns:android="/apk/res/android"
android:width="8dp"
android:height="8dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"&
android:fillColor="#ffffff"
android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/&
基本属性说明:
width, height:图片的宽高。可手动修改到需要尺寸;
viewportHeight, viewportWidth:对应将上面height width等分的份数。以svg_ic_arrow_right.xml举例,可以想象将长宽都为8dp的正方形均分为24x24的网格,在这个网格中就可以很方便地描述点的坐标,图像就是这些点连接起来构成的。
fillColor:填充颜色。最好直接在这里写明色值#xxxxxxxx,而不要用@color/some_color的形式,避免某些5.0以下机型可能会报错。
pathData:在2中描述的网格中作画的路径。具体语法不是本文的重点,故不展开。
这段代码描述出来的是一个白色箭头,可以从Android Studio的preview功能栏里预览到它的样子:
vector preview
获取矢量图
前言部分已经墙裂推荐过,感觉我已经离不开它了= ̄ω ̄=第一步,搜索你要的资源名字,中英文一般都会有结果。比如“arrow”,结果:
第二步,鼠标移动到某一图标上点击,比如上面第一排第二个,出现:
三个选项,第一相当于购物车,可不用登录,第二是收藏,第三是下载,均需要登录。如果未登录,点击后出现:
选择GitHub或微博都行。第三步,登录成功,点击下载,弹出:
可以对图标属性进行编辑,如色值和大小(单位dp),然后点按钮“SVG下载”。下载成功后在下载目录找到一个.svg格式的文件,我的是:
这个文件可以用浏览器打开-&查看网页源码,或者用NotePad++等编辑器打开看到里面的内容,格式化后是这样:
&?xml version="1.0" standalone="no"?&
&!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&
&svg t="3" class="icon" style="" viewBox="0 0 " version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"&
&style type="text/css"&&/style&
&path d="M288.601C272.......068 212.425 228.......03 994..1..8..8..................601Z" p-id="1011"&&/path&
问题是,文件里好多标签Android是不认识的。不过没关系,有三种解决办法:
大招。先放大招,大招之下,后两种可以自动忽略。经大神在评论区力荐的插件,用过之后果然神清气爽。安装:File -& Setting -& Plugins -& Browser repositories -& 搜“svg2VectorDrawable” -& 安装并重启Android Studio,再次进来后顶部工具栏会多一个图标:
点击图标弹出对话框:
勾选Batch选项,将对被选中文件夹中的.svg文件进行批量转换。nodpi会自动添加到没有后缀的drawable文件夹中。
网上下载的svg资源往往一步到位,有个这个插件将会事半功倍。导入第一个svg文件时就命名成我们想要的名字,如果不满意再导入时无需再关注命名,将后面导入的pathData覆盖第一个观察效果,直到满意后删除不需要的文件。
手动。新建一个&vector&&/vector&标签的xml文件,通过观察文件内容,很容易获取到关键信息。width height自然对应&vector/&中宽高,viewBox后两位数字是分别对应&vector/&中的viewportWidth和viewportHeight,往下&path/&中的d的数据的对应&vector/&中&path/&中的pathData。fillColor自己手动设置。
自动。Android Studio大发神威的时候到了。
鼠标选中drawable文件夹,右键, New, Vector Asset, Local file,然后出现:
先选本地文件(还能支持PSD,强吧),再到磁盘中找到之前下载的.svg矢量图。导入后可以为文件重命名(建议用svg_或者有区别于其它格式的前缀),默认导入宽高均为24dp,选中Override框则读取文件本来宽高,其它配置视需求而定。点击Next到下一页最后点Finish就导入了。自动导入需要格式化一下就是前面svg_ic_arrow_right.xml的样子了。
海搜比较耗时间,线条粗细啦,位置没居中啦,大小不搭配啦,关键是这些问题都是导入项目或者运行到手机后才能发现(非强迫症当我没说)。iconfont还有诸多成套的图标库,优点是风格大小一致,或者多彩图标。
方式二:Android Studio的Material Icon入口
鼠标选中drawable文件夹,右键, New, Vector Asset,然后出现:
点击机器人进入搜索筛选:
左侧的搜索和分类可以快速索引。这里应该都是由谷歌官方制作的MD标准图标,建议先到这里搜索,如果没有再到网上搜索。
方式三:用软件或工具导出
对本人来说,方式一基本可以搞定一个App了。但如果以上两种方式均不能满足你的需求,下面祭出求矢量图三式:
求美工。有好吃的出好吃的,有美色的出美色(诶?),据说PS+AI就能分分钟导出SVG(我试了怎么不行呢,姿势不对?)。
求自己。自学作画技能,到在线制作SVG的网站自己画去(不开玩笑,技多不压身啊)。
求Vector Magic。这是一个黑科技软件,可以读取.png或.jpg的路径,进而转化为SVG,用过一次,还原度还不错(支持正版,请不要点击任何带“破解”关键字的链接[正经脸])。
前提:项目的build.gradle配置有:
defaultConfig {
vectorDrawables.useSupportLibrary = true
dependencies {
compile "com.android.support:appcompat-v7:21+" // 至少Api21
项目的Activity中都包含(通用做法是在BaseActivity中加):
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
AppCompatImageView
这是继承自ImageView用于5.0以下加载矢量图的控件,只需要替换src为srcCompat属性,其它没什么不同。例如:
&android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/svg_ic_arrow_right"/&
如果你的Activity直接或间接继承自AppCompatActivity,当前视图中的ImageView在编译过程中会被自动转为AppCompatImageView(support包中所有含有AppCompat前缀的控件均受相同处理),因而在Activity中通过findViewById()的实例用ImageView或AppCompatActivity接收是没有区别的。
用以上条件的Activity中装载的Fragment,或者通过动态注入(如Dialog的contentView)的ImageView,均将被自动转为AppCompatActivity。
从xml文件中初始化ImageView并加载矢量图,必须使用AppCompatImageView的srcCompat属性。
ImageView的染色属性tint同样适合矢量图。
在我的经验中,TextView可以用到矢量图的场景是最多的,主要是设置CompoundDrawable。例如:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="@drawable/svg_ic_arrow_right"
android:drawablePadding="4dp"
android:text="drawable right"/&
这样设置后,没有任何不适,编译器也不报错,可能你自己运行也没问题。但是!这才是深坑啊。5.0以下某些机型可能会崩溃的。
AppCompatTextView是没有对CompoundDrawable进行适配的,所以需要自己动手才能丰衣足食。简单原理是,判断系统版本如果小于5.0,就用ContextCompat.getDrawable获取到Drawable实例,再setCompoundDrawablesWithIntrinsicBounds。
这个部分本人已经做好并开源了,地址:,轻松compile到项目中使用。还特意添加了一个实用功能——tint染色——可以选择是否让图标与文字颜色一样,这样就不必关心xml里的fillColor属性了。用例:
&com.xw.repo.VectorCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_gray_light"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Next"
android:textSize="16sp"
app:drawableRightCompat="@drawable/svg_ic_arrow_right"
app:tintDrawableInTextColor="true"/&
Tips:存在这样一种情形,连续两个控件(编号1和2)都来加载同一张svg图,svg的本来颜色是A,控件1将颜色改为了B,控件2也加载这张svg,颜色却变为了B,这应该是Android系统对矢量图的缓存造成的。解决办法是把svg的本来颜色改为B,控件2再改为颜色A。(好绕,不过一般不会遇到)
MenuItem就是在res/menu/目录下通过xml配置的菜单,适用于NavigationView的menu属性和Activity中onCreateOptionsMenu()注入的选项菜单。
前一阵做了一个小应用叫“简影讯”,发现MenuItem是可以完美支持矢量图的,而且也可以自动跟随文字颜色改变颜色。且看证明:
自适应颜色
简影讯(开源地址:),是一枚基于Retrofit+RxJava+MVP+Colorful多彩主题框架开发的高颜值影讯app。简约,优雅,精彩,即看即走。欢迎在应用宝或360手机助手下载围观。该项目除ic_launcher外,所有的图标都是矢量图。“是时候全面使用矢量图了。”
VectorDrawable 转 Bitmap
自定义View中也可以自由使用矢量图。首先需要将VectorDrawable 转为 Bitmap,看码:
public Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
Drawable drawable = ContextCompat.getDrawable(context, drawableId);
if (Build.VERSION.SDK_INT & Build.VERSION_CODES.LOLLIPOP) {
drawable = (DrawableCompat.wrap(drawable)).mutate();
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
执行以上方法获得一个Bitmap的实例(设为mVectorBitmap),然后再在ondraw()里根据你的需求画出bitmap:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(mVectorBitmap, left, top, paint);
矢量图的优点一大把,但也不是万能的。矢量图特别适合icon图标的应用场景,但是不能用于比如加载相册时,设置的placeholder或者error这类需要频繁切换回收的应用场景,否则会造成非常明显的卡顿,因为矢量图是不被硬件加速支持的。
Android 5.0推出已经有些年份了,也不知道Android开发圈对矢量图的使用情况,但知道比如微信这些大厂早已全面推广使用。然而在本人周边似乎自己算先驱了,所以才有了把过程中的一些经验总结分享出来的想法。
毕竟本人才疏学浅,难免有纰漏之处,请大神轻拍砖,并不吝赐教。若对后来学习者有帮助,那花这一天码的字自然也超值了,希望共勉。
关于我:GitHub: e-mail: 梯子推荐:最近打算换工作,若有工作机会,请给我发邮件,坐标成都,谢谢。
/woxingxiao

我要回帖

更多关于 ai绘制矢量图 的文章

 

随机推荐