一、背景
随着 Android 的碎片化越来越严重，适配成为一个开发中一个痛点。如果 UI 只切一套图，但是在一些特定机型上难免会出现模糊或者变形的情况，如果切多套不同分辨率的图，虽然能解决适配问题，但是造成安装包过大的问题，很多开发者都会为这个问题感到头疼。终于，Android 的 Vector 的出现，可以解决这个问题了。
二、Vector是什么
我们在了解Vector之前，我们必须先了解SVG。
SVG 全称是 Scalable Vector Graphics（可扩展矢量图形） ，是基于 XML 的矢量图像格式，它运行的时候才会去通过一些特定的语法和规则渲染绘制出图像，目前在网页上使用非常广泛使用，它最主要优点就是不会降低图片质量的前提下，可以适应所有分辨率屏幕，文件体积更可以直接用 编写 XML 来描绘图片，使图片具有交互功能。缺点就是因为是运行时才会去绘制，所以效率没有高。
了解完SVG，再去了解Vector Drawable就更简单了，因为 Vector 就是 Android 的 SVG 实现。Vector是Android 5.0 之后才出来的，不过从 AppCompat23.2 开始，Google开始支持在5.0版本以下使用Vector。Vector Drawable 并不是支持所有 SVG 的语法，但是支持的语法已经足够使用。
三、Vector的语法
因为 Vctor 是基于XML的，所以是用代码编写的。示例如下：
代码语言：javascript复制<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="1024.0"
android:viewportHeight="1024.0">
<path
android:pathData="M842.7,259.9a159,159 0,0 0,-113.1 -46.9h-0.2a158.6,158.6 0,0 0,-112.8 46.7l-0.1,0.1 -294.5,294.5a96,96 0,0 0,68.1 163.7c24.5,0 49,-9.3 67.6,-28l294.5,-294.5a32,32 0,1 0,-45.2 -45.2l-294.5,294.5a31.9,31.9 0,0 1,-45.1 -0.2,31.6 31.6,0 0,1 -0.2,-45.1l294.5,-294.5a95,95 0,0 1,67.6 -28h0.1a95.5,95.5 0,0 1,67.9 28.2c18.1,18.1 28.1,42.2 28.1,67.8a95.1,95.1 0,0 1,-28 67.8l-79.5,79.5 -0.5,0.5 -220.4,220.5a160.3,160.3 0,0 1,-226.4 0.1A158.9,158.9 0,0 1,224 628.2c0,-42.8 16.7,-83 46.9,-113.3l300.3,-300.3a32,32 0,1 0,-45.2 -45.2l-300.3,300.3A222.8,222.8 0,0 0,160 628.2c0,59.9 23.3,116.2 65.5,158.4a223.2,223.2 0,0 0,158.3 65.4,223.7 223.7,0 0,0 158.6,-65.6l311.5,-311.4a31.7,31.7 0,0 0,7.1 -11.1c18.5,-26.6 28.6,-57.9 28.6,-91a159.1,159.1 0,0 0,-46.9 -113"
android:fillColor="#ff9800"/>
</vector>
Vctor属性：
- width：图形的实际宽度
- height：图形的实际长度
- viewportHeight：画布的长度
- viewportWidth：画布的宽度
Vector中的path语法基本可以绘制出很多我们想要的图像，可以说path是Vector中最重要的一个，所以我们主要讲一下path指令。
path指令：
- M = moveto(M 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,FLAG1,FLAG2,X,Y)：弧线
- Z = closepath()：关闭路径
当然上面的指令也可以换成小写，作用一样，只是参考坐标不一样，大写表示参考绝对坐标，小写表示参考相对坐标，也就是父容器坐标。你不需要特别去学习如何通过SVG语法去编写图像，只需要能看懂就好了，毕竟，我们背后有伟大的设计师。
四、Vector的使用
1. 在Android studio上使用
打开 File->New->Vector Asset
打开之后会看到一个编辑 Vector 的界面
在这里你可以选择两种方式来生成 Vector 图像，一种Android studio自带的 Material 风格的 Iocon ，一种是使用本地的SVG。
至于本地的SVG如何来，这里有两种方法
- 大部分设计工具都支持导出的格式为svg，切图的时候，生成SVG图像对UI设计师是很简单的事情。
- 使用SVG的编辑器来进行SVG编写。推荐在线网站 http://editor.method.ac/ 。编辑界面如下图
完成编辑之后就会生成一个xml文件，你可以在Android studio 上进行预览跟编辑。
2.在布局文件使用
生成了 Vector 图像之后，我们就可以开始在布局文件使用了，使用方式跟普通的 drawable 一样。
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.jia.dagger.MainActivity"
tools:showIn="@layout/activity_main">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_accessory" />
</android.support.constraint.ConstraintLayout>Vector 优势在这里就可以显示出来了，无论你 ImageView 多大 ，图片没有丝毫模糊的迹象。
五.总结
Vctor的出现对开发者来说的确是很让人兴奋的事情，它也是很有潜力去取代普通位图，毕竟这在前端已经得到很好的验证，但是目前来说，Vector 在 Android 低版本上还不能广泛使用，虽然 Google 出了兼容库，但是还是有性能问题的隐患，所以还是需要点时间去观望。
