CN107977205A - Gui界面自动创建方法及系统 - Google Patents

Abstract

本发明提出一种GUI界面自动创建方法及系统，该方法包括：在生成UI设计文件过程中，同时生成信息；切割图层并根据图层类别信息得到对应图层的图片或文字；提取图层坐标信息确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；提取图层坐标信息确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与位置信息一同存入配置文件；解析图片对象和文字对象及对应的配置信息；获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。可自动化地对UI界面中的要素信息进行配置，提高界面开发的自动化程度，效率较高。

Description

GUI界面自动创建方法及系统

技术领域

本发明涉及UI(用户界面)界面处理技术领域，尤其涉及的是一种GUI界面自动创建方法及系统。

背景技术

图形用户界面(Graphical User Interface，简称GUI，又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。GUI广泛应用于手机通讯移动产品、电脑操作平台、软件产品、PDA产品等领域，是当今计算机发展的重大成就之一，它极大地方便了非专业用户的使用。

传统的GUI(Graphical User Interface，图形用户界面)软件开发一般是先由UI设计师进行界面设计，而后交给软件工程师来通过GUI应用软件进行开发，最终在需要的位置进行该界面的显示。而软件工程师并非是UI设计师，关于UI界面的诸多要素并不十分了解，在开发过程中UI设计时需要提供较多的信息给软件工程师，软件工程师需根据信息来一一对照着进行开发，整体开发过程效率极低。

发明内容

本发明所要解决的技术问题是提供一种GUI界面自动创建方法及系统，可自动化地对UI界面中的要素信息进行配置，提高界面开发的自动化程度，效率较高。

为解决上述问题，本发明提出一种GUI界面自动创建方法，包括以下步骤：

S1：在生成包含若干图层的UI设计文件过程中，同时在所述UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

S2：导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

S3：提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；

S4：提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

S5：导出配置文件；

S6：将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

S7：GUI创建器实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。

根据本发明的一个实施例，所述步骤S1中，同时在所述UI设计文件中根据图层的设定顺序生成图层列表；

所述步骤S2中，提取并分析图层列表，根据图层列表中的顺序，遍历所有图层并切割图层，将顺序写入到对应图层的图片或文字的文件名称的指定位置中；

所述步骤S7中，根据指定位置查询文件，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件。

根据本发明的一个实施例，每个界面对应具有一个配置文件及相应的资源文件，所述资源文件包括图片文件和/或文本文件；

所述步骤S7中，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件，在读取对应的配置文件时，同时将该配置文件所对应的全部资源文件及相应配置信息一同获取。

根据本发明的一个实施例，界面对应于一个图层或两个以上图层；在界面对应于两个以上图层时，图层之间存在绑定关系，根据该绑定关系生成配置文件。

根据本发明的一个实施例，所述步骤S3中，还将图片文件的文件名称写入到配置文件中，与其对应的配置信息相关联；所述步骤S4中，还将文本文件的文件名称写入到配置文件中，与其对应的配置信息相关联。

根据本发明的一个实施例，所述配置文件中，各个图层的配置信息键值是以文件名称追加相应配置信息确定的属性名称组成的字符串。

根据本发明的一个实施例，所述UI设计文件为PSD素材文件，所述步骤S2-S4通过脚本来执行，执行环境由PhotoShop提供。

本发明还提供一种GUI界面自动创建系统，包括：

设计信息生成模块，执行在生成包含若干图层的UI设计文件过程中，同时在UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

图层切割模块，执行导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

图片处理模块，执行提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；

文字处理模块，执行提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

导出模块，执行导出配置文件；

解析模块，执行将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

GUI创建器，执行实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。

采用上述技术方案后，本发明相比现有技术具有以下有益效果：

通过在UI设计文件的生成过程中，同时在所述UI设计文件中生成图层配置所需的信息，后续对UI设计文件进行配置处理时，只需导入UI设计文件，对图层进行切割后分类保存，并提取出所需的配置信息保存在指定的配置文件中，将配置文件导入到GUI应用程序中，通过对配置文件的解析可以得到各个图层对象的配置，在图片文件和文本文件获取时根据配置信息进行配置，实现自动化的GUI创建，提高了自动化程度，避免了设计人员与软件工程师的对接麻烦，省去了软件工程师的很多编码要求，效率更高。

附图说明

图1为本发明一实施例的GUI界面自动创建方法的流程示意图；

图2为本发明一实施例的GUI界面自动创建方法的框架示意图。

具体实施方式

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

在下面的描述中阐述了很多具体细节以便于充分理解本发明。但是本发明能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似推广，因此本发明不受下面公开的具体实施的限制。

参看图1和图2，在一个实施例中，GUI界面自动创建方法，包括以下步骤：

S1：在生成包含若干图层的UI设计文件过程中，同时在所述UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

S2：导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

S3：提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，并保存为图片文件，并将图片的矩形信息存入配置文件；

S4：提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

S5：导出配置文件；

S6：将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

S7：GUI创建器实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。

下面对本发明实施例的GUI界面自动创建方法进行更具体的描述，但不应以此为限。

在步骤S1中，在生成包含若干图层的UI设计文件过程中，也就是UI设计师在软件上进行界面设计时，可以同时在UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层。也即，UI设计文件中，包含了图像图层和文字图层及对应的图层坐标信息、图层类别信息及文字属性信息，当然还可以包含一些其他信息。

由于在UI设计时，在设置图层的时候便会具有相应的坐标，此时只需将其定位的坐标进行记录即可得到图层坐标信息，图层坐标信息例如可以是图层的一个角的坐标点；同样的，图层在布置时便会有相应的类别差异，只需对所选类别进行记录即可得到图层类别信息；文字属性信息例如包括文字大小、字体等，这些同样可以在设计时进行相应的记录即可得到。

UI设计文件可以保存，之后再导入进行处理。UI设计文件例如可以是PSD素材文件，通过PhotoShop来生成。

接着执行步骤S2，导入步骤S1中已经设计好的UI设计文件，将UI设计文件打开，由于图层是层叠在一起的，因而需要切割图层，在切割过程中，提取图层类别信息，并根据图层类别信息分别图层的类别，切割分类后得到对应图层的图片或文字。可以每切割一个图层后便执行一次步骤S3和步骤S4，直至全部图层都切割完；也可以在全部图层切割完后再进入步骤S3和步骤S4中执行。

步骤S3中，提取所述图层坐标信息，确定图片在界面中的位置，例如图层坐标信息为图片左上角坐标点时，便可确定图片在界面中的相应位置，通过分析图片的长和宽来计算图片的矩形信息，该矩形信息可以刻画图片的位置及尺寸，例如，包括了该图片的左上角起始坐标点、图片的长和宽，从而根据该矩形信息可以确定图片各个点在界面上的位置坐标，将图片保存为图片文件，例如可以存储为BMP或PNG格式文件，并将图片的矩形信息存入配置文件。

步骤S4中，提取所述图层坐标信息，确定文字在界面中的位置，文字通常是以文本框的形式存在，因而根据图层坐标信息可以知晓该文本框在界面中的位置，也即可计算文字的位置信息，方式可以与图片的方式一样，分析文字并保存为文本文件，对文字的文本信息以文本形式存储，例如可以存储为TXT格式文件，并提取文字属性信息，与所述位置信息一同存入配置文件。

接着执行步骤S5，导出配置文件，由于文本文件和图片文件已经做了保存，因而本步骤不需要进行处理，后续获取可以根据所存储的路径来获取，路径可以存储在配置文件中或用其他文件来保存。

步骤S6中，将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器。

配置文件中存储有相应的图片对象和文字对象及对应的配置信息，对其进行解析，以供GUI创建器调用相应的图片和文字并进行相应的配置。

步骤S7中，GUI创建器实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。由于一个界面上可能仅包括图片，或仅包括文字，也有可能两者都有，因而根据界面显示情况来获取相应的图片文件和/或文本文件，并根据解析对象进行配置信息的匹配配置，从而实现自动化创建GUI界面。

通过在UI设计文件的生成过程中，同时在所述UI设计文件中生成图层配置所需的信息，后续对UI设计文件进行配置处理时，只需导入UI设计文件，对图层进行切割后分类保存，并提取出所需的配置信息保存在指定的配置文件中，将配置文件导入到GUI应用程序中，通过对配置文件的解析可以得到各个图层对象的配置，在图片文件和文本文件获取时根据配置信息进行配置，实现自动化的GUI创建，提高了自动化程度，避免了设计人员与软件工程师的对接麻烦，省去了软件工程师的很多编码要求，效率更高。

可选的，所述UI设计文件为PSD素材文件，所述步骤S2-S4通过脚本来执行，执行环境由PhotoShop提供。脚本例如是根据本发明实施例的步骤执行内容预先编写好的JavaScript脚本，在PhotoShop中运行来执行。

在一个实施例中，所述步骤S1中，同时在所述UI设计文件中根据图层的设定顺序生成图层列表；由于设计过程中图层是依次生成的，因而有相应的顺序，可对其进行顺序进行记录，生成相应的图层列表。设定顺序可以是根据设计过程中图层生成的先后顺序，也可以是设计师根据界面显示的先后顺序而设定的顺序，或者是根据其他需要而设定的图层顺序。

接着在所述步骤S2中，提取并分析图层列表，根据图层列表中的顺序，遍历所有图层并切割图层，将顺序写入到对应图层的图片或文字的文件名称的指定位置中。该指定位置例如可以是名称中最前字段、中间字段或最后字段，只要是在名称中的固定位上即可。

接着所述步骤S7中，根据指定位置查询文件，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件。当GUI创建器需要按顺序获取文件时，从存储这些图片文件和文本文件的文件夹内进出查询，只要判断文件名称指定位置的顺序信息便可确定是否是相应的顺序，便能获取到对应顺序的文件。按顺序获取文件可使界面显示有条不紊地按需要进行显示，而且查询文件的过程更简单，处理时间更短，进一步提高效率。

进一步的，每个界面对应具有一个配置文件及相应的资源文件，所述资源文件包括图片文件和/或文本文件。将同一界面的配置信息保存在同一个配置文件中，便于该界面需要显示时，能够一并地获取相应的配置文件和对应的资源文件。

进而在所述步骤S7中，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件，在读取对应的配置文件时，同时将该配置文件所对应的全部资源文件及相应配置信息一同获取。

例如，当需要获取顺序为第一的图片文件时，到配置信息里去读取相应的配置文件，同时发现该配置文件里除了该图片文件对应的图片对象外，还共存着其他对象的信息，此时，一同将这些对象的配置信息获取，并将资源文件也一同调取，此时相应的顺序信息中便跳过这些已调取的对象的序号，避免后续重复调取。

通过顺序获取配置文件时，判断配置文件中是否有相应共存的对象，将同一界面的全部对象的配置信息一并获取，并将相应资源也一并获取，可保证该界面显示的实时性及全面性。

界面可以对应于一个图层或两个以上图层。优选的，在界面对应于两个以上图层时，图层之间存在绑定关系，根据该绑定关系生成配置文件。由于图层之间具有相应的绑定关系，因而这些绑定在一起的图层的配置信息存储到一个配置文件中去，在读取时也一并的读取出来。

优选的，所述步骤S3中，还将图片文件的文件名称写入到配置文件中，与其对应的配置信息相关联；从而可以根据图片文件的文件名称来找到对应的配置信息。所述步骤S4中，还将文本文件的文件名称写入到配置文件中，与其对应的配置信息相关联，从而可以根据文本文件的文件名称来找到对应的配置信息。

更优的，所述配置文件中，各个图层的配置信息键值是以文件名称追加相应配置信息确定的属性名称组成的字符串，具有一定规律，可方便程序批量处理。

例如，有一个图层名称叫做startButton，该图层位于整个文档的左上角并且高宽都为32，那么最终生成的图片为startButton.png，在配置文件中对其配置信息的描述片段如下：

startButton_file＝startButton.png

startButton_x＝0

startButton_y＝0

startButton_w＝32

startButton_h＝32。

本发明还提供一种GUI界面自动创建系统，包括：

设计信息生成模块，执行在生成包含若干图层的UI设计文件过程中，同时在UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

图层切割模块，执行导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

图片处理模块，执行提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；

文字处理模块，执行提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

导出模块，执行导出配置文件；

解析模块，执行将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

GUI创建器，执行实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。

关于本发明的GUI界面自动创建系统的具体内容可以参看前述实施例中关于GUI界面自动创建方法部分的描述，在此不再赘述。

本发明虽然以较佳实施例公开如上，但其并不是用来限定权利要求，任何本领域技术人员在不脱离本发明的精神和范围内，都可以做出可能的变动和修改，因此本发明的保护范围应当以本发明权利要求所界定的范围为准。

Claims (8)

1.一种GUI界面自动创建方法，其特征在于，包括以下步骤：

S1：在生成包含若干图层的UI设计文件过程中，同时在所述UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

S2：导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

S3：提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；

S4：提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

S5：导出配置文件；

S6：将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

S7：GUI创建器实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。

2.如权利要求1所述的GUI界面自动创建方法，其特征在于，所述步骤S1中，同时在所述UI设计文件中根据图层的设定顺序生成图层列表；

所述步骤S2中，提取并分析图层列表，根据图层列表中的顺序，遍历所有图层并切割图层，将顺序写入到对应图层的图片或文字的文件名称的指定位置中；

所述步骤S7中，根据指定位置查询文件，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件。

3.如权利要求2所述的GUI界面自动创建方法，其特征在于，每个界面对应具有一个配置文件及相应的资源文件，所述资源文件包括图片文件和/或文本文件；

所述步骤S7中，根据文件名称中的顺序信息获取对应的图片文件和/或文本文件，在读取对应的配置文件时，同时将该配置文件所对应的全部资源文件及相应配置信息一同获取。

4.如权利要求3所述的GUI界面自动创建方法，其特征在于，界面对应于一个图层或两个以上图层；在界面对应于两个以上图层时，图层之间存在绑定关系，根据该绑定关系生成配置文件。

5.如权利要求1所述的GUI界面自动创建方法，其特征在于，所述步骤S3中，还将图片文件的文件名称写入到配置文件中，与其对应的配置信息相关联；所述步骤S4中，还将文本文件的文件名称写入到配置文件中，与其对应的配置信息相关联。

6.如权利要求5所述的GUI界面自动创建方法，其特征在于，所述配置文件中，各个图层的配置信息键值是以文件名称追加相应配置信息确定的属性名称组成的字符串。

7.如权利要求1所述的GUI界面自动创建方法，其特征在于，所述UI设计文件为PSD素材文件，所述步骤S2-S4通过脚本来执行，执行环境由PhotoShop提供。

8.一种GUI界面自动创建系统，其特征在于，包括：

设计信息生成模块，执行在生成包含若干图层的UI设计文件过程中，同时在UI设计文件中生成图层坐标信息、图层类别信息及文字属性信息，所述图层包括图像图层和文字图层；

图层切割模块，执行导入所述UI设计文件，切割图层，并根据图层类别信息得到对应图层的图片或文字；

图片处理模块，执行提取所述图层坐标信息，确定图片在界面中的位置，计算图片的矩形信息，将图片保存为图片文件，并将图片的矩形信息存入配置文件；

文字处理模块，执行提取所述图层坐标信息，确定文字在界面中的位置，计算文字的位置信息，分析文字并保存为文本文件，并提取文字属性信息，与所述位置信息一同存入配置文件；

导出模块，执行导出配置文件；

解析模块，执行将配置文件导入GUI应用程序中，通过配置解析模块解析其中的图片对象和文字对象及对应的配置信息，将解析结果传入GUI创建器；

GUI创建器，执行实时获取对应的图片文件和/或文本文件，并根据解析结果以相应配置动态地创建GUI界面。