本文會分析三個廠家的圖片放置策略,希望可以給大家一些參考。
1. 淘寶
mdpi:
mdpi中存留了一些android原始的icon,這個從命名和字首就能看出來。通過圖片大小分析,這個目錄下面都是一些很小的icon,還有一些沒有用到的icon。(這個launcher圖片也很好的說明了淘寶的歷史)。
hdp:
hdp中分為兩部分:表情和其他圖片。f+數字的圖片都是表情圖片,淘寶僅僅有一套表情圖片,並且都放在這個目錄下。除了少量的圖片和mdip的圖片一致(比如使用者頭像的place_holder)外,其餘的圖片和mdpi的圖片完全不同。順便說一下,此目錄下除了表情之外,其餘的都是一些小icon,絕對屬於尺寸很小的那類。
xhdpi:
xhdpi又和hdpi不同了,它裡面有大量的國家icon。除此之外就是一些對清晰度要求較高的icon。
xxhdpi:
xxhdpi就沒什麼東西了,幾張圖而已。
其他:
有字尾的資料夾中除了5張左右的淘寶自己的icon外,其餘都是系統的圖片,均以abc開頭。我不清楚淘寶到底有沒有使用到這些圖片,但我可以肯定地說其中有著冗餘圖片,或許有著進一步優化的方案。
總結:
淘寶的放置圖片策略是大量的圖片在hdpi,xhdpi中,比如表情圖在hdpi中,國家圖在xhdpi中,大多數圖片都僅有一套,少數全域性的icon是會有多張的情況(極少,估計只有十幾張)。xxhdpi和mhdpi僅僅作為補充,沒有太大的作用。
淘寶最令人好奇的點在於它的資原始檔很小,但是so檔案相當大:
2. 微博
微博是一個典型的android風格的app,它的drawable全都是有字尾的,完全符合安卓標準的預設打包策略,它還有根據畫素密度的圖片,甚至有ldpi的目錄。
mdpi-v4
mdpi中有大量的小icon,裡面有個叫做share_wx的,從名字一下子就知道是微信分享的icon,但實際是微博的logo,比較有趣。其餘的都是一些邊邊角角的圖示,量不大,所以主力圖肯定不在這裡。
hdpi-v4
這是微博圖片存放的主要目錄,有很多大背景和表情,微博的表情圖片和淘寶一樣都是在hdpi中的,它以lxh,emoji等字首開頭,用來區分不同風格的表情。
xhdpi-v4和xxhdpi-v4*
這裡放了一些背景大圖,我也發現了大量和hdpi中一樣的圖片,所以可以大膽的假設微博是做了不同畫素的圖片的。這也證實了我的想法——微博是很標準的android應用。
ldpi-v4
這個目錄的確沒什麼用,微博自身也不會維護這個目錄,這全都是第三方庫和應用商店給的圖片,微博開發者只需要放進來就好。
sw400dp和sw32dp-400dp
這些目錄放了一些為不同解析度準備的長得相同的icon,當然還有微博自己的logo。
3. 微信
通過上面的分析,我們是不是可以得出一些經驗了呢?
- 大量的圖片都在hdpi和xdpi中
- 表情圖片在hdpi中
- anim目錄中都是xml檔案
- drawable目錄中有大量的xml和少量的png和.9圖
- layout檔案中是全部的xml
- raw中放置音訊
- svg圖片在raw、drawable或assets中
- 最大的資料夾是圖片檔案
- layout檔案較小
- 相同的圖片,高分屏的肯定比低分屏的大
ok,現在我們們就可以來看微信的資源了,混淆怕啥,友盟混淆的abcd程式碼都能看懂,微信的adcd資源也應該不難。
raw(a9)
這個目錄中放置了大量的svg圖片和mp3檔案,從專業的角度來想,drawable目錄下肯定不會放mp3,所以這個肯定是raw檔案了。這個目錄下有大量的svg,所以可以看出微信已經實現了全svg化,並且已經線上上穩定執行了。這點在微信早期的公眾號上也可以得到佐證,詳細請看Android微信上的SVG。
文中提到了:
第一步,拿到.svg字尾的資原始檔(UI很容匯出這種圖片),放在raw目錄下而不是drawable目錄。
第二步,把 R.drawable.xxx 換成 R.raw.xxx;把 @drawable/xxx 換成 @raw/xxx。
layout(f)
現在有了兩個線索,那麼初步估計上面的三個目錄肯定是我們常見的目錄,否則不會那麼大。
開啟f後發現這個就是layout檔案,所以其餘的肯定就是圖片檔案了。
hdpi(y)
y是2.9m,裡面有大量的表情,所以我判斷它是hdpi,為了更加證實這個猜測,我找到了兩張相同的圖片。
a2中:
y中:
y中圖片是11kb,a2中圖片是76kb,這明顯說明y是hdpi,a2是xhdpi。
xhdpi(a2):
xhdpi中的圖片和hdpi中的圖片相同的不多,微信在這裡放的是一些大圖。
drawable(k)
drawable本身沒啥可以說的,但是微信的drawable中.9圖份額很少,所以我在想是否svg可以在一定的程度上完成一些.9的工作呢?
總結:
- 微信的表情都在hdpi中,僅有一套圖片,這點幾乎已經成為了標準
- 微信已經實現了svg化,svg圖片在raw中
- 微信傾向於把較大的圖片放在xhdpi中,僅出一套圖
- 微信和淘寶一樣都是儘量選擇一套圖來完成需求