每逢重大节日,App icon 就要跟一波“潮流”做一次更换,节日过后再换回普通。如何保证这两次切换流程丝滑顺畅呢?
应用内需要更换的 icon 包括两处,一个是 App 主 icon,默认放在 xcassets
里面,另一个就是 App 内部页面所使用的 icon。
App 主 icon 更换
苹果这边需要的 icon 实在太多了,如果像我们 App 一样支持 iPad 那么大大小小的 icon 就需要 18 张,就算让设计师同学给到所有需要的尺寸我们自己在 .xcassets
一一对应起来也是超级麻烦,如果我们只需要提供一张高清图(1024x1024 pixel)剩下的能通过工具自动对应起来该多好啊!
研究xcassets
结构后发现,AppIcon 类型的图片是一个后缀名为 appiconset
的文件夹,该文件夹里面除了有 APP 需要的各种尺寸的 png
图片外,还有一个 Contents.json
文件,形如:
{
"images" : [
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "IOS_40-2.png",
"scale" : "2x"
},
{
"size" : "83.5x83.5",
"idiom" : "ipad",
"filename" : "IOS_167.png",
"scale" : "2x"
},
{
"size" : "1024x1024",
"idiom" : "ios-marketing",
"filename" : "IOS_1024.png",
"scale" : "1x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
描述了了各种尺寸的图片如何与文件夹中的 png
图片对应,我们按照此规律便可以写一个更换 AppIcon 的工具。
之前确实听说过有自动生成这种 icon 的工具 App 但我没有使用过,要为如此一个小功能下载一个 App 我觉得太不环保了。还是自己写一个脚本实现比较低碳。下面是 python 程序和注释
# !/usr/local/bin/python3
# _*_ coding:utf-8 _*_
__doc__="""
输入:一个 1024*1024 的 png 图片
输出: AppIconxxxxx.appiconset 目录,包含 iPhone 和 iPad 所需的 App Icons
"""
import os,sys
import imghdr
import json
import random,shutil
from PIL import Image,ImageFile
class FileSet:
def __init__(self,filename,scale):
self.filename = filename
self.scale = scale
@classmethod
def fileset(cls,scale,size,prefix):
filename = "{}.{}.{}.png".format(size,scale,prefix)
file_set = FileSet(filename,scale)
return file_set
class ImageSet:
def __init__(self,size,idiom,filesets):
self.size = size # 单边
self.idiom = idiom
self.filesets = filesets # 数组,包含文件名,一个 size 可能有多个 scale,所有会有多个文件 set
def json_desc(self):
descs = []
for fileset in self.filesets:
json_dict = {"size":"{}x{}".format(self.size,self.size),
"idiom":self.idiom,
"filename":fileset.filename,
"scale":"{}x".format(fileset.scale)}
descs.append(json_dict)
return descs
@classmethod
def iPhone_set(cls,size,filesets):
return ImageSet(size,'iphone',filesets)
@classmethod
def iPad_set(cls,size,filesets):
return ImageSet(size,'ipad',filesets)
@classmethod
def market_set(cls,file_prefix=''):
size = 1024
return ImageSet(size,idiom='ios-marketing',filesets=[FileSet.fileset(1,size,file_prefix)])
def get_img_sets(iPad=False,iPhone=False,file_prefix=''):
img_sets = []
if iPad:
for size in [20,29,40,76]:
file_sets = [FileSet.fileset(2,size,file_prefix),FileSet.fileset(1,size,file_prefix)]
one_set = ImageSet.iPad_set(size,file_sets)
img_sets.append(one_set)
img_sets.append(ImageSet.iPad_set(83.5,[FileSet.fileset(2,83.5,file_prefix)]))
if iPhone:
for size in [20,29,40,60]:
file_sets = [FileSet.fileset(2,size,file_prefix),FileSet.fileset(3,size,file_prefix)]
one_set = ImageSet.iPhone_set(size,file_sets)
img_sets.append(one_set)
img_sets.append(ImageSet.market_set(file_prefix))
return img_sets
def create_appicon_set(imgobj,t_path='',iPad=False,iPhone=True):
rand_str = str(random.randint(20000,2147483648))
t_folder_path = os.path.join(t_path,"AppIcon"+ rand_str +".appiconset")
os.makedirs(t_folder_path)
img_sets = get_img_sets(iPad=iPad,iPhone=iPhone,file_prefix=rand_str)
contents = {"info":{"version":1,"author":"xcode"}}
images = []
for single_set in img_sets:
for fileset in single_set.filesets:
scale_size = (int(single_set.size * fileset.scale), int(single_set.size * fileset.scale))
img_obj = imgobj.resize(scale_size,Image.ANTIALIAS)
real_path = os.path.join(t_folder_path,fileset.filename)
img_obj.save(real_path)
print("保存文件{},\t路径:{}".format(scale_size,real_path))
images += single_set.json_desc()
contents["images"] = images
with open(os.path.join(t_folder_path,"Contents.json"),"w") as wf:
wf.write(json.dumps(contents,indent=4))
if __name__ == '__main__':
argvs = sys.argv[1:] if len(sys.argv) == 3 else None
if not argvs:
print("Fatal: 要求两个参数,第一个是图片路径,第二个是目标目录")
sys.exit(-1)
o_img_path,t_path = argvs
if not os.path.isfile(o_img_path) or not imghdr.what(o_img_path) in ['png']:
print("Fatal: 图片路径不存在或者非 png 格式图片")
sys.exit(-1)
if not os.path.isdir(t_path):
print("Fatal: 目标路径不存在或者非目录")
sys.exit(-1)
o_img = Image.open(o_img_path)
if (1024,1024) != o_img.size :
print("Fatal: 图片非 1024x1024 pixel 尺寸")
sys.exit(-1)
"""
碰到设计师犯糊,将肉眼看不见但确实带有 Alpha 通道的图片提供给我们,直到我们在提交 App Store 的那一刻苹果报错说带有 Alpha 通道,然后我们又要重新走一遍流程。
下面会检查该 1024*1024 的图片是否存在 alpha 通道,若存在,移除之
"""
if o_img.getbands()[-1] == 'A':
print("Info: 包含 alpha 通道,准备移除...")
o_img = o_img.convert("RGB")
create_appicon_set(o_img,t_path=t_path,iPad=True)
假设该程序保存为appicon_generator.py
,选择一个目录在终端打开,然后执行命令:$ python3 /path/to/appicon_generator.py /iconimg/path/1024x1024.png /path/to/output
,将在 /path/to/output
目录生成一个 AppIconxxxxx.appiconset
(xxxxx
是随机数字,增加辨识度避免撞车)目录,将该目录拖动到 .xcassets
文件夹里面,然后在 Xcode 的 Targets -> General -> App Icons and Launch Images 中选择刚刚生成的 AppIcon 即可
App 内部 icon 更换
这里没啥好说的,一般出现在“设置”、“关于 XXX” 里面,替换即可
切换
Git 的每次提交应该只做一件事!
我们更换了 App Icons 和其他需要替换的 icon 后,立即 git 提交一次,本次提交只做一件事,就是切换 icon。等到需要将 icon 还原时,直接 git revert
本次提交,方便快速切换回来