foreword
When providing icons for iOS applications, we need to cut various sizes. Currently, Xcode's AppIcon has a total of 18 sizes for cutting. They are:
iPhone Notification 20 pt 的 2x 和 3x
iPhone Settings 29 pt 的 2x 和 3x
iPhone Spotlight 40 pt 的 2x 和 3x
iPhone App 60 pt 的 2x 和 3x
iPad Notification 20 pt 的 2x 和 3x
iPad Settings 29 pt 的 2x 和 3x
iPad Spotlight 40 pt 的 2x 和 3x
iPad App 60 pt 的 2x 和 3x
iPad Pro App 83.5 pt 的 2x
App Store 的 1024 x 1024
Generally speaking, you only need to provide an image with the maximum size of 1024 x 1024, then crop the image into multiple sizes, and put them in Xcode one by one. But doing so is labor-intensive and error-prone, and a job like this is best suited to a machine.
Here is a method to automatically generate all Xcode AppIcons with a python script, which not only requires the generation of images of all required sizes, but also automatically generates the corresponding configuration files. After running the script, the developer only needs to directly copy the specified output file to the corresponding directory of the project down to complete the task.
The Assets directory and its structure in XCode
In the XCode project, there is an Assets option, the folder where it is located is a directory called Assets.xcassets, and the AppIcon.appiconset folder under this directory is where information related to icons in the application is stored.
There is a Contents.json file in the Assets.xcassets directory, which is used to save the size and position information of all icons. An example of its json content structure is as follows:
{
"images": [{
"idiom": "iphone",
"scale": "2x",
"size": "20x20",
"filename": "[email protected]"
}, ...more ],
"info": {
"author": "xcode",
"version": 1
}
}
A json dictionary is composed of two key-value pairs.
The first key-value pair is an array images, and the elements of images contain the information of the icon file required by Xcode.
| key name | use | example |
|---|---|---|
| idiom | icon type | iphone, ipad, ios-markiting |
| scale | Resolution multiple | 2x, 3x |
| size | size of the picture | 20x20 |
| filename | file name | [email protected] |
The second key-value pair is the additional dictionary information info, which provides some information (usually not so important) of the file, which can be filled in according to your needs.
| key name | meaning |
|---|---|
| author | author |
| version | version number |
Script icon_generator.py Introduction
The function of the icon_generator.py script is to generate the entire AppIcon.appiconset folder according to the icon file given by the user, and ensure that all files in the folder meet the specifications required by xcode.
The installed software environment only needs two:
- Programming language runtime environment Python 3
- Python 3's graphics processing library PIL (also known as Pillow)
The script is called icon_generator.py, executed through the command line, and requires the user to provide a png square icon image that is large enough, so that the python script is responsible for processing the image, generating all the icon files required by xcode, and finally generating a AppIcon. appiconset folder. An example command line is as follows:
python icon_generator.py my_icon.png ./dir
Among them, my_icon.png is the specified icon file, and ./dir is to specify a directory for generating results.
After the execution is completed, you will see the AppIcon.appiconset folder in the ./dir directory. We just need to copy this folder directly to the Assets.xcassets of the project.
Script code:
# using utf-8
import os
import sys
import json
from PIL import Image
JSON_STRING = '''
{
"images" : [
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "60x60"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "60x60"
},
{
"idiom" : "ipad",
"scale" : "1x",
"size" : "20x20"
},
{
"idiom" : "ipad",
"scale" : "2x",
"size" : "20x20"
},
{
"idiom" : "ipad",
"scale" : "1x",
"size" : "29x29"
},
{
"idiom" : "ipad",
"scale" : "2x",
"size" : "29x29"
},
{
"idiom" : "ipad",
"scale" : "1x",
"size" : "40x40"
},
{
"idiom" : "ipad",
"scale" : "2x",
"size" : "40x40"
},
{
"idiom" : "ipad",
"scale" : "1x",
"size" : "76x76"
},
{
"idiom" : "ipad",
"scale" : "2x",
"size" : "76x76"
},
{
"idiom" : "ipad",
"scale" : "2x",
"size" : "83.5x83.5"
},
{
"idiom" : "ios-marketing",
"scale" : "1x",
"size" : "1024x1024"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
'''
ICON_DIR_NAME = "AppIcon.appiconset"
JSON_FILE_NAME = "Contents.json"
if len(sys.argv) < 3 :
print("argument error.\nexpamle: python icon_generator.py my_icon.png ./dir")
sys.exit(-1)
input_file = sys.argv[1]
output_dir = sys.argv[2]
// icon_generator.py
dest_dir = os.path.join(output_dir, ICON_DIR_NAME)
json_file_path = os.path.join(dest_dir, JSON_FILE_NAME)
if not os.path.exists(dest_dir):
os.mkdir(dest_dir)
input_image = Image.open(input_file)
info_map = json.loads(JSON_STRING)
icon_array = info_map["images"]
output_map = info_map
output_map["images"] = []
for icon in icon_array:
output_icon = icon
idiom = icon["idiom"]
scale = icon["scale"]
size = icon["size"]
output_width = int(float(size[:size.find("x")]) * float(scale[:scale.find("x")]))
output_height = output_width
output_image = input_image.resize((output_width, output_height))
output_name = idiom + scale + "@" + size + ".png"
output_path = os.path.join(dest_dir, output_name)
output_image.save(output_path, "png")
output_image.close()
output_icon["filename"] = output_name
output_map["images"].append(output_icon)
json_file = open(json_file_path, "w")
json_file.write(json.dumps(output_map))
json_file.close()
input_image.close()