先插两句
作为一个android开发工程师,梦想的样子肯定是明确的需求到开发中不曾增减一个字、完整的原型到每一个toast的文字,细致的业务逻辑到每一个错误的用户友好反馈,详细的UI到按钮按下抬起的变化的色值。
但理想有多丰满,现实就会有多么的骨干,最近就接到了一个任务,开发一个APP,功能按商务拿下改编权的一款APP进行仿制。由于是个紧急任务,而且部门现在人员紧张,UI完全自己搞定。无奈之下下载了对方的apk包后解压发现,里面的图片资源竟然只有drawable-xxhdpi,起初基本都是将图片导入PS,输出drawable-xhdpi、drawable-xxxhdpi的图片,可这样需要预估布局中每一个图标的大小,尝尝输入的图标过大或过小,再重新在PS中调整导出。明明是一个android开发,非要让我体会这无法形容的痛。
多亏之前返回键等图标使用过Vector Asset,就想到使用这个方案是否可以解决这个问题,功夫不负有心人,终于算是找到了对应的解决方案,写篇博客记录一下吧。
正文
矢量图与位图
通过NoBugException的《Android Studio神器之Vector Asset》中有关于矢量图与位图的详细定义:
位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜色与亮度等信息,这些点是离散的,类似于点阵。多个像素的色彩组合就形成了图像,称之为位图。
矢量图又叫向量图,是用一系列计算机指令来描述和记录一幅图,一幅图可以解为一系列由点、线、面等到组成的子图,它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小,特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计(CAD)、工艺美术设计、插图等。
不过这么专业的名词,对于我这种懒人来说,实在是不好记,只能记得一个简单的区分方案,就是拉伸了以后会模糊的是位图(jpg、png格式的图片)、而拉伸了清晰度不会发生变化的就是矢量图(今天的主角svg图)。
svg图长啥样
其实说起来感觉很高端的样子,就我知道的从AS 3.3开始,我们创建了Android工程的头像中就使用到了svg图,我这里以AS 3.6.1创建的工程为例:
头像内容,是有前景和背景两个部分构成,而这两个部分都是使用的svg绘制的。
背景:
前景:
我们来简单看一些前景的内容吧(复杂的我也不知道)
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
</vector>
这个部分可可以看到实际只有两类的参数,分别为:
- 图片的宽高:android:width / android:height
- 画布的宽高:android:viewportWidth / android:viewportHeight
调整一下画布的大小可以看到效果变化
其后是具体再画布中绘制图像,绘制的每一个部分都可以使用一个path,这里隐藏一个path看一下效果:
作为Android开发,还需要了解的部分就是颜色的设置,效果如下:
当然,具体怎么绘制svg图不是本次博客的重点,只是介绍一下我们需要调整到的部分,如果大家对于svg的绘制有兴趣的话,可以到专门的平台学习,这里推荐两个网站,分别是:
- W3C svg教程
- runoob.com svg教程
AS系统自带svg图创建
项目没有额外操作的时候,一般创建的svg图片路径都是在drawable下,所以这里我就直接右击drawable创建Vector Asset,其实点击项目的其他部分也是可以创建的:
进入Vector Asset后,默认进入的就是系统自带的svg图创建页面,我们可以设置创建svg
图片的名称、大小、颜色、以及选择对应要创建的图片样式
选择创建的路径及应用的环境
之后在目录中查看我们创建的svg图就可以查看具体的效果了
然,在之后的应用中,如果我们使用的颜色值可能会存在动态适配的情况,例如随着主题色变更,那么就可以通过设置tint来设置其色值(path中的fillColor也可以),以common_main_color色值为例:
<color name="colorAccent">#03DAC5</color>
后期APP主题色调整,只修改主题色的色值,APP的图标色值也会随着变化:
<color name="common_main_color">#ff3306</color>
啊哦,一不小心红配绿了。。。
AS系统中没有的图标
虽然AS系统中已经提供了好多图标的样式,但是我们开发中,总会遇到多种多样的需求,因此有那么一些超纲的情况就很正常了。这个时候如果有UI的情况下,可以让UI提供相应的图片SVG图片(AI可以生成,如果只会玩PS就洗洗睡吧),如果遇到我这种倒霉情况,UI也没时间给提供对应的图标的时候,就需要自力更生了,我主要是从阿里巴巴矢量图中找一些图片的矢量图。
好吧,一不小心就被套路了,竟然在首页放招聘信息,谁让咱使用人家产品写博客呢,就是不知道啥时候能把广告费结一下了。
依据自己的需求,我们可以输入想要搜索的图标范畴:
下载svg格式图片
导入AS,可以看到本地文件中介绍的包含svg和psd文件,但是PSD图片我至今没有测试成功过,创建的svg都是空白的,如果哪位大神操作成功了希望能指点小弟一下。
之后自然也是需要选择保存的位置以及应用环境,由于与创建系统的一样,这里就不截图了,直接看导入后的效果:
如果大家对于颜色不满意,可以通过fillColor设置,当然也可以添加tint属性实现,我这里就以fillColor为例了:
具体使用哪种形式好,还是要看大家具体的实际应用环境,由于我也是刚开始尝试,就不给大家什么建议了,希望大家体验后,能够分享一下自己的体验,共同商讨出更好的方式