[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 的输出目录中，而不是单一的语言目录中。