Android矢量图VectorDrawable

** VectorDrawable** android5.0开始支持矢量图,它非常适合图标,是独立于屏幕密度的,一个文件适合所有屏幕。当缩放的时候还可以保存所有的图片质量,通常文件所占用的空间也非常小使用VectorDrawable 可以大幅度的减少apk大小。最新的AppCompat23.2库通过使用VectorDrawableCompat可以支持在android api7+版本上使用矢量图

矢量图svg转vectorDrawable

android并不支持web上的svg这种矢量图片格式,而是以VectorDrawable的方式来实现矢量图的效果,因此我们需要自行转换

转换工具

项目中使用

  1. AppCompatImageView或者AppCompatImageButton或其子类,必须在app:srcCompat标签中使用
    • appcompat 23.2.0开始,提供了以上两种支持库一个用于兼容矢量图,但是这个支持库要使用的话,还得在app的gradle里面加个这样的配置
//在gradle2.0及以上:
android {
  defaultConfig {
  vectorDrawables.useSupportLibrary = true
}}
* 代码使用
<android.support.v7.widget.AppCompatImageView
       android:layout_width="42dp"
       android:layout_height="42dp"
       app:srcCompat="@drawable/icon_shopping"/>
  1. TextView button上使用
  • 项目中大量icon是用textview drawableLeft等属性使用..
 <ImageView
         android:layout_width="16dp"
         android:layout_height="16dp"
         android:src="@drawable/aa_b_test" />
 <TextView
         android:layout_width="16dp"
         android:layout_height="16dp"
         android:drawableRight="@drawable/aa_b_test" />

高版本可以直接用drawable方式使用,低版本需要包裹层StateListDrawable等实现,且对应activity加上句代码,下个模块会说明

兼容性解决

在Android 5.0之前(API level 21),Support Library 23.2或者更高的版本提供了矢量图片和矢量图片动画完整的支持。

  1. AnimatedVectorDrawableCompat通过两个新的Support Libraries:support-vector-drawable和animated-vector-drawable分别进行支持;
    在你app模块的build.gradle文件中添加vectorDrawables元素,使你的app使用矢量图support library;
android {  
    ... ...  
    defaultConfig {  
        ... ...  
        vectorDrawables.useSupportLibrary = true  
    }  
    ... ...   
}

普通控件上使用Vector,就必须依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/aa_b_test"/>
</selector>

同时activity中加以下代码

   static {       
   AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
          }

有个坑就是该页面activity需继承自AppCompatActivity以支持compat兼容包属性

  1. 我们也可以采用低版本构建生成PNG图片的兼容方式;
    flight/build.gradle文件
apply plugin: 'com.android.library'  
android {  
    ... ...  
    aaptOptions {  
        additionalParameters "--no-version-vectors"  
    }  
    ... ...  
}  

性能

  1. 运行时间
        long aaa = System.currentTimeMillis();
        for (int i = 0; i < 100000; i++) {
            Resources res = getResources();
            Drawable drawable = res.getDrawable(R.drawable.aa_b_test);
            imageView.setImageDrawable(drawable);
        }
        Log.e("+++++++++++++++++", System.currentTimeMillis() - aaa + "++++++++++++");

结论是矢量图4191 普通位图3193

  1. size大小
    矢量图:661字节,
    位图:一套图(200*200)5kb,按项目要求4套大概10几kb

总结

  1. 优点
  • 图片扩展性:不损伤图片质量,一套图适配所有
  • 图片大小:比使用位图小十几倍,有利与减小apk size
  1. 缺点
  • 性能优损失,系统渲染VectorDrawable需要花费更多时间,因为矢量图的初始化加载会比相应的光栅图片消耗更多的CPU周期,但是两者之间的内存消耗和性能接近。
  • 矢量图主要用在色调单一的icon

可以只考虑在显示小图片的时候使用矢量图(建议你限制矢量图在200200dp)*

问题

Not supported SVG features

These SVG elements are not supported by VectorDrawable: patterns, masks, gradients, images, etc.
VectorDrawable fill-rule is always non-zero and cannot be changed prior to Android 7.0 (Nougat). If you end up with areas filled that should not be filled, that is because the SVG image was created using even-odd rule instead. There are three ways to deal with this problem: try specifying the --fix-fill-type option, manually edit SVGs in vector graphics software or convert for Android 7.0+.

所以svg转换VectorDrawables时并不是100%还原,像我们遇到过luachicon会出现圆角丢失。建议:单色调的icon使用矢量图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容