1、前言
上一篇讲到 shell技巧2 - 图片旋转缩放转换格式等,而平时iOS开发中,Xcode中Assets.xcassets
的AppIcon
需要设计师或开发者自行放置对应尺寸的图标,虽然我经常使用macOS下的 Prepo
应用生成多尺寸的图标,但是依然需要一张一张的放置到Xcode中,并且步骤非常不智能化,部分图标需要人工对应位置放置。如果通过使用 sips
命令,其实可以自动生成对应尺寸的图片,就可以灵活和自动化的批量生成AppIcon的全部图标,绝对的方便和效率!说到就马上实践吧!
2、AppIcon 要求
平时,我们的应用的图标,都会在 Assets.xcassets 的AppIcon 设置,对于 iOS 来说,需要配置如下图标:
其中,因为App如果只支持iOS7以上,1x 的设备也不需要支持了,那么大概导出需要如下的尺寸:
pt | 像素密度(scale) | 尺寸(px) | 用途 | 支持系统版本 |
---|---|---|---|---|
20pt | 2x | 40*40 | iPhone Notificafion | iOS 7-12 |
20pt | 3x | 60*60 | iPhone Notificafion | iOS 7-12 |
29pt | 2x | 58*58 | iPhone Spotlight/Settings | iOS 5-6/5-12 |
29pt | 3x | 87*87 | iPhone Spotlight/Settings | iOS 5-6/5-12 |
40pt | 2x | 80*80 | iPhone Spotlight | iOS 7-12 |
40pt | 3x | 120*120 | iPhone Spotlight | iOS 7-12 |
60pt | 2x | 120*120 | iPhone App | iOS 7-12 |
60pt | 3x | 180*180 | iPhone App | iOS 7-12 |
20pt | 2x | 40*40 | iPad Notificafion | iOS 7-12 |
29pt | 2x | 58*58 | iPad Settings | iOS 5-12 |
40pt | 2x | 80*80 | iPad Spotlight | iOS 7-12 |
76pt | 2x | 152*152 | iPad App | iOS 7-12 |
83.5pt | 2x | 167*167 | iPad Pro App | iOS 9-12 |
1024pt | 1x | 1024*1024 | App Store | iOS 7-12 |
从上面表格可以看出,这些尺寸还是有一些重复的,所以导出尺寸时,其实没有那么多的啊,因为如果相同尺寸,可以使用同一张图片,从而减少包的体积啊!
3、shell 编程
通过使用 sips
命令进行图片处理,这里简单的写一下iOS App图标生成,apple watch 或 macOS app的图标生成的示例,希望大家能举一反三,这都是授鱼不如授渔!
先说一下操作步骤:
1.在终端执行shell脚本:
1 | sh /Users/HTC/Desktop/make_iOSAppIcon.sh |
2.然后拖拽1024图片路径到终端:
1 | ================================================ Enter origin image path: /Users/HTC/Desktop/apple.jpg |
3.执行成功:
1 | ------- start processing ------- |
生成的图标和json文件:
4.然后找到输出的文件夹(默认是在填写的图片的同级目录),复制到Xcode项目中 Project/Assets.xcassets/AppIcon.appiconset/
即可。(如果还想省略这一步操作,也可以直接将生成的输出到项目的目录中,这步就交给读者需要自行添加啊)
5.打开Xcode,就能看到图片已经自动显示好!
这里说一下大概的思路,其实也不难,首先判断输出的路径,如果不是目录
、不存在的目录的文件
、格式不符合的图片
,就可以图片处理,否则提示重新输入图片路径。然后创建图片同级的文件夹用于保存生成的图标和配置的json文件,由于 “1024”图片最大,所以,先转成png,然后从大到小,一张一张剪切,另外,需要注意,1024如果是png,因为有透明度的话上传到AppStore是不成功的,所以,这里最后转换1024图片格式为jpg,这样保证万无一失。其它图标都是png,也不用切成圆角,因为苹果最终显示时系统自动切成图角。
总结一下好处:
- 方便快捷,不用人为关心
- 尺寸相同的图片只保留一张,减少包体积
- 1024图片为jpg,万无一失
4、源代码
具体的代码,也可参考我的Github代码:
1 | #!/bin/bash # 定义用到的变量 image_path="" # 定义读取输入字符的函数 getImagePath() { echo -e "\n================================================" # 监听输入并且赋值给变量 read -p "Enter origin image path: " image_path # 如果字符串的长度为零则为真为空值,从新监听,否则执行旋转函数 if test -z "$image_path"; then getImagePath else # 如果文件存在且为目录则为真 if test -d "$image_path"; then echo -e "\n------- [Error] the file path is directory --------" getImagePath else # 如果文件存在且可读则为真 if test -r "$image_path"; then ext="\.jpeg|\.jpg|\.png|\.JPEG|\.JPG|\.PNG|\.gif|\.bmp" # get the images that need process. valid_img=$(echo "$image_path" | grep -E "${ext}") # 匹配到图片格式才处理 if test -z "$valid_img"; then echo -e "\n------- [Error] the file is not's legal format --------" getImagePath else creatAppIcon fi else echo -e "\n------- [Error] the file path is not's find --------" getImagePath fi fi fi } creatAppIcon() { echo -e "\n------- start processing -------" # 图片的上一级目录 prev_path=$(dirname "$image_path") # 输出icon的目录 icon_paht="${prev_path}/iOS_icon_`date +%Y%m%d_%H%M%S`" # 创建目录 mkdir -p ${icon_paht} # 1024 icon 特别处理 icon_1024_path="${icon_paht}/icon-1024.png" cp ${image_path} ${icon_1024_path} sips -s format png ${image_path} --out ${icon_1024_path} > /dev/null 2>&1 [ $? -eq 0 ] && echo -e "info:\tresize copy 1024 successfully." || echo -e "info:\tresize copy 1024 failed." sips -z 1024 1024 ${icon_1024_path} > /dev/null 2>&1 [ $? -eq 0 ] && echo -e "info:\tresize 1024 successfully." || echo -e "info:\tresize 1024 failed." prev_size_path=${icon_1024_path} #用于复制小图,减少内存消耗 # 需要生成的图标尺寸 icons=(180 167 152 120 87 80 60 58 40) for size in ${icons[@]} do size_path="${icon_paht}/icon-${size}.png" cp ${prev_size_path} ${size_path} prev_size_path=${size_path} sips -Z $size ${size_path} > /dev/null 2>&1 [ $? -eq 0 ] && echo -e "info:\tresize ${size} successfully." || echo -e "info:\tresize ${size} failed." done # 转换1024图片为jpg,防止有透明区域导致上传 App Store 失败 icon_1024_jpg_path="${icon_paht}/icon-1024.jpg" mv ${icon_1024_path} ${icon_1024_jpg_path} sips -s format jpeg ${icon_1024_jpg_path} --out ${icon_1024_jpg_path} > /dev/null 2>&1 [ $? -eq 0 ] && echo -e "info:\tresize 1024 to jpg successfully." || echo -e "info:\tresize 1024 to jpg failed." contents_json_path="${icon_paht}/Contents.json" # 生成图标对应的配置文件 echo '{ "images" : [ { "size" : "20x20", "idiom" : "iphone", "filename" : "icon-40.png", "scale" : "2x" }, { "size" : "20x20", "idiom" : "iphone", "filename" : "icon-60.png", "scale" : "3x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon-58.png", "scale" : "2x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon-87.png", "scale" : "3x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "icon-80.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "icon-120.png", "scale" : "3x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "icon-120.png", "scale" : "2x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "icon-180.png", "scale" : "3x" }, { "idiom" : "ipad", "size" : "20x20", "scale" : "1x" }, { "size" : "20x20", "idiom" : "ipad", "filename" : "icon-40.png", "scale" : "2x" }, { "idiom" : "ipad", "size" : "29x29", "scale" : "1x" }, { "size" : "29x29", "idiom" : "ipad", "filename" : "icon-58.png", "scale" : "2x" }, { "idiom" : "ipad", "size" : "40x40", "scale" : "1x" }, { "size" : "40x40", "idiom" : "ipad", "filename" : "icon-80.png", "scale" : "2x" }, { "idiom" : "ipad", "size" : "76x76", "scale" : "1x" }, { "size" : "76x76", "idiom" : "ipad", "filename" : "icon-152.png", "scale" : "2x" }, { "size" : "83.5x83.5", "idiom" : "ipad", "filename" : "icon-167.png", "scale" : "2x" }, { "size" : "1024x1024", "idiom" : "ios-marketing", "filename" : "icon-1024.jpg", "scale" : "1x" } ], "info" : { "version" : 1, "author" : "xcode" } }' > ${contents_json_path} echo -e "\n creat iOS AppIcon finished!" echo -e "\n------- end processing -------" } # 首先执行函数,填写1024图片的路径赋值 getImagePath |
5、总结
通过 ship 命令和 shell脚本和前面几篇技巧,大家应该能感受到shell脚本编程的魅力,希望大家能举一反三,授鱼不如授渔!生活工作中结合 sehll 脚本,提高效率和自动化,珍爱时间不是梦!
其实,只要用命令有终端的地方,都是可以用shell脚本!后续有更多技巧,还会继续给大家分享,期待吧~
参考
- shell技巧2 - 图片旋转缩放转换格式等 | iHTCboy’s blog
- 利器: Mac自带的图片工具Sips
- sips MAN page Man Page - macOS - SS64.com
- 使用sips命令自动缩减图片尺寸
- shell技巧1 - 生成ipa文件 | iHTCboy’s blog
- 如有疑问,欢迎在评论区一起讨论!
- 如有不正确的地方,欢迎指导!
注:本文首发于 iHTCboy’s blog,如若转载,请注来源