Xcode编译时改变App的图标

本文在原先教程上作出了部分修改。

废话少说,先上效果图。

app图标

准备
首先,你需要安装 ImageMagick,这是一个非常强大的图形处理图软件套件,专门通过终端进行。你可以非常简单地通过Homebrew来安装ImageMagick。如果你没有安装Homebrew,或者你可能并不知道它是什么,你可以在主页上学习了解并安装它。
如果你已经安装了Homebrew,打开终端并输入:

brew update
brew install ImageMagick

接下来,需要安装Ghostscript,因为你将使用的ImageMagick会依赖它。Ghostscript是一个软件套件用于呈现PDF和PS文件。你需要它是因为它提供了支持ImageMagick的字体。
安装Ghostscript通过运行下面的命令:

brew install ghostscript

如果中间发生错误,运行这个命令:

brew doctor

如果安装失败,你会得到一个消息,并告诉你如何去修复它。
这些是所有你需要安装的,以在本教程中使用。

ImageMagick简单使用
ImageMagick中有许多命令,但在本教程中,你需要用到的是convert和composite(转换和组合)
convert:一张图片,修改它,然后保存为一张新的图片;
composite:一张图片,在它上面覆盖另外一张图片,然后存为新的第三张图片。
本教程中提供一些简单地图标供使用。当然,你也可以使用你自己的图标,但你需要修改为相应的文件名。在这里下载图标,对于本教程,将其放在桌面上。
这里的目标之一是覆盖构建版本应用程序的图标。所以你将看到如何使用ImageMagick覆盖文本图像将Hello World放在其中的一个图标上。打开终端并进入到放应用程序图标的文件夹:

cd ~/Desktop/AppIconSet

现在输入:

convert AppIcon60x60@2x.png -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" test.png

1、AppIcon60x60@2x.png 是输入图片的名字;
2、fill white 设置文本为白色;
3、font Times-Bold 告诉ImageMagick使用什么字体;
4、pointsize 18 设置字体的大小为18;
5、gravity south 文本与图片的底部对齐
6、annotate 0 "Hello World" 告诉ImageMagick使带有"Hello World"文本注释的图片旋转的度数为0度;
7、test.png 输出的文件名,并且ImageMagick将会覆盖掉已经存在的文件。
如果你在终端上没有看到任何的错误,那么你将会在AppIconSet的文件夹中看到一个命名为test.png的文件,打开后你会看到这样:


test.png

提示:如果你看到了错误的消息,或者是脚本没有作用,那么可能是你没有安装所需的字体。通过运行下面的命令,看下你所能用的字体有哪些。

convert -list font

如果你没有Times这个字体,那么选择一个你可以使用的来代替。
现在,将beta标志加载图片上。在终端上输入:

composite betaRibbon.png test.png test2.png

这个是将betaRibbon.png放在test.png的上面,然后将合成的图片保存为test2.png
打开test2.png。等等,你看到的还是原来的test.png.
那么为什么会是这样呢?
test.png 大小是120x120的,然而,betaRibbon.png是1024x1014的,所以betaRibbon.png只有透明的那部分在test.png上,剩下的部分被裁剪掉了。
不相信我吗?那么试下相同的命令,但是将betaRibbon.png 和 test.png位置交换。

composite test.png betaRibbon.png test2.png

你现在将会看到一张在test.png的右上角带有beta的很大的图片:


test2.png

为了得到我们想要的,你需要将betaRibbon.png的尺寸改为120x120的。在ImageMagick中这是非常容易的。仅仅输入:

convert betaRibbon.png -resize 120x120 smallBetaRibbon.png

这行命令是将betaRibbon.png的大小改为120x120,并保存为smallRetaRibbon.png
现在,执行下面:

composite smallBetaRibbon.png test.png test2.png

打开test2.png,然后你将看到我们期待的:


test2.png

这些就是在本教程中你需要知道的ImageMagick的功能,但是这些仅仅是ImageMagick功能的冰山一角。点击ImageMagick的主页,查看更多关于它的功能。

Xcode
新建iOS工程Llama Trot, 然后将工程保存在桌面上。
你的目标是通过Xcode和ImageMagick,根据所选的构建配置,在每次构建时生成一个适当的图标。

将所有的应用图标都添加到Images.xcassets中,将每个图标拖到合适的AppIcon尺寸上:



同时,你也要将debugRibbon.png 和 betaRibbon.png 放在和.xcodeproj同级的目录文件中。


设置运行脚本
在你的工程中,选择Llama Trot的Target,然后选择Build Phases,点击+,在弹出的菜单中选择New Run Script Phase:


你将会看到Run Script Phase添加到你的工程配置中。
在运行脚本时,Shell参数被自动设置为bin/sh,也就是说脚本将在bash Unix shell中执行。
在框中输入像下面这样:

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

IFS=$'\n'
function generateIcon () {
BASE_IMAGE_NAME=$1
TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
convert betaRibbon.png -resize $WIDTHx$WIDTH resizedRibbon.png
convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" - | composite resizedRibbon.png - ${TARGET_PATH}
}
generateIcon "AppIcon60x60@2x.png"
generateIcon "AppIcon60x60@3x.png"
generateIcon "AppIcon76x76~ipad.png"
generateIcon "AppIcon76x76@2x~ipad.png"

1、如果你省略第一行,编译将失败。你的终端有一个叫PATH的变量,来存储一些默认的本地脚本。对于所有的命令终端认为这是第一个,默认并不是Unix的一部分。这允许任何命令位于一个目录路径运行没有指定完整的命令的位置。Xcode需要将相同的PATH变量分享给你的终端。这行添加/user/local/bin到PATH变量,Homebrew安装的地方。
2、第二行设置IFS-internal字段分隔符换行符。如果你不这样做,第二行就会失败,因为文件名,Llama Trot,包含一个空格。如果你好奇没有第一行发生了什么,你可以将其删除后尝试一下。
3、接下来的两行,获取本地的应用图标,然后分别将该路径保存到TARGET_PATH 和 BASE_IMAGE_PATH 变量中
4、ImageMagick的一个新功能,Identity 获取图片的信息,接着是将betaRibbon.png的图标的尺寸改为合适的大小;
5、最后一行做了两件事情。首先,它在原始的应用图标上添加"Hello World"文本。然后该脚本执行合成的功能--将有beta标识的图片放置在其上面。然后将合成的图片保存为应用的图标。

提示:应用程序图标名字不是任意的。在最终的产品,应用程序图标的名称必须像AppIcon60x60@2x.png。Xcode使用此命名约定来确定使用哪个图标根据设备使用。

运行项目,退回主屏幕,你将会看到一个修改过的图标:


不同像素密度

现在,选择一个iPad或者一个iPhone6+的模拟器,然后运行该项目。这是因为字体的大小是用像素表示的,不同的设备屏幕有不同的像素密度。
这是很容易的。你真正想要的是根据整个图标通过一定的比例来设置文本的高度。
在你之前设置WIDTH变量的地方立即加入下面的脚本:

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

构建版本号
替换图标上"Hello World"文本为CFBundleVersion
在你的脚本的最上面添加下面这行:

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

这行是通过使用PlistBuddy来获取构建号。现在很简单的将"Hello World" 替换为$buildNumber:

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

若想CFBundleVersion自动递增,参考这篇文章

构建配置
如果想Debug和Release(Adhoc)构建不同配置,则使用CONFIGURATION来设置。在脚本总添加一个if来选择当前的配置。更新你的脚本如下:

IFS=$'\n'

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

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

function generateIcon () {
BASE_IMAGE_NAME=$1
TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
WIDTH=$(identify -format %w ${BASE_IMAGE_PATH})
FONT_SIZE=$(echo "$WIDTH * .15" | bc -l)

if [ "${CONFIGURATION}" == "Debug" ]; then
convert debugRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png
convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$buildNumber" - | composite resizedRibbon.png - ${TARGET_PATH}
fi

if [ "${CONFIGURATION}" == "Beta" ]; then
convert betaRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png
convert ${BASE_IMAGE_PATH} -fill white -font Times-Boldr -pointsize ${FONT_SIZE} -gravity south -annotate 0 "$buildNumber" - | composite resizedRibbon.png - ${TARGET_PATH}
fi
}

generateIcon "AppIcon60x60@2x.png"
generateIcon "AppIcon60x60@3x.png"
generateIcon "AppIcon76x76~ipad.png"
generateIcon "AppIcon76x76@2x~ipad.png"

AppIcon60x60@2x.png替换为自己的资源名称

Beta

Debug

代码可点击下载参考

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

推荐阅读更多精彩内容

  • 在你完成应用程序的beta版本后,最后会有些人去帮你测试,使你去完善应用程序……或者会有投资青睐。但是如果测试人员...
    zmp1123阅读 6,692评论 16 46
  • 运行时改变App的图标 ImageMagick,Terminal,Xcode,去写一个自动在你的app的图标上加上...
    Zd_silent阅读 475评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • 说走就走的旅行,还不如这走到哪是哪儿的旅行,自由的更加彻底。酝酿已久的安大略省北境自驾游,终于在这样的基调下成行。...
    田园读书人阅读 1,930评论 0 4
  • 七律《黄鹤楼怀古》 独倚楼栏望楚天,可怜王气已如烟。 周郎羽扇销樯橹,翊武刀枪倒九乾。 鹦鹉洲头徊瑞鹤,龟蛇山麓醉...
    不语不问阅读 562评论 2 7