svg矢量图绘制以及转换为Android可用的VectorDrawable资源
项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了)
由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Graphics))来做图标,而系统状态栏图标多是用vectorDrawable绘制,所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。尤其是这种资源文件体积小放大又不失真,干嘛不用呢。
VectorDrawable
Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。在xml文件中的标签是<vector>
google官方API介绍:
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
This lets you create a drawable based on an XML vector graphic. It can be defined in an XML file with the <vector> element.
The vector drawable has the following elements:
具体属性和方法请参考官方说明
下面是一个官方例子:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600"
>
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0"
>
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z"
/>
</group>
</vector>
显示效果(背景色应为透明)
绘制svg图
如果想了解绘制原理,调至请调至文末点击W3C的连接。
接下来介绍一些常用的svg绘图工具
1.Inkscape
开源的多平台矢量图绘图工具,支持windows OS X Linux。支持导出为svg等格式图片,功能强大,与后面两个将要介绍的比较就是体积有点大,安装包就接近百兆了。
另外用这个生成的SVG文件,会带一些默认的属性,转化成VectorDrawable以后xml文件里也会有一些默认的属性,虽不影响显示效果,但会多出一些不必要的代码。
工作界面:
2.Boxy SVG
是一个Chrome应用(推荐)。支持导入,另存为,可以选中单个控件调整属性等。可能不好的地方就是你得安装Chrome浏览器吧,还有下载这个应用的时候得FQ。
3.Janvas - The Online Vector Graphics Editor
也是Chrome应用,不过其实就是一个链接,打开后指向下面的地址
http://www.janvas.com/XOSYSTEM/PROJECTS/janvas_apps_suite_3.0_public/janvas_application.php
但是这个在线编辑器好像只能打开和保存文件到google driver,不推荐
4.??
这个东西没找到名字,点击下面的连接试用。添加到收藏夹,随时可用。便捷。
http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n
转换为VectorDrawable
找到两个在线转换的工具,都是Github上的开源项目。
1.Android SVG to VectorDrawable
Convert SVG to Android VectorDrawable XML resource file.
可能是这个工具开发比较早,有很多Star,基本的图形转换是可以的,但是,不支持文字!也就是说上面的图,如果我们转换的话,得到的结果只是一个椭圆,文字会丢失。
在线工具:http://inloop.github.io/svg2android/
源码地址:https://github.com/inloop/svg2android
2.SvgToVectorDrawableConverter.Web
Batch converter of SVG images to Android VectorDrawable XML resource files.
这个就比较好了,支持文本转换。
在线工具:http://a-student.github.io/SvgToVectorDrawableConverter.Web/
源码地址:https://github.com/a-student/SvgToVectorDrawableConverter
效果图
这里我把颜色改回了白色。使用的是Boxy SVG绘制,SvgToVectorDrawableConverter.Web转换。
Android Studio支持直接预览VectorDrawable矢量图,有了实时预览,也方便进行一些简单的修改。
这个图标最后应用到下拉的快速设置里面,在手机上的效果图就不上了。
展示一张少复杂的图吧:
总结
本文简单介绍了几款工具,目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件,在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。当然如过你牛逼到直接用记事本“绘图”的话,本文应该不适合你。
我发现我特别喜欢发掘一些能够提高生产力的小工具啊,哈哈哈。
其他
知其然不知其所以然?想要了解的原理,跳转到W3C查看Scalable Vector Graphics (SVG) 1.1 (Second Edition)
https://www.w3.org/TR/SVG11/Overview.html
- 简单的java实验,涉及到 类继承以及接口问题,方法体的重写(区别于重载)
- java 快速求素数
- 狄斯奎诺(dijkstra 模板)
- HDUOJ---汉洛塔IX
- 小错误系列
- HDUOJ-----4510 小Q系列故事——为什么时光不能倒流
- HDUOJ----4509湫湫系列故事——减肥记II
- HDUOJ-----4506小明系列故事——师兄帮帮忙
- HDUOJ---4503 湫湫系列故事——植树节
- HDUOJ----4504 威威猫系列故事——篮球梦
- 推荐一款MySQL优化工具
- HDUOJ----4502吉哥系列故事——临时工计划
- HDUOJ----4004The Frog's Games(二分+简单贪心)
- HDUOJ----4006The kth great number(最小堆...)
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- R语言逻辑回归预测分析付费用户
- R语言中使用多重聚合预测算法(MAPA)进行时间序列分析
- R语言中的岭回归、套索回归、主成分回归:线性模型选择和正则化
- R语言基于树的方法:决策树,随机森林,套袋Bagging,增强树
- R语言无监督学习:PCA主成分分析可视化
- 如何用r语言制作交互可视化报告图表
- R语言大数据分析纽约市的311万条投诉统计可视化与时间序列分析
- R语言动态可视化:制作历史全球平均温度的累积动态折线图动画gif视频图
- R语言里的非线性模型:多项式回归、局部样条、平滑样条、广义加性模型分析
- 使用R语言进行机制检测的隐马尔可夫模型HMM
- 【Kubernetes】Octant再探...
- 聊聊claudb的SlaveReplication
- 深度学习trick--labelsmooth
- Java锁的那些事儿
- React Hooks踩坑分享