轉載請標明出處：一片楓葉的專欄

本文我們將介紹一些關于Android矢量圖的相關知識點。最新的項目中要求以矢量圖替代傳統的.png資源文件，所以特意學習了一下Android中的矢量圖相關概念，不得不說矢量圖還是一個比較好的適配方案。Android從Android5.0開始引入了對矢量圖的支持，但是其并不支持svg這種矢量圖片格式,，而是以VectorDrawable的方式來實現矢量圖的效果。

Google官方關于矢量圖的相關說明：VectorDrawable相關說明

下面我們將詳細的介紹一下矢量圖的基本概念以及Android中對矢量圖的使用。

（一）什么是矢量圖

這里暫時引用一下百科中對矢量圖的定義：

矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

矢量圖是根據幾何特性來繪制圖形，矢量可以是一個點或一條線，矢量圖只能靠軟件生成，文件占用內在空間較小，因為這種類型的圖像文件包含獨立的分離圖像，可以自由無限制的重新組合。它的特點是放大后圖像不會失真，和分辨率無關，適用于圖形設計、文字設計和一些標志設計、版式設計等

可縮放矢量圖形是基于可擴展標記語言（標準通用標記語言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準，其簡稱為SVG，android中對矢量圖的支持就是對SVG的支持，其是W3C組織推薦的矢量圖標準。

這里我就簡單的引用W3C中對SVG矢量圖的介紹：

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

• SVG 用來定義用于網絡的基于矢量的圖形，SVG 使用 XML 格式定義圖形

• SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失

• SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

簡單來說SVG矢量圖就是一個使用XML標識圖片格式的萬維網聯盟標準，更多關于SVG的相關說明：SVG簡介

（2）矢量圖有什么好處

我們都知道Android系統已經為我們提供了PNG，JPG，drawable，.9.path圖片等，為什么又為我們提供了SVG矢量圖呢？

與其他圖像格式相比，使用 SVG 的優勢在于：

• SVG 可被非常多的工具讀取和修改（比如記事本）

• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

• SVG 是可伸縮的，SVG 圖像可在任何的分辨率下被高質量地打印

• SVG 可在圖像質量不下降的情況下被放大

• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）

• SVG 可以與 Java 技術一起運行，SVG 文件是純粹的 XML

矢量圖在實現的時候圖片質量不會下降，下面具體我們可以看一下一個簡單的例子：

<ImageView android:id="@+id/imageview"android:layout_width="100dp"android:layout_height="100dp"android:layout_marginTop="30dp"android:layout_marginLeft="30dp"app:srcCompat="@drawable/ic_android_black_24dp"/>

然后我們看一下實現的效果：

然后我們更新一下圖片的顯示大小，再繼續看一下：

<ImageView android:id="@+id/imageview"android:layout_width="200dp"android:layout_height="200dp"android:layout_marginTop="30dp"android:layout_marginLeft="30dp"app:srcCompat="@drawable/ic_android_black_24dp"/>

可以發現當圖片顯示變大時圖片也沒有失真的情況，顯示的情況還是和100dp的時候是相似的，而且我們也沒有保存多分drawable圖片資源，這樣使用矢量圖代替資源文件的話還可以減小我們的apk文件大小等。

（3）開發過程中如何使用矢量圖替換Png Icon

這里以Android Studio為例，假如我們需要在低版本上使用矢量圖，需要在項目中引入新的兼容庫support-vector-drawable，并且appcompat-v7庫的版本要在23.2.0+。而且你還要修改下gradle的相關配置，不要讓gradle在構建的時候為你在低版本(API21以下)的情況下生成針對于不同密度的png文件，因為android studio1.4的時候支持了矢量圖。

• 如果你的gradle插件的版本為2.0以下，你應該這么修改

android {defaultConfig {// 不讓gradle自動生成不同屏幕分辨率的png圖generatedDensities = []}aaptOptions {additionalParameters "--no-version-vectors"} }

如果你的gradle插件版本是2.0+，你 應該這么修改

android {defaultConfig {vectorDrawables.useSupportLibrary = true} }

經過上面的設置之后我們就可以在我們的Android項目中使用矢量圖了。

（4）使用Android Studio創建矢量圖資源

• 右鍵res目錄創建Vector Asset資源

• 設置Asset Type，選擇SVG資源，設置SVG資源大小

• 在drawable目錄下生成vector資源文件

（5）矢量圖標簽的相關說明

可以發現我們生成的矢量圖資源文件其實是一個drawable文件：

<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="#FF000000"android:pathData="M6,18c0,0.55 0.45......-2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/> </vector>

• 這里的drawable資源文件的根節點是vector，我們都知道drawable中的節點都是對應著一個Java對象的，而vector是VectorDrawable對應的根標簽，Android中矢量圖對應的Java對象就是VectorDrawable。

• 然后android:width與android:height對應矢量圖的實際大小，這里需要說明的是矢量圖是可以無限大, 但通常情況下一個圖片都應該有一個原始大小, 假如你將此VectorDrawable作為一個ImageView的src, ImageView的大小都設置為wrap_content, 則ImageView對應的實際大小就是這里設置的大小。

• 繼續我們看一下android:viewportWidth與android:viewportHeight，它們是指當前Drawable對應的虛擬Canvas的大小, 之所以說是虛擬的是因為實際上并不存在這樣一個Canvas, 又之所以需要這個值是因為在標簽中的路徑數據要基于具體的坐標系來繪制.

• 而標簽對應路徑信息, 這里的path與我們自定義繪制圖形時用的Path原理一樣, 就是記錄一些繪圖操作, 具體對應其中的pathData.PathData中對應的路徑描述符號不需要我們去記, 通常情況下由繪圖軟件生成svg圖片再從svg文件中提取。

（6）如何在View中引用

• 添加自定義屬性命名空間

xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"

在layout布局文件中的根節點添加xmlns:app的命名空間

• 在ImageView中設置src

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

可以發現這里使用的是srcCompat而非src屬性

• 為View對象設置Backgraound

Resources resources = context.getResources(Resources, int, Theme); Theme theme = context.getTheme(); Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme); view.setBackground(drawable);

最后我們看一下它的展示效果：

（7）如何編寫VectorDrawable資源文件

我們可以看到VectorDrawable資源文件的編寫很復雜，那么我們如何編寫VectorDrawable文件呢？其實編寫VectorDrawable資源文件我們可以首先生成一個SVG文件，然后使用Android Studio的SVG工具生成VectorDrawable資源文件。具體步驟如下：

• 美工交付.svg文件

• 使用Android Studio加載本地.svg文件并生成VectorDrawable資源文件

• 生成最終的svg drawable資源文件

總結：
以上就是在Android開發過程中使用矢量圖的相關知識，更多關于矢量圖的知識點可以參考：
Android的矢量圖支持 - VectorDrawable
如何玩轉Android矢量圖VectorDrawable
Android中使用SVG矢量圖

總結

以上是生活随笔為你收集整理的Android tips（十二）--Android开发中使用矢量图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。