加手机壳

frameit 可以将fastlane snapshot生成的截图套上手机壳,手机壳支持多种设备、多种颜色。

使用:

 fastlane frameit#第一次运行会提示安装imagemagick,按提示安装即可 
 #生成其他颜色外壳举例,默认黑色
 #fastlane frameit silver
 #fastlane frameit rose_gold
 #下载最新的外壳
 #fastlane frameit download_frames

查看相关的其他信息,外壳样式、存储路径等:

fastlane action frameit

这样仅仅是给屏幕截图加了个设备外壳,没有背景图片和文字。 需要注意的是,此时生成的图是全分辨率的,因此不能直接上传appstore。

加背景和文字描述

如果想加入背景图和文字,需要编辑Framefile.json文件, 这个文件放到screenshots文件夹里。 还需要编辑keyword.stringtitle.string文件,他们放到对应截图语言的文件夹里。

你可以在这里获得更多信息

官方示例

现在我有两张截图,page1和page2,看看Framefile.json文件是怎么编辑的。

{
  "device_frame_version": "latest",
  "default": {
    "keyword":{
      "fonts":[
        {
          "font": "./fonts/wryh.ttf",
          "supported": ["en-US"]
        },
        {
          "font": "./fonts/wryh.ttf",
          "supported": ["zh-Hans", "zh-Hant"]
        }],
        "color": "#0A0A0A"
    },
    "title": {   
      "fonts": [
        {
          "font": "./fonts/wryh.ttf",
          "supported": ["en-US"]
        },
        {
          "font": "./fonts/wryh.ttf",
          "supported": ["zh-Hans", "zh-Hant"]
        }
      ],
      "color": "#EE5C42"
    },
    "background": "./background.jpg",
    "show_complete_frame":true,
    "stack_title":false,
    "padding": 50
  },
  "data": [
    {
      "filter": "1page",
      "keyword": {
        "color": "#C0FF3E"        
      } 
    },
    {
      "filter": "2page",
      "keyword": {
        "color": "#0A0A0A"
      }
    }
  ]
}

| 属性 | |
| — | — |
| default->background | 背景图片 | | show_complete_frame | 是否应缩小设备和框架,使其在框架屏幕截图中全部显示,否则可能被截断 |
| stack_title | 当定义关键字和标题时,frameit是否应该在标题之上显示关键字。 |
| data -> filter | 用来匹配截图名字,要求截图的名字包含filter对应的关键字| | data -> title | 描述满足filter条件的图片的标题 |

这个文件大概是这样的:

filter字段会去匹配截图名字,截图名字包含这个字符串就会匹配成功,这样可以去约定的keyword颜色。

编辑.string文件:

---en-US文件夹下----
--title.strings--
"1page" = "this is 1 page";
"2page" = "this is 2 page"; 
--keyword.strings
"1page" = "keyword1";
"2page" = "keyword2";

 ---zh-Hans文件夹下---
 --keyword.strings--
"1page" = "关键字1";
"2page" = "关键字2";
--title.strings--
"1page" = "第一个界面";
"2page" = "第二个界面";

再次运行fastlane frameit,生成的图片如下:

201706256697112.png

下载示例 snapshotExample

注意点

  1. .strings文件必需utf-16编码 (UTF-16 LE with BOM)。也必须以空行开始。
  2. 如果你需要设置标题,背景图片是必须要有的.
  3. 可以使用deliver上传appstore

参考链接

https://docs.fastlane.tools/getting-started/ios/screenshots/#upload-screenshots-to-the-app-store

https://github.com/fastlane/fastlane/tree/master/frameit#titles-and-background-optional