如何在運(yùn)行時(shí)改變App的圖標(biāo)
在你完成應(yīng)用程序的beta版本后,最后會(huì)有些人去幫你測試,使你去完善應(yīng)用程序……或者會(huì)有投資青睞。但是如果測試人員有一種簡單地方式去檢查構(gòu)建版本的應(yīng)用程序會(huì)不會(huì)有幫助呢?
這個(gè)教程將會(huì)向你展示這些,向你介紹一些或許很少有人知道的Xcode里面的功能。
你會(huì)相信在這個(gè)教程中你不會(huì)寫一行Swift的代碼嗎?當(dāng)然,你也不用寫一句Objective-C代碼。
這個(gè)教程會(huì)讓你寫一些bash shell腳本。你將會(huì)使用到ImageMagick,Terminal,Xcode,去寫一個(gè)自動(dòng)在你的app的圖標(biāo)上加上"debug"或者"beta"標(biāo)識(shí)的腳本。
這個(gè)教程需要你有一些基本的Unix腳本的知識(shí)。你可以跟隨一些shell腳本大神學(xué)習(xí),但你也可以在Bash初學(xué)者指南或者Bas腳本高級(jí)編程指南。
你想接下來做這些嗎?
app圖標(biāo)
準(zhǔn)備
首先,你需要安裝ImageMagick,這是一個(gè)非常強(qiáng)大的圖形處理圖軟件套件,專門通過終端進(jìn)行。你可以非常簡單地通過Homebrew來安裝ImageMagick。如果你沒有安裝Homebrew,或者你可能并不知道它是什么,你可以在主頁上學(xué)習(xí)了解并安裝它。
如果你已經(jīng)安裝了Homebrew,打開終端并輸入:
- brew update
這是確定你是否從Homebrew上安裝的最新的安裝包,這個(gè)也是確認(rèn)你是否有安裝Homebrew。
那么,現(xiàn)在,通過使用Homebrew來安裝你所需要的安裝包?,F(xiàn)在輸入下面的命令:
- brew install ImageMagick
你將會(huì)看到一些列的東西通過Homebrew,展示了ImageMagick安裝的詳細(xì)過程,因此跟著步驟安裝。
接下來,你也需要安裝Ghostscript,因?yàn)槟銓⑹褂玫腎mageMagick會(huì)依賴它。Ghostscript是一個(gè)軟件套件用于呈現(xiàn)PDF和PS文件。你需要它是因?yàn)樗峁┝酥С諭mageMagick的字體。
安裝Ghostscript通過運(yùn)行下面的命令:
- brew install ghostscript
如果中間發(fā)生錯(cuò)誤,運(yùn)行這個(gè)命令:
|
|
如果安裝失敗,你會(huì)得到一個(gè)消息,并告訴你如何去修復(fù)它。
這些是所有你需要安裝的,以在本教程中使用。
Llama你好
ImageMagick中有許多命令,但在本教程中,你需要用到的是convert和composite(轉(zhuǎn)換和組合)
convert:一張圖片,修改它,然后保存為一張新的圖片;
composite:一張圖片,在它上面覆蓋另外一張圖片,然后存為新的第三張圖片。
本教程中提供一些簡單地圖標(biāo)供使用。當(dāng)然,你也可以使用你自己的圖標(biāo),但你需要修改為相應(yīng)的文件名。在這里下載圖標(biāo),對(duì)于本教程,將其放在桌面上。
這里的目標(biāo)之一是覆蓋構(gòu)建版本應(yīng)用程序的圖標(biāo)。所以你將看到如何使用ImageMagick覆蓋文本圖像將Hello World放在其中的一個(gè)圖標(biāo)上。打開終端并進(jìn)入到放應(yīng)用程序圖標(biāo)的文件夾:
- cd ~/Desktop/AppIconSet
現(xiàn)在輸入:
- convert AppIcon60x60@2x.png -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" test.png
我將會(huì)逐一分解這行命令,因此你將會(huì)明白它做了寫什么:
- AppIcon60x60@2x.png 是輸入圖片的名字;
- fill white 設(shè)置文本為白色;
- font Times-Bold 告訴ImageMagick使用什么字體;
- pointsize 18 設(shè)置字體的大小為18;
- gravity south 文本與圖片的底部對(duì)齊
- annotate 0 "Hello World" 告訴ImageMagick使帶有"Hello World"文本注釋的圖片旋轉(zhuǎn)的度數(shù)為0度;
- test.png 輸出的文件名,并且ImageMagick將會(huì)覆蓋掉已經(jīng)存在的文件。
如果你在終端上沒有看到任何的錯(cuò)誤,那么你將會(huì)在AppIconSet的文件夾中看到一個(gè)命名為test.png的文件,打開后你會(huì)看到這樣:
提示:如果你看到了錯(cuò)誤的消息,或者是腳本沒有作用,那么可能是你沒有安裝所需的字體。通過運(yùn)行下面的命令,看下你所能用的字體有哪些。
- convert -list font
如果你沒有Times這個(gè)字體,那么選擇一個(gè)你可以使用的來代替。
現(xiàn)在,將beta標(biāo)志加載圖片上。在終端上輸入:
- composite betaRibbon.png test.png test2.png
這個(gè)是將betaRibbon.png放在test.png的上面,然后將合成的圖片保存為test2.png
打開test2.png。等等,你看到的還是原來的test.png.
那么為什么會(huì)是這樣呢?
test.png 大小是120x120的,然而,betaRibbon.png是1024x1014的,所以betaRibbon.png只有透明的那部分在test.png上,剩下的部分被裁剪掉了。
不相信我嗎?那么試下相同的命令,但是將betaRibbon.png 和 test.png位置交換。
- composite test.png betaRibbon.png test2.png
你現(xiàn)在將會(huì)看到一張?jiān)趖est.png的右上角帶有beta的很大的圖片:
為了得到我們想要的,你需要將betaRibbon.png的尺寸改為120x120的。在ImageMagick中這是非常容易的。僅僅輸入:
- convert betaRibbon.png -resize 120x120 smallBetaRibbon.png
這行命令是將betaRibbon.png的大小改為120x120,并保存為smallRetaRibbon.png
現(xiàn)在,執(zhí)行下面:
- composite smallBetaRibbon.png test.png test2.png
打開test2.png,然后你將看到我們期待的:
這些就是在本教程中你需要知道的ImageMagick的功能,但是這些僅僅是ImageMagick功能的冰山一角。點(diǎn)擊ImageMagick的主頁,查看更多關(guān)于它的功能。
#p#
Xcode
在這些圖像處理工作之后,是時(shí)候回到我們熟悉的平臺(tái)了。
打開Xcode,選擇File\New\Project…選擇 iOS\Application\Single View Application, 然后點(diǎn)擊 Next. 工程命名為Llama Trot, 選擇語言為 Swift, 然后設(shè)置設(shè)備為Universal. 然后將工程保存在桌面上。
你的目標(biāo)是通過Xcode和ImageMagick,根據(jù)所選的構(gòu)建配置,在每次構(gòu)建時(shí)生成一個(gè)適當(dāng)?shù)膱D標(biāo)。
Xcode能夠在你的工程構(gòu)建時(shí)運(yùn)行腳本來做些事情。運(yùn)行腳本僅僅是Unix腳本,就像你已經(jīng)寫過的,在你每次運(yùn)行你的Xcode的項(xiàng)目時(shí)執(zhí)行。
設(shè)置一個(gè)運(yùn)行腳本
在你的工程中,選擇Llama Trot的Target,然后選擇Build Phases,點(diǎn)擊+,在彈出的菜單中選擇New Run Script Phase:
你將會(huì)看到Run Script Phase添加到你的工程配置中。
在運(yùn)行腳本時(shí),Shell參數(shù)被自動(dòng)設(shè)置為bin/sh,也就是說腳本將在bash Unix shel中執(zhí)行。
下面的框是讓你用來寫腳本的。在框中輸入:
- echo "Hello World"
你的新的 build phase應(yīng)該看起來像下面這樣:
構(gòu)建并運(yùn)行。你將看到什么也沒發(fā)生。這事因?yàn)槟_本打印的"Hello World"在你的構(gòu)建日志中。
點(diǎn)擊Report Navigator,Xcode的導(dǎo)航欄面板最右邊的圖標(biāo),點(diǎn)擊最近構(gòu)建的報(bào)告,像下圖展示的這樣。當(dāng)你構(gòu)建一個(gè)工程時(shí),這里描述了Xcode為你做的所有的事情,你將會(huì)看到"Hello World":
應(yīng)用圖標(biāo)
很好,現(xiàn)在你已經(jīng)寫了一個(gè)腳本輸出"Hello World",就像你作為一個(gè)開發(fā)者的職業(yè)生涯中已經(jīng)做過一百萬次打印"Hello World"?,F(xiàn)在是時(shí)候修改應(yīng)用的圖標(biāo)了。
從你的腳本中找到應(yīng)用圖標(biāo)
將所有的應(yīng)用圖標(biāo)都添加到Images.xcassets中,將每個(gè)圖標(biāo)拖到合適的AppIcon尺寸上:
同時(shí),你也要將debugRibbon.png 和 betaRibbon.png 放在和.xcodeproj同級(jí)的目錄文件中。
為了使用icons,你的腳本需要知道致謝icons在哪里。用下面的代碼代替你之前寫的腳本:
- echo "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"
- echo "${SRCROOT}"
- 第一行打印在你運(yùn)行你的項(xiàng)目后的問佳佳路徑,包含最后一個(gè)圖標(biāo)。
- 第二行打印項(xiàng)目文件所在的文件夾路徑。
這是通過使用Xcode的一些構(gòu)建設(shè)置的變量。
運(yùn)行你的項(xiàng)目并查看構(gòu)建報(bào)告。你將會(huì)看到描述你的工程最后產(chǎn)品的文件路徑。在它下面,你將會(huì)看到你的項(xiàng)目工程所在的文件路徑:
定位到第一個(gè)文件夾,查看它所在的位置;你將看到你的app中所有的東西,包括所有的app圖標(biāo)。這里面是存放ImageMagick修改后的圖標(biāo)的地方。
通過在Application icon點(diǎn)擊右鍵,然后選擇Show Package Contents,你將看到這些圖標(biāo)?,F(xiàn)在他們都是看起來非常正常的!
現(xiàn)在定位到打印的第二個(gè)文件路徑。這個(gè)僅僅是你正常工程項(xiàng)目的文件夾。因此,應(yīng)用圖標(biāo)在哪里呢?
前往有著相同名字的Llama Trot文件。在這里面你將看到Images.xcassets。打開Images.xcassets,你將會(huì)看到另外一個(gè)叫AppIcon.appiconset的文件。
應(yīng)用圖標(biāo)就在這個(gè)文件夾中,你將通過ImageMagick來修改它們。假設(shè)你將你的工程保存到桌面上命名為Llama Trot,那么圖標(biāo)的路徑為~/Desktop/Llama\ Trot/Llama\ Trot/Images.xcassets/AppIcon.appiconset
將腳本的最后一行替換為下面的代碼,你將會(huì)得到原始圖標(biāo)的我完整路徑:
- IFS=$'\n'
- echo $(find ${SRCROOT} -name "AppIcon60x60@2x.png")
- 第一行設(shè)置IFS-internal字段分隔符換行符。如果你不這樣做,第二行就會(huì)失敗,因?yàn)槲募?Llama Trot,包含一個(gè)空格。如果你好奇沒有第一行發(fā)生了什么,你可以將其刪除后嘗試一下。
- 第二行中此命令$ { SRCROOT }文件夾遞歸搜索文件AppIcon60x60@2x.png。
運(yùn)行項(xiàng)目,你將會(huì)看到 AppIcon60x60@2x 完整的路徑被打印出來:
將它們放在一起
困難的事情就要結(jié)束了?,F(xiàn)在是時(shí)候?qū)⑺鼈兎旁谝黄?,通過你的腳本來修改應(yīng)用的圖標(biāo)。你將首先開始修改AppIcon60x60@2x.png,然后處理所有的應(yīng)用圖標(biāo)。這就意味著你需要在Retina@2x的模擬器或者6Plus上測試。
通過結(jié)合ImageMagick的技術(shù)和你以前的腳本,最終你會(huì)得到下面的腳本。確保更新相應(yīng)的腳本:
- IFS=$'\n'
- #1
- PATH=${PATH}:/usr/local/bin
- #2
- TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AppIcon60x60@2x.png"
- BASE_IMAGE_PATH=$(find ${SRCROOT} -name "AppIcon60x60@2x.png")
- #3
- convert betaRibbon.png -resize 120x120 resizedBetaRibbon.png
- #4
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" - | composite resizedBetaRibbon.png - ${TARGET_PATH}
現(xiàn)在來分析發(fā)生了什么:
- 如果你省略第一行,編譯將失敗。你的終端有一個(gè)叫PATH的變量,來存儲(chǔ)一些默認(rèn)的本地腳本。對(duì)于所有的命令終端認(rèn)為這是第一個(gè),默認(rèn)并不是Unix的一部分。這允許任何命令位于一個(gè)目錄路徑運(yùn)行沒有指定完整的命令的位置。Xcode需要將相同的PATH變量分享給你的終端。這行添加/user/local/bin到PATH變量,Homebrew安裝的地方。
- 接下來的兩行,獲取本地的應(yīng)用圖標(biāo),然后分別將該路徑保存到TARGET_PATH 和 BASE_IMAGE_PATH 變量中
- 這行是將betaRibbon.png的圖標(biāo)的尺寸改為合適的大?。?/li>
- 最后一行做了兩件事情。首先,它在原始的應(yīng)用圖標(biāo)上添加"Hello World"文本。然后該腳本執(zhí)行合成的功能--將有beta標(biāo)識(shí)的圖片放置在其上面。然后將合成的圖片保存為應(yīng)用的圖標(biāo)。
提示:應(yīng)用程序圖標(biāo)名字不是任意的。在最終的產(chǎn)品,應(yīng)用程序圖標(biāo)的名稱必須像AppIcon60x60@2x.png。Xcode使用此命名約定來確定使用哪個(gè)圖標(biāo)根據(jù)設(shè)備使用。
運(yùn)行項(xiàng)目,在你的設(shè)備的主屏幕中看你的應(yīng)用的圖標(biāo);吐過你是在模擬其中,可以按Cmd + Shift + H 切換到主屏幕。你將會(huì)看到一個(gè)修改過的圖標(biāo):
#p#
剩下的圖標(biāo)
現(xiàn)在你已經(jīng)處理了一個(gè)圖標(biāo),現(xiàn)在該將這個(gè)腳本去處理所有的圖標(biāo)了,以使得在iPad、iPhone 6+等上顯示。
要做到這一點(diǎn),你就會(huì)把代碼修改到一個(gè)函數(shù),使圖標(biāo)圖標(biāo)的名稱作為參數(shù)。然后為每個(gè)圖標(biāo)執(zhí)行該函數(shù)。
修改腳本像下面這樣:
- PATH=${PATH}:/usr/local/bin
- IFS=$'\n'
- function generateIcon () {
- BASE_IMAGE_NAME=$1
- TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
- BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
- WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
- convert betaRibbon.png -resize $WIDTHx$WIDTH resizedRibbon.png
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" - | composite resizedRibbon.png - ${TARGET_PATH}
- }
- generateIcon "AppIcon60x60@2x.png"
- generateIcon "AppIcon60x60@3x.png"
- generateIcon "AppIcon76x76~ipad.png"
- generateIcon "AppIcon76x76@2x~ipad.png"
這使得整個(gè)圖像處理代碼為一個(gè)函數(shù),稱為generateIcon(),并且你將圖標(biāo)的名稱傳遞給過程作為參數(shù)。腳本訪問這個(gè)論點(diǎn)通過使用$1,并設(shè)置變量BASE_IMAGE_PATH.$ { BASE_IMAGE_PATH }然后放置AppIcon60x60@2x之前放置的地方。
你將會(huì)發(fā)現(xiàn)ImageMagick的一個(gè)新功能,Identity,這個(gè)功能會(huì)獲取圖片的信息。在這種情況下,你想使用通過格式化-format %w 得到的寬度在identify,去重新改變betaRibbon.png的大小。
現(xiàn)在,選擇一個(gè)iPad或者一個(gè)iPhone6+的模擬器,然后運(yùn)行該項(xiàng)目。這是因?yàn)樽煮w的大小是用像素表示的,不同的設(shè)備屏幕有不同的像素密度。
這是很容易的。你真正想要的是根據(jù)整個(gè)圖標(biāo)通過一定的比例來設(shè)置文本的高度。
在你之前設(shè)置WIDTH變量的地方立即加入下面的腳本:
- FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)
這行是非常微妙的,但是它確實(shí)是設(shè)置一個(gè)FONT_SIZE變量可變寬度的五分之一。因?yàn)閁nix算術(shù)不支持浮點(diǎn)運(yùn)算,您必須使用bc程序。
basic calculator的縮寫,bc能夠處理浮點(diǎn)類型的計(jì)算。
現(xiàn)在,改變最后一行g(shù)enerateIcon() ,通過使用FONT_SIZE變量來代替18.最后腳本應(yīng)該是下面這樣:
- PATH=${PATH}:/usr/local/bin
- IFS=$'\n'
- function generateIcon () {
- BASE_IMAGE_NAME=$1
- TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
- BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
- WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
- FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)
- convert betaRibbon.png -resize $WIDTHx$WIDTH resizedRibbon.png
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "Hello World" - | composite resizedRibbon.png - ${TARGET_PATH}
- }
- generateIcon "AppIcon60x60@2x.png"
- generateIcon "AppIcon60x60@3x.png"
- generateIcon "AppIcon76x76~ipad.png"
- generateIcon "AppIcon76x76@2x~ipad.png"
運(yùn)行你的工程項(xiàng)目在不同的設(shè)備上,你會(huì)發(fā)現(xiàn)好多了。
構(gòu)建號(hào)
在圖標(biāo)上將"Hello World"文本換位構(gòu)建號(hào)其實(shí)是很容易的事情。
版本的構(gòu)建號(hào)可以在Info.plist中的CFBundleVersion找到。
因此,你要怎樣將它放在你的腳本中呢?事實(shí)證明,你的Mac會(huì)通過一個(gè)程序來幫你實(shí)現(xiàn)。它叫PlistBuddy,你可以在/usr/libexec/中找到。
在你的腳本的最上面添加下面這行:
- buildNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${PROJECT_DIR}/${INFOPLIST_FILE}")
這行是通過使用PlistBuddy來獲取構(gòu)建號(hào)?,F(xiàn)在很簡單的將"Hello World" 替換為$buildNumber:
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$buildNumber" - | composite resizedRibbon.png - ${TARGET_PATH}
在General中改變構(gòu)建號(hào)為2015:
現(xiàn)在運(yùn)行。你將會(huì)看到一個(gè)有構(gòu)建號(hào)的圖標(biāo):
構(gòu)建配置
太酷了!整個(gè)過程即將完成。你已經(jīng)在項(xiàng)目每次運(yùn)行時(shí)將一個(gè)beta標(biāo)識(shí)和一個(gè)構(gòu)建號(hào)添加在應(yīng)用圖標(biāo)上。
但是你不想永遠(yuǎn)是一個(gè)beta標(biāo)識(shí)和構(gòu)建號(hào)。那該怎么辦?
在Xcode中,到項(xiàng)目配置中。你將會(huì)看到兩個(gè)默認(rèn)的設(shè)置:Debug和Release。
點(diǎn)擊+,選擇Duplicate Release 然后將它命名為 Beta。
Dubug配置將是調(diào)試版本,Beta配置將是測試版本,Release配置將是釋放發(fā)布版本。
現(xiàn)在你需要將這些配置放在你的腳本中,并通過CONFIGURATION來設(shè)置。在腳本總添加一個(gè)if來選擇當(dāng)前的配置。更新你的腳本如下:
- IFS=$'\n'
- buildNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${PROJECT_DIR}/${INFOPLIST_FILE}")
- versionNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleShortVersionString" "${PROJECT_DIR}/${INFOPLIST_FILE}")
- PATH=${PATH}:/usr/local/bin
- function generateIcon () {
- BASE_IMAGE_NAME=$1
- TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
- echo $TARGET_PATH
- echo $SRCROOT
- echo $(find ${SRCROOT} -name "AppIcon60x60@2x.png")
- BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
- WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
- FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)
- echo "font size $FONT_SIZE"
- if [ "${CONFIGURATION}" == "Debug" ]; then
- convert debugRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$buildNumber" - | composite resizedRibbon.png - ${TARGET_PATH}
- fi
- if [ "${CONFIGURATION}" == "Beta" ]; then
- convert betaRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png
- convert ${BASE_IMAGE_PATH} -fill white -font Times-Boldr -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$buildNumber" - | composite resizedRibbon.png - ${TARGET_PATH}
- fi
- }
- generateIcon "AppIcon60x60@2x.png"
- generateIcon "AppIcon60x60@3x.png"
- generateIcon "AppIcon76x76~ipad.png"
- generateIcon "AppIcon76x76@2x~ipad.png"
改變構(gòu)建配置,通過選擇 Product\Scheme\Edit Scheme…,選擇Info,,然后基于你將要做的選擇構(gòu)建配置,Run,Archive,Profile等等。
這就是它!有構(gòu)建數(shù)字和標(biāo)識(shí)的應(yīng)用圖標(biāo)!
beta
debug
另外,代碼可點(diǎn)擊下載參考