如何在運行時改變App的圖標

在你完成應用程序的beta版本後，最後會有些人去幫你測試，使你去完善應用程序……或者會有投資青睞。可是若是測試人員有一種簡單地方式去檢查構建版本的應用程序會不會有幫助呢？

這個教程將會向你展現這些，向你介紹一些或許不多有人知道的Xcode裏面的功能。

你會相信在這個教程中你不會寫一行Swift的代碼嗎？固然，你也不用寫一句Objective-C代碼。

這個教程會讓你寫一些bash shell腳本。你將會使用到ImageMagick，Terminal，Xcode，去寫一個自動在你的app的圖標上加上"debug"或者"beta"標識的腳本。

這個教程須要你有一些基本的Unix腳本的知識。你能夠跟隨一些shell腳本大神學習，但你也能夠在Bash初學者指南或者Bas腳本高級編程指南。

你想接下來作這些嗎？

app圖標

準備

首先，你須要安裝ImageMagick，這是一個很是強大的圖形處理圖軟件套件，專門經過終端進行。你能夠很是簡單地經過Homebrew來安裝ImageMagick。若是你沒有安裝Homebrew，或者你可能並不知道它是什麼，你能夠在主頁上學習瞭解並安裝它。

若是你已經安裝了Homebrew，打開終端並輸入：

1	brew update

這是肯定你是否從Homebrew上安裝的最新的安裝包，這個也是確認你是否有安裝Homebrew。

那麼，如今，經過使用Homebrew來安裝你所須要的安裝包。如今輸入下面的命令：

1	brew install ImageMagick

你將會看到一些列的東西經過Homebrew，展現了ImageMagick安裝的詳細過程，所以跟着步驟安裝。

接下來，你也須要安裝Ghostscript，由於你將使用的ImageMagick會依賴它。Ghostscript是一個軟件套件用於呈現PDF和PS文件。你須要它是由於它提供了支持ImageMagick的字體。

安裝Ghostscript經過運行下面的命令：

1	brew install ghostscript

若是中間發生錯誤，運行這個命令：

1	brew doctor

若是安裝失敗，你會獲得一個消息，並告訴你如何去修復它。

這些是全部你須要安裝的，以在本教程中使用。

Llama你好

ImageMagick中有許多命令，但在本教程中，你須要用到的是convert和composite（轉換和組合）

convert：一張圖片，修改它，而後保存爲一張新的圖片；

composite：一張圖片，在它上面覆蓋另一張圖片，而後存爲新的第三張圖片。

本教程中提供一些簡單地圖標供使用。固然，你也可使用你本身的圖標，但你須要修改成相應的文件名。在這裏下載圖標，對於本教程，將其放在桌面上。

這裏的目標之一是覆蓋構建版本應用程序的圖標。因此你將看到如何使用ImageMagick覆蓋文本圖像將Hello World放在其中的一個圖標上。打開終端並進入到放應用程序圖標的文件夾:

1	cd ~/Desktop/AppIconSet

如今輸入：

1	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"文本註釋的圖片旋轉的度數爲0度；

七、test.png 輸出的文件名，而且ImageMagick將會覆蓋掉已經存在的文件。

若是你在終端上沒有看到任何的錯誤，那麼你將會在AppIconSet的文件夾中看到一個命名爲test.png的文件，打開後你會看到這樣：

提示：若是你看到了錯誤的消息，或者是腳本沒有做用，那麼多是你沒有安裝所需的字體。經過運行下面的命令，看下你所能用的字體有哪些。

1	convert -list font

若是你沒有Times這個字體，那麼選擇一個你可使用的來代替。

如今，將beta標誌加載圖片上。在終端上輸入：

1	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位置交換。

1	composite test.png betaRibbon.png test2.png

你如今將會看到一張在test.png的右上角帶有beta的很大的圖片：

爲了獲得咱們想要的，你須要將betaRibbon.png的尺寸改成120x120的。在ImageMagick中這是很是容易的。僅僅輸入：

1	convert betaRibbon.png -resize 120x120 smallBetaRibbon.png

這行命令是將betaRibbon.png的大小改成120x120，並保存爲smallRetaRibbon.png

如今，執行下面：

1	composite smallBetaRibbon.png test.png test2.png

打開test2.png，而後你將看到咱們期待的：

這些就是在本教程中你須要知道的ImageMagick的功能，可是這些僅僅是ImageMagick功能的冰山一角。點擊ImageMagick的主頁，查看更多關於它的功能。

Xcode

在這些圖像處理工做以後，是時候回到咱們熟悉的平臺了。

打開Xcode，選擇File\New\Project…選擇 iOS\Application\Single View Application, 而後點擊 Next. 工程命名爲Llama Trot, 選擇語言爲 Swift, 而後設置設備爲Universal. 而後將工程保存在桌面上。

你的目標是經過Xcode和ImageMagick，根據所選的構建配置，在每次構建時生成一個適當的圖標。

Xcode可以在你的工程構建時運行腳原本作些事情。運行腳本僅僅是Unix腳本，就像你已經寫過的，在你每次運行你的Xcode的項目時執行。

設置一個運行腳本

在你的工程中，選擇Llama Trot的Target，而後選擇Build Phases，點擊+，在彈出的菜單中選擇New Run Script Phase：

你將會看到Run Script Phase添加到你的工程配置中。

在運行腳本時，Shell參數被自動設置爲bin/sh，也就是說腳本將在bash Unix shel中執行。

下面的框是讓你用來寫腳本的。在框中輸入：

1	echo  "Hello World"

你的新的 build phase應該看起來像下面這樣：

構建並運行。你將看到什麼也沒發生。這事由於腳本打印的"Hello World"在你的構建日誌中。

點擊Report Navigator，Xcode的導航欄面板最右邊的圖標，點擊最近構建的報告，像下圖展現的這樣。當你構建一個工程時，這裏描述了Xcode爲你作的全部的事情，你將會看到"Hello World"：

應用圖標

很好，如今你已經寫了一個腳本輸出"Hello World"，就像你做爲一個開發者的職業生涯中已經作過一百萬次打印"Hello World"。如今是時候修改應用的圖標了。

從你的腳本中找到應用圖標

將全部的應用圖標都添加到Images.xcassets中，將每一個圖標拖到合適的AppIcon尺寸上：

同時，你也要將debugRibbon.png 和 betaRibbon.png 放在和.xcodeproj同級的目錄文件中。

爲了使用icons，你的腳本須要知道致謝icons在哪裏。用下面的代碼代替你以前寫的腳本：

1 2	echo  "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}" echo  "${SRCROOT}"

一、第一行打印在你運行你的項目後的問佳佳路徑，包含最後一個圖標。

二、第二行打印項目文件所在的文件夾路徑。

這是經過使用Xcode的一些構建設置的變量。

運行你的項目並查看構建報告。你將會看到描述你的工程最後產品的文件路徑。在它下面，你將會看到你的項目工程所在的文件路徑：

定位到第一個文件夾，查看它所在的位置；你將看到你的app中全部的東西，包括全部的app圖標。這裏面是存放ImageMagick修改後的圖標的地方。

經過在Application icon點擊右鍵，而後選擇Show Package Contents，你將看到這些圖標。如今他們都是看起來很是正常的！

如今定位到打印的第二個文件路徑。這個僅僅是你正常工程項目的文件夾。所以，應用圖標在哪裏呢？

前往有着相同名字的Llama Trot文件。在這裏面你將看到Images.xcassets。打開Images.xcassets，你將會看到另一個叫AppIcon.appiconset的文件。

應用圖標就在這個文件夾中，你將經過ImageMagick來修改它們。假設你將你的工程保存到桌面上命名爲Llama Trot，那麼圖標的路徑爲~/Desktop/Llama\ Trot/Llama\ Trot/Images.xcassets/AppIcon.appiconset

將腳本的最後一行替換爲下面的代碼，你將會獲得原始圖標的我完整路徑：

1 2	IFS=$ '\n' echo $(find ${SRCROOT} -name  "AppIcon60x60@2x.png" )

一、第一行設置IFS-internal字段分隔符換行符。若是你不這樣作,第二行就會失敗,由於文件名,Llama Trot,包含一個空格。若是你好奇沒有第一行發生了什麼，你能夠將其刪除後嘗試一下。

二、第二行中此命令$ { SRCROOT }文件夾遞歸搜索文件AppIcon60x60@2x.png。

運行項目，你將會看到 AppIcon60x60@2x 完整的路徑被打印出來：

將它們放在一塊兒

困難的事情就要結束了。如今是時候將它們放在一塊兒，經過你的腳原本修改應用的圖標。你將首先開始修改AppIcon60x60@2x.png，而後處理全部的應用圖標。這就意味着你須要在Retina@2x的模擬器或者6Plus上測試。

經過結合ImageMagick的技術和你之前的腳本,最終你會獲得下面的腳本。確保更新相應的腳本:

1 2 3 4 5 6 7 8 9 10

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}

如今來分析發生了什麼：

一、若是你省略第一行，編譯將失敗。你的終端有一個叫PATH的變量，來存儲一些默認的本地腳本。對於全部的命令終端認爲這是第一個，默認並非Unix的一部分。這容許任何命令位於一個目錄路徑運行沒有指定完整的命令的位置。Xcode須要將相同的PATH變量分享給你的終端。這行添加/user/local/bin到PATH變量，Homebrew安裝的地方。

二、接下來的兩行，獲取本地的應用圖標，而後分別將該路徑保存到TARGET_PATH 和 BASE_IMAGE_PATH 變量中

三、這行是將betaRibbon.png的圖標的尺寸改成合適的大小；

四、最後一行作了兩件事情。首先，它在原始的應用圖標上添加"Hello World"文本。而後該腳本執行合成的功能--將有beta標識的圖片放置在其上面。而後將合成的圖片保存爲應用的圖標。

提示：應用程序圖標名字不是任意的。在最終的產品，應用程序圖標的名稱必須像AppIcon60x60@2x.png。Xcode使用此命名約定來肯定使用哪一個圖標根據設備使用。

運行項目，在你的設備的主屏幕中看你的應用的圖標；吐過你是在模擬其中，能夠按Cmd + Shift + H 切換到主屏幕。你將會看到一個修改過的圖標：

剩下的圖標

如今你已經處理了一個圖標，如今該將這個腳本去處理全部的圖標了，以使得在iPad、iPhone 6+等上顯示。

要作到這一點,你就會把代碼修改到一個函數,使圖標圖標的名稱做爲參數。而後爲每一個圖標執行該函數。

修改腳本像下面這樣：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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"

這使得整個圖像處理代碼爲一個函數,稱爲generateIcon(),而且你將圖標的名稱傳遞給過程做爲參數。腳本訪問這個論點經過使用$1,並設置變量BASE_IMAGE_PATH.$ { BASE_IMAGE_PATH }而後放置AppIcon60x60@2x以前放置的地方。

你將會發現ImageMagick的一個新功能，Identity，這個功能會獲取圖片的信息。在這種狀況下，你想使用經過格式化-format %w 獲得的寬度在identify，去從新改變betaRibbon.png的大小。

如今，選擇一個iPad或者一個iPhone6+的模擬器，而後運行該項目。這是由於字體的大小是用像素表示的，不一樣的設備屏幕有不一樣的像素密度。

這是很容易的。你真正想要的是根據整個圖標經過必定的比例來設置文本的高度。

在你以前設置WIDTH變量的地方當即加入下面的腳本：

1	FONT_SIZE=$(echo  "$WIDTH * .15"  | bc -l)

這行是很是微妙的，可是它確實是設置一個FONT_SIZE變量可變寬度的五分之一。由於Unix算術不支持浮點運算,您必須使用bc程序。

basic calculator的縮寫，bc可以處理浮點類型的計算。

如今，改變最後一行generateIcon() ，經過使用FONT_SIZE變量來代替18.最後腳本應該是下面這樣：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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"

運行你的工程項目在不一樣的設備上，你會發現好多了。

構建號

在圖標上將"Hello World"文本換位構建號實際上是很容易的事情。

版本的構建號能夠在Info.plist中的CFBundleVersion找到。

所以，你要怎樣將它放在你的腳本中呢？事實證實，你的Mac會經過一個程序來幫你實現。它叫PlistBuddy，你能夠在/usr/libexec/中找到。

在你的腳本的最上面添加下面這行：

1	buildNumber=$(/usr/libexec/PlistBuddy -c  "Print CFBundleVersion"  "${PROJECT_DIR}/${INFOPLIST_FILE}" )

這行是經過使用PlistBuddy來獲取構建號。如今很簡單的將"Hello World" 替換爲$buildNumber：

1	convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0  "$buildNumber"  - | composite resizedRibbon.png - ${TARGET_PATH}

在General中改變構建號爲2015：

如今運行。你將會看到一個有構建號的圖標：

構建配置

太酷了！整個過程即將完成。你已經在項目每次運行時將一個beta標識和一個構建號添加在應用圖標上。

可是你不想永遠是一個beta標識和構建號。那該怎麼辦？

在Xcode中，到項目配置中。你將會看到兩個默認的設置：Debug和Release。

點擊+，選擇Duplicate Release 而後將它命名爲 Beta。

Dubug配置將是調試版本，Beta配置將是測試版本，Release配置將是釋放發佈版本。

如今你須要將這些配置放在你的腳本中，並經過CONFIGURATION來設置。在腳本總添加一個if來選擇當前的配置。更新你的腳本以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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"

改變構建配置，經過選擇 Product\Scheme\Edit Scheme…，選擇Info，，而後基於你將要作的選擇構建配置，Run，Archive，Profile等等。

這就是它!有構建數字和標識的應用圖標!

beta

debug