在編譯時修改AppIcon

怎樣方便的知道出app當前的版本信息,版本號,是beta/debug/release呢?之前最直接的方式是在app某一頁面,顯示這些信息,需要的時候去查看。現在出了一個利器,在AppIcon上直接就可以看出這些信息,一目了然。見圖。

appIcon


主要思路

使用ImageMagick來生成新的appIcon,并替換生成的app包里面的資源。這樣就達到了修改appIcon的目的。主要用到shell腳本來實現。

在app生成目錄中,選中app,右鍵顯示包內容,AppIcon就在這里。只要替換了它們就達到目的了。

包內容


動手實現

1、首先安裝ImageMagick。使用homebrew來安裝。在命令行中輸入:brew install ImageMagick。

如果還未安裝homebrew,要先用如下命令安裝homebrew

ruby -e "$(curl -fsSL?https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后再執行brew install ImageMagick。

此外還需要安裝Ghostscript,因為ImageMagick是依賴于它的,提供了字體支持。

brew install ghostscript

Ghostscript?is a software suite designed for rendering PDF and PS files. You need it because it provides the font support for ImageMagick.


2、牛刀小試

下面來介紹下ImageMagick的幾個命令。可以下載sampleIcon來試試。

convert:修改圖片。

composite:合成圖片。

例子:

convert AppIcon60x60@2x.png -fill white -font Helvetica-Narrow -pointsize 18 -gravity south -annotate 0 "hello world" test.png

AppIcon60x60@2x.png 輸入的圖片

-fill white 設置文本顏色,red,black,orange等等。

-font Helvetica-Narrow 設置字體(支持的字體可以通過convert -list font來查看)

-pointsize 18 設置字體大小

-gravity south設置文字對齊方向,south表示底部對齊,west表示靠左對齊

-annotate 0 旋轉的角度,若設置成90°,文字將順時針旋轉90°。

"hello world" ?表示要繪制的文字。

test.png 表示生成的新圖片,若已存在同名的,會覆蓋原文件。


convert betaRibbon.png -resize 120x120 smallBetaRibbon.png

resize進行裁剪。

composite smallBetaRibbon.png test.png test2.png

合成圖片


3、在Xcode中添加shell腳本

在build phase中添加script

先來個簡單的:echo "hello world"

hello world

編譯,查看腳本運行結果。可以看到輸出了hello world。

運行結果


4、新建工程,將sampleIcon導入到Imageassets的AppIcon中。同時將sampleIcon中的beta.png,debug.png文件拖入到工程根目錄。如圖:

導入debug和beta圖片


在shell腳本中添加

echo "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"

echo "${SRCROOT}"

shell執行結果

${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}表示生成的app所在目錄。

${SRCROOT}表示工程根目錄

打開Finder到app目錄,右鍵包內容,可以看到appIcon。

app所在目錄
包內容


修改腳本,替換成如下(替換6p的AppIcon需要對@3x.png進行操作)

#添加/usr/local/bin到環境變量

PATH=${PATH}:/usr/local/bin

#appIcon所在路徑TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AppIcon60x60@2x.png"

#輸入圖片所在路徑,find命令找出AppIcon60x60@2x.png的路徑

BASE_IMAGE_PATH=$(find ${SRCROOT} -name "AppIcon60x60@2x.png")

#裁剪圖片到120*120

convert betaRibbon.png -resize 120x120 resizedBetaRibbon.png

#生成圖片到appIcon實際所在路徑

convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" -| composite resizedBetaRibbon.png - ${TARGET_PATH}

運行后,返回桌面看appIcon,已經變了。

新的appIcon


5、在appIcon上顯示版本號

(1)如何在shell中獲取版本號呢?通過PlistBuddy,它是對plist文件進行讀取的工具,所在路徑是/usr/libexec。

CFBundleVersion:build號

CFBundleShortVersionString:版本號,如2.1.1

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

echo $buildNumber

versionNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleShortVersionString" "${PROJECT_DIR}/${INFOPLIST_FILE}")

echo $versionNumber

可以看到shell中打印的是一致的。

build號


將"hello world"替換成"$buildNumber",app上的文件變成了1。

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

buildNumber
versionNumber

添加版本號,同樣的替換成$versionNumber就可以了。

(2)在腳本中修改版本號

/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString "2.3"" "${PROJECT_DIR}/${INFOPLIST_FILE}"


6、添加configuration,默認有debug,release。現在我們添加一個beta。

添加beta


在腳本中添加config的判斷,beta版本使用beta圖片,debug使用debug圖片,release不做操作。Edit scheme中的config,重新運行,發現AppIcon發生了改變。

if [ "${CONFIGURATION}" == "Debug" ]; then

convert debugRibbon.png -resize 120x120 resizedDebugRibbon.png

convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" -| composite resizedDebugRibbon.png - ${TARGET_PATH}

fi

if [ "${CONFIGURATION}" == "Beta" ]; then

convert betaRibbon.png -resize 120x120 resizedBetaRibbon.png

convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" -| composite resizedBetaRibbon.png - ${TARGET_PATH}

fi


7、改進下

在前面我們都是寫死的120*120,當使用@3x時,圖片尺寸應該是180*180。這里用identify來動態得出圖片本身的大小。

WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})

identify是ImageMagick提供的。獲取圖片信息

然后convert -resize $WIDTHx$WIDTH。

同樣,也可以動態設置pointsize,根據不同分辨率,以下以WIDTH為基準。

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


然后將以上代碼封成函數,只需傳入圖片名稱,即可。

function generateIcon(){

#$0表示shell本身文件名,$1表示第一個參數

BASE_IMAGE_NAME = $1

BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})

...

}

調用:

generateIcon "AppIcon60x60@2x.png"

generateIcon "AppIcon60x60@3x.png"

可同時修改@2x,@3x的AppIcon。


demo地址:demo

原文鏈接:How To Change Your App Icon at Build Time

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容