欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

Android vector使用svg图片_安卓xml绘制矢量图片步骤

程序员文章站 2021-12-30 07:14:09
...

什么是SVG

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

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

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


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

Android vector使用svg图片_安卓xml绘制矢量图片步骤


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图标即可。

Android vector使用svg图片_安卓xml绘制矢量图片步骤


勾选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的窗口。

Android vector使用svg图片_安卓xml绘制矢量图片步骤


先选本地文件(还能支持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的留言板)

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