android+矢量图+插件,如何玩转Android矢量图VectorDrawable
从5.0(api等级21)开始,android开始支持矢量图了。关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科。不过这里要提一下它的优点:
保存最少的信息,文件大小比位图要小,并且文件大小与物体的大小无关任意放大矢量图形,不会丢失细节或影响清晰度,因为矢量图形是与分辨率无关的。
从以上两个优点来看,在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的。
前面也说了,矢量图从21才开始支持。那么如果我想往下兼容改怎么办呢?这个问题要放在以前的话,我会说github下就有你要的答案。但现在我不会这么说,因为前段时间google升级了support library,官方向后兼容了矢量图的使用。要问兼容到哪个版本,我告诉你矢量图兼容到api7,矢量图动画兼容到api11(是不是已经满足了你的使用)。
好了,下面我们就来说说怎么在项目中使用矢量图。
一、vectordrawable的使用按照官方的说法,要在低版本上使用矢量图,需要在项目中引入新的兼容库support-vector-drawable,并且appcompat-v7库的版本要在23.2.0+(写文章这会23.2.1已经发布了)。而且你还要修改下gradle的相关配置,不要让gradle在构建的时候为你在低版本(api21以下)的情况下生成针对于不同密度的png文件,因为android studio1.4的时候支持了矢量图。
修改appcompat-v7的版本
compile 'com.android.support:appcompat-v7:23.2.0'note: 这里我只引入了23.2.0版本的appcompat-v7库,同步gradle后就编译出了support-vector-drawable-23.2.0和animated-vector-drawable-23.2.0这两个库。
修改gradle配置文件
如果你的gradle插件的版本为2.0以下,你应该这么修改
android {
defaultconfig {
// 不让gradle自动生成不同屏幕分辨率的png图
generateddensities = []
}
aaptoptions {
additionalparameters "--no-version-vectors"
}
}
如果你的gradle插件版本是2.0+,你 应该这么修改
android {
defaultconfig {
vectordrawables.usesupportlibrary = true
}
}
经过上面这几步的修改,你就可以在项目中使用矢量图了。那么,下面我们就正式来说说怎么使用。
android studio为我们提供了一个vector asset studio的工具,让我么可以从material icon和svg文件生成矢量图。具体用法可以参考官方的说明文档,这里就不多说了。
android中矢量图是以xml文档的形式存在的,像下面这样就定义了一个矢量图,里面包含了关于该矢量图的数据信息。
android:width="24dp"
android:height="24dp"
android:viewportheight="24.0"
android:viewportwidth="24.0">
android:fillcolor="#ff000000"
android:pathdata="m11.99,2c6.47,2 2,6.48 2,12s4.47,10 9.99,10c17.52,22 22,17.52 22,12s17.52,2 11.99,2zm12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zm15.5,11c0.83,0 1.5,-0.67 1.5,-1.5s16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zm8.5,11c0.83,0 1.5,-0.67 1.5,-1.5s9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zm12,17.5c2.33,0 4.31,-1.46 5.11,-3.5l6.89,14c0.8,2.04 2.78,3.5 5.11,3.5z" />
这是我通过material icon生成的,它在android中对应着vectordrawable这个类,也就是兼容包中的vectordrawablecompat这个类。
定义好矢量图形后,我们就可以向普通的图形那样来使用它了。不过有几点需要注意:
*使用android:src属性的地方需要替换为app:srccompat属性
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingbottom="@dimen/activity_vertical_margin"
android:paddingleft="@dimen/activity_horizontal_margin"
android:paddingright="@dimen/activity_horizontal_margin"
android:paddingtop="@dimen/activity_vertical_margin"
tools:context="com.damon.vectordrawabledemo.mainactivity">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srccompat="@drawable/ic_mood_black_24dp" />
*在非src属性的地方使用矢量图时,需要将矢量图用drawable容器(如statelistdrawable, insetdrawable, layerdrawable, levellistdrawable, 和rotatedrawable)包裹起来使用。否则会在低版本的情况下报错。
而在代码中的使用和普通的png图没什么区别,调用的是同样的api。
这样我们就把矢量图引入到我们的项目中了,下面我贴几张图来对比下矢量图和png图的不同,以此来展示下矢量图的优点。
首先是png的原图和放大图
其次是矢量图的原图和放大图
对比一目了然。而且矢量图的xml的大小只有655个字节,而不同分辨率的png的大小加起来有好几k。矢量图只需要维护一个xml,而png需要维护多个图形资源。
矢量图xml文件支持的标签以及属性可以参考这里,包括了常见的填充、描边、着色等。
二、使用矢量图制作动画
23.2的支持库同样也放出了矢量图动画对应的兼容版本animatedvectordrawablecompat,对应的兼容包是animated-vector-drawable,xml标签则是animated-vector。animatedvectordrawablecompat能够以属性动画的形式来驱动vectordrawable实现动画,具体来说需要分三步走:
*定义一个vectordrawablecompat的xml
android:width="500px"
android:height="500px"
android:viewportheight="500"
android:viewportwidth="500">
android:scalex="5.0"
android:scaley="5.0">
android:name="star"
android:pathdata="m 50.0,90.0 l 82.9193546357,27.2774101308 l 12.5993502926,35.8158045183 l 59.5726265715,88.837672697 l 76.5249063296,20.0595700732 l 10.2916450361,45.1785327898 l 68.5889268818,85.4182410261 l 68.5889268818,14.5817589739 l 10.2916450361,54.8214672102 l 76.5249063296,79.9404299268 l 59.5726265715,11.162327303 l 12.5993502926,64.1841954817 l 82.9193546357,72.7225898692 l 50.0,10.0 l 17.0806453643,72.7225898692 l 87.4006497074,64.1841954817 l 40.4273734285,11.162327303 l 23.4750936704,79.9404299268 l 89.7083549639,54.8214672102 l 31.4110731182,14.5817589739 l 31.4110731182,85.4182410261 l 89.7083549639,45.1785327898 l 23.4750936704,20.0595700732 l 40.4273734285,88.837672697 l 87.4006497074,35.8158045183 l 17.0806453643,27.2774101308 l 50.0,90.0z"
android:strokecolor="@color/coloraccent"
android:strokewidth="2" />
*定义animatedvectordrawablecompat的xml
android:drawable="@drawable/vector_drawable">
android:name="star"
android:animation="@animator/star_anim" />
可以看到,根元素是animated-vector,并且有一个必须的属性android:drawable用来指定要驱动的矢量图对象。子标签target一方面用来指定要驱动的矢量图内的group和path的名称(这里和vectordrawablecompat的xml中的group和path名称对应);另一方面指定要使用哪个属性动画来驱动group和path的属性进行变化来产生动画效果。
*创建属性动画
驱动trimpathstart和strokecolor属性的动画
android:duration="5000"
android:propertyname="trimpathstart"
android:repeatcount="infinite"
android:repeatmode="restart"
android:valuefrom="1"
android:valueto="0" />
android:duration="5000"
android:propertyname="strokecolor"
android:repeatcount="infinite"
android:repeatmode="restart"
android:valuefrom="@color/coloraccent"
android:valueto="@color/colorprimarydark" />
这样,准备工作就做好了。我们就可以使用矢量图动画了。把imageview的src更改为矢量图动画
android:id="@+id/image_view"
android:layout_width="200dp"
android:layout_height="200dp"
app:srccompat="@drawable/vector_drawable_anim" />
在java代码中启动动画
imageview imageview = (imageview) findviewbyid(r.id.image_view);
drawable drawable = imageview.getdrawable();
//animatedvectordrawablecompat实现了animatable接口
if (drawable instanceof animatable){
((animatable) drawable).start();
}
这样就实现了矢量图动画,看看效果图吧。
好了,关于矢量图以及矢量图动画的使用就说这么多。具体的一些细节以及xml中的其他属性啥的怎么使用可以参考官方文档,自己亲自试一试就会很明了了。
文/damonzh(简书作者)
原文链接:
android+矢量图+插件,如何玩转Android矢量图VectorDrawable相关推荐
- ps法线贴图插件_法线与置换贴图原理讲解以及烘焙制作!
首先在讲解之前先给大家讲解下什么是法线贴图,法线贴图其实就是一张带有颜色的凹凸贴图,分别是有红绿蓝,三种颜色构造而成的,如下图所示: 每一个颜色通道分别控制了每个像素的方向,当你把法线贴图用到低解析 ...
- android使碎片切换界面,玩转Android中的碎片Fragment
引言:在Android开发中,我们都知道一些界面的展示经常会用到的就是Activity,但是Activity存在着很大的局限性,比如说手机上的界面显示在平板上面就会发生各种变形的问题,Activity ...
- android手机微博个性名称,玩个性 Android手机发布“手写体微博”
您可能感兴趣的话题: Android 核心提示:微博非常火,地球人都知道,很多朋友都习惯用手机随时随地发微博.不过,单纯的文字.图片和视频还不足以体现自己的个性,如果能把微博的文字用自己的手写体发布, ...
- Android studio下载插件失败问题
Android studio下载插件失败问题 如果Android studio下载插件怎么弄都不成功的时候,可以去网上下载离线插件,然后进行本地安装. 下载步骤 点击下面链接,进入JetBrain插件 ...
- 安卓工程师教你玩转Android
查看书籍详细信息: 安卓工程师教你玩转Android 编辑推荐 让你的手机真的变成"战斗机"! 由浅入深,满足多种需求 授人以鱼,更授人以渔 知其然,更知其所以然 紧跟Androi ...
- html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法 在页面中引入jquery. ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法 在页面 ...
- html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法 在页面中引入imgSwitch.min.js ...
最新文章
- ios button.imageview 和setimage的区别
- SAP external long material id的奥妙
- AT3955-[AGC023D]Go Home【结论,递归】
- 中央2套-理财教室-如何购买保险
- BufferedReader类
- C ~ char int 等数据转换问题
- cyyz: Day 4 网络流整理
- vs C++实现Socket通信、添加ws2_32.lib 动态链接库
- MyBatis官方文档——动态SQL部分
- malloc函数java_malloc函数详解及用法举例
- VB.NET和C# Ruby语言之间的转换
- Flash MX 2004的Alpha Fader
- 好看的emoji表情
- 建模你不能不知道这些网站能接单 | 建议收藏
- EasyUI的datagrid删除后一页所有数据不自动显示前页数据
- JAVA开发与运维(配置中心Apollo的使用)
- IP SSL证书购买方式
- 【高考40周年】机器人数学考了134分,要上清华北大NLP是最大难关
- gz, bz2, bz, Z, tgz, zip, rar, lha, rpm等格式的解压……
- 加密相册、保险箱App打开就闪退、点击提示App Store不提供应用、需要更新才能使用的解决方案