先插两句
作为一个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的绘制有兴趣的话，可以到专门的平台学习，这里推荐两个网站，分别是：
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为例了：
结语
具体使用哪种形式好，还是要看大家具体的实际应用环境，由于我也是刚开始尝试，就不给大家什么建议了，希望大家体验后，能够分享一下自己的体验，共同商讨出更好的方式
网友评论