Android SVG使用進階

2021-02-20 郭霖

近日,蘋果開始嚴格執行限制熱更新政策,數據顯示截止到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 其他控制項的使用。謝謝!

每天學習累了,看些搞笑的段子放鬆一下吧。關注最具娛樂精神的公眾號,每天都有好心情。

如果你有好的技術文章想和大家分享,歡迎向我的公眾號投稿,投稿具體細節請在公眾號主頁點擊「投稿」菜單查看。

歡迎長按下圖 -> 識別圖中二維碼或者掃一掃關注我的公眾號:

相關焦點

  • 【高級進階】Android SVG使用進階
    本篇來自 Dick_zeng 的投稿,細緻地分析了如何在Android中使用SVG,相比我之前推送的一篇SVG基礎文章,本文更具有實用性,算是進階了
  • Android Studio2.0中使用SVG圖片格式
    本文講解如何使用SVG格式.SVG: Scalable Vector Graphics, 可縮放矢量圖形.IRI: Internationalized Resource Identifiers, 國際化資源標識符.下載SVG格式的圖片.新建項目, 空白項目顯示圖片.
  • Android SVG使用之AnimatedVectorDrawable
    使用 SVG 的優勢在於:下面的例子是一個簡單的SVG文件的例子。SVG文件必須使用.svg後綴來保存:它的缺點是不允許使用腳本。假如您安裝了最新版本的Adobe SVG Viewer,那麼當使用<object>標籤時SVG文件無法工作(至少不能在 IE 中工作)!
  • Android微信上的SVG
    而且對於PNG來說的另一優勢是在開啟硬體加速的設備上,繪製Bitmap一個非常快速的過程。可以想像,讓SVG不比PNG慢將是一件很有挑戰的事情。2) 開發者的使用成本問題SVG並不是android支持的標準資源格式,android資源框架自然不可能天然支持SVG的資源加載,而修改框架和提供支持很可能意味著會增加後面使用SVG的開發同學的學習成本和使用成本。因此必須要考慮如何即可以用SVG但又不增加開發負擔。
  • 放蕩不羈SVG講解與實戰——Android高級UI
    但是如果對 SVG 進行使用動畫時,則需要進行兼容性處理。否在 5.0 以下會閃退,畢竟 4.4 的佔有率還 10.3%左右(如下圖,圖片來自 Android Studio 的統計)。至於如何使用和兼容,我們在下一小節進行說明。
  • Android SVG矢量動畫機制
    >這個代碼之中包含了兩組高寬,width和height是表示SVG圖像的具體大小,後面的是表示SVG圖像劃分的比例,後面再繪製path時所使用的參數,就是根據這兩個值來進行轉換的,比如上面的代碼,將200dp劃分100份,如果在繪圖中使用坐標(50,50),則意味著該坐標為正中間,現在我們加上path標籤。
  • SVG對騎手端weex繪圖功能擴展實踐
    ,iOS,web兼容的考慮,我們選擇了svg技術對weex進行插件擴展的研究,希望能幫助到正在使用weex開發的小夥伴們少走些彎路。.直接在需要該組件的script中使用weex.requireModule()獲得已註冊的模塊2.在需要的位置調用註冊的方法2.2 weex-android插件擴展方式介紹android組件 Component擴展步驟android端*1.創建自定義的組件繼承WXComponent/WXVContainer類*2.使用initComponentHostView
  • SVG 揚帆起航
    能做什麼動畫、圖形、漸變、旋轉、濾鏡、JavaScript 接口、各種超酷的動畫…和 HTML 使用的幾種方式<img src="xxx.svg" height="10" width="10" />不能使用JS來控制.svg { background-image: url(xxx.svg);}
  • 小程序的開發之使用SVG
    昨天突然提出要在小程序中使用SVG,因為我們的小程序項目是有主題色的。
  • 使用SVG製作進度條
    今天我們來看看怎麼使用SVG來實現進度條的效果。使用SVG可以很容易的實現,也易於理解,最主要是使用SVG實現的進度條具有良好的跨瀏覽器,並且能根據瀏覽器屏幕尺寸很好的顯示。基礎在具體製作之前,有一些簡單的概念要了解一下,這是製作進度條的一些基礎。
  • 使用 SVG 輸出 Octicon
    /GitHub.com 現在不再使用字體來輸出圖標了。為何使用 SVG?圖標字體渲染問題圖標字體從來只是一種 hack。我們之前使用一個自定義字體,並將圖標作為 Unicode 符號。這樣圖標字體就可以通過打包後的 CSS 來引入。只要簡單地在任意元素上添加一個 class,圖標就可以顯示出來。
  • Android自定義View-SVG動畫
    可以使用Illustrator矢量圖繪圖軟體來進行繪圖。Bitmap 是位圖,由一個個像素點組成,放大後會出現馬賽克。可以使用PhotoShop位圖繪圖軟體來進行繪圖。2、SVG的優勢:1、使用xml格式定義圖形,讀取和修改的工具多。
  • SVG 圖標製作指南
    原文:http://fvsch.com/code/svg-icons/how-to備註:譯文已獲得作者授權,轉載請附上原文連結。請儘量保持 SVG sprite 文件與源文件同步。當然如果你有 Grunt/Gulp 做自動構建打包時,你只需要維護一份圖標源文件(即icons 文件夾)。第三步:將圖標放到網頁中為了使用 SVG 圖標,我們得把它放到 HTML 中去,我們不能用 CSS 的 background 相關屬性,不能使用 ::before 等偽元素。
  • 一篇文章教會你使用HTML5 SVG 標籤
    【三、HTML5 中嵌入 SVG】    HTML5 允許我們直接使用 _...</svg> 標籤嵌入 SVG,    簡單的語法:<svg xmlns="http://www.w3.org/2000/svg"> </svg>
  • 使用 SVG 製作加載動畫
    這裡我不會特別詳細的描述每一步的基本原理,如果大家想了解 SVG 動畫的基礎知識的話可以先看看我之前寫的文章《SVG 動畫實踐1》。這些都可以通過 CSS3 動畫來實現,剩下的我們需要對這些動畫進行拆分,先分別實現它們。最後將他們組合,通過一定的時間配合實現完整的效果。在這裡我將該動效最終拆分成了以下幾個部分:每一個單獨的動畫效果我們都需要對其進行處理,所以我們需要對導出的 SVG 進行元素的整理,將我們需要進行操作的元素進行分組標記。
  • HTML5 內聯SVG元素使用詳解
    SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失示例代碼<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60
  • 微信小程序使用SVG圖標庫
    怎麼在微信小程序內使用?1.獲取項目中使用到的svg圖標文件集合(注意文件命名,使用時要統一)。2.利用工具(比如https://icomoon.io/app/#/select)將svg圖標文件生成 woff 文件。3.將woff 文件轉base64,方便小程序引入。
  • SVG初識
    此外,這也意味著可以使用任何文本編輯器和繪圖軟體來創建和編輯它們。和傳統的點陣圖像模式,像JPEG和PNG不同,SVG格式提供的是矢量圖,這意味著它的圖像能夠被無限放大而不失真或降低質量,並且可以方便地修改內容。
  • Android | 音視頻方向進階路線及資源合集
    拍照等功能我們都可以使用Camera的接口實現,關於Camera的API可以參考google的demo:https://github.com/googlearchive/android-Camera2Basic Surface我們接下來介紹.
  • Android DataBinding 從入門到進階
    本篇來自 葉應是葉 的投稿,分享了Android DataBinding 從入門到進階,一起來看看!希望大家喜歡。Databinding同樣是支持在Fragment和RecyclerView中使用。此外,也可以使用方法引用::的形式來進行事件綁定