android開發筆記之xml矢量圖片

xml矢量圖片

縮放矢量圖形(英語:Scalable Vector Graphics,SVG)是一種基於可擴展標記語言(XML),用於描述二維矢量圖形的圖形格式。
.svg格式相對於.jpg、.png甚至.webp具有較多優勢:
圖像與分辨率無關,不會變形,適配安卓的各種分辨率;
省空間。體積小,一般複雜圖像也能在數KB搞定,圖標更不在話下

xml矢量圖片的生成

方式一:通過android studio 將svg格式的圖片轉換成 xml格式的矢量圖片:

(1) 通過阿里的iconfont網址,下載對應的在線矢量圖:
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

我們可以通過這個網站,查詢下載各種svg的圖片,關鍵是還可以根據自己的需要來調節各種顏色:

在這裏插入圖片描述

在這裏插入圖片描述
(2)通過android studio,將svg圖片轉換爲xml矢量圖片。

將項目選擇爲Project Files, 鼠標選中drawable文件夾–右鍵–New–Vector Asset:
在這裏插入圖片描述
打開Configure Vector Asset,選擇Local file(AVG,PSD),從這我們也可以看出PSD格式的圖片也是可以直接轉換爲xml矢量圖片的:
在這裏插入圖片描述
然後,我們就可以看到轉換後的xml格式的矢量圖片:
在這裏插入圖片描述

方式二:通過android studio,直接選擇xml矢量圖片
將項目選擇爲Project Files, 鼠標選中drawable文件夾–右鍵–New–Vector Asset:
在這裏插入圖片描述
選擇Clip Art,再點擊Clip Art後面顯示的圖標(上圖爲機器人小圖標):
在這裏插入圖片描述
選擇我們需要的矢量圖片,然後就可以自動生成我們需要的xml矢量圖片。
在這裏插入圖片描述

方式三:svg2VectorDrawable生成xml矢量圖片
在Android Studio中, File -> Setting -> Plugins -> Browser repositories -> 搜“svg2VectorDrawable” -> 安裝並重啓Android Studio,再次進來後頂部工具欄會多一個圖標:
在這裏插入圖片描述
然後點擊SVG:
在這裏插入圖片描述
就可以直接在對應位置生成xml矢量圖片。

xml矢量圖片的預覽

那我們如何預覽我們的xml矢量圖片呢?有二種方式:

方式一:Android Studio預覽功能
將xml矢量圖片複製到對應項目的drawable文件夾中,然後直接可以打開預覽:
在這裏插入圖片描述
方式二:SVG2Vector編輯預覽工具
這是1款Java Applet可視化小程序,支持快速處理svg或svgz格式圖片生成vector的轉換,並且支持編輯和預覽生成的vector資源文件圖片。
首先,源碼地址:https://github.com/MegatronKing/SVG-Android/tree/master/svg-vector-applet
其次,下載地址:http://download.csdn.net/detail/megatronkings/9732869
使用步驟:
下載後爲svg2vector-applet-1.0.0.jar,直接啓動:

java -jar svg2vector-applet-1.0.0.jar

在這裏插入圖片描述
然後,我們可以直接將svg、svgz、vector文件,xml矢量圖片直接拖入到這個界面,就可以得到預覽界面,我們可以修改。

在這裏插入圖片描述
附:
還有一個工具,我們可以生成svg格式的圖片—Adobe Illustrator Cs6

最後,我們android開發,這個xml矢量圖片的製作,預覽二個功能已經搞定,應該來說,沒有什麼攔路虎了。

參考資料

(1)Android使用矢量圖(SVG, VectorDrawable)實踐篇
https://www.jianshu.com/p/0555b8c1d26a
(2)SVG-Android開源庫——SVG生成Vector資源文件的編輯預覽工具
http://www.wfuyu.com/technology/27393.html
(3)SVG2Vector離線編輯和預覽工具
https://download.csdn.net/download/megatronkings/9732869

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章