android開發之svg全面總結

鍾離四郎發表於2017-09-23
AndroidSVG

VectorDrawable

Vector Drawable是Google從Android 5.0開始引入的一個新的Drawable子類，能夠載入向量圖（低版本中需要做相容，如何相容低版本下文提及）,android中vector Drawable通過配置xml再設定到要使用的控制元件上，不必進行多螢幕分別率適配，只需要建立一份，不需要通過解析度來設定不同的圖片，可以大幅減少影象的體積，vector Drawable有些類似svg檔案，但是Android中的Vector並不是支援全部的SVG語法


屬性說明

  • width, height：圖片的寬高。可手動修改到需要尺寸；
  • viewportHeight, viewportWidth：對應將上面height width等分的份數。以上圖為例，表示將長寬都為24dp的圖形均分為24x24的網格，在這個網格中就可以很方便地描述點的座標，影象就是這些點連線起來構成的。
    • fillColor：填充顏色。
    • pathData：描述的網格中作畫的路徑。

相容處理

Vector Drawable是Android 5.0才提出的，所以對於低於5.0版本是需要做相容處理的，低版本做vector drawables相容實際上是在執行時將根據螢幕密度vector drawables轉化成bitmap
相容設定：
開啟app module的build.Gradle，在defaultConfig 新增：
gradle 版本低於 2.0

image.png
image.png

gradle 版本高於 2.0

image.png
image.png

新增appcompat的支援

image.png
image.png

實戰1：在控制元件中使用

ImageView通過設定src

image.png
image.png

通過Java程式碼設定src

image.png
image.png

image.png
image.png

使用vectordrawable設定background (包括TextView的CompoundDrawable)
不管是使用xml還是Java，都要求View是AppCompatView,而且vectorDrawable不能直接使用, 必須依附於StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable這裡選擇selector再包一層使用，另外不能忘記在Activity設定 AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);（如上圖）

image.png
image.png

image.png
image.png

image.png
image.png

image.png
image.png

image.png
image.png

image.png
image.png

動態的SVG

svg動畫庫
github.com/geftimov/an…

svg獲取

通過iconfont網站
www.iconfont.cn/

image.png
image.png

使用系統的Material Icons.

image.png
image.png

image.png
image.png

image.png
image.png

svg神兵利器

image.png
image.png

原始碼

github.com/ZhongXiaoHo…

參考：

www.androidhive.info/2017/02/and…
www.jianshu.com/p/e3614e7ab…
www.jianshu.com/p/0555b8c1d…

相關文章