您當(dāng)前位置：首頁(yè) > php開源 > 綜合技術(shù) > 實(shí)現(xiàn)iOS圖片等資源文件的熱更新化(一): 從Images.xcassets導(dǎo)出合適的圖片

實(shí)現(xiàn)iOS圖片等資源文件的熱更新化(一): 從Images.xcassets導(dǎo)出合適的圖片

來(lái)源：程序員人生發(fā)布時(shí)間：2016-09-28 09:41:41 閱讀次數(shù)：2554次

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

Images.xcassets 與 Assets.car

Images.xcassets,是Xcode項(xiàng)目中的,用于寄存資源文件.那末我們?yōu)楹尾恢苯犹幚?Images.xcassets 呢?由于Images.xcassets中寄存的圖片名稱可能與圖片的資源名稱不1致,終究決定圖片資源名的是資源文件夾的名稱;也有可能Images.xcassets寄存的是pdf格式的圖片,這樣可以自動(dòng)預(yù)編譯對(duì)應(yīng)尺寸的圖片資源.

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

也就是說(shuō): 直接基于Assets.car進(jìn)行處理,可使我們的使用圖片處的代碼變更盡量少.

使用 cartool 從 Assets.car 導(dǎo)出圖片

Assets.car 沒法直接zip解壓,需要借助專門的工具,此處推薦: cartool 使用方法,參見: iOS學(xué)習(xí)之解壓Assets.car

如果你缺少足夠復(fù)雜的Assets.car或cartool用法有問題,可以直接使用我處理過(guò)的資源: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í)使用1張圖片就能夠額兼容iPhone/iPad

從 Assets.car 導(dǎo)出后的圖片,大致有以下幾種:

只存在@1x的圖: 如 2.png
只存在@1x和@2x的圖: 如 account.png 和 account@2x.png
只存在@2x的圖: 如add⑴@2x.png
只存在@2x與@3x的圖片: 如 10@2x.png 和 10@3x.png
同時(shí)存在3種尺寸的圖片: 如 1.png 1@2x.png 和 1@3x.png
辨別iphone與ipad的圖片,此類圖1般由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
漢語(yǔ)命名的圖片: 如提示.png

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

經(jīng)過(guò)我自己的實(shí)驗(yàn)與網(wǎng)上各種資料的查詢,使用 @3x 的圖片是可以同時(shí)作為 iPhone和iPad的通用圖標(biāo)的.固然,這是需要自定義 imageNamed方法,也是下1篇文章的重點(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è)資源已被廢棄了.這1塊,暫定手動(dòng)去排查與核實(shí).如果1個(gè)圖片仍在使用但是不存在@3x的副本,絕對(duì)是RD挖了1個(gè)坑,等你來(lái)填!

基本思路是:

去除 ~ipad 結(jié)尾的圖片,如bg_mypage_edit~ipad.png;
去除 ~iphone 圖片中的 ~iphone文字,如bg_mypage_edit~iphone@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)

除以上的第5步之外,前4步都可以自動(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)目中,圖片這1塊,的確有許多無(wú)用的或不公道的資源,需要盡早解決;
shell 腳本是基于路徑進(jìn)行復(fù)制,移動(dòng)等操作的,如 find的結(jié)果,實(shí)際上是1個(gè)文件路徑,借助它,提出了1個(gè)簡(jiǎn)單的辨別可用于不可用資源的方法;
寫博客,確切可使思路更清晰有序,坦白講,這本來(lái)是1個(gè)我不敢碰的優(yōu)化任務(wù),1個(gè)1個(gè)比對(duì),想一想都頭大.終究的處理結(jié)果,還是給出了1定數(shù)量的無(wú)用圖片,但是我根據(jù)其名字就能夠肯定其位置,非常好處理了,已省了很多工夫了;而且,要比我手動(dòng)排查地可信多了.

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生