實現iOS圖片等資源文件的熱更新化(一): 從Images.xcassets導出合適的圖片

本文會基於一個已有的腳本工具自動導出全部的圖片;最終給出的是一個從 Images.xcassets 到基於文件夾的精簡 合適 的圖片資源集的完整過程.難點在於從完整圖片集到精簡圖片集,確定是基於一個定製化的腳本,自定義導出的.若是本身手動導出?那可有的忙嘍~

Images.xcassets 與 Assets.car

Images.xcassets,是Xcode項目中的,用於存放資源文件.那麼咱們爲何不直接處理 Images.xcassets 呢?由於Images.xcassets中存放的圖片名稱可能與圖片的資源名稱不一致,最終決定圖片資源名的是資源文件夾的名稱;也有可能Images.xcassets存放的是pdf格式的圖片,這樣能夠自動預編譯對應尺寸的圖片資源.

Images.xcassets 編譯後,最終ipa包中,是以Assets.car包的形式出現的,內部是處理後的圖片名.此處的文件名與咱們代碼中引用的圖片資源名稱是一致的.

也就是說: 直接基於Assets.car進行處理,可使咱們的使用圖片處的代碼變動儘量少.

使用 cartool 從 Assets.car 導出圖片

Assets.car 沒法直接zip解壓,須要藉助專門的工具,此處推薦: cartool 使用方法,參見: iOS學習之解壓Assets.car

若是你缺乏足夠複雜的Assets.car或者cartool用法有問題,能夠直接使用我處理過的資源:https://github.com/ios122/ios_assets_hot_update/tree/master/res

針對文章github給定的目錄, cartool的用法,能夠簡述爲: cd 到 res目錄,而後

mkdir Assets
./cartool  ./Assets.car ./Assets

其實使用一張圖片就能夠額兼容iPhone/iPad

從 Assets.car 導出後的圖片,大體有如下幾種:

• 只存在@1x的圖: 如 2.png
• 只存在@1x和@2x的圖: 如 account.png 和 account@2x.png
• 只存在@2x的圖: 如add-1@2x.png
• 只存在@2x與@3x的圖片: 如 10@2x.png 和 10@3x.png
• 同時存在三種尺寸的圖片: 如 1.png 1@2x.png 和 1@3x.png
• 區分iphone與ipad的圖片,此類圖通常由pdf自動在預編譯時生成: 如bg_mypage_edit~ipad.png bg_mypage_edit~ipad@2x.png bg_mypage_edit~ipad@3x.png bg_mypage_edit~iphone.png bg_mypage_edit~iphone@2x.png bg_mypage_edit~iphone@3x.png
• 漢語命名的圖片: 如 提醒.png

以上圖片的緣由,很大一部分是因爲App迭代引發的.對於一個圖片,存在上述不一樣狀況時,圖片一般加載與當前屏幕比例(scale)最符合的圖片,具體細節下一篇文章會更完整描述.

通過我本身的實驗與網上各類資料的查詢,使用 @3x 的圖片是能夠同時做爲 iPhone和iPad的通用圖標的.固然,這是須要自定義 imageNamed方法,也是下一篇文章的重點. 2套共5個圖片,如今只須要1個圖片,理論圖片資源體積能夠減少 ((1 + 2 + 3 + 3 + 1.5) - 3) / (1 + 2 + 3 + 3 + 1.5) = 71.428571 % (信息量超大的速算法,看不懂就當是個冷笑話吧~(≧▽≦)/~)

自動歸類腳本思路

咱們想要獲取的是 可用的@3x圖片文件夾 與 不包含@3x圖片的有問題的資源列表. 對於不存在@3x副本的圖片,很大可能這個資源已經被廢棄了.這一塊,暫定手動去排查與覈實.若是一個圖片仍在使用可是不存在@3x的副本,絕對是RD挖了一個坑,等你來填!

基本思路是:

1. 去除 ~ipad 結尾的圖片,如bg_mypage_edit~ipad.png;
2. 去除 ~iphone 圖片中的 ~iphone文字,如bg_mypage_edit~iphone@3x.png 重命名爲 bg_mypage_edit@3x.png;
3. 將含有@3x的圖片組的@1x @2x @3x 的圖片按順序移動到單獨文件夾 如 assets_3x,並都命名爲@3x,此時原文件夾中即爲有問題的資源,新文件夾中爲有效的資源文件,且只保留了@3x;
4. 將原資源文件夾命名爲assets_error,以供之後使用;
5. 人工確認非法圖片是否具備存在乎義,存在則尋找其@3x副本放到 assets_3x 文件夾;

自動歸類腳本實現

除了以上的第五步之外,前四步均可以自動化運行:

#0. 須要先cd到解壓後的Assets目錄;
#1. 去除 ~ipad 結尾的圖片,如bg_mypage_edit~ipad.png;
find . -iname "*~ipad*.png" -delete

#2. 去除 ~iphone 圖片中的 ~iphone文字;
find . -name "*~iphone.png" -exec sh -c 'for i do mv -- "$i" "${i%~iphone.png}.png"; done' sh {} +

find . -name "*~iphone@2x.png" -exec sh -c 'for i do mv -- "$i" "${i%~iphone@2x.png}@2x.png"; done' sh {} +

find . -name "*~iphone@3x.png" -exec sh -c 'for i do mv -- "$i" "${i%~iphone@3x.png}@3x.png"; done' sh {} +

# 3.將含有@3x的圖片組的@1x @2x @3x 的圖片按順序移動到單獨文件夾 如 assets_3x,並都命名爲@3x,此時原文件夾中即爲有問題的資源,新文件夾中爲有效的資源文件,且只保留了@3x;

mkdir ../assets_3x

find . -name "*@3x.png" -exec sh -c 'for i do mv -- "${i%@3x.png}.png" "../assets_3x/${i%@3x.png}@3x.png"; mv -- "${i%@3x.png}@2x.png" "../assets_3x/${i%@3x.png}@3x.png";mv -- "${i%@3x.png}@3x.png" "../assets_3x/${i%@3x.png}@3x.png";done' sh {} +

# 4.將原資源文件夾命名爲assets_error,以供之後使用;
cd ..
mv Assets assets_error

最終獲得的 assets_3x 即爲可用資源,assets_error 即爲須要手動確承認用性的資源.

收穫與感悟:

1. 項目中,圖片這一塊,的確有許多無用的或不合理的資源,須要及早解決;
2. shell 腳本是基於路徑進行復制,移動等操做的,如 find的結果,實際上是一個文件路徑,藉助它,提出了一個簡單的區分可用於不可用資源的方法;
3. 寫博客,確實可使思路更清晰有序,坦白講,這原本是一個我不敢碰的優化任務,一個一個比對,想一想都頭大.最終的處理結果,仍是給出了必定數量的無用圖片,可是我根據其名字就能夠肯定其位置,很是好處理了,已經省了很多功夫了;並且,要比我手動排查地可信多了.

---

系列專屬github地址: https://github.com/ios122/ios_assets_hot_update