Android Studio神器之Vector Asset
从Android 8.0（API 26）之后，Android开始引入矢量图，矢量图的常用格式是svg。在Android 8.0之前只使用位图（格式是png）作为Android的图片素材，但是因为Android设备分辨率的多样性，导致位图素材需要适配，矢量图的引用可以使Android 8.0（包括Android 8.0）之后的版本不再需要适配，因为矢量图不会失真，所以可以达到自适应的效果。
（1）位图和矢量图的概念
位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。多个像素的色彩组合就形成了图像，称之为位图。
矢量图又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。
位图图像与矢量图像相比更容易模仿照片似的真实效果。位图图像的主要优点在于表现力强、细腻、层次多、细节多，可以十分容易的模拟出像照片一样的真实效果。由于是对图像中的像素进行编辑，所以在对图像进行拉伸、放大或缩小等到处理时，其清晰度和光滑度会受到影响。位图图像可以通过数字相机、扫描或PhotoCD获得，也可以通过其他设计软件生成位图图像，也称点阵图像或绘制图像，是由称作像素的单个点组成的。当放大位图时，可以看见构成图像的单个图片元素。扩大位图尺寸就是增大单个像素，会使线条和形状显得参差不齐。但是如果从稍远一点的位置观看，位图图像的颜色和形状又是连续的，这就是位图的特点。矢量图像，也称绘图图像，在数学上定义为一系列点与点之间的关系，矢量图可以任意放大或缩小而不会出现图像失真现象 。
（2）阿里图库的使用
阿里图库的官网如下：
我在阿里图库中随意找了一张素材，如下：
图片.png
点击“SVG下载”一张矢量图备用。点击复制SVG获取矢量图数据如下：
<svg t="1570928688533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3192" width="200" height="200">
<path d="M737.3 63.8H286.7C174.4 63.8 83 155.2 83 267.6v488.8c0 112.4 91.4 203.8 203.8 203.8h450.5c112.4 0 203.8-91.4 203.8-203.8V267.6C941 155.2 849.6 63.8 737.3 63.8zM887 756.4c0 82.6-67.2 149.7-149.7 149.7H286.7C204.2 906.2 137 839 137 756.4V267.6c0-82.6 67.2-149.7 149.7-149.7h450.5c82.6 0 149.7 67.2 149.7 149.7v488.8z" fill="#d4237a" p-id="3193"></path>
<path d="M685.1 441v-38.8c0-34.4-28-62.4-62.4-62.4H584L556.1 312c-11.8-11.8-27.4-18.2-44.1-18.2-16.7 0-32.4 6.5-44.1 18.2L440 339.8h-37.8c-34.4 0-62.4 28-62.4 62.4V440L312 467.9c-24.3 24.3-24.3 63.9 0 88.2l27.9 27.9v38.8c0 34.4 28 62.4 62.4 62.4H441l26.9 26.9c12.2 12.2 28.1 18.2 44.1 18.2s31.9-6.1 44.1-18.2l26.9-26.9h39.7c34.4 0 62.4-28 62.4-62.4V583l26.9-26.9c24.3-24.3 24.3-63.9 0-88.2L685.1 441z m-6.5 81.7l-33.8 33.8c-4.4 4.4-6.9 10.4-6.9 16.7v49.5c0 8.2-6.9 15.1-15.1 15.1h-49.5c-6.3 0-12.3 2.5-16.7 6.9l-33.8 33.8c-5.8 5.8-15.6 5.8-21.4 0l-33.8-33.8c-4.4-4.4-10.4-6.9-16.7-6.9h-48.5c-8.2 0-15.1-6.9-15.1-15.1v-48.5c0-6.3-2.5-12.3-6.9-16.7l-34.8-34.8c-5.8-5.8-5.8-15.6 0-21.3l34.8-34.8c4.4-4.4 6.9-10.4 6.9-16.7v-47.6c0-8.2 6.9-15.1 15.1-15.1H450c6.3 0 12.3-2.5 16.7-6.9l34.8-34.8c5.6-5.6 15.7-5.6 21.3 0l34.8 34.8c4.4 4.4 10.4 6.9 16.7 6.9h48.5c8.2 0 15.1 6.9 15.1 15.1v48.5c0 6.3 2.5 12.3 6.9 16.7l33.8 33.8c5.8 5.8 5.8 15.6 0 21.4z" fill="#d4237a" p-id="3194"></path>
<path d="M512.5 420.6c-50.4 0-91.4 41-91.4 91.4s41 91.4 91.4 91.4 91.4-41 91.4-91.4-41-91.4-91.4-91.4z m0 135.6c-24.4 0-44.2-19.8-44.2-44.2 0-24.4 19.8-44.2 44.2-44.2 24.4 0 44.2 19.8 44.2 44.2 0 24.4-19.9 44.2-44.2 44.2z" fill="#d4237a" p-id="3195"></path>
</svg>
（3）Vector Asset的使用
首先，鼠标选中app模块，或者app的子文件（夹），File-->New-->Vector Asset，进入Vector Asset界面，界面如下：
图片.png
矢量图的制作有两种素材类型：Clip Art（剪切图），Local file（本地SVG文件或者PSD文件）
【Clip Art（剪切图）】
Name：xml文件名称
Clip Art：可以选择AS自带的图标
图片.png
Size：设置矢量图的大小
Color：设置矢量图的颜色
Opacity：设置不透明度
Enable auto mirroring for RTL layout：为RTL布局启用自动镜像
【Local file（本地SVG文件或者PSD文件）】
Name：xml文件名称
Size：设置矢量图的大小
Opacity：设置不透明度
Enable auto mirroring for RTL layout：为RTL布局启用自动镜像
Path：选择本地矢量图（比如svg图片）
从本地导入上面预留好的svg文件，如下：
图片.png
导入android之后会生成ic_setting.xml文件，这个文件里面的代码也是自动生成的，代码如下：
<vector android:height="24dp" android:viewportHeight="1024"
android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#d4237a" android:pathData="M737.3,63.8H286.7C174.4,63.8 83,155.2 83,267.6v488.8c0,112.4 91.4,203.8 203.8,203.8h450.5c112.4,0 203.8,-91.4 203.8,-203.8V267.6C941,155.2 849.6,63.8 737.3,63.8zM887,756.4c0,82.6 -67.2,149.7 -149.7,149.7H286.7C204.2,906.2 137,839 137,756.4V267.6c0,-82.6 67.2,-149.7 149.7,-149.7h450.5c82.6,0 149.7,67.2 149.7,149.7v488.8z"/>
<path android:fillColor="#d4237a" android:pathData="M685.1,441v-38.8c0,-34.4 -28,-62.4 -62.4,-62.4L584,339.8L556.1,312c-11.8,-11.8 -27.4,-18.2 -44.1,-18.2 -16.7,0 -32.4,6.5 -44.1,18.2L440,339.8h-37.8c-34.4,0 -62.4,28 -62.4,62.4L339.8,440L312,467.9c-24.3,24.3 -24.3,63.9 0,88.2l27.9,27.9v38.8c0,34.4 28,62.4 62.4,62.4L441,685.2l26.9,26.9c12.2,12.2 28.1,18.2 44.1,18.2s31.9,-6.1 44.1,-18.2l26.9,-26.9h39.7c34.4,0 62.4,-28 62.4,-62.4L685.1,583l26.9,-26.9c24.3,-24.3 24.3,-63.9 0,-88.2L685.1,441zM678.6,522.7l-33.8,33.8c-4.4,4.4 -6.9,10.4 -6.9,16.7v49.5c0,8.2 -6.9,15.1 -15.1,15.1h-49.5c-6.3,0 -12.3,2.5 -16.7,6.9l-33.8,33.8c-5.8,5.8 -15.6,5.8 -21.4,0l-33.8,-33.8c-4.4,-4.4 -10.4,-6.9 -16.7,-6.9h-48.5c-8.2,0 -15.1,-6.9 -15.1,-15.1v-48.5c0,-6.3 -2.5,-12.3 -6.9,-16.7l-34.8,-34.8c-5.8,-5.8 -5.8,-15.6 0,-21.3l34.8,-34.8c4.4,-4.4 6.9,-10.4 6.9,-16.7v-47.6c0,-8.2 6.9,-15.1 15.1,-15.1L450,387.2c6.3,0 12.3,-2.5 16.7,-6.9l34.8,-34.8c5.6,-5.6 15.7,-5.6 21.3,0l34.8,34.8c4.4,4.4 10.4,6.9 16.7,6.9h48.5c8.2,0 15.1,6.9 15.1,15.1v48.5c0,6.3 2.5,12.3 6.9,16.7l33.8,33.8c5.8,5.8 5.8,15.6 0,21.4z"/>
<path android:fillColor="#d4237a" android:pathData="M512.5,420.6c-50.4,0 -91.4,41 -91.4,91.4s41,91.4 91.4,91.4 91.4,-41 91.4,-91.4 -41,-91.4 -91.4,-91.4zM512.5,556.2c-24.4,0 -44.2,-19.8 -44.2,-44.2 0,-24.4 19.8,-44.2 44.2,-44.2 24.4,0 44.2,19.8 44.2,44.2 0,24.4 -19.9,44.2 -44.2,44.2z"/>
</vector>
以上代码就是矢量图在Android中的表示了。
（4）了解SVG
SVG 即可缩放矢量图形 (Scalable Vector Graphics) ，是使用 XML 来描述二维图形和绘图程序的语言，其定义遵循 W3C 标准。
在 2003 年 1 月，SVG 1.1 被确立为 W3C 标准。使用 SVG 的优势在于：
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
SVG 的 <path> 元素用于定义一些复杂的图形，其定义在 W3 SVG Path。
<path> 可用的命令如下：
| 名称 | 解释 |
|---|---|
| M = moveto(M X,Y) | 将画笔移动到指定的坐标位置 |
| L = lineto(L X,Y) | 画直线到指定的坐标位置 |
| H = horizontal lineto(H X) | 画水平线到指定的X坐标位置 |
| V = vertical lineto(V Y) | 画垂直线到指定的Y坐标位置 |
| C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) | 三次贝赛曲线 |
| S = smooth curveto(S X2,Y2,ENDX,ENDY) | 同样三次贝塞尔曲线，更平滑 |
| Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) | 二次贝赛曲线 |
| T = smooth quadratic Belzier curveto(T ENDX,ENDY) | 同样二次贝塞尔曲线，更平滑 |
| A = elliptical Arc(A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y) | 弧线 |
| Z = closepath() | 关闭路径 |
以上所有命令均允许小写字母。大写的字母是基于原点的坐标系(偏移量)，即绝对位置；小写字母是基于当前点坐标系(偏移量)，即相对位置。
在Android 中，矢量图的绘制由pathData完成。
[本章完...]
