本文在原先教程上作出了部分修改。
廢話少說,先上效果圖。
準(zhǔn)備
首先,你需要安裝 ImageMagick
,這是一個非常強大的圖形處理圖軟件套件,專門通過終端進(jìn)行。你可以非常簡單地通過Homebrew
來安裝ImageMagick
。如果你沒有安裝Homebrew
,或者你可能并不知道它是什么,你可以在主頁上學(xué)習(xí)了解并安裝它。
如果你已經(jīng)安裝了Homebrew
,打開終端并輸入:
brew update
brew install ImageMagick
接下來,需要安裝Ghostscript
,因為你將使用的ImageMagick會依賴它。Ghostscript是一個軟件套件用于呈現(xiàn)PDF和PS文件。你需要它是因為它提供了支持ImageMagick
的字體。
安裝Ghostscript
通過運行下面的命令:
brew install ghostscript
如果中間發(fā)生錯誤,運行這個命令:
brew doctor
如果安裝失敗,你會得到一個消息,并告訴你如何去修復(fù)它。
這些是所有你需要安裝的,以在本教程中使用。
ImageMagick簡單使用
ImageMagick中有許多命令,但在本教程中,你需要用到的是convert和composite(轉(zhuǎn)換和組合)
convert:一張圖片,修改它,然后保存為一張新的圖片;
composite:一張圖片,在它上面覆蓋另外一張圖片,然后存為新的第三張圖片。
本教程中提供一些簡單地圖標(biāo)供使用。當(dāng)然,你也可以使用你自己的圖標(biāo),但你需要修改為相應(yīng)的文件名。在這里下載圖標(biāo),對于本教程,將其放在桌面上。
這里的目標(biāo)之一是覆蓋構(gòu)建版本應(yīng)用程序的圖標(biāo)。所以你將看到如何使用ImageMagick覆蓋文本圖像將Hello World放在其中的一個圖標(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
1、AppIcon60x60@2x.png 是輸入圖片的名字;
2、fill white 設(shè)置文本為白色;
3、font Times-Bold 告訴ImageMagick使用什么字體;
4、pointsize 18 設(shè)置字體的大小為18;
5、gravity south 文本與圖片的底部對齊
6、annotate 0 "Hello World" 告訴ImageMagick使帶有"Hello World"文本注釋的圖片旋轉(zhuǎn)的度數(shù)為0度;
7、test.png 輸出的文件名,并且ImageMagick將會覆蓋掉已經(jīng)存在的文件。
如果你在終端上沒有看到任何的錯誤,那么你將會在AppIconSet的文件夾中看到一個命名為test.png的文件,打開后你會看到這樣:
提示:如果你看到了錯誤的消息,或者是腳本沒有作用,那么可能是你沒有安裝所需的字體。通過運行下面的命令,看下你所能用的字體有哪些。
convert -list font
如果你沒有Times這個字體,那么選擇一個你可以使用的來代替。
現(xiàn)在,將beta標(biāo)志加載圖片上。在終端上輸入:
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)于它的功能。
Xcode
新建iOS工程Llama Trot, 然后將工程保存在桌面上。
你的目標(biāo)是通過Xcode和ImageMagick,根據(jù)所選的構(gòu)建配置,在每次構(gòu)建時生成一個適當(dāng)?shù)膱D標(biāo)。
將所有的應(yīng)用圖標(biāo)都添加到Images.xcassets中,將每個圖標(biāo)拖到合適的AppIcon尺寸上:
同時,你也要將debugRibbon.png 和 betaRibbon.png 放在和.xcodeproj同級的目錄文件中。
設(shè)置運行腳本
在你的工程中,選擇Llama Trot的Target,然后選擇Build Phases,點擊+,在彈出的菜單中選擇New Run Script Phase:
你將會看到Run Script Phase添加到你的工程配置中。
在運行腳本時,Shell參數(shù)被自動設(shè)置為bin/sh,也就是說腳本將在bash Unix shell中執(zhí)行。
在框中輸入像下面這樣:
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"
1、如果你省略第一行,編譯將失敗。你的終端有一個叫PATH的變量,來存儲一些默認(rèn)的本地腳本。對于所有的命令終端認(rèn)為這是第一個,默認(rèn)并不是Unix的一部分。這允許任何命令位于一個目錄路徑運行沒有指定完整的命令的位置。Xcode需要將相同的PATH變量分享給你的終端。這行添加/user/local/bin到PATH變量,Homebrew安裝的地方。
2、第二行設(shè)置IFS-internal字段分隔符換行符。如果你不這樣做,第二行就會失敗,因為文件名,Llama Trot,包含一個空格。如果你好奇沒有第一行發(fā)生了什么,你可以將其刪除后嘗試一下。
3、接下來的兩行,獲取本地的應(yīng)用圖標(biāo),然后分別將該路徑保存到TARGET_PATH 和 BASE_IMAGE_PATH 變量中
4、ImageMagick的一個新功能,Identity 獲取圖片的信息,接著是將betaRibbon.png的圖標(biāo)的尺寸改為合適的大小;
5、最后一行做了兩件事情。首先,它在原始的應(yīng)用圖標(biāo)上添加"Hello World"文本。然后該腳本執(zhí)行合成的功能--將有beta標(biāo)識的圖片放置在其上面。然后將合成的圖片保存為應(yīng)用的圖標(biāo)。
提示:應(yīng)用程序圖標(biāo)名字不是任意的。在最終的產(chǎn)品,應(yīng)用程序圖標(biāo)的名稱必須像AppIcon60x60@2x.png。Xcode使用此命名約定來確定使用哪個圖標(biāo)根據(jù)設(shè)備使用。
運行項目,退回主屏幕,你將會看到一個修改過的圖標(biāo):
現(xiàn)在,選擇一個iPad或者一個iPhone6+的模擬器,然后運行該項目。這是因為字體的大小是用像素表示的,不同的設(shè)備屏幕有不同的像素密度。
這是很容易的。你真正想要的是根據(jù)整個圖標(biāo)通過一定的比例來設(shè)置文本的高度。
在你之前設(shè)置WIDTH變量的地方立即加入下面的腳本:
FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)
構(gòu)建版本號
替換圖標(biāo)上"Hello World"文本為CFBundleVersion
在你的腳本的最上面添加下面這行:
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}
若想CFBundleVersion自動遞增,參考這篇文章
構(gòu)建配置
如果想Debug和Release(Adhoc)構(gòu)建不同配置,則使用CONFIGURATION來設(shè)置。在腳本總添加一個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}"
BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)
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"
AppIcon60x60@2x.png
替換為自己的資源名稱
代碼可點擊下載參考