脚本批量生成iOS多倍图资源

背景

• 最近接到一个需求，要求输出一个业务组件，该组件支持ipad和iphone设备。
• 默认的资源图片使用的是@2x、@3x图片，但部分低端ipad机型加载2倍3倍图运行内存会比较高。
• 需要在ipad上加载1倍2倍图，iphone加载2倍3倍图，所以想到基于现有的2x、3x的Images.xcassets文件，通过脚本批量的生成1x、2x的Images.xcassets文件。
• 组件根据设备定义subspec导入不同图片资源。

原理

1. 递归遍历Images.xcassets文件夹下所有文件，并选取命名为@3x的图片。
2. 使用sips工具修改@3x图片尺寸，生成1倍、2倍图，图片命名与原图片保持一致可以避免代码的修改。（sips是一个命令行图片处理工具）
3. 创建.imageset文件并动态生成Contents.json文件

# 缩放图片尺寸
function ScaleImage () {

    imageHeight=`sips -g pixelHeight $1 | awk -F: '{print $2}'`
    imageWidth=`sips -g pixelWidth $1 | awk -F: '{print $2}'`
    height=`echo $imageHeight`
    width=`echo $imageWidth`

    height2x=$(($height*2/3))
    width2x=$(($width*2/3))

    height1x=$(($height/3))
    width1x=$(($width/3))

    imageFile=$1
    imageName=${imageFile%@*} # class_mark_icon

    fileName1x="${imageName}.png"
    fileName2x="${imageName}@2x.png"
    fileName3x="${imageName}@3x.png"
    
    sips -z $height2x $width2x $imageFile --out $fileName2x
    sips -z $height1x $width1x $imageFile --out $fileName1x
    
    rm -if $imageFile #移除@3x图片
}

# 生成Contents.json文件
function SetUpContentsJSON () {
    imageFile=$1
    imageName=${imageFile%@*} # class_mark_icon
    fileName1x="${imageName}.png"
    renameFile2x="${imageName}@2x.png"
    renameFile3x="${imageName}@3x.png"

    echo {  >> Contents.json
    echo "  \"images\"" : [>> Contents.json
    echo "   "{>> Contents.json
    echo "      \"idiom\"" : "\"universal\"",>> Contents.json
    echo "      \"scale\"" : "\"1x\"",>> Contents.json
    echo "      \"filename\"" : "\"$fileName1x\"">> Contents.json
    echo "   "},>> Contents.json
    echo "   "{>> Contents.json
    echo "      \"idiom\"" : "\"universal\"",>> Contents.json
    echo "      \"scale\"" : "\"2x\"",>> Contents.json
    echo "      \"filename\"" : "\"$renameFile2x\"">> Contents.json
    echo "   "},>> Contents.json
    echo "   "{>> Contents.json
    echo "      \"idiom\"" : "\"universal\"",>> Contents.json
    echo "      \"scale\"" : "\"3x\"",>> Contents.json
    echo "   "}>> Contents.json
    echo " "],>> Contents.json
    echo "  \"info\"" : {>> Contents.json
    echo "     \"version\"" : 1,>> Contents.json
    echo "     \"author\"" : "\"xcode\"">> Contents.json
    echo " "}>> Contents.json
    echo }>> Contents.json

}

# 递归遍历.imageset文件夹
function  readImagesetFolder(){
    for file in `ls $1`
    do            
        if [ -d $1"/"$file ]
        then
            # 文件夹
            read_dir $1"/"$file
        else
            # 如果是@3x的图片文件
            mark_string="@3x"
            if [[ $file == *$mark_string* ]]
            then
                # 1 获取图片的文件名，并生成 “文件名.imageset”文件夹
                
                imageName=${file%@*}
                imageDir="$imageName.imageset"
                new_image_path="NewImages/$imageDir"
                mkdir -p $new_image_path
                
                # 2 将图片拷贝入“文件名.imageset”文件夹，并进入该文件夹
                image_path="$1"/"$file"
                cp $image_path "$new_image_path/"
                cd $new_image_path

                # 3 ScaleImage，将图片文件名作为参数。
                #   SetUpContentsJSON，生成描述文件Contents.json
                #   返回上一级目录
                
                ScaleImage $file # 修改图片尺寸
                SetUpContentsJSON $file # 生成content.json
                cd - > /dev/null 2>&1 #返回到上次目录
                
            fi
        fi
    done
}

# 调用方法
readImagesetFolder $1

使用

1. cd到脚本所在目录
2. 命令行执行./imagesetGenerator.sh xxxx/images.xcassets，参数为images.xcassets路径
3. 默认在当前路径下创建NewImages文件夹保存生成的新图片