Android中的Vector

1、背景

隨着 Android 的碎片化愈來愈嚴重，適配成爲一個開發中一個痛點。若是 UI 只切一套圖，可是在一些特定機型上不免會出現模糊或者變形的狀況，若是切多套不一樣分辨率的圖，雖然能解決適配問題，可是形成安裝包過大的問題，不少開發者都會爲這個問題感到頭疼。終於，Android 的 Vector 的出現，能夠解決這個問題了。

2、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 的語法，可是支持的語法已經足夠使用。

3、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語法去編寫圖像，只須要能看懂就行了，畢竟，咱們背後有偉大的設計師。

4、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 多大 ，圖片沒有絲毫模糊的跡象。

五.總結

Vctor的出現對開發者來講的確是很讓人興奮的事情，它也是頗有潛力去取代普通位圖，畢竟這在前端已經獲得很好的驗證，可是目前來講，Vector 在 Android 低版本上還不能普遍使用，雖然 Google 出了兼容庫，可是仍是有性能問題的隱患，因此仍是須要點時間去觀望。

更多精彩內容，歡迎關注個人微信公衆號——Android機動車。