Android VectorDrawable 的使用

SVG的全稱是Scalable Vector Graphics，叫可縮放矢量圖形。它和位圖（Bitmap）相對，SVG不會像位圖一樣因爲縮放而讓圖片質量下降。它的優點在於節約空間，使用方便
Android 5.0中引入了 VectorDrawable 來支持矢量圖(SVG)，同時還引入了 AnimatedVectorDrawable 來支持矢量圖動畫，在最近幾次Support包更新之後，SVG的兼容性問題得以大大改善。

VectorDrawable 並沒有支持所有的 SVG 規範，目前只支持 PathData 和有限的 Group 功能。另外還有一個 clip-path 屬性來支持後面繪圖的區域。所以對於使用 VectorDrawable 而言，我們只需要瞭解 SVG 的 PathData 規範即可。

// 阿里矢量圖標庫

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.V1n5x6

一 .創建方式:

點擊項目的File —-> New —>Vector Asset即可
點擊項目的Drawable目錄右鍵創建文件 ,修改類型爲vector

VectorDrawable，最低到api 7，但AnimatedVectorDrawableCompat到api 11。如果想要兼容之下的版本。需要對gradle進行配置。

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

定義好的矢量圖文件，在佈局中使用app:srcCompat標籤，需要使用activity繼承於AppCompatActivity，需要用這個標籤，首頁的HomeActivity繼承於AppCompatActivity，而AppCompatActivity也繼承了FragmentActivity

二.屬性介紹

1.vector元素介紹

有以下幾個屬性：

name：定義該矢量圖形的名字。通過名字找到這個矢量圖。
width，height：定義該矢量圖形的固有寬高(必須的，矢量圖內部的寬高intrinsic) ,與外部的寬高無關
viewportHeight，viewportWidth：定義畫布(viewport)的大小，不需要指定單位。但大小可以理解爲一個虛擬單位，將drawable的寬高分成多少等份，在定義path的時候所有數值都是說取drawable寬高的多少份。如viewportWidth和viewportHeight分別爲32，32，在path中(16,16)便表示在drawable寬高的中間。所有控制點都必須在viewportWidth和viewportHeight內，超出的部分交不予顯示。該屬性爲必需值。
alpha：圖片的不透明度。
tint 定義該 drawable 的 tint 顏色。默認是沒有 tint 顏色的。一般不需設置
tintMode 定義 tint 顏色的 Porter-Duff blending 模式，默認值爲 src_in。
autoMirrored 設置當系統爲 RTL (right-to-left) 佈局的時候，是否自動鏡像該圖片。比如阿拉伯語。

2.Path元素

name：路徑的名稱。可以在其他地方來引用。

要畫動畫了，路徑1，到路徑2.

fillColor：圖形的填充顏色。設置該屬性值後，得到的svg圖形就會填充滿.(畫滿)
strokeColor：邊界的顏色。(畫邊框)
strokeWidth：邊框的寬度。
strokeAlpha：邊界透明度。
trimPathEnd：從開始到結束，顯示百分比，0，不顯示，1 顯示。
trimPathStart：從開始到結束，隱藏百分比，0 不隱藏，1 隱藏。
trimPathOffset：設置截取範圍。
strokeLineCap 設置路徑線帽的形狀，取值爲 butt, round, square. (設置線頭爲圓滑)
strokeLineJoin 設置路徑交界處的連接方式，取值爲 miter,round,bevel.

strokeMiterLimit 設置路徑交叉時候，斜角的上限。當 strokeLineJoin 爲 “round” 或 “bevel” 的時候，這個屬性無效。爲miter時，銳角相交，可能斜面會很長，不協調。所以就爲交界的斜面設置上限。默認是10.意味着一個斜面的長度不應該超過線條寬度的 10 倍。

pathData：定義控制點的位置。

所有的參數，都可以大寫小寫，大寫表示是絕對位置。小寫是相對位置

所有的值，都可以用空格來間隔開，或者用逗號間隔開

M：move to 移動繪製點, 一個座標
L：line to 直線，一個座標
Z：close 閉合，不要參數
C：三次貝塞爾曲線，三個座標，前兩個爲貝塞爾曲線的控制點的座標，最後一個終點的座標。
S：同C，但比C要更平滑。
Q：二次貝塞爾曲線，兩個座標，第一個表示貝塞爾曲線的控制點座標，第二個終點的座標。
T：同Q，但比q平滑。
A：ellipse 圓弧，七個參數，
(rx ry rotation big_flag sweep_flag x y)
rx ry，弧線所屬橢圓的半軸的xy的長度，如果xy相等，那麼就是一個圓。
rotation 旋轉角度
big_flag 是否大圓 1 爲 是， 0 不是
sweep_flag 是否順時針 1 爲 是， 0 不是
x y 終點座標
H:水平畫一條直線到指定位置，一個座標
v:垂直畫一條直線到指定位置 ，一個座標
//指令的大小寫分別代表着絕對定位與相對定位。絕對定位指的是這個點在drawable中的座標，而相對定位指的是這個點相較於前一個點移動的座標。

3.group元素

有時候我們需要對幾個路徑一起處理，這樣就可以使用 group 元素來把多個 path 放到一起。group 主要是用來設置路徑做動畫的關鍵屬性的。

name 定義 group 的名字
rotation 定義該 group 的路徑旋轉多少度
pivotX 定義縮放和旋轉該 group 時候的 X 參考點。該值相對於 vector 的 viewport 值來指定的。
pivotY 定義縮放和旋轉該 group 時候的 Y 參考點。該值相對於 vector 的 viewport 值來指定的。
scaleX 定義 X 軸的縮放倍數
scaleY 定義 Y 軸的縮放倍數
translateX 定義移動 X 軸的位移。相對於 vector 的 viewport 值來指定的。
translateY 定義移動 Y 軸的位移。相對於 vector 的 viewport 值來指定的。

4.clip_path元素

vector 還支持 clip-path 元素。定義當前繪製的剪切路徑。注意，clip-path 只對當前的 group 和子 group 有效。

name 定義 clip path 的名字

pathData 和 android:pathData 的取值一樣。

三.示例

畫太極圖的示例:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="50dp"
    android:width="50dp"
    android:viewportHeight="100.0"
    android:viewportWidth="100.0"
>
<!--左邊的是兩個四分之一圓-->
<path
    android:fillColor="#000000"
    android:name="黑魚"
    android:pathData="M0 50,
        A50 50 0 0 1 50 0,
        A25 25 0 0 0 50 50,
        A25 25 0 0 1 50 100,
        A50 50 0 0 1 0 50"/>
<path
    android:fillColor="#ffffff"
    android:name="白眼"
    android:pathData="M43 75,A7 7 0 1 1 57 75, A7 7 0 1 1 43 75"/>
<!--右邊畫一個半圓-->
<path
    android:fillColor="#FFFFFF"
    android:name="白魚"
    android:pathData="M50 0,
        A50 50 0 1 1 50 100,
        A25 25 0 1 0 50 50,
        A25 25 0 1 1 50 0"/>
<path
    android:fillColor="#000000"
    android:name="黑眼"
    android:pathData="M43 25,A7 7 0 1 1 57 25, A7 7 0 1 1 43 25"/>
</vector>

四.VectorDrawable動畫

創建animator_vector 資源文件
在資源文件中定義target，指定爲某個path或者group去設定動畫
創建objectAnimator資源文件。注意，這個文件，需要定義在values/animator文件夾下。

定義一個笑臉，從哭臉變成笑臉。

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="smile"
    android:width="30dp"
    android:height="30dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
>
    <!--臉-->
    <path
        android:name="smile_circle"
        android:fillColor="#f7ec22"
        android:pathData="M0 50, A50 50 0 0 1 100 50, A50 50 0 0 1 0 50"/>
    <!--嘴巴-->
    <path
        android:name="mouth"
        android:strokeWidth="5"
        android:strokeColor="#00ff00"/>
</vector>

定義笑臉動畫：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:propertyName="pathData"
                android:valueFrom="M30 70, Q50 50 70 70"
                android:valueTo="M30 70, Q50 90 70 70"
                android:valueType="pathType"
    >
</objectAnimator>

關聯動畫和矢量圖

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:drawable="@drawable/smile"
    >

    <target
        android:animation="@animator/smile_anim"
        android:name="mouth"/>
</animated-vector>

在佈局中使用vector矢量圖文件

<ImageView
    android:id="@+id/iv"
    android:background="#000000"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:srcCompat="@drawable/smile_anim"
    />


// 在代碼中開啓動畫

ImageView iv = (ImageView) findViewById(R.id.iv);

Animatable a = (Animatable) iv.getDrawable();

a.start();

Android VectorDrawable 的使用