在编译时修改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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容