Android vector使用svg图片_安卓xml绘制矢量图片步骤
2018-01-30 13:57:00  By: dwtedx

什么是SVG

新建的Android项目默认的图标都是svg的xml图片,那么我们在日常开发中可不可以使用svg的图片呢?答案是肯定的。本文是以读者对SVG有一定了解为前提的,其实svg可以简单的理解成xml图片。可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。

省时间。图像与分辨率无关,收放自如,适配安卓机坑爹的分辨率真是一劳永逸;

省空间。体积小,一般复杂图像也能在数KB搞定,图标更不在话下。


在正式介绍svg图片之前先介绍一个网站给大家,就是 阿里Iconfont,海量在线矢量图,早收藏早致富。以后工作中主要涉及到的矢量图资源均来自该网站。至少现在我是这样的。

iconfont


VectorDrawable

VectorDrawable是Google从Android 5.0开始引入的一个新的Drawable子类,能够加载矢量图。到现在通过support-library已经至少能适配到Android 4.0了(通过AppBrain统计的Android版本分布来看,Android 4.1以下(api<15)几乎可以不考虑了)。Android中的VectorDrawable只支持SVG的部分属性,相当于阉割版。

它虽然是个类,但是一般通过配置xml再设置到要使用的控件上。在Android工程中,在资源文件夹res/drawable/的目录下(没有则需新建),通过<vector></vector>标签描述,例如 ic_notifications_black_24dp.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z" />
</vector>


基本属性说明:

width, height:图片的宽高。可手动修改到需要尺寸;

viewportHeight, viewportWidth:对应将上面height width等分的份数。以svg_ic_arrow_right.xml举例,可以想象将长宽都为8dp的正方形均分为24x24的网格,在这个网格中就可以很方便地描述点的坐标,图像就是这些点连接起来构成的。

fillColor:填充颜色。最好直接在这里写明色值#xxxxxxxx,而不要用@color/some_color的形式,避免某些5.0以下机型可能会报错。

pathData:在2中描述的网格中作画的路径。具体语法不是本文的重点,故不展开。


Android如何使用SVG矢量图

在 Iconfont 上面搜索你要的资源名字,中英文一般都会有结果。比如“个人中心”,然后下载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 xmlns:xlink="http://www.w3.org/1999/xlink" style="" class="icon" height="200" p-id="1909"
    t="1517289940201" version="1.1" viewBox="0 0 1024 1024"
    width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css"></style>
    </defs>
    <path
        d="M979.936 962.976c-22.656 48.768-83.136 52.544-101.152 52.544l-741.856 0c-12.736-0.736-64.352-6.336-87.776-50.432-9.888-18.592-17.664-49.728 1.408-92.32 34.752-77.408 115.264-84.928 134.496-85.6 137.056-21.216 181.568-68.384 181.984-68.832l3.2-3.328c14.624-13.792 19.616-38.016 20.928-59.072-88.64-67.424-144.704-197.632-144.704-340.736 0-229.344 142.272-310.688 264.128-310.688 121.888 0 264.192 81.376 264.192 310.688 0 143.104-56 273.28-144.64 340.704 1.376 21.12 6.368 45.408 20.864 59.104l4 4.288c0.096 0 44.832 46.816 181.216 67.904 31.392 1.248 90.336 18.336 128.608 75.936 29.888 44.992 24.704 79.168 15.072 99.84z"
        p-id="1910"></path>
</svg>


1、svgtoandroid插件

svgtoandroid插件,用过之后果然神清气爽。安装:File -> Setting -> Plugins -> Browser repositories -> 搜“svg2VectorDrawable” -> 安装并重启Android Studio,再次进来后顶部工具栏会多一个 "SVG" 的图标,点击图标导入刚刚下载从 Iconfont 上下载的svg图标即可。

svgtoandroid插件


勾选Batch选项,将对被选中文件夹中的.svg文件进行批量转换。nodpi会自动添加到没有后缀的drawable文件夹中。


2、手动导入svg

新建一个<vector></vector>标签的xml文件,通过观察文件内容,很容易获取到关键信息。width height自然对应<vector/>中宽高,viewBox后两位数字是分别对应<vector/>中的viewportWidth和viewportHeight,往下<path/>中的d的数据的对应<vector/>中<path/>中的pathData。fillColor自己手动设置。


3、Android Studio新建Vector Asset

Android Studio大发神威的时候到了。鼠标选中drawable文件夹,右键, New, Vector Asset, Local file,然后出现一个Configure Vector Asset的窗口。

新建Vector Asset


先选本地文件(还能支持PSD,强吧),再到磁盘中找到之前下载的.svg矢量图。导入后可以为文件重命名(建议用svg_或者有区别于其它格式的前缀),默认导入宽高均为24dp,选中Override框则读取文件本来宽高,其它配置视需求而定。点击Next到下一页最后点Finish就导入了。自动导入需要格式化一下就是前面svg_ic_profile_right.xml的样子了。


总结

海搜比较耗时间,线条粗细啦,位置没居中啦,大小不搭配啦,关键是这些问题都是导入项目或者运行到手机后才能发现(非强迫症当我没说)。iconfont还有诸多成套的图标库,优点是风格大小一致,或者多彩图标。

矢量图的优点一大把,但也不是万能的。矢量图特别适合icon图标的应用场景,但是不能用于比如加载相册时,设置的placeholder或者error这类需要频繁切换回收的应用场景,否则会造成非常明显的卡顿,因为矢量图是不被硬件加速支持的。

Android 5.0推出已经有些年份了,也不知道Android开发圈对矢量图的使用情况,但知道比如微信这些大厂早已全面推广使用。然而在本人周边似乎自己算先驱了,所以才有了把过程中的一些经验总结分享出来的想法。


若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。

或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。

为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+