Android 的 VectorAndroid 的 Vector Drawable

一.背景

随着 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的，所以是用代码编写的。示例如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</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编写。推荐在线网站 editor.method.ac/ 。编辑界面如下图

这里写图片描述

完成编辑之后就会生成一个xml文件，你可以在Android studio 上进行预览跟编辑。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>

2.在布局文件使用

生成了 Vector 图像之后，我们就可以开始在布局文件使用了，使用方式跟普通的 drawable 一样。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <ImageView
        android:background="@drawable/ic_android_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Vector 优势在这里就可以显示出来了，无论你 ImageView 多大，图片没有丝毫模糊的迹象。

这里写图片描述

五.总结

Vctor的出现对开发者来说的确是很让人兴奋的事情，它也是很有潜力去取代普通位图，毕竟这在前端已经得到很好的验证，但是目前来说，Vector 在 Android 低版本上还不能广泛使用，虽然 Google 出了兼容库，但是还是有性能问题的隐患，所以还是需要点时间去观望。