CN112015405B - 界面布局文件的生成方法、界面生成方法、装置及设备 - Google Patents

Abstract

本发明公开了一种界面布局文件的生成方法、界面生成方法、装置及设备。该方法包括：获取界面设计图的界面元素；构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；基于所述布局元素和所述第一结构树，确定目标结构树；生成对应的界面布局文件。如此，可减少人为操作和编写代码，提高整体开发效果效率和代码准确率，满足实际应用需求。

Description

界面布局文件的生成方法、界面生成方法、装置及设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种界面布局文件的生成方法、界面生成方法、装置及设备。

背景技术

在图形用户界面开发过程中，通常设计师先设计出的用户界面(UI)设计稿，之后由开发人员根据设计稿编写代码，之后通过所编写的代码将设计稿中界面元素布局到前端，以实现用户界面的生成。然而，传统的用户界面布局方法往往需要开发人员手动编写代码来布局各界面元素，同时布局界面元素也依赖于开发人员的布局经验，如此，不仅导致整体开发效果低下，而且会存在由于人为操作而导致代码准确率不高的缺陷，无法满足实际应用需求。

发明内容

本发明提供了一种界面布局文件的生成方法、界面生成方法、装置及设备，以解决现有技术中的至少一种技术问题。

一方面，本发明提供了一种界面布局文件的生成方法，包括：

获取界面设计图的界面元素；

基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；

对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；

基于所述布局元素和所述第一结构树，确定目标结构树；

基于所述目标结构树，生成所述界面设计图对应的界面布局文件。

另一方面，本发明还提供一种界面生成方法，包括：

获取待生成界面的界面布局文件；

基于所述界面布局文件，生成界面；

其中，所述界面布局文件是根据任一实施例所述的界面布局文件生成方法得到的。

另一方面，本发明还提供一种界面布局文件的生成装置，包括：

第一获取模块，用于获取界面设计图的界面元素；

第一构建模块，用于基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；

布局元素确定模块，用于对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；

第一确定模块，用于基于所述布局元素和所述第一结构树，确定目标结构树；

布局文件生成模块，用于基于所述目标结构树，生成所述界面设计图对应的界面布局文件。

另一方面，本发明还提供一种界面生成装置，包括：

第二获取模块，用于获取待生成界面的界面布局文件；

界面生成模块，用于基于所述界面布局文件，生成界面；

其中，所述界面布局文件是根据上任一实施例所述的界面布局文件生成方法得到的。

另一方面，本发明还提供一种设备，包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现实施例所述的界面布局文件生成方法，或如实施例所述的界面生成方法。

另一方面，本发明还提供一种计算机存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行如上述所述的界面布局文件的生成方法。

另一方面，本发明还提供一种计算机存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行如上述所述的界面生成方法。

本发明提供的一种界面布局文件的生成方法、界面生成方法、装置及设备，至少具有如下技术效果：

本发明通过获取界面设计图的界面元素；基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；基于所述布局元素和所述第一结构树，确定目标结构树；基于所述目标结构树，生成所述界面设计图对应的界面布局文件。如此，可减少人为操作和编写代码，提高整体开发效果效率和代码准确率，满足实际应用需求。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。

图1是本发明一个实施例提供的界面布局文件的生成方法流程图。

图2是本发明另一个实施例提供的界面布局文件的生成方法部分流程图。

图3是本发明另一个实施例提供的界面布局文件的生成方法部分流程图。

图4是本发明一应用场景下的空间布局关系分析的过程示意图。

图5a和5b是现有技术的生成方法和本申请一实施例的界面布局文件的生成方法的结果比较图。

图6是本发明一个实施例提供的界面布局文件的生成装置框图。

图7是本发明另一个实施例提供的界面生成装置框图。

图8是本发明提供的一种用于实现本发明实施例所提供的方法的设备的硬件结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的其他实施例，都应当属于本发明保护的范围。

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本发明实施例提供的界面布局文件的生成方法和界面生成方法可以应用于界面布局文件的生成装置和界面生成装置中，实际应用中，所述界面布局文件的生成装置和界面生成装置可通过用户终端、服务器或服务器集群实现。所述服务器或服务器集群可以为网页服务器或服务器集群，所述用户终端可以为PC、手机、平板电脑或者个人数字助理或穿戴式设备等，当然也不限于此。若用户终端执行本发明实施例的生成方法可以是由安装在其上的客户端来执行。该客户端可包括但不限于为本地运行的应用程序，运行于客户端页面或浏览器页面的小程序等。

针对现有技术中存在的问题，本发明实施例提供了一种页面布局文件生成方法，通过获取界面的设计图；所述设计图包括多个界面元素和所述多个界面元素的信息；基于所述信息以及界面元素之间的包含关系，构建所述设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；基于所述布局元素和所述第一结构树，确定目标结构树；基于所述目标结构树，生成所述设计图对应的界面布局文件。

以下分别进行详细说明。

参见图1，图1示例本发明一实施例提供的界面布局文件生成方法的流程示意图。如图1所示，该方法可以包括：

S102，获取界面设计图的界面元素。

本发明实施例中，界面设计图可为待生成布局文件的部分或全部设计稿图片。通过对界面设计图进行元素提取，得到对应的界面元素。示例的，可以通过专门的元素提取器来提取界面设计图中至少一个界面元素。设计稿包括但不限于为设计软件所生成的设计文件，例如PSD格式文件。

界面元素可包括但不限于为：图标、图片、图形、文本、控件(例如按钮、下拉列表等)、链接、窗口、表格、视图等。

S104，基于所述界面元素的信息以及界面元素之间的包含关系，构建所述设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点。

结构树是一种数据结构，其由有限个节点组成的具有一定层级关系的集合。结构树具有至少一个节点，部分节点可以有至少一个子节点，对存在子节点的非根节点称之为父节点。

本发明实施例，第一结构树中每个节点是用于表征所述界面元素的，且与界面元素一一对应，每个节点可以具有对应的界面元素的信息。每个界面元素可以具有特定的信息，界面元素的信息包括但不限于为：界面元素的类型、界面元素的尺寸信息、界面元素的位置信息、以及界面元素之间的相对位置信息等。

从界面设计图中提取的界面元素是元素序列，该元素序是没有层级关系的。从界面设计图中提取的界面元素是具有元素边界的(例如矩形边界)，在构建第一结构树之前，可以对元素序列中存在元素边界重叠且没有成组的界面元素进行成组，得到更新的元素序列。

若界面设计图中的某一界面元素与其他界面元素之间存在包含关系，则代表两者为父子关系。示例的，若界面元素A的元素边界在界面元素B的元素边界内，则说明界面元素B包含界面元素A，即界面元素A为界面元素B的子元素；相应的，界面元素A对应的节点A为界面元素B对应的节点B的子节点。基于界面元素的信息以及界面元素之间的包含关系，对元素序列进行构建，得到具有层级关系的第一结构树。

S106，对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素。

每个界面设计图中的各界面元素的空间布局排布不同，通过对第一结构树中节点对应的界面元素的空间布局关系进行分析，得到对应的布局元素。该布局元素可以一个虚拟元素，其表现形式可以为界面设计图上的虚拟矩形框，该虚拟矩形框可以把具有相同空间布局关系的界面元素组合在一起，该虚拟元素的属性信息可以为表征界面元素之间布局关系。当然，该布局元素也可以为一个容器，用于存储界面元素之间的布局关系，这个容器也可以盛装具有相同空间布局关系的界面元素。

本发明实施例中，空间布局关系可以包括水平布局关系和垂直布局关系，相应的，布局关系对应的布局元素可以包括水平布局元素和垂直布局元素。当然，对于特殊的设计图和应用需求，空间布局关系也可设置为斜向布局关系、或特定形状的布局关系(例如圆形、方形、阵列、弧形等)，本发明对此不做具体限定。

S108，基于所述布局元素和所述第一结构树，确定目标结构树。

第一结构树包括界面元素的层级关系，布局元素包括界面元素之间布局关系信息，此时基于布局元素的信息、布局元素之间的关系以及第一结构树，以构建具有层级关系和空间布局关系的目标结构树。示例的，可以在第一结构树的基础上，基于布局元素的信息以及布局元素之间的关系，在第一结构树中相应节点位置插入用于布局元素所对应的节点，得到新的结构树，即为目标结构树。

目标结构树也是一种数据结构，其包括至少一个用于表征界面元素的第一类型节点和至少一个用于表征布局元素的第二类型节点。本发明实施例，第二类型节点为与其相连的第一类型节点的父节点。

S110，基于所述目标结构树，生成所述设计图对应的界面布局文件。

本发明实施例，布局文件包括但不限于为HTML代码、XML代码的布局代码，也可为其他用于描述元素布局结构的文件。基于目标结构树中所包含的信息，按照通用规则或通用模板，即可转化为设计图对应的界面布局文件。

本发明通过获取界面设计图的界面元素；基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；基于所述布局元素和所述第一结构树，确定目标结构树；基于所述目标结构树，生成所述界面设计图对应的界面布局文件。如此，可减少人为操作和编写代码，提高整体开发效果效率和代码准确率，满足实际应用需求。

在另一实施例中，如图2所示，所述步骤S108，基于所述布局元素和所述第一结构树，确定目标结构树，具体可以包括如下步骤：

S202，基于所述布局元素和所述第一结构树，构建所述界面设计图对应的第二结构树；所述第二结构树包括用于表征所述界面元素的第一类型节点、以及用于表征所述布局元素的第二类型节点。

第二结构树也是一种数据结构，其包括至少一个用于表征界面元素的第一类型节点和至少一个用于表征布局元素的第二类型节点。本发明实施例，第二类型节点为与其相连的第一类型节点的父节点。

S204，检测所述第二结构树中各节点所对应的元素之间的相似关系。

第二结构树中的节点包括第一类型节点和第二类型节点，通过对第一类型节点所对应的界面元素和第二类型节点所对应的布局元素进行相似关系分析，将满足预设相似判断条件的至少两个元素确定为具有相似关系的元素。

本发明实施例，所述检测所述第二结构树中各节点所对应的元素之间的相似关系，可以包括：

S2042，遍历第二结构树中的各节点，检测所述第二结构树中各节点的类型；

S2044，若检测为第一类型节点，则按照第一相似判断规则，对各第一类型节点所对应的界面元素进行两两相似关系分析，得到对应的相似分析结果。

本发明实施例，上述第一相似判断规则具体可以包括：

A1，两个界面元素的元素类型相同

该元素类型可以为图标、图片、图像、文字、链接、控件、表格等。举例而言，若判断两个界面元素均为图标，则确定两者的元素类型相同，即满足条件A1。若判断一个界面元素为图标，另一个界面元素为图片，则确定两个界面元素的类型不同。

A2，至少符合以下条件之一：

A21，两个界面元素的高度和宽度相同

界面元素具有元素边界，该元素边界通常为矩形边界。若两个界面元素各自的矩形边界的高度和宽度均相同，即满足该条件A21。

A22，两个界面元素的元素基线对齐

元素基线即元素边界的基准线(边界线、中线)，分为水平基线、垂直基线，总共有6条元素基线(布置在四条外边界线和两条中线上)。在本实施例中，若检测两个界面元素中的6条元素基线有1条对齐，即满足该条件A22。当然，为了得到更精准的相似匹配结果，还可定义6条元素基线上至少2条对齐，则确定满足该条件A22。

若确定两个界面元素同时满足以上A1和A2条件，则确定两个界面元素为相似元素，对应的两个界面元素所对应的节点为相似节点。

S2046，若判断为第二类型节点，则按照第二相似判断规则，对各第而型节点所对应的布局元素进行两两相似关系分析，得到对应的相似分析结果。

本发明实施例，上述第二相似判断规则具体可以包括：

B1，两个布局元素的内容排列方向相同

该内容排列方向可以为布局元素与相邻的布局元素是排列方向，例如从左到右排列、从上到下排列、从右到左排列、从下到上排列等。

B2，两个布局元素的子元素的元素类型相同

该子元素的元素类型也可以为图标、图片、图像、文字、链接、控件、表格等。

B3，至少符合以下条件之一：

B31，两个布局元素的高度相同，且垂直基线对齐

布局元素也具有元素边界，该元素边界通常为矩形边界。元素基线即元素边界的基准线(边界线、中线)，分为水平基线、垂直基线，总共有6条元素基线。若检测两个布局元素各自的矩形边界的高度相同，且任一垂直基线对齐，则确定满足B31条件。

B32，两个布局元素的宽度相同，且水平基线对齐

若检测两个布局元素各自的矩形边界的宽度相同，且任一水平基线对齐，则确定满足B32条件。

若确定两个布局元素同时满足以上B1-B3条件，则确定两个布局元素为相似元素，对应的两个布局元素所对应的节点为相似节点。

S206，对所述第二结构树中具有相似关系的元素所对应的节点进行标记，得到相似标记数据。

S208、基于所述相似标记数据和所述第二结构树，构建所述界面设计图对应的第三结构树，将所述第三结构树作为所述目标结构树。

第三结构树也是一种数据结构，其包括至少一个用于表征界面元素的第一类型节点和至少一个用于表征布局元素的第二类型节点，且具有相似关系的元素所对应的节点上具有相似标记。

通过对第二结构树进行相似检测，并且对具有相似关系的数据进行标记，如此在生成布局文件代码时，可以将具有相似关系的节点所对应的代码进行合并，如此可保证具有相似关系的元素能够共用一套相似代码，实现精简代码，避免代码过于冗余。

在另一实施例中，如图3所示，在构建所述界面设计图对应的第二结构树之前，还可以包括：

S302，判断所述第一结构树中节点所对应的元素是否为绝对定位元素。

绝对定位元素是对设计稿界面内容没有影响的元素，例如气泡、提示红点等。

本发明实施例，遍历第一节点中节点所对应的元素，若判断第一结构树中节点所对应的元素同时满足以下定位判断条件，则判断该元素为绝对定位元素。

该定位判断条件为：

C1，符合水平或垂直关系

若第一结构树中节点所对应的元素符合水平关系，则代表该元素属于某一水平组。若第一结构树中节点所对应的元素符合垂直关系，则代表该元素属于某一垂直组。

C2，该元素与同组其他元素不在同一基线上

若确定该元素属于某一水平组或垂直组，在检测该元素与同一组其他元素的基线，若检测该元素的6条基线与同组其他元素的各基线均不对齐，则确定该元素不满足条件C2。

S304，若所述第一结构树中节点所对应的元素为绝对定位元素，则对绝对定位元素进行标记，得到定位标记数据。

本发明实施例，若判断该元素为绝对定位元素，则可对该绝对定位元素进行标记，得到定位标记数据。将该绝对定位元素的定位标记数据记录到所对应的节点信息中。当然，该定位标记数据也可不记录到节点信息中，而是直接保存在其他存储位置中。

在一实施例中，构建所述界面设计图对应的第二结构树的步骤可以调整为：

S306，基于所述布局元素、所述定位标记数据和所述第一结构树，构建所述界面设计图对应的第二结构树。

本发明实施例中的第二结构树包括布局元素对应的节点和界面元素对应的节点以及定位标记数据。该定位标记数据可以是记录到界面元素所对应的节点信息中。

在一实施例中，相应的，所述步骤S204，检测所述第二结构树中各节点所对应的元素之间的相似关系，可以包括：

S308，确定所述第二结构树中节点对应的带有所述定位标记数据的元素。

在遍历第二结构树中各节点的过程中，可以边遍历边检测该节点对应的元素是否有定位标记数据，若有，则得到带有所述定位标记数据的元素所对应的节点。

S310，对所述第二结构树中节点对应的其他元素进行相似关系检测，所述其他元素包括第二结构树中节点对应的中除所述带有所述定位标记数据的元素以外的元素。

在一实施例中，在确定了所述第二结构树中带有所述定位标记数据的元素所对应的节点之后，还可以将所确定的节点从第二结构树中删除，得到更新的第二结构树。之后，对更新后的第二结构树进行相似关系检测。当然，在其他实施方式中，可以在确定了该节点后不做删除处理。

如此，通过检测绝对定位元素，在进行相似检测时，可省去对该绝对定位元素的检测，提高相似检测的运算量，提高生成效率，且能够进一步精简代码。

在另一实施例中，如图4所示，所述布局元素包括水平布局元素和垂直布局元素。所述对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素，包括：

S402，基于元素信息，对所述第一结构树中节点所对应的界面元素进行水平布局关系分析，将满足水平布局关系的至少两个界面元素进行成组，将不满足水平布局关系的界面元素单独成组，得到至少一个第一水平组。

该第一水平组中包括至少一个界面元素。

本发明实施例，所述对界面元素进行水平布局关系分析，包括：

S4022，检测各界面元素的元素边界在第一方向的投影区间。

对第一结构树中的各节点逐层进行分析，例如可以从根节点下的第一子节点开始，对每个第一子节点所对应的界面元素的元素边界进行第一方向的投影，得到每个界面元素在第一方向的投影区间。可选地，该第一方向可以为水平方向。

S4024，确定具有投影区域重叠的至少两个所述界面元素之间存在水平布局关系。

若检测到至少两个界面元素的元素边界在所述第一方向的投影区域具有重叠，则确定所述至少两个界面元素之间存在水平布局关系；相反，若检测到至少两个界面元素的元素边界在所述第一方向的投影区域不具有重叠，则确定所述至少两个界面元素之间不存在水平布局关系。

举例而言，元素A、元素B和元素C在第一方向(例如Y轴上)的投影得到投影区域，即为各元素在Y轴上的投影长度。若这些元素在Y轴上的投影长度有重叠的地方，则确定这些元素具有相同的水平布局关系，则将这些元素合并到同一水平组中。相反，若这些元素在Y轴上的投影长度没有重叠的地方，则确定这些元素不具有水平布局关系，则将这些元素分别单独成组，得到多个水平组。此外，在确定了水平组后，可以得到与该水平组对应具有包含关系属性的水平布局元素，该水平布局元素与该水平组中的各成组元素是父子关系。

在一实施例中，在确定了各第一水平组后，可以对第一水平组之间的水平布局进行判断，确定第一水平组之间的位置关系，以得到具有水平关系属性的水平布局元素。该水平关系属性包括各水平组的排列顺序，具体的，可以确定各水平组的行号。

本发明又一实施例，所述对界面元素进行水平布局关系分析，可以包括：

若检测界面元素在第一方向上存在包含关系，则确定界面元素之间存在水平布局关系；和/或

若检测第一界面元素的上边界高于第二界面元素的上边界，且第一界面元素的元素边界与第二界面元素的元素边界相连，则确定界面元素之间存在水平布局关系。

S404，对每个所述第一水平组中的界面元素进行垂直布局分析，将满足垂直布局关系的界面元素进行成组，将不满足垂直布局关系的至少两个界面元素单独成组，得到至少一个第一垂直组。

本发明实施例中，所述对界面元素进行垂直布局关系分析，与上述水平布局关系分析类似，可以包括：

S4042，检测各界面元素的元素边界在第二方向的投影区域；所述第二方向与所述第一方向相互垂直。

对需要进行垂直布局分析的节点所对应的界面元素进行分析，例如可以从根节点下的第一子节点开始，对每个第一子节点所对应的界面元素的元素边界进行第二方向的投影，得到每个界面元素在第二方向的投影区间。可选地，该第二方向可以为水平方向。

S4044，确定具有投影区域重叠的至少两个所述界面元素之间存在水平布局关系。

若检测到至少两个界面元素的元素边界在所述第二方向的投影区域具有重叠，则确定所述至少两个界面元素之间存在垂直布局关系；相反，若检测到至少两个界面元素的元素边界在所述第二方向的投影区域不具有重叠，则确定所述至少两个界面元素之间不存在垂直布局关系。

举例而言，元素A、元素B和元素C在第二方向的投影得到投影区域，即为各元素在X轴上的投影长度。若这些元素在X轴上的投影长度有重叠的地方，则确定这些元素具有相同的垂直布局关系，则将这些元素合并到同一垂直组中。相反，若这些元素在X轴上的投影长度没有重叠的地方，则确定这些元素不具有垂直布局关系，则将这些元素分别单独成组，得到多个垂直组。此外，在确定了垂直组，可以得到与该垂直组对应具有包含关系属性的垂直布局元素，该垂直布局元素与该垂直组中的各元素是父子关系。

在一实施例中，在确定了各第一垂直组后，对第一垂直组之间的垂直布局进行判断，确定各第一垂直组之间的位置关系，以得到具有垂直关系属性的垂直布局元素。该垂直关系属性包括各垂直组的排列顺序，具体的，可以确定各垂直组的列号。

本发明又一实施例中，所述对界面元素进行垂直布局关系分析，包括：

若检测至少两个界面元素之间在第二方向上的元素边界相连，则确定界面元素之间存在垂直布局关系。其中，该第二方向可以为X轴方向。

S406，依次类推，直至检测结果为不存在满足下一级水平布局关系和下一级垂直布局关系的界面元素。

在确定了所述第一垂直组后，可以对每个所述第一垂直组中的界面元素进行水平布局分析，将满足水平布局关系的界面元素进行成组，得到至少一个第二水平组。依次类推，直至检测不存在满足下一级水平布局关系和下一级垂直布局关系的界面元素，则进入下一层级的节点。

依次对第一结构树中的各层级的节点所对应的元素进行水平布局关系和垂直布局关系检测，直至检测到叶子节点所对应的元素。若遍历每个层级节点后，检测到不存在满足下一级水平布局关系和下一级垂直布局关系的界面元素，则结束布局分析检测。

S408，基于布局分析所得的水平组和垂直组，得到所述布局元素；所述布局元素包括水平组和垂直组之间的布局关系、各水平组与每个成组元素的布局关系、以及各垂直组和每个成组元素的布局关系。

为了便于更清楚的了解布局分析过程，如图4所示，示例了本发明一实施例的布局分析过程。左侧为待分析的设计图，右侧是对应的结构树。每个结构树包括第一类型节点和第二类型节点，其中第一类型节点用于表征设计图中的界面元素，例如人物头像、名称、文字、图标等；第二类型节点用于表征设计图中界面元素之间的布局结构关系的界面元素，例如row(行)、column(列)等。

在进行布局分析之前，先对设计图中的元素序列进行包含关系分析，将具备包含关系的元素进行成组，形成具有层级关系的第一结构树；之后，对第一结构树中的节点所对应的界面元素进行布局分析。

在进行布局分析过程中，先进行水平布局关系分析(也即水平关系分析)，例如图4中的第一排的“水平关系分析”，将满足水平布局关系的界面元素合并成组，得到一个第一水平组。基于该第一水平组，可以得到第一水平元素(可以为左侧的实线矩形外框)，对应的，在第一结构树上生成一个“row”第一类型节点，将该第一类型节点设置为与第一水平元素所包含的界面元素所对应的第一类型节点相连接，得到右侧的结构树。

之后，对第一水平组所包含的界面元素进行垂直布局关系分析(也即第二排的“垂直关系分析”)，将满足垂直布局关系的界面元素合并成组，将不满足垂直布局关系的界面元素单独成组，得到两个第一垂直组。基于这两个第一垂直组，可以得到两个第一垂直元素(可以为左侧的实线矩形框)，对应的，在右侧的结构树上生成两个“column”的第二类型节点，将该第二类型节点设置为与第一垂直元素所包含的界面元素所对应的第一类型节点相连接，得到右侧的结构树。

依次类推，对每个节点进行空间布局关系分析，直至分析到叶子节点且确定不存在满足空间布局分析关系的界面元素，即完成了布局关系分析。

通过对元素的空间布局关系进行分析，进一步节省了开发人员工作中对结构拆分这个繁杂脑力消耗，也减少了的代码编写量，可以极大的提高了开发效率。

图5a和5b为现有技术的生成方法和本申请一实施例的界面布局文件的生成方法的结果比较图。通过结构数据图可见，本发明的页面布局文件生成方法所得到的数据结果的逻辑性更好，符合开发规范，如此可进一步降低开发成本。此外，本发明的元素所承载的布局结构是流式布局，其坐标位置会随周围结构辩护而变化。

本发明一实施例提供的界面生成方法的流程示意图。该方法可以包括：

S502，获取待生成界面的界面布局文件。

在一实施例，可以通过向布局文件生成装置发送待生成界面的界面布局文件的获取请求；该获取请求中可携带待生成界面的唯一标识。

S504，基于所述界面布局文件，生成界面。

在一实施例，可以通过解析界面布局文件，得到每个第一类型节点的信息、第一类型节点所对应的界面元素、第二类型节点的信息以及第一类型节点与第二类型节点的关系；即得到界面元素的信息以及结构布局信息；基于该解析结果，生成界面。

其中，所述界面布局文件是根据上述任一实施例的界面布局文件的生成方法得到的。

本发明的界面生成方法，可减少人为操作和编写代码，提高整体开发效果效率和代码准确率，满足实际应用需求。

下述为本发明装置实施例，可以用于执行本发明方法实施例。对于本发明装置实施例中未披露的细节，请参照本发明方法实施例。

参考图6，其示出了本发明一个实施例提供的一种界面布局文件的生成装置。该装置可以包括：

第一获取模块610，用于获取界面设计图的界面元素；

第一构建模块620，用于基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；

布局元素确定模块630，用于对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；

第一确定模块640，用于基于所述布局元素和所述第一结构树，确定目标结构树；

布局文件生成模块650，用于基于所述目标结构树，生成所述界面设计图对应的界面布局文件。

在一实施例中，所述第一确定模块，可以包括：

第一确定子模块，用于基于所述布局元素和所述第一结构树，构建所述界面设计图对应的第二结构树；所述第二结构树包括用于表征所述界面元素的第一类型节点、以及用于表征所述布局元素的第二类型节点；

相似检测子模块，用于检测所述第二结构树中各节点所对应的元素之间的相似关系；

标记子模块，用于对所述第二结构树中具有相似关系的元素所对应的节点进行标记，得到相似标记数据；

构建子模块，用于基于所述相似标记数据和所述第二结构树，构建所述界面设计图对应的第三结构树，将所述第三结构树作为所述目标结构树。

在一实施例中，所述装置还可以包括：

定位判断模块，用于判断所述第一结构树中节点所对应的元素是否为绝对定位元素；

定位标记模块，用于若判断为是，则对绝对定位元素进行标记，得到定位标记数据；

相应地，所述相似检测子模块，可以包括：

元素确定单元，用于确定所述第二结构树中节点对应的带有所述定位标记数据的元素；

相似检测单元，用于对所述第二结构树中节点对应的其他元素进行相似关系检测，所述其他元素包括第二结构树中节点对应的除所述带有所述定位标记数据的元素以外的元素。

在一实施例中，所述布局元素确定模块，包括：

基于元素信息，对所述第一结构树中节点所对应的界面元素进行水平布局关系分析，将满足水平布局关系的界面元素进行成组，得到至少一个第一水平组；

对每个所述第一水平组中的界面元素进行垂直布局分析，将满足垂直布局关系的界面元素进行成组，得到至少一个第一垂直组；

依次类推，直至检测结果为不存在满足下一级水平布局关系和下一级垂直布局关系的界面元素；

基于布局分析所得的水平组和垂直组，得到所述布局元素；所述布局元素包括水平组和垂直组之间的布局关系、各水平组与每个成组元素的布局关系、以及各垂直组和每个成组元素的布局关系。

请参考图7，其示出了本发明一个实施例提供的一种界面生成装置。该装置可以包括：

第二获取模块710，获取待生成界面的界面布局文件；

界面生成模块720，用于基于所述界面布局文件，生成界面；

其中，所述界面布局文件是上述任一实施例的界面布局文件生成方法得到的。

本发明实施例还提供了一种计算机存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行本发明实施例所述的界面文件生成方法的步骤或界面生成方法的步骤，具体执行过程可以方法实施例的具体说明，在此不进行赘述。

进一步地，图8示出了一种用于实现本发明实施例所提供的方法的设备的硬件结构示意图，所述设备可以为计算机终端、移动终端或其它设备，所述设备还可以参与构成或包含本发明实施例所提供的装置。如图8所示，计算机终端10可以包括一个或多个(图中采用102a、102b，……，102n来示出)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输装置106。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解，图8所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算机终端10还可包括比装置图中所示更多或者更少的组件，或者具有与装置图所示不同的配置。

应当注意到的是上述一个或多个处理器102和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外，数据处理电路可为单个独立的处理模块，或全部或部分的结合到计算机终端10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的，该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。

存储器104可用于存储应用软件的软件程序以及模块，如本发明实施例中所述的方法对应的程序指令/数据存储装置，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的一种神经网络处理方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

显示器可以例如触摸屏式的液晶显示器(LCD)，该液晶显示器可使得用户能够与计算机终端10(或移动设备)的用户界面进行交互。

需要说明的是：上述本发明实施例先后顺序仅仅为了描述，不代表实施例的优劣。且上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置和服务器实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (11)

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

获取界面设计图的界面元素；

基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；

对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；所述布局元素包括括水平布局元素和/或垂直布局元素；

基于所述布局元素和所述第一结构树，确定目标结构树；所述目标结构树包括用于表征所述界面元素的第一类型节点、以及用于表征所述布局元素的第二类型节点；

基于所述目标结构树，生成所述界面设计图对应的界面布局文件。

2.根据权利要求1所述的方法，其特征在于，所述基于所述布局元素和所述第一结构树，确定目标结构树，包括：

基于所述布局元素和所述第一结构树，构建所述界面设计图对应的第二结构树；所述第二结构树包括用于表征所述界面元素的第一类型节点、以及用于表征所述布局元素的第二类型节点；

检测所述第二结构树中各节点所对应的元素之间的相似关系；

对所述第二结构树中具有相似关系的元素所对应的节点进行标记，得到相似标记数据；

基于所述相似标记数据和所述第二结构树，构建所述界面设计图对应的第三结构树，将所述第三结构树作为所述目标结构树。

3.根据权利要求2所述的方法，其特征在于，所述基于所述布局元素和所述第一结构树，构建所述界面设计图对应的第二结构树之前，还包括：

判断所述第一结构树中节点所对应的元素是否为绝对定位元素；

若所述第一结构树中节点所对应的元素为绝对定位元素，则对绝对定位元素进行标记，得到定位标记数据；

相应地，所述检测所述第二结构树中各节点所对应的元素之间的相似关系，包括：

确定所述第二结构树中节点对应的带有所述定位标记数据的元素；

对所述第二结构树中节点对应的其他元素进行相似关系检测，所述其他元素包括第二结构树中节点对应的除所述带有所述定位标记数据的元素以外的元素。

4.根据权利要求1-3任一所述的方法，其特征在于，所述对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素，包括：

基于元素信息，对所述第一结构树中节点所对应的界面元素进行水平布局关系分析，将满足水平布局关系的至少两个界面元素进行成组，将不满足水平布局关系的界面元素单独成组，得到至少一个第一水平组；

对每个所述第一水平组中的界面元素进行垂直布局分析，将满足垂直布局关系的至少两个界面元素进行成组，将不满足垂直布局关系的界面元素单独成组，得到至少一个第一垂直组；

依次类推，直至检测结果为不存在满足下一级水平布局关系和下一级垂直布局关系的界面元素；

基于布局分析所得的水平组和垂直组，得到所述布局元素；所述布局元素的信息包括水平组和垂直组之间的布局关系、各水平组与每个成组元素的布局关系、以及各垂直组和每个成组元素的布局关系。

5.根据权利要求4所述的方法，其特征在于，所述对界面元素进行水平布局关系分析，包括：

检测各界面元素的元素边界在第一方向的投影区域；

确定具有投影区域重叠的至少两个所述界面元素之间存在水平布局关系；

所述对界面元素进行垂直布局关系分析，包括：

检测各界面元素的元素边界在第二方向的投影区域；所述第二方向与所述第一方向相互垂直；

确定具有投影区域重叠的至少两个所述界面元素之间存在水平布局关系。

6.根据权利要求4所述的方法，其特征在于，所述对界面元素进行水平布局关系分析，包括：

若检测界面元素在第一方向上存在包含关系，则确定界面元素之间存在水平布局关系；和/或

若检测第一界面元素的上边界高于第二界面元素的上边界，且第一界面元素的元素边界与第二界面元素的元素边界相连，则确定界面元素之间存在水平布局关系；

所述对界面元素进行垂直布局关系分析，包括：

若检测至少两个界面元素在第二方向上的元素边界相连，则确定界面元素之间存在垂直布局关系。

7.一种界面生成方法，其特征在于，包括：

获取待生成界面的界面布局文件；

基于所述界面布局文件，生成界面；

其中，所述界面布局文件是根据权利要求1-6任一所述的界面布局文件生成方法得到的。

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

第一获取模块，用于获取界面设计图的界面元素；

第一构建模块，用于基于所述界面元素的信息以及界面元素之间的包含关系，构建所述界面设计图对应的第一结构树；所述第一结构树包括用于表征所述界面元素的节点；

布局元素确定模块，用于对所述第一结构树中节点所对应的界面元素的空间布局关系进行分析，得到用于表征界面元素之间布局关系的布局元素；所述布局元素包括括水平布局元素和/或垂直布局元素；

第一确定模块，用于基于所述布局元素和所述第一结构树，确定目标结构树；所述目标结构树包括用于表征所述界面元素的第一类型节点、以及用于表征所述布局元素的第二类型节点；

布局文件生成模块，用于基于所述目标结构树，生成所述界面设计图对应的界面布局文件。

9.一种界面生成装置，其特征在于，包括：

第二获取模块，用于获取待生成界面的界面布局文件；

界面生成模块，用于基于所述界面布局文件，生成界面；

其中，所述界面布局文件是根据权利要求1-6任一所述的界面布局文件生成方法得到的。

10.一种设备，其特征在于，包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如1-7任一所述的界面布局文件生成方法，或如权利要求8所述的界面生成方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如1-7任一所述的界面布局文件生成方法，或如权利要求8所述的界面生成方法。

Images