Overlaying Application Version on Top of Your Icon

I’ve just returned from NSConference #5 (which was awesome), there were many good talks there, but my favourite one was the one about Flipboard development tools/setup by Evan Doll.

One of the things that Evan showed was adding version and commit on top of your icon. Read more to learn how I’ve implemented it.

What we will be overlaying ?

I’ve decided that 3 parts of information should be enough:

  • version number
  • branch name
  • short commit hash

Version number

We can extract version number straight from our application .plist file by using PlistBuddy tool:

1
version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_FILE}"`

PS. You could extract any plist entry with this tool, just change CFBundleVersion to different key (show raw keys in Xcode)

Branch and short commit hash

git command line tool offers rev-parse command which let’s you both of those variables:

1
2
commit=`git rev-parse --short HEAD`
branch=`git rev-parse --abbrev-ref HEAD`

How to overlay it ?

ImageMagic is my go-to tool for playing with images from command line, it offers crazy amount of functions.

Make sure to install ImageMagick and ghostscript (fonts) first, you can use brew to simplify process:

1
2
brew install imagemagick
brew install ghostscript

We can use convert function, by specifing caption parameter imagemagick will layout our text on top of image, we also setup alignment to bottom and default height.

1
2
3
convert -background '#0008' -fill white -gravity center -size ${width}x40 \
    caption:"${version} ${branch} ${commit}" \
    ${base_file} +swap -gravity south -composite  "${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${target_file}"

Setting it up in Xcode project

There are few steps we need to take in order to set this up as part of Xcode build:

  1. Rename your Icon files (where * is @2x, -568h etc.) to Icon_base, e.g. Icon@2x_base.png
  2. Add run script for your target under Build Phases
  3. Paste this code:
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
28
29
30
31
32
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"

Few things about final script:

  • I’ve added support for skipping icons that don’t exist, no need to change script contents.
  • I’m using sed to strip _base string from file name.
  • For release build we don’t want to overlay our development info.
  • Xcode likes messes up path resolution, so I’ve added usr/local/bin to it for this terminal lifetime.

Now run your project and you should see this:

Sample project on GitHub

I’m merowing_ on twitter if you feel like talking about it.

PS. If you are Senior iOS Developer and you are looking for work in in awesome team (located in London), drop me a tweet and I’ll send you more info.