Android中的Vector

蜻蜓队长

发布于 2018-08-03 11:25:20

1.5K0

发布于 2018-08-03 11:25:20

一、背景

随着 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="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 一样。

<?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 多大，图片没有丝毫模糊的迹象。