Xcode6中批量添加矢量图

1. Xcode6添加矢量图的问题

Xcode6中支持添加矢量图,然后在编译期Xcode6自动生成@2x和@3x的图片,可是添加的过程有些繁琐。
首先,直接把矢量图拖到 xcassets文件中是不行的,添加的步骤:

  1. xcassetsNew Image Set
  2. 选中生成的asset,在右侧的 Image Set中将属性修改为 Vectors
  3. 将矢量图拖进来,再修改asset文件名称

由此可见,需要批量添加矢量图的时候,会非常繁琐。

2. 解决之道

每一个图片都对应一个带后缀 imageset的文件夹,内有 Contents.json文件,对于普通的png而言,它的内容一般是:

{
  "images" : [
    {
      "idiom" : "universal",
      "scale" : "1x",
      "filename" : "ButtonFillBlue.png"
    },
    {
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

而如果是以矢量图的方式添加的,json文件内容变为:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "ButtonFillBlue.pdf"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

两相对比,很容易看出区别,那么接下来使用脚本工具进行处理即可。

3. 处理脚本

对shell脚本知之皮毛的我低估了写的难度,在此记录下脚本的实现过程和遇到的问题。先上脚本内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#!/bin/sh
xcassetPath=$1
echo $xcassetPath

for imageAsset in "$xcassetPath"/*; do
    echo $imageAsset
    for file in "$imageAsset"/*.json; do
        cat $file | tr -d '\n' > "$imageAsset"/temp
        # sed 'N;N;s/\n//g'  $file > "$imageAsset"/temp
        sed 's/ //g' "$imageAsset"/temp > "$imageAsset"/temp1
        sed 's/,{.*}]/]/g' "$imageAsset"/temp1 > "$imageAsset"/temp2
        sed 's/,\"scale\":\"1x\",/,/g' "$imageAsset"/temp2 > $file

        rm -f "$imageAsset"/temp*
    done
done

该脚本需要指定 xcassets 对应的路径,然后遍历该文件夹下的内容,依次找到 json 文件,进行字符处理。遇到的难点:

  1. 去除换行符:sed通常逐行处理,也可以合并多行后处理,但没有成功。此处使用tr
  2. 替换空格
  3. 替换含有2x,3x的dictionary
  4. 替换1x dictionary中的 scale 字段

用到了很多临时文件,我也很无奈,虽然有更好的实现方式,可是不会啊~先凑合着用吧。
最后说一下使用方法:

  1. 将矢量文件拖入Xcode6的xcassets
  2. 运行脚本并将xcassets的路径作为输入参数

Comments