[iOS - 自动化] fastlane/frameit

这一系列文章主要来介绍 fastlane 这一 iOS 开发中威力巨大的自动化工具。前一篇文章已经简单介绍了一个自动化工具: snapshot 。现在来介绍下一个工具 frameit

什么是 frameit

这是一个只需要使用一个简单的命令就可以把你的截屏仿佛 iDevices 框图的工具。github

安装

sudo gem install frameit
在安装过程中可能会遇到需要 install imagemagick 的问题，只需要根据提示 brew install imagemagick 就好啦

使用

• cd 到 snapshot 的输出目录中

• $ frameit 然后 Press Enter frameit 会打开一个 Apple Page 你可以选择你需要的模板框架下载。然后回到 frameit 继续 Press Enter
  -将下载的文件解压并移动到 ~/.frameit/device_frames，再 Press Enter

OK, frameit 开始自动帮你将截屏图模板组合起来了。

要注意的是不要直接在项目目录中使用 frameit ，你会看到一堆红色的无法处理的错误，因为 frameit 会对目录中的所有图片做处理。

如果需要输出是银色背景的图片，使用 frameit sliver
如果在后续的使用中要新增新的模板，使用 frameit setup 来重做上面的步骤

然后来看一下输出的图片

什么鬼！

When using frameit without titles on top, the screenshots will have
the full resolution, which means they can't be uploaded to the App
Store directly. They are supposed to be used for websites, print media
and emails. Check out the section below to use the screenshots for the
App Store.

哦，直接使用 frameit 输出的图片是全分辨率的，并不能直接上传到 App Store ，那么看看这个 with titles on top 是什么。

添加自定义的背景和标题需要几个文件：Framefile.json title.strings keyword.strings
先来看看这个 Framefile.json

{
  "default": {
    "keyword": {
      "font": "./fonts/MyFont-Rg.otf"
    },
    "title": {
      "font": "./fonts/MyFont-Th.otf",
      "color": "#545454"
    },
    "background": "./background.jpg",
    "padding": 50
  },

  "data": [
    {
      "filter": "Brainstorming",
      "keyword": {
        "color": "#d21559"
      }
    },
    {
      "filter": "Organizing",
      "keyword": {
        "color": "#feb909"
      }
    },
    {
      "filter": "Sharing",
      "keyword": {
        "color": "#aa4dbc"
      }
    },
    {
      "filter": "Styling",
      "keyword": {
        "color": "#31bb48"
      }
    }
  ]
}

文件中定义了一些样式的属性，包括背景图片，title 和 keyword 的 padding 以及它们的字体、颜色等等。在 data 中可以使用 filter 来为特定的图片指定样式。 filter 的名字为图片省略 shapshot 前缀的名字：Sharing -> iPhone6_Sharing.png

title.strings 与 keyword.strings 分别定义了对应 filter 的 title 和 keyword。这两个文件需要放在 snapshot 所生成的对应语言的目录下。并且这两个文件需要使用 UTF-16 编码格式或者由 Xcode 生成
Framefile.json 文件需要放在 shapshot 的输出目录中，而不是单一的语言目录中。