摘要

? ?? ? 從5.0(API等級(jí)21)開始，android了支持矢量圖，優(yōu)點(diǎn)：文件比位圖要小，可以縮小我們apk體積，并且可以任意放大矢量圖形，而不會(huì)丟失細(xì)節(jié)或影響清晰度，在屏幕適配時(shí)，只用一套圖即可。

VectorDrawable的使用

1. 項(xiàng)目配置

compile 'com.android.support:appcompat-v7:23.2.0' //要求 appcompat-v7庫(kù)的版本要在23.2.0+

修改gradle配置文件(gradle插件版本是2.0+)

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

2. svg處理

Android中矢量圖是以xml文檔的形式存在的，并以vector為根節(jié)點(diǎn)，長(zhǎng)這樣：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF226622"
        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14zM12,10h-2v2L9,12v-2L7,10L7,9h2L9,7h1v2h2v1z"/>
</vector>

但我們的UI小姐姐提供給我們.jpg/.png/.psd/.svg等格式的圖片，都不是我們想要的，這可咋辦 ？？？

svg格式圖片

沒(méi)關(guān)系，我們可以用強(qiáng)大的Studio轉(zhuǎn)格式啊，步驟如下：

啟動(dòng)轉(zhuǎn)換器 : 方法一

或者使用快捷鍵：Ctrl + shift + A ,然后輸入 Vector Asset

啟動(dòng)轉(zhuǎn)換器 : 方法二

svg 轉(zhuǎn)換器

Clip Art 項(xiàng)為固有的矢量圖，我們直接用即可，而Local file(SVG,PSD)選項(xiàng)，則是我們需要轉(zhuǎn)換的了，剩下的提示進(jìn)行就可以啦。

3. svg使用舉例：

  <ImageView
      android:layout_width="@dimen/width_theme_margin_120"
      android:layout_height="@dimen/width_theme_margin_120"
      android:layout_centerVertical="true"
      app:srcCompat="@drawable/phone_green"
      app:tint="#ff0000"
      android:tintMode="screen"
      />

具體用法可以參考 官方說(shuō)明文檔

注意事項(xiàng)：

1. svg需要轉(zhuǎn)成vector后，Android才能用。
2. 小圖使用svg，大圖使用在圖片渲染時(shí)，會(huì)嚴(yán)重占用CPU資源，而且會(huì)很久。
3. 使用android:src屬性的地方需要替換為app:srcCompat屬性。
4. 當(dāng)使用vector asset工具創(chuàng)建矢量圖時(shí)，若采用的是Local file的psd格式文件時(shí)，Android這邊是不支持圖片的漸變和透明度效果的。
5. 若是app:srcCompat設(shè)置的圖片顯示不出來(lái)，首先查看的你的Activity 繼承的是否是繼承AppcompatActivity，或者使用android.support.v7.widget.AppCompatImageView 代替 ImageView。

Vector動(dòng)畫參：

Vector動(dòng)畫實(shí)現(xiàn)，我在網(wǎng)上找到了幾篇比較好的文章，親測(cè)好用，推薦給大家：
http://m.itdecent.cn/p/456df1434739
http://m.itdecent.cn/p/677da5076115
http://m.itdecent.cn/p/677da5076115