[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 的輸出目錄中，而不是單一的語言目錄中。