VectorDrawable：適應不同分辨率的drawable資源

編輯推薦：稀土掘金，這是一個針對技術開發者的一個應用，你可以在掘金上獲取最新最優質的技術乾貨，不僅僅是Android知識、前端、後端以至於產品和設計都有涉獵，想成爲全棧工程師的朋友不要錯過！

這篇文章是對VectorDrawable的簡單介紹，主要參考了android官方文檔。更詳細的講解請參考stylingandroid網站的3篇文章 https://blog.stylingandroid.com/vectordrawables-part-1/ ，或者關注本站將發表的翻譯版本。

一、VectorDrawable

在android5.0（API Level 21）中，我們可以使用矢量圖：vector drawable,vector drawable的特點是它不會因爲圖像的縮放而失真。在安卓開發中也就意味着你不需要爲不同分辨率的設備定義不同大小的圖片資源，只需一個vector drawable就夠了。在安卓中與vector drawable資源對應的類是VectorDrawable。要創建一個vector drawable，你需要在xml的<vector>的元素下定義好vector drawable的形狀數據。

下面的例子定義了一個心形的vector drawable：

1. <!-- res/drawable/heart.xml -->
2. <vector xmlns:android="http://schemas.android.com/apk/res/android"
3.     <!-- intrinsic size of the drawable -->
4.     android:height="256dp"
5.     android:width="256dp"
6.     <!-- size of the virtual canvas -->
7.     android:viewportWidth="32"
8.     android:viewportHeight="32">
9.  
10.   <!-- draw a path -->
11.   <path android:fillColor="#8fff"
12.       android:pathData="M20.5,9.5
13.                         c-1.955,0,-3.83,1.268,-4.5,3
14.                         c-0.67,-1.732,-2.547,-3,-4.5,-3
15.                         C8.957,9.5,7,11.432,7,14
16.                         c0,3.53,3.793,6.257,9,11.5
17.                         c5.207,-5.242,9,-7.97,9,-11.5
18.                         C25,11.432,23.043,9.5,20.5,9.5z" />
19. </vector>

其中這裏最讓人不解的是pathData裏面的那些數字，正是這些數字讓這個drawable呈現出心形。pathData指的是繪製一個圖形所需要的路徑信息，那麼問題來了，我怎麼知道該如何繪製呢？

w3c的文檔中詳細講解了繪製的規則：http://www.w3.org/TR/SVG11/paths.html#PathData 。其實在svg格式的圖像中也是使用這種規則，而且在安卓中android.graphics.Path api對路徑的定義也差不多是這種規則。

雖然有對path 規則的繪製教程，但是要創造出現有安卓中各種圖標的效果是很難的，要讓VectorDrawable有實際價值，肯定不能讓開發者去想辦法實現這些圖形的繪製，而是原本就有很多現成的圖像可用，8000個已分類好的扁平化圖標(PNG/SVG/WEBFONT)  從網上的搜索結果來看svg的圖標是大有人在。

 

二、AnimatedVectorDrawable

AnimatedVectorDrawable可以讓VectorDrawable動起來。

AnimatedVectorDrawable通過改變VectorDrawable的屬性來讓VectorDrawable呈現動畫效果，其實現實際上是試用了屬性動畫。

通常定義一個AnimatedVectorDrawable需要以下三個xml文件：

1.vector drawable本身：res/drawable/中定義一個有<vector>元素的xml文件，參考上面對VectorDrawable的定義。

2.vector drawable的動畫文件（Animated vector drawable）：res/drawable/中定義一個有<animated-vector>元素的xml文件。

3.一個或者多個屬性動畫文件：res/drawable/中定義一個有<objectAnimator>元素的xml文件。

Animated vector drawable可以讓<group>和<path>元素的屬性動態變化。<group>定義一組path或者子group，而<path>元素定義需要繪製的路徑。當你想讓VectorDrawable呈現動畫效果，在定義VectorDrawable的時候需要爲group和path的android:name屬性設置一個唯一的名字，以便在Animated vector drawable中找到它們。比如

1. <!-- res/drawable/vectordrawable.xml -->
2. <vector xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:height="64dp"
4.     android:width="64dp"
5.     android:viewportHeight="600"
6.     android:viewportWidth="600">
7.     <group
8.         android:name="rotationGroup"
9.         android:pivotX="300.0"
10.         android:pivotY="300.0"
11.         android:rotation="45.0" >
12.         <path
13.             android:name="v"
14.             android:fillColor="#000000"
15.             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
16.     </group>
17. </vector>

其中group的android:name爲rotationGroup而path的android:name爲v。

在Animated vector drawable中就分別通過rotationGroup和v找到vector drawable的group和path：

1. <!-- res/drawable/animvectordrawable.xml -->
2. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
3.   android:drawable="@drawable/vectordrawable" >
4.     <target
5.         android:name="rotationGroup"
6.         android:animation="@anim/rotation" />
7.     <target
8.         android:name="v"
9.         android:animation="@anim/path_morph" />
10. </animated-vector>

其中animation代表一個ObjectAnimator或者AnimatorSet ，在本例中，第一個animator將目標group旋轉360度：

1. <!-- res/anim/rotation.xml -->
2. <objectAnimator
3.     android:duration="6000"
4.     android:propertyName="rotation"
5.     android:valueFrom="0"
6.     android:valueTo="360" />

第二個animator是將vector drawable的path元素從一個形狀轉變到另一個形狀。但是這兩個形狀必須滿足一定的條件：必須要有一致的命令（command）個數（逗號分割開的爲命令），並且每個命令的參數個數也必須一致。

1. <!-- res/anim/path_morph.xml -->
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3.     <objectAnimator
4.         android:duration="3000"
5.         android:propertyName="pathData"
6.         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
7.         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
8.         android:valueType="pathType" />
9. </set>

轉自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0123/2346.html