近日,蘋果開始嚴格執行限制熱更新政策,數據顯示截止到6月16日,中國地區下架應用已經接近3萬,包括《天天酷跑》等遊戲,其中6月15日一天,最高下架應用超過2萬,遊戲類應用超1萬。此次下架並非只是針對中國,是世界範圍大規模下架。不過並不是所有熱更新方式都被禁止,ReactNative/Weex這些蘋果允許範圍內的框架依然可以正常使用。
本篇來自 Dick_zeng 的投稿,細緻地分析了如何在Android中使用SVG,相比我之前推送的一篇SVG基礎文章,本文更具有實用性,算是進階了。希望對大家有所幫助。
Dick_zeng 的博客地址:
http://blog.csdn.net/dick_zeng
SVG的 全稱是 Scalable Vector Graphics,叫可縮放矢量圖形。它和位圖(Bitmap)相對,SVG 不會像位圖一樣因為縮放而讓圖片質量下降。它的優點在於節約空間,使用方便。
Android也在5.0中新增了對使用svg矢量圖支持,現在網上也有大把關於svg的文章但是使用時還是有遇到了許多坑,所以在這裡我就總結了下我在使用svg過程中遇到的各種坑,希望對大家有所幫助。
要想在 Android 使用 svg,首先要介紹的肯定是 VectorDrawable,VectorDrawable 是Android 5.0系統中引入了 VectorDrawable 來支持矢量圖(SVG),同時還引入了 AnimatedVectorDrawable 來支持矢量圖動畫。官方文檔:
VectorDrawable
https://developer.android.google.cn/reference/android/graphics/drawable/VectorDrawable.html
AnimatedVectorDrawable
https://developer.android.google.cn/reference/android/graphics/drawable/AnimatedVectorDrawable.html
VectorDrawable轉換Bitmap
Android studio 在 2.0 的版本中可以直接使用 svg,新建一個 SVGDemo項目,新建 Vector Asset 文件:File -> New -> Vector Asset
可以選擇Google提供的 Material Icon 進行導入也可以選擇 Local File 選擇 本地svg文件 進行導入,一般選擇後者。對文件命名後點擊 Next ->Finish 在 drawable目錄 下就添加了一個.xml的文件
點擊可以進行預覽,一看是不是很像 selector、animation-list 只是標籤為 vector 標籤 width、height 為對應的寬高,可以進行設置,viewportWidth、viewportHeight 這個我也不太了解大概就是視圖的寬高吧,好像作用不大,沒有設置過。path 為 html 中的一個標籤用來定義路徑,我們只關心 path 標籤中的 android:fillColor=」#FBDC00」 的屬性,用來改變顏色。
在 layout 新建一個 activity_svg.xml 文件
就是這樣簡單,預覽效果圖:
也可以當背景使用
上面說了在 Android5.0以上 使用svg圖片是沒有任何問題,但是怎麼兼容 5.0以下 的機型,很多 github 第三方開源庫可以解決,其實 google 已經給出了解決方案,我們主要了解原生的解決辦法。
首先,你需要在項目的 build.gradle 腳本中,增加對 Vector 兼容性的支持,代碼如下所示:
在 defaultConfig 中添加了:
vectorDrawables.useSupportLibrary = true
當然還需要添加 appcompat 的支持:
compile 'com.android.support:appcompat-v7:23.4.0'
1、我們要引用 support:appcompat-v7 中的view首先我們需要在XML布局文件頭部添加:
xmlns:app="http://schemas.android.com/apk/res-auto"
2、 用V7下的 AppCompatImageView 代替 ImageView
3、將 android:src屬性,換成 app:srcCompat 即可,代碼如下:
效果圖:
這裡 AppCompatImageView 就不做過多介紹,官方文檔:
https://developer.android.google.cn/reference/android/support/v7/widget/AppCompatImageView.html
根據上文是不是能推測出有 app:backgroundCompat屬性 呢,然而並不如我們所願,沒有這樣的屬性。所以我們只能用 android:background 這個屬性了,先不管這麼多了直接4.4的機器上運行試試,果然崩了,在這裡說明下在普通控制項上使用 Vector,就必須依附於StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable 我們選擇 selector 代碼如下:
這樣是不是完了呢?在運行試試還是崩了,這裡又是一個坑…..還需要在 activity 中添加如下代碼:
上面介紹了把 svg 圖片導入到項目中,但是一個個的 svg 是不是很麻煩,而且 drawable 會有大量的文件,阿里媽媽就提供了iconfont。
Iconfont-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。
iconfont在Android中的使用官網已經做了非常詳細介紹:
http://www.iconfont.cn/help/detail?helptype=code
使用起來也很簡單,我總結了幾步:
首先在我的項目中新建一個自己的項目;
從iconfont平臺選擇要使用到的圖標或者本地導入svg圖片到項目中;
下載代碼,把 iconfont.svg 和 iconfont.ttf 文件導入到項目中的 assets 文件夾中;
用 TextView 代替 ImagerView,找到圖標相對應的 HTML 實體字符碼給 textView 設置;
textview 設置大小跟顏色,圖標的大小顏色也會改變(這裡大小最好用dp為單位,這樣不會隨著手機字體大小的改變而改變圖標的大小);
為 Textview 設置指定的 ttf 文字;
每次都給 TextView 設置指定文字是不是也很繁瑣,而且一直不斷的在讀取 iconfont.ttf 文字,也很浪費內存,我們完全可以把這個抽離出來,說幹就幹。
首先我們要讀取到的是 assets 目錄下的 iconfont.ttf 文件;這裡我把它放到自定義的 Application 中,這樣就只要讀取一次,代碼如下:
這裡就實例化了 iconfont。然後給每 TextView 設置 Typeface,這肯定不是我們想要的,所以我們自定義一個 TextView 然後初始化時 setTypeface 就可以了代碼如下:
就下了就可以直接在 layout 文件中使用了:
運行效果跟上圖一樣。
動態設置通俗的說就是在代碼裡動態的調整圖標的大小顏色或改變圖片,iconfont 改變大小顏色這很簡單直接調用 TextView 的 setTextSize 和 setTextColor 就可以了,動態設置圖片是不是 setText 呢?
textview.setText("");
運行發現並不如我們所願,這裡涉及到 unicode字符 的問題,把代碼稍改一下:
這樣問題就解決了:
通過這篇文章,我們基本就能掌握SVG在Android中的使用了,並且了解了阿里的 iconfont 的使用以及封裝,其實 SVG 在 Android 中的應用還有很多列如文中提到的 AnimatedVectorDrawable 矢量圖動畫等,還有我把遇到的問題也貼出來希望大家來和我交流。怎麼在 Android 中使用 iconfont 彩色圖片,以及 iconfont 在除 TextView 其他控制項的使用。謝謝!
每天學習累了,看些搞笑的段子放鬆一下吧。關注最具娛樂精神的公眾號,每天都有好心情。
如果你有好的技術文章想和大家分享,歡迎向我的公眾號投稿,投稿具體細節請在公眾號主頁點擊「投稿」菜單查看。
歡迎長按下圖 -> 識別圖中二維碼或者掃一掃關注我的公眾號: