【轉】Android應用開發之PNG、IconFont、SVG圖標資源優化詳解

1 背景

 

最近由於一些我的私事致使很久沒寫博客了，多事之年總算要過去了，忽然沒了動力，因此趕忙先拿個最近項目中重構的一個小知識點充下數，老題重談。

 

在咱們App開發中你們可能都會有過以下痛疾（程序員和設計妹妹注意嘍）：

 

• 好多小的圖標好煩人，又佔體積還要考慮分辨率，一拉伸就模糊等。

• 同一個圖標不一樣狀態還有不一樣顏色的多張。

• 老是幻想IOS、Android、Web等對於一個圖標只切一次圖多好。

 

若是你有過相似的痛疾那麼下面討論的故事就是一個完美的解決方案，固然了，採用下面方案對於重型應用或者固件級的優化纔會十分明顯，對於普通小應用那就要看本身了。

 

2 PNG、IconFont、SVG理論

 

PNG爲位圖，是由不一樣的排列和染色的像素點組成的圖像，當放大位圖時就能清晰的看見無數個小方塊（像馬賽克同樣），因此位圖的擴大實質是增長單個像素點的大小，故而致使在不一樣分辨率表現很是糟糕。

 

SVG爲可縮放矢量圖，它不會像位圖同樣由於縮放而讓圖片質量降低，他在不一樣分辨率的表現都同樣清晰。

 

IconFont是WebFont形式的圖標，你能夠把他認爲就是WebFont，該類東東的製做來自於SVG矢量圖，因此它不會像位圖同樣由於縮放而讓圖片質量降低，他在不一樣分辨率的表現都同樣清晰。

 

下面咱們簡單給出這幾種格式圖標素材的對比：

 

圖標類型	構成	優點	劣勢
PNG	獨立像素點	能夠實現各類色彩及真實畫面的復現	體積比較大，縮放和旋轉易失真
SVG	向量	體積較小，縮放和旋轉不失真	製做色彩變化太多的圖象難度比較大
IconFont	WebFont	體積較小，縮放和旋轉不失真	基本不支持多色彩圖像，通常都是單色

 

有了上面這些對比以後，在正式開始實戰以前咱們先來簡單粗暴瞭解下SVG與IconFont在App中的優勢吧，否則下文就沒有存在的意義嘍，以下：

 

• 圖標集中處理，設計妹妹只用出一次圖嘍。

• 減小重型應用或者固件大小，由於IconFont是字符串而不是圖片，SVG的體積也小於PNG。

• 由於IconFont的繪製原理和普通文本同樣，因此運行時會佔用更小的內存空間。

 

聽着挺誘人，好吊的樣子，實際下面咱們來看一下你就明白啦。

 

3 PNG、IconFont、SVG實戰

 

有了上面的理論基礎，下面咱們就來看下他們各自的使用方法；關於PNG的使用這裏就不介紹了，沒啥新鮮的，從Android一出來支持到如今的格式，要是還不會那就真該拖出去亂燉了。

 

3-1 IconFont使用實例

 

哈哈，這個其實阿里媽媽MUX團隊早就給你們搞好強大的庫和相關使用文檔了，詳細能夠點我查看。固然嘍，有的公司會搞本身的庫服務器，本身去搭建，有的公司會藉助阿里媽媽提供的平臺直接去製做；無論哪一種平臺其實實質都同樣，沒啥可說的，原理同樣，只是咱們可能會本身依據需求自定義一些支持IconFont的拓展TextView、ImageView等，萬變不離其宗，因爲確實很簡單，下面咱們給一個很是簡單的例子描述就好了。以下以阿里巴巴IconFont平臺爲例：

 

1. 從平臺選擇要使用到的圖標下載到本地，複製ttf字體文件到項目assets目錄下。

2. 打開從IconFont平臺下載下來的demo.html文件，找到圖標相對應的HTML字符碼。

3. 打開項目res/values/strings.xml，添加string字符串值爲上面字符碼。

4. 注意：上面2和3步在有些本身搭建的平臺上會自動用代碼生成一個iconfont.xml的string文件，這樣就不用本身手動去從demo.html複製到res下了，而是直接將iconfont.xml複製到res，不清楚那麼牛逼的阿里爲什麼沒這麼作。

5. 打開佈局文件activity_main.xml，添加上面3生成的string值到TextView（這裏只以TextView爲例演示，實際中通常咱們會直接拓展定義TextView等的）。以下：

6. 1 2 3 4

   < TextView       android:layout_width = "wrap_content"       android:layout_height = "wrap_content"       android:text = "@string/icon_font_add" />

7. 接着給該TextView指定使用IconFont的文字文件。以下：

8. 1 2 3

   Typeface iconfont = Typeface.createFromAsset(getAssets(),  "iconfont.ttf" ); TextView textview = (TextView)findViewById(R.id.test); textview.setTypeface(iconfont);

9. 至此IconFont的使用就搞定了，是否是很簡單並且超級贊，優劣自行腦補。

 

這玩意超級簡單，主要腦動力在美工妹妹，和咱程序員關係不是很大，因此直接用便可，不作Demo演示了，咱們項目中也用了不少這玩意。

 

3-2 SVG使用實例

 

說到這貨，哈哈上面搞IconFont的美工妹妹必定知道，IconFont製做的來源就是SVG，只是SVG製做比IconFont容易且使用更加靈活而已。下面咱們下來看一下SVG圖片直接用Txt打開後的d屬性，至於爲啥看它，請自行腦補。PS：這貨除過控件支持之外還能夠直接扔給WebView去顯示，由於其本質就能夠說是HTML相關的東東。

 

SVG Path Data：

 

前提先說好，SVG和PathData都是能夠經過美工的工具生成的，下面之因此介紹PathData只是一種簡單的背景瞭解而已。以下是一張SVG格式的圖片（再來一層像不像超人標示，哈哈）：

 

 

咱們如今拿txt工具把他打開（而不是圖片瀏覽器），以下：

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="red" stroke-width="3" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="yellow" stroke="red" stroke-width="10" />
</svg>

 

握草！能夠很明顯的看見PathData不就是SVG圖片裏path節點下的d屬性值麼？爲了可以看明白上面這個d屬性值和上面貼的圖片關係，咱們先來看幾個科普。

 

SVG Path Data命令解釋（注意：每一個命令都有大小寫形式，大寫表明後面的參數是絕對座標，小寫表示相對座標，每一個參數之間用空格或逗號區分）：

 

M/m命令：moveto移動到繪製點，後面跟上座標系點對便可。

Z/z命令：closepath一段路徑等的閉合點，無參數。

L/l命令：lineto繪製一個點到另外一個點的直線，多個座標對能夠繪製折線，後面跟上座標系點對便可。

H/h命令：lineto從當前點到指定x點繪製水平直線，多個x無心義，後面跟座標系x點便可。

V/v命令：lineto從當前點到指定x點繪製垂直直線，多個y無心義，後面跟座標系y點便可。

C/c命令：cubic bezier三次貝塞爾曲線。

S/s命令：cubic bezier三次貝塞爾曲線。

Q/q命令：quatratic bezier二次貝塞爾曲線。

T/t命令：quatratic bezier二次貝塞爾曲線。

A/a命令：elliptical arc圓弧線。

 

好了，到這裏你至少知道上面那個類超人圖標的東東XML是啥意思了，有這些就足夠了，下面咱們開搞。

 

Android L時代的局部SVG先驅VectorDrawable和AnimatedVectorDrawable：

 

下面咱們先來看下Android L時代Google給咱們放的大招，牛逼的SVG支持，其中支持控件有VectorDrawable和AnimatedVectorDrawable，遺憾的是這兩控件在support包木有，可喜的是有現成的第三方開源兼容包。VectorDrawable的父類是Drawable，Drawable的父類是Object；AnimatedVectorDrawable的父類也是Drawable；從這就能看出來Android L拓展的SVG控件實質也是一個Drawable。

 

VectorDrawable的建立能夠經過一個<vector>節點的XML進行定義，下面咱們來看看這些相關節點屬性的含義：

 

<vector>：定義一個Vector Drawable。

 

android:name 定義這個VectorDrawable的名字；

android:width 定義本質的幾何寬度，尺寸標準隨意，通常爲dp；

android:height 定義本質的幾何高度，尺寸標準隨意，通常爲dp；

android:viewportWidth 定義viewport寬度，viewport是將path繪製在上面的一個虛擬畫布；

android:viewportHeight 定義viewport高度，同上；

android:tint 定義Drawable的着色，默認沒有色彩；

android:tintMode 定義着色模式，默認是src_in；

android:autoMirrored 定義圖片是否須要鏡像反轉，當佈局方向是RTL，即從右到左佈局時纔有用；

android:alpha 設置圖片的透明度；

 

<group>：定義一個Path組或者子組。

 

android:name 定義組的名字；

android:rotation 定義組的旋轉角度；

android:pivotX 定義縮放或者旋轉中軸點x座標，是虛擬畫布中的座標；

android:pivotY 同上，定義y座標；

android:scaleX 定義縮放x維；

android:scaleY 定義縮放y維；

android:translateX 定義x縮放，是虛擬畫布中的座標；

android:translateY 定義y縮放，是虛擬畫布中的座標；

 

<path>：定義一個被繪製的Path。

 

android:name 定義path的名字；

android:pathData 定義路徑採用了SVG文件裏d標籤中的path值，這些值繪製在虛擬畫布上；

android:fillColor 定義路徑填充顏色；

android:strokeColor 定義path的外輪廓顏色；

android:strokeWidth 路徑的寬度；

android:strokeAlpha 一個路徑的透明度；

android:fillAlpha 全路徑透明度；

android:trimPathStart 開始路徑的百分比，0-1；

android:trimPathEnd 結束路徑的百分比，0-1；

android:trimPathOffset 轉換區域0-1；

android:strokeLineCap 設置線的頂路徑，圓仍是方等；

android:strokeLineJoin 設置線鏈接處路徑方式；

android:strokeMiterLimit 設置線的修飾；

 

<clip-path>：定義路徑裁剪，只適用於當前組或者子項。

 

android:name 定義裁剪路徑的名字；

android:pathData 定義路徑採用了SVG文件裏d標籤中的path值；

 

扯了這麼多，接下來咱們舉個例子吧，哈哈，好在強大的AS已經支持在drawable下右鍵新建Vector資源了，支持的仍是滿強大的，SVG或者MD的圖片直接到咱們須要的xml文件一步生成。牛叉的一逼，不再像剛出來那會搞個SVG2XML須要第三方工具了，以下是我經過AS選擇的一副圖片生成的XML，以下：

 

 

生成XML以下：

 

1 2 3 4 5 6 7 8 9 10

<!-- vectordrawable.xml > < vector xmlns:android = "http://schemas.android.com/apk/res/android"          android:width = "100dp"          android:height = "100dp"          android:viewportWidth = "24.0"          android:viewportHeight = "24.0" >      < path          android:fillColor = "#FF000000"          android:pathData = "M7.52,21.48C4.25,19.94 1.91,16.76 1.55,13H0.05C0.56,19.16 5.71,24 12,24l0.66,-0.03 -3.81,-3.81 -1.33,1.32zm0.89,-6.52c-0.19,0 -0.37,-0.03 -0.52,-0.08 -0.16,-0.06 -0.29,-0.13 -0.4,-0.24 -0.11,-0.1 -0.2,-0.22 -0.26,-0.37 -0.06,-0.14 -0.09,-0.3 -0.09,-0.47h-1.3c0,0.36 0.07,0.68 0.21,0.95 0.14,0.27 0.33,0.5 0.56,0.69 0.24,0.18 0.51,0.32 0.82,0.41 0.3,0.1 0.62,0.15 0.96,0.15 0.37,0 0.72,-0.05 1.03,-0.15 0.32,-0.1 0.6,-0.25 0.83,-0.44s0.42,-0.43 0.55,-0.72c0.13,-0.29 0.2,-0.61 0.2,-0.97 0,-0.19 -0.02,-0.38 -0.07,-0.56 -0.05,-0.18 -0.12,-0.35 -0.23,-0.51 -0.1,-0.16 -0.24,-0.3 -0.4,-0.43 -0.17,-0.13 -0.37,-0.23 -0.61,-0.31 0.2,-0.09 0.37,-0.2 0.52,-0.33 0.15,-0.13 0.27,-0.27 0.37,-0.42 0.1,-0.15 0.17,-0.3 0.22,-0.46 0.05,-0.16 0.07,-0.32 0.07,-0.48 0,-0.36 -0.06,-0.68 -0.18,-0.96 -0.12,-0.28 -0.29,-0.51 -0.51,-0.69 -0.2,-0.19 -0.47,-0.33 -0.77,-0.43C9.1,8.05 8.76,8 8.39,8c-0.36,0 -0.69,0.05 -1,0.16 -0.3,0.11 -0.57,0.26 -0.79,0.45 -0.21,0.19 -0.38,0.41 -0.51,0.67 -0.12,0.26 -0.18,0.54 -0.18,0.85h1.3c0,-0.17 0.03,-0.32 0.09,-0.45s0.14,-0.25 0.25,-0.34c0.11,-0.09 0.23,-0.17 0.38,-0.22 0.15,-0.05 0.3,-0.08 0.48,-0.08 0.4,0 0.7,0.1 0.89,0.31 0.19,0.2 0.29,0.49 0.29,0.86 0,0.18 -0.03,0.34 -0.08,0.49 -0.05,0.15 -0.14,0.27 -0.25,0.37 -0.11,0.1 -0.25,0.18 -0.41,0.24 -0.16,0.06 -0.36,0.09 -0.58,0.09H7.5v1.03h0.77c0.22,0 0.42,0.02 0.6,0.07s0.33,0.13 0.45,0.23c0.12,0.11 0.22,0.24 0.29,0.4 0.07,0.16 0.1,0.35 0.1,0.57 0,0.41 -0.12,0.72 -0.35,0.93 -0.23,0.23 -0.55,0.33 -0.95,0.33zm8.55,-5.92c-0.32,-0.33 -0.7,-0.59 -1.14,-0.77 -0.43,-0.18 -0.92,-0.27 -1.46,-0.27H12v8h2.3c0.55,0 1.06,-0.09 1.51,-0.27 0.45,-0.18 0.84,-0.43 1.16,-0.76 0.32,-0.33 0.57,-0.73 0.74,-1.19 0.17,-0.47 0.26,-0.99 0.26,-1.57v-0.4c0,-0.58 -0.09,-1.1 -0.26,-1.57 -0.18,-0.47 -0.43,-0.87 -0.75,-1.2zm-0.39,3.16c0,0.42 -0.05,0.79 -0.14,1.13 -0.1,0.33 -0.24,0.62 -0.43,0.85 -0.19,0.23 -0.43,0.41 -0.71,0.53 -0.29,0.12 -0.62,0.18 -0.99,0.18h-0.91V9.12h0.97c0.72,0 1.27,0.23 1.64,0.69 0.38,0.46 0.57,1.12 0.57,1.99v0.4zM12,0l-0.66,0.03 3.81,3.81 1.33,-1.33c3.27,1.55 5.61,4.72 5.96,8.48h1.5C23.44,4.84 18.29,0 12,0z" /> </ vector >

 

以下是顯示結果：

 

 

關於VectorDrawable的其餘屬性請自行設置查看效果，重點通常都是pathData，咱們能夠在這裏得到規範，你要是足夠牛叉瞭解全部規範，那你能夠作出來很牛逼的效果的，我暫時還不牛逼，哈哈。有了上面的VectorDrawable基礎後咱們來看下AnimatedVectorDrawable，這玩意其實就是經過ObjectAnimator和AnimatorSet對VectorDrawable進行屬性等動畫操做的一個Drawable；這玩意一般被定義成三個獨立的xml文件，具體以下：

 

第一步，建立<vector>元素的矢量資源，放置在res/drawable/下，動畫通常發生在group或者path節點上，因此若是咱們要給這些節點添加動畫，必定要保證名字的獨立。以下是一個例子：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!-- vectordrawable.xml --> < vector xmlns:android = "http://schemas.android.com/apk/res/android"       android:height = "64dp"       android:width = "64dp"       android:viewportHeight = "600"       android:viewportWidth = "600" >       < group           android:name = "rotationGroup"           android:pivotX = "300.0"           android:pivotY = "300.0"           android:rotation = "45.0" >           < path               android:name = "v"               android:fillColor = "#000000"               android:pathData = "M300,70 l 0,-70 70,70 0,0 -70,70z" />       </ group >   </ vector >

 

第二步，建立<animated-vector>元素的矢量資源動畫，放置在res/drawable/下，這裏主要就是將動畫與前面的VectorDrawable進行關聯。以下是一個例子：

 

1 2 3 4 5 6 7 8 9 10

<!-- avd.xml --> < animated-vector xmlns:android = "http://schemas.android.com/apk/res/android"     android:drawable = "@drawable/vectordrawable" >       < target           android:name = "rotationGroup"           android:animation = "@anim/rotation" />       < target           android:name = "v"           android:animation = "@anim/path_morph" />   </ animated-vector >

 

第三步，建立<objectAnimator>元素的一個或多個對象動畫器，放置在res/animator下，這玩意其實就是咱們以前認識的真實的Android屬性動畫ObjectAnimator或AnimatorSet嘍，沒啥意思，不過仍是看下它是怎麼控制pathData的吧，以下：

 

1 2 3 4 5 6

<!--rotation.xml 將目標旋轉360度--> < objectAnimator       android:duration = "6000"       android:propertyName = "rotation"       android:valueFrom = "0"       android:valueTo = "360" />

1 2 3 4 5 6 7 8 9

<!--path_morph.xml 將目標路徑動畫化，路徑能夠寫入string.xml中--> < set xmlns:android = "http://schemas.android.com/apk/res/android" >       < objectAnimator           android:duration = "3000"           android:propertyName = "pathData"           android:valueFrom = "M300,70 l 0,-70 70,70 0,0   -70,70z"           android:valueTo = "M300,70 l 0,-70 70,0  0,140 -70,0 z"           android:valueType = "pathType" /> </ set >

 

最後咱們在Java代碼中將該drawable進行動畫啓動便可，以下：

 

1 2 3

if (drawable  instanceof Animatable) {      ((Animatable) drawable).start(); }

 

到此AnimatedVectorDrawable的基本狀況就OK了，沒啥懸念的，重點依舊是pathData的定義，因此若是項目有需求仍是要好好搞搞的，暫時木有需求，由於咱們用的IconFont方案。

 

非Android L時代的局部SVG兼容VectorDrawable和AnimatedVectorDrawable解決方案：

 

對於作固件App來講可能上面介紹的Android L提供的控件足以知足用來使用SVG了，可是對於第三方開發者來講確實仍是挺悲催的，兼容性問題一大堆，因此這裏給出一個兼容Android L如下版本的SVG控件使用開源庫。以下：

 

vector-compat

 

這個庫能夠基本知足替換原生Android L對SVG的兼容性，具體用法自行查看README文檔和查看人家大神的Demo吧，請叫我雷鋒，再也不過多說明。

 

爲了效率的徹底直接使用SVG拓展優化方案：

 

能夠看見，上面的那麼多控件雖然說叫支持SVG，其實實質是隻支持SVG圖片裏面的一部分而已，主要就是PathData；因此爲了徹底直接支持SVG圖片而不是SVG生成的XML，騰訊微信團隊等又給出了一個實現思路，不得不感慨BAT的一些牛逼之處。

 

該方案微信團隊已經進行過效率、性能、灰度等測試驗證，並且貌似微信都已經徹底使用該方案進行資源優化了，這裏再也不細說，有興趣的自行查閱資料吧，坐等咱們項目能從IconFont切到這種方案，嗚嗚！！！

 

PS：關於Android AnimatedVectorDrawable等搞出來的各類腦洞大開的動畫場景請君自行腦補，本身暫時沒那麼多沒時間，因此就很少說了，等項目有需求了再說。

 

PPPS：其實Android L系統的圓圈型ProcessBar之因此那麼玄，實質就是這東東搞的