干货分享：Android图片资源导入之Vector Asset-白红宇

干货分享：Android图片资源导入之Vector Asset

阅读量：2260 次

发布时间：2019-05-09

本文共 2246 字，大约阅读时间需要 7 分钟。

先插两句

作为一个android开发工程师，梦想的样子肯定是明确的需求到开发中不曾增减一个字、完整的原型到每一个toast的文字，细致的业务逻辑到每一个错误的用户友好反馈，详细的UI到按钮按下抬起的变化的色值。

但理想有多丰满，现实就会有多么的骨干，最近就接到了一个任务，开发一个APP，功能按商务拿下改编权的一款APP进行仿制。由于是个紧急任务，而且部门现在人员紧张，UI完全自己搞定。无奈之下下载了对方的apk包后解压发现，里面的图片资源竟然只有drawable-xxhdpi，起初基本都是将图片导入PS，输出drawable-xhdpi、drawable-xxxhdpi的图片，可这样需要预估布局中每一个图标的大小，尝尝输入的图标过大或过小，再重新在PS中调整导出。明明是一个android开发，非要让我体会这无法形容的痛。

多亏之前返回键等图标使用过Vector Asset，就想到使用这个方案是否可以解决这个问题，功夫不负有心人，终于算是找到了对应的解决方案，写篇博客记录一下吧。

正文

矢量图与位图

通过的中有关于矢量图与位图的详细定义：

位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。多个像素的色彩组合就形成了图像，称之为位图。
矢量图又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。

不过这么专业的名词，对于我这种懒人来说，实在是不好记，只能记得一个简单的区分方案，就是拉伸了以后会模糊的是位图（jpg、png格式的图片）、而拉伸了清晰度不会发生变化的就是矢量图（今天的主角svg图）。

svg图长啥样

其实说起来感觉很高端的样子，就我知道的从AS 3.3开始，我们创建了Android工程的头像中就使用到了svg图，我这里以AS 3.6.1创建的工程为例：

头像内容，是有前景和背景两个部分构成，而这两个部分都是使用的svg绘制的。

背景：

前景：

我们来简单看一些前景的内容吧（复杂的我也不知道）

这个部分可可以看到实际只有两类的参数，分别为：

图片的宽高：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色值为例：


   
    #03DAC5

后期APP主题色调整，只修改主题色的色值，APP的图标色值也会随着变化：


   
    #ff3306

啊哦，一不小心红配绿了。。。

AS系统中没有的图标

虽然AS系统中已经提供了好多图标的样式，但是我们开发中，总会遇到多种多样的需求，因此有那么一些超纲的情况就很正常了。这个时候如果有UI的情况下，可以让UI提供相应的图片SVG图片（AI可以生成，如果只会玩PS就洗洗睡吧），如果遇到我这种倒霉情况，UI也没时间给提供对应的图标的时候，就需要自力更生了，我主要是从中找一些图片的矢量图。