CN108984172A - 一种界面文件的生成方法及装置 - Google Patents

Abstract

本发明实施例提供了一种界面文件的生成方法及装置，所述方法包括：获取待生成界面的PSD文件；对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；将所述属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。本发明实施例充分利用PSD文件的图层信息，减少UI设计师与研发人员工作的冗余，并且提高定制化界面的生成效率。

Description

一种界面文件的生成方法及装置

技术领域

本发明涉及终端页面处理技术领域，特别是涉及一种界面文件的生成方法及装置。

背景技术

在软件的发展中，优美软件界面的展示离不开研发人员与用户界面(UI，UserInterface)设计师的功劳。一般情况下，两者分工大致如下：UI设计师在兼顾软件程序场景的情况下，设计出整体的PSD(Photoshop Document)格式文件(即图稿)，其中，PSD是图像处理软件Photoshop的专用格式。这种格式可以存储Photoshop中所有的图层，通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中包含有层，则一般都用Photoshop(PSD)格式保存。并为研发提供局部的切图；研发人员则是参照局部切图，根据不同移动平台，书写视图逻辑，拼凑成一个完整的场景。然而，上述过程中，PSD文件中的图层信息被忽略，导致研发人员往往需要将UI组件的坐标调整多次才能达到设计师期望的效果。

因此，如何充分利用PSD文件的图层信息，减少UI设计师与研发人员工作的冗余，是目前有待解决的技术问题。

发明内容

本发明实施例所要解决的技术问题是提供一种界面文件的生成方法，以解决现有技术中由于PSD文件中的图层信息被忽略，导致UI设计师与研发人员的工作效率低的技术问题。

相应的，本发明实施例还提供了一种界面文件的生成装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明是通过如下技术方案实现的：

第一方面提供一种界面文件的生成方法，包括：

获取待生成界面的PSD文件；

对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

将所述带有层次结构的属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。

可选的，所述对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合，包括：

按照文件格式对待生成界面的PSD文件进行分析，得到section；

利用python图像处理标准库对所述section的图层进行分析，得到存在嵌套关系的视图组；

调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

可选的，所述按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息，包括：

将所述自定义属性的集合输入到对应图层的自定义dataModel中；

利用固定分隔符，按照约定的顺序对所述自定义dataModel中自定义属性的集合进行解读，得到对应的图层自定义属性信息。

可选的，所述图层自定义属性信息包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件。

可选的，所述根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果，包括：

调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。

可选的，还包括：

预先为多种类型的视图创建对应的数据模型dataModel；

在创建的所述dataModel内封装了视图所支持的图层属性和排版相关的自定义属性信息；

封装后的所述dataModel称为自定义dataModel。

可选的，还包括：

将所述扩展标记语言文件与用户界面UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。

第二方面提供一种界面文件的生成装置，包括：

获取模块，用于获取待生成界面的PSD文件；

解析模块，用于对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

解读模块，用于按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

生成模块，用于根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

存储模块，用于所述属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。

可选的，所述解析模块包括：

第一分析模块，用于按照文件格式对待生成界面的PSD文件进行分析，得到section；

第二分析模块，用于利用python图像处理标准库对所述section的图层进行分析，得到存在嵌套关系的视图组；

处理模块，用于调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

遍历模块，用于遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

可选的，所述解读模块包括：

输入模块，用于将所述自定义属性的集合输入到对应图层的自定义dataModel中；

解读子模块，用于利用固定分隔符，按照约定的顺序对所述自定义dataModel中自定义属性的集合进行解读，得到图层自定义属性信息。

可选的，所述解读子模块得到的所述图层自定义属性信息包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件。

可选的，所述生成模块，具体用于调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。

可选的，还包括：

创建模块，用于预先为多种类型的视图创建对应的数据模型dataModel；

封装模块，用于在所述创建模块创建的所述dataModel内封装了视图所支持的图层属性和排版相关的自定义属性信息，并将封装后的所述dataModel称为自定义dataModel。

可选的，还包括：

绑定模块，用于将所述存储模块存储的所述扩展标记语言文件与用户界面UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。

与现有技术相比，本发明实施例包括以下优点：

本发明实施例中，首先定义图层的数据模型dataModel；除了图层的排版基本信息外，本实施例添加了约定规则，使得图层能够携带自定义属性信息。其次，解析PSD文件中的图层，获取图层对应的数据模型dataModel。最后，将遍历数据模型dataModel得到所有图层的信息导出，保存成XML文件，以便于所述XML文件应用于界面布局。也就是说，在很多情况下，设计师为研发人员提供多张资源图和效果图，研发人员对照效果图，利用资源图片拼凑出设计师期望的视觉效果。以上拼凑过程涉及到UI组件的坐标调整，而且坐标调整往往不是一次就能达到预期视觉效果的。而采用本发明提供的技术方案，不需要通过拼凑来调整坐标，而是利用预先提供的组件排版信息，就能够避免坐标调整这个过程，而PSD文件可以作为排版信息读写的媒介。由此可知，本发明实施例充分利用PSD文件的图层信息，减少UI设计师与研发人员工作的冗余，并且提高定制化界面的生成效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

图1是本发明实施例提供的一种界面文件的生成方法的流程图；

图2是本发明实施例提供的一种视图中存在父子视图关系的示意图；

图3是本发明实施例提供的一种扩展标记语言文件的文档结构示意图；

图4是本发明实施例提供的一种界面文件生成装置的结构示意图；

图5是本发明实施例提供的一种界面文件生成装置的另一结构示意图；

图6是本发明实施例提供的一种界面文件生成装置的另一结构示意图；

图7是本发明实施例提供的一种界面文件生成装置的另一结构示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

请参阅图1，为本发明实施例提供的一种界面文件的生成方法的流程图，具体可以包括如下步骤：

步骤101：获取待生成界面的PSD文件；

其中，PSD--Photoshop Document，是一种图像处理软件Photoshop的专用格式。这种格式可以存储Photoshop中所有的图层，通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中包含有层，则一般都用PSD格式保存。PSD格式在保存时会将文件压缩，以减少占用磁盘空间，但PSD格式所包含图像数据信息较多(如图层、通道、剪辑路径、参考线等)，因此，比其他格式的图像文件要大得多。由于PSD文件保留所有原图像数据信息，因而修改起来较为方便，大多数排版软件不支持PSD格式的文件。

该步骤中，界面文件生成系统在接收到用户输入的操作指令时，根据所述操作指令获取待生成界面的PSD文件。

步骤102：对所述PSD文件的图层信息进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

该步骤中，界面文件生成系统对所述PSD文件的图层信息进行解析过程，具体包括：

1)按照文件格式对待生成界面的PSD文件进行分析，得到section；

该步骤中，根据photoshop3.0file format的结构，按照文件格式对待生成界面的PSD文件进行分析，得到需要的图层信息，该图层信息位于Layerand Mask Information这一部分(section)上，也就是说，PSD文件格式由5部分构成，图层信息位于Layer andMaskInformation这一部分(section)上。

2)利用python图像处理标准库对所述section的图层进行分析，得到存在嵌套关系的视图组；

该步骤中，界面文件生成系统可以在此section中分析PDS文件的图层。一种方式是利用python图像处理标准库对所述section的图层进行分析，得到所述存在嵌套关系的视图组。

3)界面文件生成系统调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

该步骤中，界面文件生成系统在利用python图像处理标准库解析PSD文件的图层后，调用图层layer相关的API，分析section中PSD文件的图层，得到图层的组(group)对应存在嵌套关系的视图组，解析这个group，找到父图层与所有的子图层，并将这一层次关系记录下下来，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系。需要说明的是，界面文件生成系统根据具体的PSD文件执行这一过程可能会进行多次，才能得到父图层与所有的子图层之间的关系。

4)遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

需要说明的是，本文中，图层的“自定义属性的集合”的应用：在遍历dataModel，打印信息前，指的是自定义的所有的所有key的集合；打印信息后，图层的自定义属性的集合，指的是所有key及其对应value的集合。

然后该步骤中，针对每个图层，界面文件生成系统调用相关API查看背景色，位置，尺寸等得到图层属性，以及自定义属性的集合。

也就是说，针对每个图层，调用相关API遍历group子图层的过程中，可以获取图层的尺寸、图片以及显示位置等排版相关的图层属性以及自定义属性的集合。将图层属性以及自定义属性的集合写入对应图层的数据模型(dataModel)。

步骤103：按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

该步骤中，界面文件生成系统先将所述自定义属性的集合输入到对应图层的自定义数据模型(dataModel)中；然后，利用固定分隔符，按照约定的顺序对所述自定义dataModel中自定义属性的集合进行格式化解读，得到图层自定义属性信息。比如，解读后，得到自定义属性信息及其value.如touch＝touchValue等。

可选的，在该实施例中，预先对数据模型(dataModel)进行自定义，自定义后的dataModel称为自定义dataModel，其过程包括：

1)预先为多种类型的视图创建对应的数据模型dataModel；

2)在创建的所述dataModel内封装了视图所支持的图层属性和排版相关的自定义属性信息，其中，图层属性是指通过API得到的背景色等一系列属性，不包括自定义属性部分。

3)封装后的所述dataModel称为自定义dataModel。

该实施例中，一般情况下，由于PSD文件中含有多个图层。在移动开发过程中，考虑到不同视图支持的属性差异，需要创建多种类型的视图来对接不同图层。基于此，本实施例中预先为view，image，text和button等几种常用的视图建立了dataModel。该dataModel内封装了视图所支持的图层属性和与排版相关的自定义属性信息，并将封装后的所述dataModel称为自定义dataModel。

也就是说，本实施例通过API得到的图层的信息有限，不足以对应页面中的视图，所以需要添加一系列自定义属性。页面中的视图又分为view，image，text，button等各种类型，为了区分同类型的不同的视图，区分不同图层的id是必需的；视图跳转事件参数与用户点击交互相关，因此，预先在该dataModel内封装了视图所支持的图层属性和与排版相关的自定义信息自定义属性信息。也就是说，dataModel是视图的所有相关属性，包括背景颜色等图层属性以及解读后的有效自定义属性信息等。

本实施例中，为将自定义属性信息保存在PSD文件中，添加了约定规则，这种约定规则包括：将需要保存的自定义属性信息，按照一定的顺序和使用固定的分隔符(|或者_等)进行组合。然后，将自定义属性信息组合结果附加到图层名称后面，这样PSD文件中就保留了我们的自定义属性信息。

其中，该实施例中，需要保存的自定义属性信息，包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件等参数，当然，自定义属性信息还可以根据实际需要包括其他参数。

需要说明的是，本发明实施例中，先按照约定规则，将自定义属性信息写入PSD文件；之后，对该PSD文件进行格式化解读，得到添加的自定义属性信息。

步骤104：根据所述图层的层级关系和图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

本实施例中，界面文件生成系统调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。其中，由于图层之间存在层级关系(即对应视图的嵌套关系)，在保证图层结构的前提下，打印完所有的图层后，不同图层间的属性结果，仍具有图层间的层次关系，故称为带有结构层次的属性结果。

也就是说，该实施例中，将所述图层的层级关系、图层属性以及图层自定义信息自定义属性信息作为输入(即作为以下提到的XMLWriter类的输入)，进行以下操作：

1)实现一个XMLWriter的类；其中，XMLWriter的类的功能是：输入根视图(包括其dataModel)，输出XML文档。也就是说，能够实现格式化打印XML的类，应该具备下述两个基本功能：

(1)可以遍历dataModel中的所有属性，包括图层属性和自定义属性，当然，还可以包括其他属性，本实施例不做限制；

(2)格式化打印dataModel的所有属性，包括开始与结束标签的渲染。

上述(1)和(2)这两个基本方法按以下过程进行：

将该图层的类型作为图层的开始标签，eg.<button>,然后格式化打印该图层的所有属性，最后打印图层的结束标签，eg.</button>。

2)调用根图层的渲染方式，递归每个图层，得到按结构层次打印的所有属性结果。其中，属性结果是指，所有属性(图层属性及自定义属性)，以key＝va l ue的形式，保存的结果。

该实施例，以4个视图(即节点1至节点4)存在以下父子视图关系为例，具体如图2所示，该图2中，节点1为根节点，节点2和节点3为节点1的子节点，而节点1也可以为节点2和节点3的父节点，节点2和节点3互为兄弟节点，节点4是节点3的子节点，而节点3是节点4的父节点。每个视图都有相应的dataModel。为了得到这种树状的数据结构关系，要根据父视图与子视图的关系遍历所有视图，即递归每个图层；

此外，还将所有属性结果打印成XML格式，则会用到“标签”，而开始标签与结束标签之间是视图的dataModel。

步骤105：将打印所有图层的属性结果保存为扩展标记语言文件。

在该实施例中，将打印所有图层的属性结果保存为扩展标记语言文件的文档结构示意图，如图3所示。

本发明实施例中，对待生成界面的PSD文件进行解析，得到图层的层级关系、图层属性及自定义属性的集合，按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义信息自定义属性信息，根据所述图层的层级关系、图层属性以及图层自定义信息自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印对应的信息，生成带有结构层次的属性结果，将所述属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。本发明实施例充分利用PSD文件的图层信息，通过设定的约定规则，使PSD文件能够携带自定义的信息，通过解析图层，获得了排版与自定义的属性，并构成界面表示的配置文件。本发明实施例不但减少了设计师与研发人员在UI布局上的重复工作，研发人员不再需要进行繁琐的UI组件坐标调整，后期的UI验收也较容易通过，而且，通过自定义信息的添加，提高了PSD文件的利用率，以及提高了定制化界面的生成效率。

在另一实施例中，该实施例在上述实施例的基础上，还可以包括：

将所述扩展标记语言文件与UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。

需要说明的是，本文中的多种视图，比如view，image，text，button等，这些视图，是通过自定义的方式区分的。

其中，界面文件生成系统将导出保存的扩展标记语言(XML，ExtensibleMarkupLanguage)文档，并与具体的平台下的用户界面(UI，User Interface)创建文件绑定，PSD文件的图层、自定义属性的结合及图层属性就以多种视图的形式展现到了屏幕上。其中，扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据。

也就是说，绑定XML文档，鉴于不同平台的差异性，就是不同平台下的UI创建文件对XML文档的解读。

本发明实施例中，首先定义图层的数据模型dataModel；除了图层的排版基本信息外，本实施例添加了约定规则，使得图层能够携带自定义属性信息。其次，解析PSD文件中的图层，获取图层对应的数据模型dataModel。最后，将遍历数据模型dataModel得到所有图层的信息导出，保存成XML文档，以便于对用户界面进行布局。本发明实施例充分利用PSD文件的图层信息，减少了设计师与研发人员在UI布局上的重复工作，研发人员不再需要进行繁琐的UI组件坐标调整，后期的UI验收也较容易通过，而且，通过自定义信息的添加，提高了PSD文件的利用率，以及提高了定制化界面的生成效率。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

请参阅图4，为本发明实施例提供的一种界面文件的生成装置的结构示意图，具体可以包括如下模块：获取模块41，解析模块42，解读模块43，生成模块44和存储模块45，其中，

获取模块41，用于获取将待生成界面的PSD文件；

解析模块42，用于对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

解读模块43，用于按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

生成模块44，用于根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

存储模块45，用于将所述属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述解析模块42包括：第一分析模块51，第二分析模块52，处理模块53和遍历模块54，其结构示意图如图5所示，其中，

第一分析模块51，用于按照文件格式对待生成界面的PSD文件进行分析，得到section；

第二分析模块52，用于利用python图像处理标准库对所述section的图层进行分析，得到所述存在嵌套关系的视图组；

处理模块53，用于调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

遍历模块54，用于遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述解读模块43包括：输入模块61和解读子模块62，其结构示意图如图6所示，其中，

输入模块61，用于将所述自定义属性的集合输入到对应图层的自定义数据模型dataModel中；

解读子模块62，用于利用固定分隔符，按照约定的顺序对所述自定义数据模型dataModel中自定义属性的集合进行解读，得到图层自定义属性信息。

其中，所述解读子模块得到的所述图层自定义属性信息包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述生成模块，具体用于调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。

在另一实施例中，该实施例在上述实施例的基础上，所述装置还可以包括：绑定模块71，其结构示意图如图7所示，该图7已在图4的实施例上为例，其中，

绑定模块71，用于将所述存储模块45存储的所述扩展标记语言文件与UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。

可选的，所述装置可以集成在界面文件生成系统中，也可以独立部署，本实施例不做限制。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例中，界面文件的生成装置先对待生成界面的PSD文件进行解析，得到图层的层级关系、图层属性及自定义属性的集合，按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义信息自定义属性信息，根据所述图层的层级关系、图层属性以及图层自定义信息自定义属性信息遍历对应图层的自定义数据模型dataModel，生成按照结构层次打印所有图层的属性结果，将打印所有图层的属性结果保存为扩展标记语言文件。也就是说，本发明实施例充分利用PSD文件的图层信息，通过设定的约定规则，使PSD文件能够携带自定义的信息，通过解析图层，获得了排版与自定义的属性，并构成界面表示的配置文件。本发明实施例充分利用PSD文件的图层信息，减少了设计师与研发人员在UI布局上的重复工作，研发人员不再需要进行繁琐的UI组件坐标调整，后期的UI验收也较容易通过，而且，通过自定义信息的添加，提高了PSD文件的利用率，以及提高了定制化界面的生成效率。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种界面文件的生成方法和一种界面文件的生成装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (14)

1.一种界面文件的生成方法，其特征在于，包括：

获取待生成界面的PSD文件；

对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

将所述带有层次结构的属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。

2.根据权利要求1所述的方法，其特征在于，所述对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合，包括：

按照文件格式对待生成界面的PSD文件进行分析，得到section；

利用python图像处理标准库对所述section的图层进行分析，得到存在嵌套关系的视图组；

调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

3.根据权利要求2所述的方法，其特征在于，所述按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息，包括：

将所述自定义属性的集合输入到对应图层的自定义dataModel中；

利用固定分隔符，按照约定的顺序对所述自定义dataModel中自定义属性的集合进行解读，得到对应的图层自定义属性信息。

4.根据权利要求3所述的方法，其特征在于，

所述图层自定义属性信息包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果，包括：

调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。

6.根据权利要求1至4任一项所述的方法，其特征在于，还包括：

预先为多种类型的视图创建对应的数据模型dataModel；

在创建的所述dataModel内封装了视图所支持的图层属性和排版相关的自定义属性信息；

封装后的所述dataModel称为自定义dataModel。

7.根据权利要求1至4任一项所述的方法，其特征在于，还包括：

将所述扩展标记语言文件与用户界面UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。

8.一种界面文件的生成装置，其特征在于，包括：

获取模块，用于获取待生成界面的PSD文件；

解析模块，用于对所述PSD文件的图层进行解析，得到图层的层级关系、图层属性及自定义属性的集合；

解读模块，用于按照约定规则对所述自定义属性的集合进行格式化解读，得到图层自定义属性信息；

生成模块，用于根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历对应图层的自定义数据模型dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果；

存储模块，用于所述属性结果保存为扩展标记语言文件，以便于对用户界面进行布局。

9.根据权利要求8所述的装置，其特征在于，所述解析模块包括：

第一分析模块，用于按照文件格式对待生成界面的PSD文件进行分析，得到section；

第二分析模块，用于利用python图像处理标准库对所述section的图层进行分析，得到存在嵌套关系的视图组；

处理模块，用于调用图层layer相关的API对所述视图组每个图层进行处理，得到所述图层的层级关系，所述层级关系包括：父图层与所有的子图层之间的关系；

遍历模块，用于遍历所述视图组的子图层，得到对应图层的排版信息的相关属性以及自定义属性的集合。

10.根据权利要求9所述的装置，其特征在于，所述解读模块包括：

输入模块，用于将所述自定义属性的集合输入到对应图层的自定义dataModel中；

解读子模块，用于利用固定分隔符，按照约定的顺序对所述自定义dataModel中自定义属性的集合进行解读，得到图层自定义属性信息。

11.根据权利要求10所述的装置，其特征在于，所述解读子模块得到的所述图层自定义属性信息包括：图层对应的视图类型、用来绑定不同响应事件的id和视图点击后跳转事件。

12.根据权利要求8至11任一项所述的装置，其特征在于，

所述生成模块，具体用于调用根图层的渲染方式，根据所述图层的层级关系、图层属性以及图层自定义属性信息遍历每个图层对应的自定义dataModel，按照图层结构打印所有图层的信息，生成带有结构层次的属性结果。

13.根据权利要求8至11任一项所述的装置，其特征在于，还包括：

创建模块，用于预先为多种类型的视图创建对应的数据模型dataModel；

封装模块，用于在所述创建模块创建的所述dataModel内封装了视图所支持的图层属性和排版相关的自定义属性信息，并将封装后的所述dataModel称为自定义dataModel。

14.根据权利要求8至11任一项所述的装置，其特征在于，还包括：

绑定模块，用于将所述存储模块存储的所述扩展标记语言文件与用户界面UI创建文件绑定，将所述PSD文件的图层、自定义属性的集合及图层属性以多种视图的形式展现在屏幕上。