Xcode6中批量添加矢量图

1. Xcode6添加矢量图的问题

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

  1. 在 xcassets 中 New 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

Categories

Tags