Vector Asset Studio的使用

因為VectorDrawable中有path標簽,里邊的path data內容比較復雜,那么我們可以用<b>Vector Asset Studio</b>來幫助我們生成一下xml文件。

1.打開Vector Asset Studio

打開一個項目,在Android視圖中,右擊res文件夾,選擇New->Vector Asset


因為這個要求Gradle的插件必須在1.5.0以上,如果提示要更新插件,那么就把你的插件更新到1.5.0以上。

2.導入一個Vector的圖形

有兩種方式,一種是添加一個material icon,另一種是導入一個SVG的文件。

2.1 添加material icon

在Vector Asset Studio的界面中,選擇<b>Material Icon</b>,然后點擊<b>Choose</b>,選擇你要添加的圖標。


之后你可以對文件名、尺寸、透明度、啟動RTL布局自動鏡像等作出修改,修改完成之后點擊next,

那么什么時候要開啟RTL布局鏡像這個東西呢?

一般是在你需要把圖片左右對換的情況下,舉個例子:有一些語言是從右向左讀的,如果你有一個箭頭的icon,可能從左指向右,在從右向左讀的這種情況中,可能要反過來,這種時候你就可以用到RTL了。

<h2>Note:</h2>如果你用的之前的舊項目,你可能需要在AndroidManifest里邊加上<code>android:supportsRtl="true"</code>。在5.0以上是支持自動鏡像的,就不用手動添加了。


選擇你的<b>Target Module</b>和<b>Res Directory</b>,Target Module就不用多說了。 其中,Res Directory大概有幾種選擇:

  • src/main/res
  • src/debug/res
  • src/release/res
  • user-defined source

最后,點擊<b>Finish</b>,就大功告成。

這時候,你會發現在你的<code>app/src/main/res/drawable</code>(如果選擇的是第一個目錄的話)文件夾里多了一個vector drawable的xml文件。

生成完之后,我們就要build我們的項目了,如果你的最小的API是<b>Android 4.4(API 20)或者更小</b>,Vector Asset Studio會自動生成PNG文件。你可以從<code>app/build/generated/res/pngs/debug/</code>文件夾中看到這些png文件。

2.2 導入SVG文件

1.在Vector Asset Studio界面中選擇<b>Local SVG file</b>,導入<b>本地</b>的SVG文件。



2.之后的操作同上。
生成完Vector Drawable之后,我們就要把它添加到layout中來了,其實跟普通的drawable一樣用。
有一點不同的是,如果你需要drawable資源的確切的類的時候,你可能要根據版本區分一下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
   VectorDrawable vectorDrawable = (VectorDrawable) drawable;
 } else { 
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

如果想對Vector Asset Studio生成的xml文件作出修改的時候,需要注意版本的問題。
針對<b>Android5.0(API 20)及以上的版本</b>,Vector Asset Studio支持<b>所有</b>的Drawable和VectorDrawable的屬性。
針對<b>Android4.4(API 20)及以下的版本</b>,Vector Asset Studio只支持以下的屬性:

<vector>
android:width
android:height
android:viewportWidth
android:viewportHeight
android:alpha
<group>
android:rotation
android:pivotX
android:pivotY
android:scaleX
android:scaleY
android:translateX
android:translateY
<path>
android:pathData
android:fillColor
android:strokeColor
android:strokeWidth
android:strokeAlpha
android:fillAlpha
android:strokeLineCap
android:strokeLineJoin
android:strokeMiterLimit

而且,只有5.0及以上的版本才支持<b>動態屬性</b>,舉個例子:

android:fillColor="?android:attr/colorControlNormal"

打包

因為版本問題,你可以有兩種打包方式:
1.包里邊既有vector image文件,也有png文件,這種是<b>最簡單</b>的方法
2.根據API版本打不同的包,5.0以上的里邊去掉生成的png文件,這樣包會小很多。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容