您當前位置：首頁 > php開源 > 綜合技術 > 實現iOS圖片等資源文件的熱更新化(一): 從Images.xcassets導出合適的圖片

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

來源：程序員人生發布時間：2016-09-28 09:41:41 閱讀次數：2565次

本文會基于1個已有的腳本工具自動導出所有的圖片;終究給出的是1個從 Images.xcassets 到基于文件夾的精簡適合的圖片資源集的完全進程.難點在于從完全圖片集到精簡圖片集,肯定是基于1個定制化的腳本,自定義導出的.如果自己手動導出?那可有的忙嘍~

Images.xcassets 與 Assets.car

Images.xcassets,是Xcode項目中的,用于寄存資源文件.那末我們為何不直接處理 Images.xcassets 呢?由于Images.xcassets中寄存的圖片名稱可能與圖片的資源名稱不1致,終究決定圖片資源名的是資源文件夾的名稱;也有可能Images.xcassets寄存的是pdf格式的圖片,這樣可以自動預編譯對應尺寸的圖片資源.

Images.xcassets 編譯后,終究ipa包中,是以Assets.car包的情勢出現的,內部是處理后的圖片名.此處的文件名與我們代碼中援用的圖片資源名稱是1致的.

也就是說: 直接基于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

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

從 Assets.car 導出后的圖片,大致有以下幾種:

只存在@1x的圖: 如 2.png
只存在@1x和@2x的圖: 如 account.png 和 account@2x.png
只存在@2x的圖: 如add⑴@2x.png
只存在@2x與@3x的圖片: 如 10@2x.png 和 10@3x.png
同時存在3種尺寸的圖片: 如 1.png 1@2x.png 和 1@3x.png
辨別iphone與ipad的圖片,此類圖1般由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

以上圖片的緣由,很大1部份是由于App迭代引發的.對1個圖片,存在上述不同情況時,圖片通常加載與當前屏幕比例(scale)最符合的圖片,具體細節下1篇文章會更完全描寫.

經過我自己的實驗與網上各種資料的查詢,使用 @3x 的圖片是可以同時作為 iPhone和iPad的通用圖標的.固然,這是需要自定義 imageNamed方法,也是下1篇文章的重點. 2套共5個圖片,現在只需要1個圖片,理論圖片資源體積可以減小
((1 + 2 + 3 + 3 + 1.5) - 3) / (1 + 2 + 3 + 3 + 1.5) = 71.428571 % (信息量超大的速算法,看不懂就當是個嘲笑話吧~(≧▽≦)/~)

自動歸類腳本思路

我們想要獲得的是 可用的@3x圖片文件夾 與 不包括@3x圖片的有問題的資源列表. 對不存在@3x副本的圖片,很大可能這個資源已被廢棄了.這1塊,暫定手動去排查與核實.如果1個圖片仍在使用但是不存在@3x的副本,絕對是RD挖了1個坑,等你來填!

基本思路是:

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

自動歸類腳本實現

除以上的第5步之外,前4步都可以自動化運行:

#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塊,的確有許多無用的或不公道的資源,需要盡早解決;
shell 腳本是基于路徑進行復制,移動等操作的,如 find的結果,實際上是1個文件路徑,借助它,提出了1個簡單的辨別可用于不可用資源的方法;
寫博客,確切可使思路更清晰有序,坦白講,這本來是1個我不敢碰的優化任務,1個1個比對,想一想都頭大.終究的處理結果,還是給出了1定數量的無用圖片,但是我根據其名字就能夠肯定其位置,非常好處理了,已省了很多工夫了;而且,要比我手動排查地可信多了.

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生