androidlogo矢量圖

① android圖片系列 (2) - 靜態 SVG 圖片

SVG 圖片是一種可支持任意縮放的圖片格式，使用 xml 定義，使用 canvas 中 path 路徑來完成繪制，和我們傳統使用的 BitMap點陣圖有很大的區別。

SVG 在前端早就普及了，在android 中是 google 是在5.0之後開始支持的，14年出來之後兼容是個大問題，隨著2016.2 V7包 23.2.0版本的發布才算是有個相對完善的兼容使用方案。

SVG 的概念我就不寫了，拿來主義啦，原文： Android Vector曲折的兼容之路

不瞎逼逼，我們先來看一看 android 中的 SVG 矢量圖是個什麼東東

看到沒有，這就是一個 SVG 矢量圖片，就是一個 xml 文件，右邊是預覽，先說下，這東西的好處：縮放不失真，體積小。這一個 SVG 圖片只有970個位元組...強大吧，比 png 格式的圖片強的沒邊了吧，png 我們還得適配，做多套，然後一個一個改名字復制到工程里，有了 SVG 媽媽再也不擔心我們寫作業啦...

這里需要解釋下這里的幾個標簽：

這里有一分詳細的屬性說明：

好了下面開始介紹 SVG 啦

首先，需要講解兩個概念——SVG和Vector。

SVG，即Scalable Vector Graphics 矢量圖，這種圖像格式在前端中已經使用的非常廣泛了

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量圖

因此，可以說Vector就是Android中的SVG實現，因為Android中的Vector並不是支持全部的SVG語法，也沒有必要，因為完整的SVG語法是非常復雜的，但已經支持的SVG語法已經夠用了，特別是Path語法，幾乎是Android中Vector的標配

Android以一種簡化的方式對SVG進行了兼容，這種方式就是通過使用它的Path標簽，通過Path標簽，幾乎可以實現SVG中的其它所有標簽，雖然可能會復雜一點，但這些東西都是可以通過工具來完成的，所以，不用擔心寫起來會很復雜。

Path指令解析如下所示：

支持的指令：

M = moveto(M X,Y) ：將畫筆移動到指定的坐標位置
L = lineto(L 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()：關閉路徑

坐標軸為以(0,0)為中心，X軸水平向右，Y軸水平向下
所有指令大小寫均可。大寫絕對定位，參照全局坐標系；小寫相對定位，參照父容器坐標系
指令和數據間的空格可以省略
同一指令出現多次可以只用一個
注意，』M』處理時，只是移動了畫筆， 沒有畫任何東西。 它也可以在後面給出上同時繪制不連續線。
關於這些語法，開發者需要的並不是全部精通，而是能夠看懂即可，其它的都可以交給工具來實現。

這里有一篇 Android vector標簽 PathData 畫圖超詳解 詳細描述了 SVG 中 path 的繪制

好了概念性的東西說完了，我們來看看

SVG 的使用分2種，一種是靜態 SVG 矢量圖，就是本文的主角，本章節主要談論的東西，另一種是 SVG 矢量動畫，是SVG 的高級應用，是給靜態 SVG 加上objectAnimator 動畫，應用的很廣泛，是實現 android icon 動態交互的核心做法。

上面的SVG 圖大家都看到了，我們就是寫一個 xml 的文件，裡面承載的標簽都是描述如何繪制我們想要的圖案的，畫布大小，顏色，路徑等，然後交給系統去繪制。

現在讓我們來看看 SVG 在 andorid 中如何應用，如何兼容5.0以下版本。

SVG 雖然早早就在前端使用了，但是 android 上開始支持 SVG 的使用還是從5.0開始的，在5.0以上系統的使用很簡單，和之前一樣使用 PNG 圖片一樣

首先 android 中的 SVG 圖片的承載方式是一個 xml 文件，所以UI 給我們的 SVG 圖片是不能直接使用的，這里 google 給我們提供載入方式

Android studio 在 2.3.3 的版本中可以直接使用 svg，新建一個 SVGDemo項目，新建 Vector Asset 文件：app-> main -> New -> Vector Asset 如圖所示：

我們選擇 Local File 就是選擇本地svg文件進行導入，對文件命名後點擊 Next ->Finish 在 drawable目錄 下就添加了一個.xml的文件

好了這樣一個 svg 圖片我們算是加入到我們的工程里里了，可以直接使用了。當然在此之前我們把 SVG 圖片放在那個 drawable 文件夾呢。對於這個問題就要說一下了：

有一點需要解釋一下，svg 矢量圖文件我們放在drawable 根目錄即可。android 系統不會根據你把 svg 矢量圖存放在不同的 drawable 文件夾，對圖片進行解析度上的縮放，因此我們不用像使用 PNG 圖片時准備多套圖片了。我們導入 SVG 圖片默認存放的地址就是 drawable根目錄，所以我們就放這里就好了，當然也可以自己寫SVG 圖片，都是 xml 的，自己寫完 path 路徑後都是可以查看預覽的，一般也不會自己寫，都是UI 的活。

這樣就 ok啦，5.0以上的系統SVG你就像一般 png 圖片一樣使用就好啦，你可以試一下。

SVG 在 4.x 版本上的兼容根據 SVG 使用范圍的變化，配置也是逐步增加的

這時 imageview 就不行了，我們需要使用 AppCompatActivity 或是 AppCompatImageView，這時我們需要導入 V7 包

gradle 需要如下配置：

系統會在 4.x 版本時對 SVG 自動生成相應的 drawable 圖，此時 SVG 是沒有無限拉伸特性的，gradle 的配置目的是去這個

舉個例子：

資源設置不能用 src 了，必須使用 srcCompat ，這時我們能看到圖而不是去 SVG 的特性了

這時上面的設置就不夠了，我們在 view 所在的 activity 或是全局添加下面的設置

然後這還不夠，我們必須給 SVG 圖片添加一個容器，比如 selector，這樣我們才能正常使用，比如給 textview 設置圖片，自定義屬性設置圖片

這個 vc_halfstart_24dp 就是 SVG 圖片

這個我們必須要添加官方的 vectorDrawable 支持庫了，最低支持到 23.2.0

這樣基本就沒啥問題了

SVG 配合自定義 view 的話，就得我們讀取 SVG 然後轉換成 path 路徑來畫了，SVG 實質上也是 xml 文件，所以解析 xml 文件的思路也使用，當然還有其他一些 SVG 轉 path 的思路

SVG前戲—讓你的View多姿多彩 一文中提供了一些思路，大家不妨去看看

② 如何玩轉Android矢量圖VectorDrawable

創建Vector Drawable
從相似角度來看，VectorDrawable與標准SVG圖形都是利用path值繪制完成的。不過如何利用SVG path繪制圖形並不在本篇文章的探討范圍之內，大家可以點擊此處從W3C網站處獲取必要的說明資料。在本文當中，我們只需要了解到path標簽的作用是進行圖形繪制即可。讓我們首先從SVG文件入手，看看以下圖形是如何被繪制出來的：
這一圖形共由五個主要部分所組成：
一個圓角四邊形作為CPU主體，該四邊形由兩條拱狀弧線構成。
四組各自包含五根線條的圖形，用於充當CPU的外延線路。

雖然看起來有點繁雜，但大家其實用不著糾結於以上代碼的具體含義，而且這完全不會影響到我們接下來要進行的VectorDrawable繪制工作。不過需要強調的是，我將前面提到的五大圖形組成部分在代碼中作為獨立的區塊來處理，這是為了增強代碼內容的可讀性。

③ 安卓開發中矢量圖的繪制及動畫

矢量圖也稱為面向對象的圖像或繪圖圖像，是根據幾何特性來繪制的圖形，在安卓開發中可以使用失量圖代替原來的圖片資源，矢量圖具有佔用空間小和可以隨意縮放但不失真的優勢，在我的多個項目中都有運用。

通過學習和實踐，我總結了一些與矢量圖相關的知識，方便今後更好的使用矢量圖，同時也可以供大家查閱參考。

繪制矢量圖之前需要先定義畫布的寬高，後續的繪制效果都展示在這個畫布上。在繪制過程中需要輸入的坐標就是這個畫布上的點。

安卓的矢量圖常見於 drawable 文件夾下，是一個xml文件，由 vector 標簽包裹，在 vector 標簽中可包含多個 path 標簽，依次疊加顯示。

在矢量圖中最重要的就是 path 屬性，圖像的樣式就是由 path 屬性中的數據繪制而成，這些數據由不同的命令組合而成，下面就介紹一些矢量圖的繪制命令。

將前面的命令示例連接起來就可以生成一個完整的圖像，它大概長這個樣子：

畫布的尺寸為500x500，圖上的頂點是200,10的位置，也是我們開始作圖的起點。通過這個圖片可以更好的理解每一個繪圖命令。

安卓中可以為矢量圖添加動畫效果，這樣用戶就可以看到一個動的圖片，可以一定程度的提高app的交互效果。矢量圖動畫是圖形內部的變化，可以做到View動畫無法實現的效果。

這種動畫針對的是矢量圖中 path 欄位的值，通過連續改變 path 欄位的值而達到產生動畫的效果。

註：pathData動畫所需的AnimatedVectorDrawable最低要求API等級為25

實現一個矢量圖動畫需要以下幾步：
1. 准備起始狀態和結束狀態的矢量圖兩張。
2. 創建動畫配置文件。
3. 創建動畫矢量圖文件。
4. 啟動動畫。

基於這種要求，我准備了兩個矢量圖：

控制動畫運行的是一個 objectAnimator ，此處把 objectAnimator 包裹在一個 set 中也是可以的，說白了就是執行這個動畫文件。
ration 用來指定動畫的持續時間。
propertyName 中的pathData指的就是矢量圖中的pathData。
valueFrom 和 valueTo 一個是起始路徑，一個是結束路徑，可以想到，這個動畫就是在持續修改pathData，從而達到展示動畫的效果。而 valueFrom 和 valueTo 的值是直接從先前准備的矢量圖中復制過來的，所以那個結束狀態的矢量圖中唯一有用的東西就是pathData屬性，沒有那個文件也無所謂。
valueType 這里必須填判型寫pathType，這是專門用來計算path的類型。

此時，文件的最外層由 animated-vector 包裹，同時需要添加一個 drawable 參數，這個 drawable 用於指定動畫應用於那個矢量圖上，我們是要從未啟用狀態變成啟用狀態，所以是在未啟用狀態開始執行動畫，在動畫未開始的時候展示的也是未啟用狀態。此處我們指定為 @drawable/icon_filter_off 。
內部有一個 target 標簽，這個標簽可以有多個，分別對應不同的動畫，但同一個 path 只能應用一個動畫。
name 用於指定要執行動畫的 path 。status正是我們為右下角小圖標path設置的名稱。
animation 用於指定需要執行的動畫。此處引用我們剛剛創建的猛沖山動畫資源 @animator/filter_turn_on 。
當我們創建枝中好動畫矢量圖之後，頁面中引用的資源就不再是之前的靜態矢量圖了，需要把 ImageView 的圖片替換成 @drawable/animated_filter_on

經過這么多的步驟，我們終於做出了一個矢量圖動畫，而且是一個。說實話，有點累，然而我這個狀態切換的動畫一套就要兩個，所以我又加了一個回來的動畫和對應的動畫矢量圖，一共六個文件，完成了篩選狀態的兩個切換動畫。這還是比較簡單的實現方式，對於兩種狀態切換的動畫，網上還有一種使用selector的方式，這種方式更麻煩，而且使用方法並沒有簡單一些，所以我的選擇是在需要切換狀態的時候更改 ImageView 的圖片資源，然後再執行動畫。

trimPath動畫相當於是改變了矢量圖繪制的位置，是從頭開始畫還是從80%的位置開始畫，然後再動態的修改這個百分比，從而達到動畫的效果。理解起來倒不是很難。

先放一個我使用trimPath動畫做的loading效果，這個動畫效果被我用在LoadingDialog中，在界面載入的時候會重復播放這個動畫。

android:name="load" 不用多說，這個是我們做動畫時路徑名稱。這里為了讓心電圖路徑更清晰，我設置了描邊寬度為20( android:strokeWidth="20" )，同時還要設置描邊的顏色才能展示出來。後面的 android:trimPathStart="0" 和 android:trimPathEnd="0" 是本次trimPath動畫的重點。

這兩個屬性都設置為0是因為動畫的起始幀都為0，然後通過 objectAnimator 慢慢把這兩個屬性變為1，這樣一個慢慢增長的動畫就形成了。
網路上一個橫線變成搜索按鈕的示例是將這兩個屬性分別應用到了兩個 path 上，而我是將兩個屬性同時應用到一個 path 上，原理都是一樣的。

在配置文件中，我將兩個動畫都設置為3秒且循環播放，起始點的動畫慢於終點的動畫1秒，達到只畫中間1秒間隔線段的效果。和路徑變形動畫的區別是 android:valueType="floatType" ，我們只需要計算從0到1的數字，然後應用到 trimPathStart 和 trimPathEnd 欄位上。至此，loading的動畫就配置完了。

這一步已經沒什麼可說的了，就是將指定的矢量圖中指定的路徑設置一個指定的動畫。

通過幾天的學習，已經大致掌握了矢量圖的展示及動畫的製作，但這一套流程下來成本比較高，是程序員方式的動畫製作流程。除了製作成本，創意成本也是相當高的，一個好的創意能極大的提升用戶體驗，而好多時候我們的創意能夠被實現也是很困難的。希望以後能實現一些更好的效果，讓用戶使用起來更舒服。

SVG—最簡單的SVG動畫
SVG路徑（path）中的圓弧(A)指令的語法說明及計算邏輯
Android中的矢量圖
Android高級動畫（2）