如何更换 App icon

Posted 2021-03-02 boch2436

每逢重大节日，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("保存文件{},	路径:{}".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 本次提交，方便快速切换回来