實現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 和 [e-mail]
• 只存在@2x的圖: 如[e-mail]
• 只存在@2x與@3x的圖片: 如 [e-mail] 和 [e-mail]
• 同時存在三種尺寸的圖片: 如 1.png [e-mail] 和 [e-mail]
• 區分iphone與ipad的圖片,此類圖一般由pdf自動在預編譯時生成: 如bg_mypage_edit~ipad.png bg_mypage_edit~[e-mail] bg_mypage_edit~[e-mail] bg_mypage_edit~iphone.png bg_mypage_edit~[e-mail] bg_mypage_edit~[e-mail]
• 漢語命名的圖片: 如 提醒.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文字,如[e-mail]} 重命名為 [e-mail];
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 "*~[e-mail]" -exec sh -c 'for i do mv -- "$i" "${i%~[e-mail]}@2x.png"; done' sh {} +

find . -name "*~[e-mail]" -exec sh -c 'for i do mv -- "$i" "${i%~[e-mail]}@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 -- "${[e-mail]}.png" "../assets_3x/${[e-mail]}@3x.png"; mv -- "${[e-mail]}@2x.png" "../assets_3x/${[e-mail]}@3x.png";mv -- "${[e-mail]}@3x.png" "../assets_3x/${[e-mail]}@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