本文會(huì)基于一個(gè)已有的腳本工具自動(dòng)導(dǎo)出所有的圖片;最終給出的是一個(gè)從 Images.xcassets 到基于文件夾的精簡(jiǎn) 合適 的圖片資源集的完整過程.難點(diǎn)在于從完整圖片集到精簡(jiǎn)圖片集,肯定是基于一個(gè)定制化的腳本,自定義導(dǎo)出的.如果自己手動(dòng)導(dǎo)出?那可有的忙嘍~
Images.xcassets 與 Assets.car
Images.xcassets,是Xcode項(xiàng)目中的,用于存放資源文件.那么我們?yōu)槭裁床恢苯犹幚?Images.xcassets 呢?因?yàn)镮mages.xcassets中存放的圖片名稱可能與圖片的資源名稱不一致,最終決定圖片資源名的是資源文件夾的名稱;也有可能Images.xcassets存放的是pdf格式的圖片,這樣可以自動(dòng)預(yù)編譯對(duì)應(yīng)尺寸的圖片資源.
Images.xcassets 編譯后,最終ipa包中,是以Assets.car包的形式出現(xiàn)的,內(nèi)部是處理后的圖片名.此處的文件名與我們代碼中引用的圖片資源名稱是一致的.
也就是說: 直接基于Assets.car進(jìn)行處理,可以使我們的使用圖片處的代碼變更盡可能少.
使用 cartool 從 Assets.car 導(dǎo)出圖片
Assets.car 無法直接zip解壓,需要借助專門的工具,此處推薦: cartool 使用方法,參見: iOS學(xué)習(xí)之解壓Assets.car
如果你缺少足夠復(fù)雜的Assets.car或者cartool用法有問題,可以直接使用我處理過的資源:https://github.com/ios122/ios_assets_hot_update/tree/master/res
針對(duì)文章github給定的目錄, cartool的用法,可以簡(jiǎn)述為:
cd 到 res目錄,然后
mkdir Assets
./cartool ./Assets.car ./Assets
其實(shí)使用一張圖片就可以額兼容iPhone/iPad
從 Assets.car 導(dǎo)出后的圖片,大致有以下幾種:
- 只存在@1x的圖: 如 2.png
- 只存在@1x和@2x的圖: 如 account.png 和 account@2x.png
- 只存在@2x的圖: 如add-1@2x.png
- 只存在@2x與@3x的圖片: 如 10@2x.png 和 10@3x.png
- 同時(shí)存在三種尺寸的圖片: 如 1.png 1@2x.png 和 1@3x.png
- 區(qū)分iphone與ipad的圖片,此類圖一般由pdf自動(dòng)在預(yù)編譯時(shí)生成: 如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迭代引起的.對(duì)于一個(gè)圖片,存在上述不同情況時(shí),圖片通常加載與當(dāng)前屏幕比例(scale)最符合的圖片,具體細(xì)節(jié)下一篇文章會(huì)更完整描述.
經(jīng)過我自己的實(shí)驗(yàn)與網(wǎng)上各種資料的查詢,使用 @3x 的圖片是可以同時(shí)作為 iPhone和iPad的通用圖標(biāo)的.當(dāng)然,這是需要自定義 imageNamed方法,也是下一篇文章的重點(diǎn). 2套共5個(gè)圖片,現(xiàn)在只需要1個(gè)圖片,理論圖片資源體積可以減小
((1 + 2 + 3 + 3 + 1.5) - 3) / (1 + 2 + 3 + 3 + 1.5) = 71.428571 % (信息量超大的速算法,看不懂就當(dāng)是個(gè)冷笑話吧(≧▽≦)/)
自動(dòng)歸類腳本思路
我們想要獲取的是 可用的@3x圖片文件夾 與 不包含@3x圖片的有問題的資源列表. 對(duì)于不存在@3x副本的圖片,很大可能這個(gè)資源已經(jīng)被廢棄了.這一塊,暫定手動(dòng)去排查與核實(shí).如果一個(gè)圖片仍在使用但是不存在@3x的副本,絕對(duì)是RD挖了一個(gè)坑,等你來填!
基本思路是:
- 去除 ~ipad 結(jié)尾的圖片,如bg_mypage_edit~ipad.png;
- 去除 ~iphone 圖片中的 iphone文字,如bg_mypage_editiphone@3x.png 重命名為 bg_mypage_edit@3x.png;
- 將含有@3x的圖片組的@1x @2x @3x 的圖片按順序移動(dòng)到單獨(dú)文件夾 如 assets_3x,并都命名為@3x,此時(shí)原文件夾中即為有問題的資源,新文件夾中為有效的資源文件,且只保留了@3x;
- 將原資源文件夾命名為assets_error,以供以后使用;
- 人工確認(rèn)非法圖片是否具有存在意義,存在則尋找其@3x副本放到 assets_3x 文件夾;
自動(dòng)歸類腳本實(shí)現(xiàn)
除了以上的第五步以外,前四步都可以自動(dòng)化運(yùn)行:
#0. 需要先cd到解壓后的Assets目錄;
#1. 去除 ~ipad 結(jié)尾的圖片,如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 的圖片按順序移動(dòng)到單獨(dú)文件夾 如 assets_3x,并都命名為@3x,此時(shí)原文件夾中即為有問題的資源,新文件夾中為有效的資源文件,且只保留了@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 即為需要手動(dòng)確認(rèn)可用性的資源.
收獲與感悟:
- 項(xiàng)目中,圖片這一塊,的確有許多無用的或不合理的資源,需要及早解決;
- shell 腳本是基于路徑進(jìn)行復(fù)制,移動(dòng)等操作的,如 find的結(jié)果,其實(shí)是一個(gè)文件路徑,借助它,提出了一個(gè)簡(jiǎn)單的區(qū)分可用于不可用資源的方法;
- 寫博客,確實(shí)可以使思路更清晰有序,坦白講,這本來是一個(gè)我不敢碰的優(yōu)化任務(wù),一個(gè)一個(gè)比對(duì),想想都頭大.最終的處理結(jié)果,還是給出了一定數(shù)量的無用圖片,但是我根據(jù)其名字就可以確定其位置,非常好處理了,已經(jīng)省了不少功夫了;而且,要比我手動(dòng)排查地可信多了.
系列專屬github地址: https://github.com/ios122/ios_assets_hot_update
