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