The version information is displayed on the iOS App icon.

Source: Internet
Author: User
Tags imagemagick install homebrew

The version information is displayed on the iOS App icon.

Recently I read an article (http://www.merowing.info/2013/03/overlaying-application-version-on-top-of-your-icon/) introduced a very simple way to display the version information to the iOS app icon, with this skill, when testing multiple versions, the tester can directly view the version of the current test from the icon, without going to the HockeyApp or TestFlight to see which machine version is used, which can improve efficiency.
Here is how I Get this skill:
First, obtain the information you want to display on the icon. In my app, I want to display the version, branch, and commit information, that is, the version of the App that is being tested on which branch, which of the following statements is built after the submission. this information is finally obtained through the shell script, so as long as the shell script can read this information. For iOS apps, Version information comes from the project's. plist file. On Mac, PlistBuddy is provided to help developers extract all information in plist:

Shell code
  • Version = '/usr/libexec/PlistBuddy-c "Print CFBundleVersion" "Sao wo confrontation-info. plist"' #1.0
  • Version = '/usr/libexec/PlistBuddy-c "Print CFBundleVersion" "Sao wo confrontation-info. plist"' #1.0

    The branch and commit information is determined by the Version control tool. I use git:

    Shell code
  • Branch = 'git rev-parse -- abbrev-ref head'
  • Commit = 'git rev-parse -- short head'
  • branch=`git rev-parse --abbrev-ref HEAD`commit=`git rev-parse --short HEAD`

    Next, I want to write the information of the icon, and then how to write it to the icon. The tools here are ImageMagick and ghostscript. ImageMagick provides many functions for operating images in the command line, ghostscript aims to improve the font on the icon. It is convenient to install homebrew on Mac:

    Shell code
  • Brew install imagemagick
  • Brew install ghostscript
  • brew install imagemagickbrew install ghostscript

    After installation, use the convert function of ImageMagicK to write the text to the image. For example, on icon.png, create a rectangle with a background color of '#0008' and a length of 144 and a height of 40, then, the "test master 56789998" is written in a rectangle in a white font.

    Shell code
  • Convert-background '#0008'-fill white-gravity center-size 144x40 caption: "test master 56789998"./Icon.png + swap-gravity south-composite./convert.png
  • convert -background '#0008' -fill white -gravity center -size 144x40    caption:"test master 56789998"   ./Icon.png  +swap -gravity south -composite ./convert.png

    The comparison after conversion is as follows:
    Finally, with the information to be written and the method to write, complete the configuration in Xcode and add the function to the iOS App construction process.
    1. Change all Icon files to * _base.png. Because the last Icon file is generated by a script, you need to rename the current Icon to avoid conflict. 2. Add a Build Phase of Run Script in Build Phases of Target. How to do it: http://www.runscriptbuildphase.com/3. Add the previous image processing process to Run Script:

    Shell code
  • Commit = 'git rev-parse -- short head'
  • Branch = 'git rev-parse -- abbrev-ref head'
  • Version = '/usr/libexec/PlistBuddy-c "Print CFBundleVersion" "$ {INFOPLIST_FILE }"'
  • Function processIcon (){
  • Export PATH = $ PATH:/usr/local/bin
  • Base_file = $1
  • Base_path = 'Find $ {SRCROOT}-name $ base_file'
  • If [[! -F $ {base_path} |-z $ {base_path}]; then
  • Return;
  • Fi
  • Target_file = 'echo $ base_file | sed "s/_ base //"'
  • Target_path = "$ {CONFIGURATION_BUILD_DIR}/$ {UNLOCALIZED_RESOURCES_FOLDER_PATH}/$ {target_file }"
  • If [$ CONFIGURATION = "Release"]; then
  • Cp $ {base_file} $ target_path
  • Return
  • Fi
  • Width = 'identify-format % w $ {base_path }'
  • Convert-background '#0008'-fill white-gravity center-size $ {width} x40 \
  • Caption: "$ {version }$ {branch }$ {commit }"\
  • $ {Base_path} + swap-gravity south-composite $ {target_path}
  • }
  • ProcessIcon "Icon_base.png"
  • ProcessIcon Icon@2x_base.png"
  • ProcessIcon Icon-72_base.png"
  • ProcessIcon Icon-72@2x_base.png"
  • commit=`git rev-parse --short HEAD`branch=`git rev-parse --abbrev-ref HEAD`version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}"`function processIcon() {    export PATH=$PATH:/usr/local/bin    base_file=$1    base_path=`find ${SRCROOT} -name $base_file`    if [[ ! -f ${base_path} || -z ${base_path} ]]; then        return;    fi    target_file=`echo $base_file | sed "s/_base//"`    target_path="${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${target_file}"    if [ $CONFIGURATION = "Release" ]; then    cp ${base_file} $target_path    return    fi    width=`identify -format %w ${base_path}`    convert -background '#0008' -fill white -gravity center -size ${width}x40\    caption:"${version} ${branch} ${commit}"\    ${base_path} +swap -gravity south -composite ${target_path}}processIcon "Icon_base.png"processIcon "Icon@2x_base.png"processIcon "Icon-72_base.png"processIcon "Icon-72@2x_base.png"

    Finally, the effect on my Simiulatro is as follows:

    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.