Android中的Vector

Android機動車發表於2019-01-22
Android

一、背景

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

這裡寫圖片描述

五.總結

Vctor的出現對開發者來說的確是很讓人興奮的事情，它也是很有潛力去取代普通點陣圖，畢竟這在前端已經得到很好的驗證，但是目前來說，Vector 在 Android 低版本上還不能廣泛使用，雖然 Google 出了相容庫，但是還是有效能問題的隱患，所以還是需要點時間去觀望。

更多精彩內容，歡迎關注我的微信公眾號——Android機動車。

這裡寫圖片描述

相關文章