iOS 如何利用指令碼編寫icon角標區分APP版本+環境

weixin_34185560發表於2017-07-19

iOS指令碼APP

引子

上篇文章解決了如何快速科學的區分APP環境。緊隨著又出現這個需求。
當APP存在多個環境的時候，如何快速的區分不同的版本+環境，如果能直觀的通過角標來完成這樣一個區分就太棒了。

本文目的

解決如何通過角標區分環境。
打包build++。

展示效果

這是在fir上面打包出來的效果。

1507F8BB-F39F-4DB0-B081-0CB3DE7CDD75.png

如何實現

首先花幾分鐘安裝Homebrew + Ghostscript外掛，很簡單

安裝教程
需要說的是上面這個連結簡書的作者不是原創，最早是一個外國的開發者開發的，中國有人進行了翻譯，然後這篇部落格也被抄來抄去，但是並不影響我們使用。

1. 安裝好了上面的兩個外掛之後，在專案包下面新增角標圖片，名字別修改了，因為指令碼里面找的路徑關聯圖片名稱

1C423191-E05A-40EF-B61E-31EF312DBB6C.png

2. 建立指令碼。

注意這裡指令碼的順序不要亂，就加在最後面，因為這裡的指令碼會按照先後順序進行編譯。如果把角標指令碼放到臺前面，會出問題。

螢幕快照 2017-07-19 下午2.29.35.png

3. 指令碼編寫。

(下面會給出demo，這個指令碼根據不同的判斷條件用來繪製角標。挺複雜的，但是並不需要弄懂才能使用，使用的時候更改環境，和對應的圖片就能得到你想要的效果)
指令碼最終的位置

A0C21A2D-5F3F-4278-8784-36985850B05A.png

指令碼檔案

IFS=$'\n'
//獲取build,需要畫到圖示上面去
buildNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}") 
//獲取版本號，需要畫到圖示上面去
versionNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleShortVersionString" "${INFOPLIST_FILE}")
//獲取bundleID, 需要進行環境的判斷
bundleIdentifier=${PRODUCT_BUNDLE_IDENTIFIER}

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

echo "this is PR Environment" //列印現在這個環境是PR環境

function generateIcon () {
    
    BASE_IMAGE_NAME=$1
    
    TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
    echo "this line is target path"
    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"
    
//最後需要被繪製到icon上面的角標
    iconbadgeDebug="${SRCROOT}/iconbadge/debugRibbon.png"
    iconbadgeRelease="${SRCROOT}/iconbadge/prbetaRibbon.png"
    resizedIconBadge="${SRCROOT}/iconbadge/resizedRibbon.png"
    echo "iconbadge is $iconbadge"
    
//根據不同環境進行繪製
    if [ "${CONFIGURATION}" == "Debug" ]; then
    convert ${iconbadgeDebug} -resize ${WIDTH}x${WIDTH} ${resizedIconBadge}
    convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$versionNumber.$buildNumber" - | composite ${resizedIconBadge} - ${TARGET_PATH}
    fi
    
    if [ "${CONFIGURATION}" == "Release" ]; then
    convert ${iconbadgeRelease} -resize ${WIDTH}x${WIDTH} ${resizedIconBadge}
    convert ${BASE_IMAGE_PATH} -fill white -font Times-Boldr -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$versionNumber.$buildNumber" - | composite ${resizedIconBadge} - ${TARGET_PATH}
    fi
}

generateIcon "AppIcon20x20@2x.png"
generateIcon "AppIcon20x20@3x.png"
generateIcon "AppIcon29x29@2x.png"
generateIcon "AppIcon29x29@3x.png"
generateIcon "AppIcon40x40@2x.png"
generateIcon "AppIcon40x40@3x.png"
generateIcon "AppIcon60x60@2x.png"
generateIcon "AppIcon60x60@3x.png"

直接去demo裡面複製檔案，然後更改這個地方圖片的路徑+Debug／Realse，最終選擇使用哪個角標進行繪製