Dec 3

XGFEAppSketch资源导出插件配布

Lrdcq , 2017/12/03 15:22 , 程序 , 閱讀(4765) , Via 本站原創
下载地址 : https://github.com/Lrdcq/xgfe-app-sketch-exporter
Tag : 当前版本 0.1.0

发布记录

- 2017.12.01 第一版0.1.0版本,实现基本功能

安装

保证mac上正确安装Sketch非AppStore版本(建议版本>=46)。
下载本仓库文件,双击安装XGAPPSketchExporter.sketchplugin即可。

使用

选中界面中的图层元素,Control+Option+E或者从Plugins菜单中选择Export,输入导出资源名字即可。
每一个sketch文件第一次使用导出功能时,需要导出项目目录和类型。目录请指向:

- Android:项目对应的res目录
- iOS:项目对应的Assets.xcassets目录

实现详解

本工具实现分为3个主要部分:

1. 用户配置:现在以sketch文件为单位,对输出进行配置,主要配置的是输出目标文件夹,输出资源平台(android,ios),输出图像size列表。这个配置现在是以NSUserDefaults的形式储存在了key = XGResourcesExporterConfig_ + filePathHash()下,后续版本考虑会把项目配置和sketch文件文件解绑。另外,配置界面也是这个部分提供的,依赖工具配置。

2. 工具配置:代码中的config.js,配置有哪些资源平台,和每个平台到底有哪些size可选,每个平台到底如何执行输出。

3. 导出器:耦合前两部分,真正执行导出。

程序的UI是通过NSAlert弹出的native界面,并没有什么高深的技术。功能实现主要依赖document的saveArtboardOrSlice:toFile:方法,有可能会有一些版本兼容问题,暂时能确定的是46-now是没问题的。

工具配置

详解config.js,本工具建议的使用方式就是通过fork后修改config.js,根据团队实际情况调整本工具的输出配置并分发给队友,以达到结合团队的最方便的工作模式。

比如我们来看ios的配置:
{
  id : 2,
  platform : 'iOS',
  sizelist : [
  {
    id : 1,
    name : '@1x',
    scale : 0.5,
    file : '/{name}.imageset/{name}@1x.png'
  },
  {
    id : 2,
    name : '@2x',
    scale : 1,
    file : '/{name}.imageset/{name}@2x.png'
  },
  {
    id : 3,
    name : '@3x',
    scale : 1.5,
    file : '/{name}.imageset/{name}@3x.png'
  }
  ],
  didExport : function(context, exportConfig) {
    //输出Contents.json文件
    //...
  }
}

每个平台配置对象至少包含以下字段:

- id:唯一id,请手动保障其唯一不变。
- platform:平台展示在界面上的名字。
- sizelist:可导出size的列表。

每个size对象至少包含以下字段:

- id:唯一id,还是请手动保障其唯一不变。
- name:展示在界面上的名字。
- scale:实际执行导出操作时,应用到MSExportRequest对象上的缩放倍率。
- file:实际执行导出操作时,串在项目资源路径后的文件路径。其中{name}是用户输入文件名,可替换。

这两个维度在配置界面上很明显:

點擊在新視窗中瀏覽此圖片

另外平台配置还有三个可选的回调,分别是:

- willExport(context, exportConfig):导出前会执行,比如需要做一些目标文件的准备处理。
- didExport(context, exportConfig):导后前会执行,比如上面ios平台生成Contents.json就是这一步做的,主要做收尾操作。
- catchError(context, exportConfig, error):当整个执行抛出异常后,包括上面两个回调,会回调到这里。可以做一些失败后的回滚等东西。(现在还没做过)

其中回调中的exportConfig是导出是对配置的耦合,包括以下字段:

- platform:实际导出平台的对象
- sizes:实际导出选择size的对象列表
- fileName:用户输入的输出文件名
- filePath:项目配置的输出目录
- slice:输出目标的MSExportRequest对象

说到MSExportRequest对象,可以参看https://github.com/abynim/Sketch-Headers/blob/master/Headers/MSExportRequest.h里面不少配置都没用上(不想做大而全的东西)。如果有需要可以在willExport做预处理。

应该通过以上配置,可以自定义出按实际需求需要的工具配置了。

如果感觉还是需要在工具中添加一些什么可配置内容,请直接联系我。
关键词:sketch
logo