如何玩轉(zhuǎn)Android矢量圖VectorDrawable

更新時間：2016年05月19日 14:48:59 作者：DamonZh

這篇文章主要教大家如何玩轉(zhuǎn)Android矢量圖VectorDrawable，對矢量圖感興趣的小伙伴們可以參考一下

從5.0(API等級21)開始，android開始支持矢量圖了。關(guān)于什么是矢量圖以及矢量圖有什么優(yōu)缺點不在本文的涉及范圍之內(nèi)，具體可以參考矢量圖百科。不過這里要提一下它的優(yōu)點：

保存最少的信息，文件大小比位圖要小，并且文件大小與物體的大小無關(guān)
任意放大矢量圖形，不會丟失細(xì)節(jié)或影響清晰度，因為矢量圖形是與分辨率無關(guān)的。

從以上兩個優(yōu)點來看，在項目中使用矢量圖至少可以縮小我們apk包的尺寸，而且可以在屏幕適配時提供很大的方便，因為矢量圖是分辨率無關(guān)的。

前面也說了，矢量圖從21才開始支持。那么如果我想往下兼容改怎么辦呢？這個問題要放在以前的話，我會說github下就有你要的答案。但現(xiàn)在我不會這么說，因為前段時間Google升級了support library，官方向后兼容了矢量圖的使用。要問兼容到哪個版本，我告訴你矢量圖兼容到API7，矢量圖動畫兼容到API11(是不是已經(jīng)滿足了你的使用)。

好了，下面我們就來說說怎么在項目中使用矢量圖。

一、VectorDrawable的使用
按照官方的說法，要在低版本上使用矢量圖，需要在項目中引入新的兼容庫support-vector-drawable，并且appcompat-v7庫的版本要在23.2.0+(寫文章這會23.2.1已經(jīng)發(fā)布了)。而且你還要修改下gradle的相關(guān)配置，不要讓gradle在構(gòu)建的時候為你在低版本(API21以下)的情況下生成針對于不同密度的png文件，因為android studio1.4的時候支持了矢量圖。

修改appcompat-v7的版本
compile 'com.android.support:appcompat-v7:23.2.0'
NOTE: 這里我只引入了23.2.0版本的appcompat-v7庫，同步gradle后就編譯出了support-vector-drawable-23.2.0和animated-vector-drawable-23.2.0這兩個庫。

修改gradle配置文件
如果你的gradle插件的版本為2.0以下，你應(yīng)該這么修改

android {
 defaultConfig {
  // 不讓gradle自動生成不同屏幕分辨率的png圖
  generatedDensities = []
 }

 aaptOptions {
  additionalParameters "--no-version-vectors"
 }
}

如果你的gradle插件版本是2.0+，你應(yīng)該這么修改

android {
 defaultConfig {
  vectorDrawables.useSupportLibrary = true
 }
}

經(jīng)過上面這幾步的修改，你就可以在項目中使用矢量圖了。那么，下面我們就正式來說說怎么使用。

android studio為我們提供了一個Vector Asset Studio的工具，讓我么可以從material icon和svg文件生成矢量圖。具體用法可以參考官方的說明文檔，這里就不多說了。

Android中矢量圖是以xml文檔的形式存在的，像下面這樣就定義了一個矢量圖，里面包含了關(guān)于該矢量圖的數(shù)據(jù)信息。

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:viewportHeight="24.0"
  android:viewportWidth="24.0">
  <path
    android:fillColor="#FF000000"
    android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM15.5,11c0.83,0 1.5,-0.67 1.5,-1.5S16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zM8.5,11c0.83,0 1.5,-0.67 1.5,-1.5S9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zM12,17.5c2.33,0 4.31,-1.46 5.11,-3.5L6.89,14c0.8,2.04 2.78,3.5 5.11,3.5z" />
</vector>

這是我通過material icon生成的，它在android中對應(yīng)著VectorDrawable這個類，也就是兼容包中的VectorDrawableCompat這個類。

定義好矢量圖形后，我們就可以向普通的圖形那樣來使用它了。不過有幾點需要注意：

*使用android:src屬性的地方需要替換為app:srcCompat屬性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.damon.vectordrawabledemo.MainActivity">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_mood_black_24dp" />
</RelativeLayout>

*在非src屬性的地方使用矢量圖時，需要將矢量圖用drawable容器(如StateListDrawable, InsetDrawable, LayerDrawable, LevelListDrawable, 和RotateDrawable)包裹起來使用。否則會在低版本的情況下報錯。
而在代碼中的使用和普通的png圖沒什么區(qū)別，調(diào)用的是同樣的API。

這樣我們就把矢量圖引入到我們的項目中了，下面我貼幾張圖來對比下矢量圖和png圖的不同，以此來展示下矢量圖的優(yōu)點。

首先是png的原圖和放大圖

其次是矢量圖的原圖和放大圖

對比一目了然。而且矢量圖的xml的大小只有655個字節(jié)，而不同分辨率的png的大小加起來有好幾k。矢量圖只需要維護一個xml，而png需要維護多個圖形資源。

矢量圖xml文件支持的標(biāo)簽以及屬性可以參考這里，包括了常見的填充、描邊、著色等。

二、使用矢量圖制作動畫
23.2的支持庫同樣也放出了矢量圖動畫對應(yīng)的兼容版本AnimatedVectorDrawableCompat，對應(yīng)的兼容包是animated-vector-drawable，xml標(biāo)簽則是animated-vector。AnimatedVectorDrawableCompat能夠以屬性動畫的形式來驅(qū)動VectorDrawable實現(xiàn)動畫，具體來說需要分三步走：

*定義一個VectorDrawableCompat的xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  <!-- 圖片本身的大小 -->
  android:width="500px"
  android:height="500px"
  <!-- 畫布的大小 -->
  android:viewportHeight="500"
  android:viewportWidth="500">
  <!-- 用來把多個path或者subgroup組合起來，group提供了一些屬性比如旋轉(zhuǎn)、縮放、平移。這些屬性值得變化會反應(yīng)在它內(nèi)部的path和subgroup元素上-->
  <group
    android:scaleX="5.0"
    android:scaleY="5.0">
    <!-- 這里group和path有一個name屬性，這個屬性用來在使用動畫時指定動畫要驅(qū)動的對象 -->
    <path
      android:name="star"
      android:pathData="M 50.0,90.0 L 82.9193546357,27.2774101308 L 12.5993502926,35.8158045183 L 59.5726265715,88.837672697 L 76.5249063296,20.0595700732 L 10.2916450361,45.1785327898 L 68.5889268818,85.4182410261 L 68.5889268818,14.5817589739 L 10.2916450361,54.8214672102 L 76.5249063296,79.9404299268 L 59.5726265715,11.162327303 L 12.5993502926,64.1841954817 L 82.9193546357,72.7225898692 L 50.0,10.0 L 17.0806453643,72.7225898692 L 87.4006497074,64.1841954817 L 40.4273734285,11.162327303 L 23.4750936704,79.9404299268 L 89.7083549639,54.8214672102 L 31.4110731182,14.5817589739 L 31.4110731182,85.4182410261 L 89.7083549639,45.1785327898 L 23.4750936704,20.0595700732 L 40.4273734285,88.837672697 L 87.4006497074,35.8158045183 L 17.0806453643,27.2774101308 L 50.0,90.0Z"
      android:strokeColor="@color/colorAccent"
      android:strokeWidth="2" />
  </group>
</vector>

*定義AnimatedVectorDrawableCompat的xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vector_drawable">
  <target
    android:name="star"
    android:animation="@animator/star_anim" />
</animated-vector>

可以看到，根元素是animated-vector，并且有一個必須的屬性android:drawable用來指定要驅(qū)動的矢量圖對象。子標(biāo)簽target一方面用來指定要驅(qū)動的矢量圖內(nèi)的group和path的名稱(這里和VectorDrawableCompat的xml中的group和path名稱對應(yīng))；另一方面指定要使用哪個屬性動畫來驅(qū)動group和path的屬性進行變化來產(chǎn)生動畫效果。

*創(chuàng)建屬性動畫
驅(qū)動trimPathStart和strokeColor屬性的動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
  <objectAnimator
    android:duration="5000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueFrom="1"
    android:valueTo="0" />
  <objectAnimator
    android:duration="5000"
    android:propertyName="strokeColor"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueFrom="@color/colorAccent"
    android:valueTo="@color/colorPrimaryDark" />
</set>

這樣，準(zhǔn)備工作就做好了。我們就可以使用矢量圖動畫了。把ImageView的src更改為矢量圖動畫

 <ImageView
    android:id="@+id/image_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:srcCompat="@drawable/vector_drawable_anim" />

在Java代碼中啟動動畫

 ImageView imageView = (ImageView) findViewById(R.id.image_view);
Drawable drawable = imageView.getDrawable();
//AnimatedVectorDrawableCompat實現(xiàn)了Animatable接口
if (drawable instanceof Animatable){
  ((Animatable) drawable).start();
}

這樣就實現(xiàn)了矢量圖動畫，看看效果圖吧。