Android中SVG图片资源使用

GitHubDemo:https://github.com/xwpeng/TestSVG

一. 基础

SVG:Scalable Vector Graphics,可伸缩矢量图形.矢量图:记录图像绘制的规定信息,根据这些信息绘制图片,如用数学函数记录.具有可伸缩,不失真,体积小的特性.由于是根据规定信息绘制图片,复杂的图片描述起来很困难,适用于简单规则的图片.
  Android图片适配根据屏幕密度准备多套png图片,导致图片占App的体积大.用SVG代替png可以极大节省资源内存,因为只要一套图片,一张图只是一些xml的文字描述.
  Android5.0开始支持SVG,只兼容5.0+.从Gradle Plugin 1.5开始,如果是5.0下SVG转成png.从AppCompat23.2开始,Google开始支持在低版本上使用Vector。
  SVG是使用的时候去绘制,较位图多了一个绘制过程.简单且不是频繁使用的图标才用SVG.至于运行内存,SVG的图不能说一定比位图省运行内存.图片占用的运行内存受长,宽,单位面积像素点多少影响.由于使用的SVG是较小简单图,运行内存占用较小.

2. 使用

注意兼容低版本,下面举了一些例子,实际用时必须在低版本进行测试.

1. build.gradle(Moudle:app)中添加支持

android {
defaultConfig {
     vectorDrawables.useSupportLibrary true
}
}   

二. 将设计师(自己弄的话用AI,没试过)给你的SVG格式的图片拖到 http://inloop.github.io/svg2android/ 中转换成记录绘制此图片信息的Xml文件,将文件放到Drawable目录下.

Xml示例

在Drawable下点击New->Vector Asset选择Material Icon可以选AndroidStudio提供的SVG图片.得到xml文件后可以自行修改颜色值.如果要修改绘制信息(不建议,可以适当了解),参考:Android vector标签 PathData 画图超详解
可以从阿里图标库找素材
阿里图标库图

3. 在ImageView中使用

Activity继承AppCompatActivity,用ImageView,不是的话用android.support.v7.widget.AppCompatImageView.
加上xmlns:app="http://schemas.android.com/apk/res-auto",再将drawable设置到app:srcCompat

              <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/vd_dd" />

用代码设置

 mImageView.setImageResource(R.drawable.vd_bb);

4. 转成Drawable使用

图片有时是需要转成Drawable来使用,如TextView中的Drawable.为了兼容Android L以下版本,需要按照以下方法进行转换.
方法一:

VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.vd_aa, null);
 TextView videoTextView = (TextView) dialogLayout.findViewById(R.id.res_video_btn);
        VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.vd_video, null);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        videoTextView.setCompoundDrawables(null, drawable, null, null);

建议使用方法一,较灵活.
方法二:
(1)Activity中加静态代码块

  static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

(2)获得Drawable

  Drawable drawable = getResources().getDrawable(R.drawable.vd_aa);

如果没加静态代码块,5.0下会Crash.

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);的方法注释说明了如何兼容AndroidL下版本使用SVG与注意事项.

5. 作为菜单Icon

菜单比较例外,可以直接设置.
android:icon="@drawable/vd_abc_add"
如果是设置Drawable,还是得先转换.

6.不支持渐变和本地资源链接

generatedDensities 生成指定分辨率的png图片
defaultConfig {
...
generatedDensities = ['mdpi', 'hdpi']
}
build 阶段生成的png为啥我找不到在哪?

明确说明了Android中不支持SVG颜色渐变的特性.
http://www.jianshu.com/p/2eb9e14ea8c1

Android的drawable
https://luoweiguang.github.io/2016/07/19/Android%E7%9A%84Drawable/

其他方式渐变色彩可以看看这个
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1128/2076.html

三.SVG动画

//todo 动画独立成一篇文章整理,目前项目中没有使用过,处在研究阶段.暂不更新.

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

推荐阅读更多精彩内容