CN113672227B - 用户界面代码生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供了一种用户界面代码生成方法、装置、电子设备及存储介质，获取用户界面的设计文件，设计文件包含有多个图层；建立多个图层的层级树，其中，层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；按照行分组和/或列分组的方式，对层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；按照预设的编码语法，将每个节点的布局描述信息转换为用户界面代码。应用本申请实施例提供的技术方案，能够减少分析设计文件所占用的人力资源，提高UI代码生成效率。

Description

用户界面代码生成方法、装置、电子设备及存储介质

技术领域

本申请涉及信息处理技术领域，特别是涉及一种用户界面代码生成方法、装置、电子设备及存储介质。

背景技术

应用程序迭代更新日趋频繁。随着应用程序的迭代更新，应用程序的UI(UserInterface，用户界面)随之更新。

目前，应用程序的UI更新流程为：用户对UI设计文件进行分析，确定UI设计文件中的图层信息，进而基于图层信息手动撰写行列布局的UI代码。在设计文件日渐复杂且更新频繁的今天，手动撰写行列布局的UI代码，将耗费大量人力资源，导致UI代码生成效率低下。

发明内容

本申请实施例的目的在于提供一种用户界面代码生成方法、装置、电子设备及存储介质，以减少分析设计文件所占用的人力资源，提高UI代码生成效率。具体技术方案如下：

在本申请实施的第一方面，首先提供了一种用户界面代码生成方法，该方法包括：

获取所述用户界面的设计文件，所述设计文件包含有多个图层；

建立所述多个图层的层级树，其中，所述层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

按照预设的编码语法，将所述层级树中所有节点的布局描述信息转换为用户界面代码。

可选的，所述建立所述多个图层的层级树的步骤，包括：

针对所述多个图层中每一图层，将该图层作为层级树的当前节点；

若所述多个图层中其他图层在所述当前节点的区域内，且所述其他图层不在所述当前节点的子节点的区域内，则将所述其他图层作为所述当前节点的子节点，所述当前节点的作为所述其他图层的父节点；

若所述其他图层在所述当前节点的区域内，且所述其他图层在当前节点的第一子节点的区域内，则将所述其他图层作为所述第一子节点的子节点，所述第一子节点作为所述其他图层的父节点；

当所述多个图层均确定了父节点和/或子节点后，所述层级树构建完成。

可选的，所述按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息的步骤，包括：

以所述层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行所述按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的多个行分组和多个列分组的步骤，直至候选分组包括的子节点的数量小于等于预设数量；

利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

可选的，所述根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组的步骤，包括：

对于每个节点：

若该节点对应的行分组的数量大于列分组的数量，则将该节点对应的行分组更新为该节点的候选分组；

若该节点对应的行分组的数量小于列分组的数量，则将该节点对应的列分组更新为该节点的候选分组；

若该节点对应的行分组的数量等于列分组的数量，则计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；

若行距离差小于列距离差，则将该节点对应的行分组更新为该节点的候选分组，其中，所述行距离差为最大第一距离与最小第一距离的差值，所述列距离差为最大第二距离与最小第二距离的差值；

若所述行距离差大于等于所述列距离差，则将该节点对应的列分组更新为该节点的候选分组。

可选的，所述方法还包括：

在得到所述用户界面代码后，将所述用户界面代码集成在代码工程中。

可选的，所述多个图层包括蒙版图层，所述蒙版图层为：所述设计文件中覆盖了蒙版的原始图层上非透明显示的区域。

在本申请实施的第二方面，还提供了一种用户界面代码生成装置，包括：

获取单元，用于获取所述用户界面的设计文件，所述设计文件包含有多个图层；

建立单元，用于建立所述多个图层的层级树，其中，所述层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

分组单元，用于按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

转换单元，用于按照预设的编码语法，将所述层级树中所有节点的布局描述信息转换为用户界面代码。

可选的，所述建立单元，具体用于：

针对所述多个图层中每一图层，将该图层作为层级树的当前节点；

若所述多个图层中其他图层在所述当前节点的区域内，且所述其他图层不在所述当前节点的子节点的区域内，则将所述其他图层作为所述当前节点的子节点，所述当前节点的作为所述其他图层的父节点；

若所述其他图层在所述当前节点的区域内，且所述其他图层在当前节点的第一子节点的区域内，则将所述其他图层作为所述第一子节点的子节点，所述第一子节点作为所述其他图层的父节点；

当所述多个图层均确定了父节点和/或子节点后，所述层级树构建完成。

可选的，所述分组单元，具体用于：

以所述层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行所述按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的多个行分组和多个列分组的步骤，直至候选分组包括的子节点的数量小于等于预设数量；

利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

可选的，所述分组单元，具体用于：

对于每个节点：

若该节点对应的行分组的数量大于列分组的数量，则将该节点对应的行分组更新为该节点的候选分组；

若该节点对应的行分组的数量小于列分组的数量，则将该节点对应的列分组更新为该节点的候选分组；

若该节点对应的行分组的数量等于列分组的数量，则计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；

若行距离差小于列距离差，则将该节点对应的行分组更新为该节点的候选分组，其中，所述行距离差为最大第一距离与最小第一距离的差值，所述列距离差为最大第二距离与最小第二距离的差值；

若所述行距离差大于等于所述列距离差，则将该节点对应的列分组更新为该节点的候选分组。

可选的，所述装置还包括：

集成单元，用于在得到所述用户界面代码后，将所述用户界面代码集成在代码工程中。

可选的，所述多个图层包括蒙版图层，所述蒙版图层为：所述设计文件中覆盖了蒙版的原始图层上非透明显示。

在本申请实施的第三方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；

所述存储器，用于存放计算机程序；

所述处理器，用于执行所述存储器上所存放的程序时，实现如上述第一方面所述的用户界面代码生成方法的步骤。

在本申请实施的第四方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一所述的用户界面代码生成方法步骤。

在本申请实施的第五方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面代码生成方法步骤。

本申请实施例提供的技术方案中，按照设计文件包含的多个图层所占的区域，建立这多个图层的层级树。按照行分组或列分组的方式，对该层级树上每个节点的一组子节点进行迭代分组，可将每个节点的子节点分为多组子节点。基于每个节点对应的多组子节点的划分情况，可得到每个节点的布局描述信息。进而，按照预设的编码语法，将每个节点的布局描述信息转换为UI代码。可见，本申请实施例中，对层级树中每个节点的子节点进行行分组或列分组，可以获得每个节点的布局描述信息，进而生成UI代码的过程，无需人工参见，减少了分析设计文件所占用的人力资源，提高了UI代码生成效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的应用程序的UI的一种示意图。

图2为本申请实施例提供的UI代码生成方法的第一种流程示意图。

图3为基于图1所示UI的层级树的一种示意图。

图4为本申请实施例提供的应用程序的UI的另一种示意图。

图5为本申请实施例提供的UI代码生成方法的第二种流程示意图。

图6为本申请实施例提供的UI的一种示意图。

图7为本申请实施例提供的UI的另一种示意图。

图8为本申请实施例提供的UI代码生成方法的第三种流程示意图。

图9为基于图4所示UI的图层分组关系的一种示意图。

图10为本申请实施例提供的UI代码生成方法的第四种流程示意图。

图11为本申请实施例提供的UI代码生成装置的一种结构示意图。

图12为本申请实施例提供的电子设备的一种结构示意图。

具体实施方式

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

应用程序的UI包括多个图层，如图1所示的UI。图1中矩形框表示图层，图1所示的UI包括图层1、位于图层1区域中图层2和图层3，位于图层2区域中的图层4。

UI设计是指对应用程序的人机交互、操作逻辑、界面美观的整体设计。为将设计的UI应用于各种电子设备上，需要将UI的设计文件转换为行列布局的UI代码。目前，UI代码均是手动生成的，即基于UI设计文件的图层信息手动撰写行列布局的UI代码。这种UI代码的生成方式，耗费人力资源巨大，且UI代码生成效率低。

为解决上述问题，本申请实施例提供了一种UI代码生成方法，如图2所示，图2为本申请实施例提供的UI代码生成方法的一种流程示意图，该方法包括如下步骤：

S201，获取用户界面的设计文件，设计文件包含有多个图层；

S202，建立多个图层的层级树，其中，层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

S203，按照行分组和/或列分组的方式，对层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

S204，按照预设的编码语法，将层级树中所有节点的布局描述信息转换为用户界面代码。

应用本申请实施例提供的UI代码生成方法，按照设计文件包含的多个图层所占的区域，建立这多个图层的层级树。按照行分组或列分组的方式，对该层级树上每个节点的一组子节点进行迭代分组，可将每个节点的子节点分为多组子节点。基于每个节点对应的多组子节点的划分情况，可得到每个节点的布局描述信息。进而，按照预设的编码语法，将每个节点的布局描述信息转换为UI代码。可见，本申请实施例中，对层级树中每个节点的子节点进行行分组或列分组，可以获得每个节点的布局描述信息，进而生成UI代码的过程，无需人工参与，减少了分析设计文件所占用的人力资源，提高了UI代码生成效率。

本申请实施例提供的UI代码生成方法，可以应用于台式计算机、便携式计算机或服务器等电子设备，对此不做限定。为便于理解，下面以电子设备为执行主体进行说明，并不起限定作用。

上述步骤S201中，电子设备获取UI的设计文件，设计文件包含有多个图层。

在本申请实施例中，设计文件可以为用户在电子设备上进行UI设计，并保存的文件。这种情况下，电子设备可以直接获取用户保存的文件，即UI的设计文件。

设计文件也可以为用户在其他电子设备上进行UI设计，并保存的文件。这种情况下，用户可以将在其他电子设备上设计并保存的文件输入该电子设备，进而电子设备获取到UI的设计文件。

另外，用户还可以将UI的设计文件存储在预设数据库中，该预设数据库用于UI的设计文件。电子设备可以从预设数据库中获取UI的设计文件。

本申请实施例中，电子设备还可以采用其他方式获取UI的设计文件，对此不做具体限定。

本申请实施例中，设计文件包含的多个图层可以包括蒙版图层，蒙版图层为：设计文件中覆盖了蒙版的原始图层上非透明显示的区域。例如，若一个图层上覆盖了蒙版，根据蒙版信息，如蒙版的宽、高、透明显示版块的位置和非透明显示版块的位置等信息，从该图层中截取非透明显示版块所覆盖的区域，作为蒙版图层。该蒙版图层为最终用于生成UI代码的图层，即参与后续步骤S202-204处理的图层。上述透明显示版块为使得图层透明显示的版块，非透明显示版块为为使得图层非透明显示的版块。

设计文件包含的多个图层还可以包括Symbol(符号)类型图层。Symbol类型图层中会与多个图层关联。若设计文件包含的多个图层中存在Symbol类型图层，则电子设备可以对Symbol类型图层进行解析，获得Symbol类型图层关联的多个图层。解析获得的这多个图层用于描述Symbol类型图层。

设计文件包含的多个图层还可以包括其他类型的图层，如文字图层、背景图层等，对此不进行限定。

上述步骤S202中，电子设备建立多个图层的层级树，其中，层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内。

本申请实施例中，每个图层在UI上占据相应的区域。电子设备解析设计文件包括的每个图层，获得每个图层的图层数据。其中，图层数据可以包括但不限于宽高、位置、类型和颜色等。电子设备基于解析得到的图层数据，可确定图层所占区域间的包含关系。以每个图层作为一个节点，电子设备基于图层所占区域间的包含关系，建立层级树。该层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内。

以图1所示的UI的设计文件为例，电子设备基于图层所占区域间的包含关系，建立层级树，如图3所示。图3中，每个圆圈表示一个节点，即图层，圆圈中的数字为相应的图层的编号。

上述步骤S203中，按照行分组和/或列分组的方式，对层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息。

在本申请实施例中，迭代分组的方式包括行分组和列分组。行分组为：将UI中位于同一行的图层划分为同一组。列分组为：将UI中位于同一列的图层划分为同一组。同一行的图层指的是在行方向上存在重叠区域的图层。同一列的图层指的是在列方向上存在重叠区域的图层。

例如，如图4所示的UI，矩形框表示图层。在图4所示的图层10中，一图层11为例，在图层11所在的行方向上，图层11、图层12和图层13存在重叠区域，因此，图层11、图层12和图层13为同一行的图层。另外，在图层11所在的列方向上，图层11、图层14和图层15存在重叠区域，因此，图层11、图层14和图层15为同一列的图层。

在得到层级树后，电子设备按照行分组和/或列分组的方式，对层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息。布局描述信息为采用DSL(Domain-Specific Language，领域特定语言)描述的信息。例如，每个节点的布局描述信息可以为：该节点包括几行子节点或几列子节点，每行子节点包括哪些子节点以，每列子节点包括哪些子节点，以及每个子节点的大小和位置等信息。

上述步骤S204中，按照预设的编码语法，将层级树中所有节点的布局描述信息转换为用户界面代码。

本申请实施例中，编码语法可以包括但不限于iOS(苹果公司开发的移动操作系统)、Android(安卓)和HTML(Hyper Text Markup Language，超文本标记语言)等编码语法。

电子设备中可以预先设定一种或多种编码语法，即预设的编码语法。电子设备按照预设的编码语法，对层级树中所有节点的布局描述信息进行转换，得到该节点对应的符合编码语法的UI代码。UI代码可以包含：UI中各个控件的初始化代码和布局代码等。控件可以包括文本框和图片框等。

基于图2，本申请实施例还提供了一种UI代码生成方法，如图5所示。该方法中，步骤S202可以细化为步骤S2021-S2024。

步骤S2021，针对多个图层中每一图层，将该图层作为层级树的当前节点；

步骤S2022，若多个图层中其他图层在当前节点的区域内，且其他图层不在当前节点的子节点的区域内，则将其他图层作为当前节点的子节点，当前节点的作为其他图层的父节点；

步骤S2023，若其他图层在当前节点的区域内，且其他图层在当前节点的第一子节点的区域内，则将其他图层作为第一子节点的子节点，第一子节点作为其他图层的父节点；

步骤S2024，判断多个图层是否均确定了父节点和/或子节点；若是，则执行步骤S203；若否，则返回执行步骤S2021。

本申请实施例提供的技术方案中，可以快速的实现层级树的构建，便于后续获取布局描述信息，提高了UI代码的生成效率。

上述步骤S2021中，设计文件中的每个图层均为层级树中的一个节点。对于层级树的根节点，需要确定该节点的子节点；对于层级树的最底层节点，需要确定该节点的父节点；对于层级树中其他层的节点，需要确定该节点的父节点和子节点。

针对设计文件包括的每个图层，电子设备可以将该图层作为层级树的当前节点，执行步骤S2022和S2023，以确定各个节点的子节点和父节点。

上述步骤S2022中，电子设备可以基于各个图层的图层数据，确定各个图层所占区域之间的包含关系，基于该包含关系，确定各个节点的子节点和父节点。

具体的，电子设备遍历上述多个图层中除当前节点外的所有图层。若多个图层中其他图层在当前节点的区域内，且其他图层不在当前节点的子节点的区域内，则将其他图层作为当前节点的子节点，当前节点的作为其他图层的父节点。

例如，如图6所示的UI，矩形框表示图层。以图层A1作为当前节点，图层B1为图层A1的子节点。对于图层M1，图层M1在图层A1的区域内，并且图层M1不在图层B1的区域内。因此，电子设备可将图层M1作为图层A1的子节点，将图层A1作为图层M1的父节点。

上述步骤S2023中，电子设备遍历上述多个图层中除当前节点外的所有图层。若遍历结果为：其他图层在当前节点的区域内，且其他图层在当前节点的一个子节点(例如第一子节点)的区域内，则将其他图层作为第一子节点的子节点，第一子节点作为其他图层的父节点。其中，第一子节点可以为当前节点的任一子节点，这里仅以第一子节点为例，并不起限定作用。

例如，如图7所示的UI，的UI，矩形框表示图层。以图层A2作为当前节点，图层B2为图层A2的子节点。对于图层M2，图层M2在图层A2的区域内，并且图层M2在图层B2的区域内。因此，电子设备将图层M2作为图层B2的子节点，将图层B2作为图层M2的父节点。

上述步骤S2024中，电子设备判断设计文件包括的多个图层是否均确定了父节点和/或子节点，即判断针对设计文件包括的每个图层是否均执行了上述步骤S2021-2023。

若多个图层均确定了父节点和/或子节点，即针对设计文件包括的每个图层均执行了上述步骤S2021-2023，则确定层级树建立完毕，电子设备执行步骤S203，以生成UI代码。

若存在图层未确定父节点和/或子节点，即针对某一图层未执行了上述步骤S2021-2023，则确定层级树未建立完毕，返回执行步骤S2021，循环执行步骤S2021-2024，直至层级树建立完毕。

在本申请的一个实施例中，电子设备还可以根据图层的设计顺序、以及图层所占的区域，构建层级树。

例如，电子设备将最先设计的一个图层作为层级树的根节点。将该根节点作为当前节点，电子设备遍历设计文件包括的除当前节点外的图层，根据图层所占区域之间的包含关系，确定当前节点的子节点。具体的确定子节点的方式，可参见上述步骤S2022。

电子设备在遍历设计文件包括的除当前节点外的图层后，当前节点的子节点确定完成。电子设备将当前节点的每个子节点分别更新为当前节点，重复执行遍历设计文件包括的除当前节点外的图层，根据图层所占区域之间的包含关系，确定当前节点的子节点的过程。直至无法当前节点不包括子节点为止。此时，层级树建立完成。

本申请实施例中，还可以采用其他方式建立层级树，对此不进行限定。

本申请实施例中，如上述步骤S203中的描述，行分组为：将UI中位于同一行的图层划分为同一组。列分组为：将UI中位于同一列的图层划分为同一组。同一行的图层指的是在行方向上存在重叠区域的图层。同一列的图层指的是在列方向上存在重叠区域的图层。

在建立层级树后，电子设备可以以每个节点的一组子节点为单位，随机地采用行分组和/或列分组的方式，对每个节点的一组子节点进行分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息。

为了进一步提高UI代码生成效率，基于图2，本申请实施例还提供了一种UI代码生成方法，如图8所示。该方法中，步骤S203可以细化为步骤S2031-S2034。

步骤S2031，以层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

步骤S2032，根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行步骤S2031，直至候选分组包括的子节点的数量小于等于预设数量；

步骤S2033，利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

本申请实施例提供的技术方案中，按照行分组和列分组的方式，使用简便的迭代分组方法，快速的实现对每个节点的子节点的分组，获得每个节点的布局描述信息，便于后续生成UI代码。进一步增加了UI代码生成的效率。

电子设备可以按照从层级树的根节点至最底层节点的顺序，逐一对每一层节点执行上述步骤S2031-S2033，即逐一对每一层节点的子节点进行迭代分组，得到每个节点的布局描述信息。

电子设备也可以并行地对层级树中的每个节点执行上述步骤S2031-S2033，即并行地对层级树中的每个节点的子节点进行迭代分组，得到每个节点的布局描述信息。对此不进行限定。

为便于理解，下面以层级树中的一个节点为例进行说明，并不起限定作用。

上述步骤S2031中，层级树中一个节点包括多个子节点，即该节点对应有一组子节点。电子设备以该节点的一组子节点作为该节点的候选分组。

电子设备按照行分组方式，对该节点的候选分组进行分组，得到该节点对应的行分组。

另外，电子设备按照列分组的方式，对该节点的候选分组进行分组，得到该节点对应的列分组。

这种情况下，电子设备得到了该节点对应的行分组和列分组。其中，行分组的数量可以为一个或多个，列分组的数量可以为一个或多个。

上述步骤S2032中，上述预设数量可以根据实际需求进行设定。例如，预设数量可以为1或2等。

电子设备在得到该节点对应的行分组和列分组之后，根据该节点对应的行分组的数量和列分组的数量，将该节点对应的行分组更新为该节点的候选分组，或者，将该节点对应的列分组更新为该节点的候选分组。

之后，电子设备重新执行步骤S2031，对按照行分组方式，对更新后的候选分组进行分组，得到该节点对应的行分组，并按照列分组的方式，对该节点的候选分组进行分组，得到该节点对应的列分组；根据此次分组得到的行分组的数量和列分组的数量，更新候选分组。如此重复执行上述步骤S2031-S2032，直至候选分组包括的子节点的数量小于等于预设数量。

上述步骤S2033中，在更新了候选分组后，电子设备利用更新该节点的候选分组时采用的分组方式，确定该节点的布局描述信息。例如，电子设备将该节点对应的行分组更新为该节点的候选分组，则利用该节点对应的行分组方式，确定该节点的布局描述信息。

在本申请的一个实施例中，对于每个节点，上述步骤S2033具体可以为：

电子设备比较该节点对应的行分组的数量和列分组的数量。

若比较结果为：该节点对应的行分组的数量大于列分组的数量，则电子设备可以将该节点对应的行分组更新为该节点的候选分组；

若比较结果为：该节点对应的行分组的数量小于列分组的数量，则电子设备可以将该节点对应的列分组更新为该节点的候选分组。

下面结合图4所示的UI为例进行说明。其中，预设数量为1。图4中，图层10包括的子节点有：图层11-16。电子设备将图层10包括的一组子节点(即图层11-16)作为候选分组。

电子设备按照行分组的方式，对图层11-16进行分组，得到图层10对应的行分组有：行分组11{图层11，图层12，图层13，图层14}，行分组12{图层15，图层16}。电子设备按照列分组的方式，对图层11-16进行分组，得到图层10对应的列分组有：列分组11{图层11，图层12，图层13，图层14，图层15，图层16}。电子设备根此处分组的行分组的数量(即2)和列分组的数量(即1)，2>1，可以将行分组更新为候选分组，即将行分组11和行分组12更新为候选分组。

此时，行分组11和行分组12包括的子节点的数量分别大于1。

因此，对于行分组11，电子设备按照行分组的方式，对行分组11包括的图层11-14进行分组，得到行分组有：行分组13{图层11，图层12，图层13，图层14}。电子设备按照列分组的方式，对图层11-14进行分组，得到列分组有：列分组12{图层11，图层12，图层14}，列分组13{图层13}。电子设备根据此处分组的行分组的数量(即1)和列分组的数量(即2)，2>1，可以将列分组更新为候选分组，即将列分组12和列分组13更新为候选分组。

此时，列分组12包括的子节点的数量大于1，列分组13包括的子节点的数量等于1。因此，对于列分组13，电子设备不再执行分组。

对于列分组12，电子设备按照行分组的方式，对列分组12包括的图层11、图层12和图层14进行分组，得到行分组有：行分组14{图层11，图层12}，行分组15{图层14}。电子设备按照列分组的方式，对图层11、图层12和图层14进行分组，得到列分组有：列分组4{图层11，图层12，图层14}。电子设备根据此处分组的行分组的数量(即2)和列分组的数量(即1)，2>1，可以将行分组更新为候选分组，即将行分组14和行分组15更新为候选分组。

此时，行分组14包括的子节点的数量大于1，行分组15包括的子节点的数量等于1。

因此，对于行分组15，电子设备不再执行分组。

对于行分组14，电子子设备按照行分组的方式，对列分组14包括的图层11和图层12进行分组，得到行分组有：行分组16{图层11，图层12}。电子设备按照列分组的方式，对图层11和图层12进行分组，得到列分组有：列分组15{图层11}，列分组16{图层12}。电子设备根据此处分组的行分组的数量(即1)和列分组的数量(即2)，2>1，可以将行分组更新为候选分组，即将列分组15和列分组16更新为候选分组。

此时，列分组15和列分组16包括的子节点的数量均等于1。因此，对于列分组15和列分组16，电子设备不再执行分组。

对于行分组12，电子设备按照行分组的方式，对行分组12包括的图层15和图层16进行分组，得到行分组有：行分组17{图层15，图层16}。电子设备按照列分组的方式，对图层15和图层16进行分组，得到列分组有：列分组17{图层15}，列分组18{图层16}。电子设备根据此处分组的行分组的数量(即1)和列分组的数量(即2)，2>1，可以将列分组更新为候选分组，即将列分组17和列分组18更新为候选分组。

此时，列分组17和列分组18包括的子节点的数量均等于1。因此，对于列分组17和列分组18，电子设备不再执行分组。

基于上述，电子设备对图层10包括的子节点进行迭代分组，得到多个分组，即行分组11{图层11，图层12，图层13，图层14}，行分组12{图层15，图层16}，列分组12{图层11，图层12，图层14}，列分组13{图层13}，行分组14{图层11，图层12}，行分组15{图层14}，列分组15{图层11}，列分组16{图层12}，列分组17{图层15}，列分组18{图层16}。具体的分组关系如图9所示。

综上，上述更新图层10的候选分组时采用的分组方式，电子设备可以确定图层10的布局描述信息，具体可以为：

图层10包括两行图层，一行图层有图层11-14，另一行图层有图层15-16；

图层11-14所在行包括两列图层，一列图层有图层11、12和14，另一列有图层13；

图层11、12和14所在列包括2行图层，一行图层有图层11和12，另一行图层有图层14；

图层11和12所在行包括两列图层，一列图层有图层11，另一列有图层12；

图层15-16所在行包括两列图层，一列图层有图层15，另一列有图层16。

本申请实施例中，节点的布局描述信息还可以以其他形式描述，对此不进行限定。

本申请实施例中，按照分组数量多的分组方式对子节点进行分组，可以有效加快迭代分组的收敛效率，进一步提高UI代码生成效率。

在本申请的一个实施例中，若该节点对应的行分组的数量和列分组的数量的比较结果为：该节点对应的行分组的数量等于列分组的数量，则电子设备可以计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；将最大第一距离与最小第一距离的差值作为行距离差，将最大第二距离与最小第二距离的差值作为于列距差离，比较行距离差和列距离差。

若行距离差小于列距离差，则电子设备可以将该节点对应的行分组更新为该节点的候选分组。若行距离差大于等于列距离差，则电子设备可以将该节点对应的列分组更新为该节点的候选分组。

本申请实施例中，第一距离可以理解为行间距，第二距离可以理解为列间距，最大第一距离与最小第一距离的差值作为行距离差，将最大第二距离与最小第二距离的差值作为于列距差离。电子设备按照值小的距离差对应的分组方式，对子节点进行分组，也就是，按照间距小的分组方式，对子节点进行分组。这样可以使得每个分组中包括的子节点分布较为均匀，可以有效简化每个分组的布局描述信息，便于UI代码的生成。

在本申请的一个实施例中，在得到UI代码后，电子设备可以将UI代码集成在代码工程中，以便供用户使用。

本申请实施例提供的技术方案中，用户只需要上传UI的设计文件，就可以获得设计文件中图层的布局描述信息，进而将布局描述信息转换为相应编码语法的UI代码，并将UI代码集成在代码工程中，供用户使用。这里，不需要人工分析UI设计文件的布局，手写UI代码，降低了人力成本，提高了UI代码的生成效率，提高了UI的迭代效率。

下面结合图10所示的UI代码生成方法的流程示意图，对本申请实施例提供的UI代码生成方法进行详细说明。图10中，UI代码生成方法可以包括如下步骤：

步骤S1001，UI的设计文件上传。

具体可以包括：电子设备获取用户上传的设计文件，该设计文件包含有多个图层。

步骤S1002，设计文件解析。

具体可以包括：电子设备对设计文件进行图层信息提取，对存在蒙版的图层进行处理，以及对Symbol图层进行解析等。

步骤S1003，布局描述信息生成。

具体可以包括：电子设备基于设计文件包括的图层建立层级树，基于层级树获得布局描述信息等。

步骤S1004，UI代码生成。

具体可以包括：电子设备按照预设的编码语法，将布局描述信息转换为UI代码。

步骤S1005，代码集成。

具体可以包括：电子设备通过下载UI代码，将UI代码集成到代码工程中，以供用户使用。

上述步骤S1001-S1005部分的描述相对简单，具体可参见上述图2-图9部分的描述，此处不再赘述。

与上述用户界面代码生成方法对应，本申请实施例还提供了一种用户界面代码生成装置，如图11所示，包括：

获取单元1101，用于获取用户界面的设计文件，设计文件包含有多个图层；

建立单元1102，用于建立多个图层的层级树，其中，层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

分组单元1103，用于按照行分组和/或列分组的方式，对层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

转换单元1104，用于按照预设的编码语法，将层级树中所有节点的布局描述信息转换为用户界面代码。

可选的，建立单元1102，具体可以用于：

针对多个图层中每一图层，将该图层作为层级树的当前节点；

若多个图层中其他图层在当前节点的区域内，且其他图层不在当前节点的子节点的区域内，则将其他图层作为当前节点的子节点，当前节点的作为其他图层的父节点；

若其他图层在当前节点的区域内，且其他图层在当前节点的第一子节点的区域内，则将其他图层作为第一子节点的子节点，第一子节点作为其他图层的父节点；

当多个图层均确定了父节点和/或子节点后，层级树构建完成。

可选的，分组单元1103，具体可以用于：

以层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的多个行分组和多个列分组的步骤，直至候选分组包括的子节点的数量小于等于预设数量；

利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

可选的，分组单元1103，具体可以用于：

对于每个节点：

若该节点对应的行分组的数量大于列分组的数量，则将该节点对应的行分组更新为该节点的候选分组；

若该节点对应的行分组的数量小于列分组的数量，则将该节点对应的列分组更新为该节点的候选分组；

若该节点对应的行分组的数量等于列分组的数量，则计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；

若行距离差小于列距离差，则将该节点对应的行分组更新为该节点的候选分组，其中，行距离差为最大第一距离与最小第一距离的差值，列距离差为最大第二距离与最小第二距离的差值；

若行距离差大于等于列距离差，则将该节点对应的列分组更新为该节点的候选分组。

可选的，上述一种用户界面代码生成装置还可以包括：

集成单元，用于在得到用户界面代码后，将用户界面代码集成在代码工程中。

可选的，多个图层包括蒙版图层，所述蒙版图层为：所述设计文件中覆盖了蒙版的原始图层上非透明显示。

本申请实施例提供的技术方案中，按照设计文件包含的多个图层所占的区域，建立这多个图层的层级树。按照行分组或列分组的方式，对该层级树上每个节点的一组子节点进行迭代分组，可将每个节点的子节点分为多组子节点。基于每个节点对应的多组子节点的划分情况，可得到每个节点的布局描述信息。进而，按照预设的编码语法，将每个节点的布局描述信息转换为UI代码。可见，本申请实施例中，对层级树中每个节点的子节点进行行分组或列分组，可以获得每个节点的布局描述信息，进而生成UI代码的过程，无需人工参见，减少了分析设计文件所占用的人力资源，提高了UI代码生成效率。

与上述用户界面代码生成方法对应，本申请实施例还提供了一种电子设备，如图12所示，包括处理器1201、通信接口1202、存储器1203和通信总线1204。其中，处理器1201、通信接口1202、存储器1203通过通信总线1204完成相互间的通信。

存储器1203，用于存放计算机程序；

处理器1201，用于执行存储器1203上所存放的程序时，实现上述图2-9所示实施例的任一方法步骤。

通信总线可以是外设部件互连标准(Peripheral Component Interconnect，简称PCI)总线或扩展工业标准结构(Extended Industry Standard Architecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processor，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本申请提供的又一实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述图2-9所示实施例的任一方法步骤。

在本申请提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述图2-9所示实施例的任一方法步骤。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

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

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、存储介质和计算机程序产品实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。

Claims (10)

1.一种用户界面代码生成方法，其特征在于，包括：

获取所述用户界面的设计文件，所述设计文件包含有多个图层；

建立所述多个图层的层级树，其中，所述层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

按照预设的编码语法，将所述层级树中所有节点的布局描述信息转换为用户界面代码；

所述建立所述多个图层的层级树的步骤，包括：

针对所述多个图层中每一图层，将该图层作为层级树的当前节点；

若所述多个图层中其他图层在所述当前节点的区域内，且所述其他图层不在所述当前节点的子节点的区域内，则将所述其他图层作为所述当前节点的子节点，所述当前节点的作为所述其他图层的父节点；

若所述其他图层在所述当前节点的区域内，且所述其他图层在当前节点的第一子节点的区域内，则将所述其他图层作为所述第一子节点的子节点，所述第一子节点作为所述其他图层的父节点；

当所述多个图层均确定了父节点和/或子节点后，所述层级树构建完成；

所述按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息的步骤，包括：

以所述层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行所述按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的多个行分组和多个列分组的步骤，直至候选分组包括的子节点的数量小于等于预设数量；

利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

2.根据权利要求1所述的方法，其特征在于，所述根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组的步骤，包括：

对于每个节点：

若该节点对应的行分组的数量大于列分组的数量，则将该节点对应的行分组更新为该节点的候选分组；

若该节点对应的行分组的数量小于列分组的数量，则将该节点对应的列分组更新为该节点的候选分组；

若该节点对应的行分组的数量等于列分组的数量，则计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；

若行距离差小于列距离差，则将该节点对应的行分组更新为该节点的候选分组，其中，所述行距离差为最大第一距离与最小第一距离的差值，所述列距离差为最大第二距离与最小第二距离的差值；

若所述行距离差大于等于所述列距离差，则将该节点对应的列分组更新为该节点的候选分组。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在得到所述用户界面代码后，将所述用户界面代码集成在代码工程中。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述多个图层包括蒙版图层，所述蒙版图层为：所述设计文件中覆盖了蒙版的原始图层上非透明显示的区域。

5.一种用户界面代码生成装置，其特征在于，包括：

获取单元，用于获取所述用户界面的设计文件，所述设计文件包含有多个图层；

建立单元，用于建立所述多个图层的层级树，其中，所述层级树中，每个子节点所表示的图层在该子节点的父节点所表示的图层的区域内；

分组单元，用于按照行分组和/或列分组的方式，对所述层级树上每个节点的一组子节点进行迭代分组，得到每个节点对应的多组子节点，以及每个节点的布局描述信息，每个节点的布局描述信息包括该节点对应的多组子节点的划分情况；

转换单元，用于按照预设的编码语法，将所述层级树中所有节点的布局描述信息转换为用户界面代码；

所述建立单元，具体用于：

针对所述多个图层中每一图层，将该图层作为层级树的当前节点；

若所述多个图层中其他图层在所述当前节点的区域内，且所述其他图层不在所述当前节点的子节点的区域内，则将所述其他图层作为所述当前节点的子节点，所述当前节点的作为所述其他图层的父节点；

若所述其他图层在所述当前节点的区域内，且所述其他图层在当前节点的第一子节点的区域内，则将所述其他图层作为所述第一子节点的子节点，所述第一子节点作为所述其他图层的父节点；

当所述多个图层均确定了父节点和/或子节点后，所述层级树构建完成；

所述分组单元，具体用于：

以所述层级树上每个节点的一组子节点作为该节点的候选分组，按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的行分组和列分组；

根据每个节点对应的行分组的数量和列分组的数量，将每个节点对应的行分组或列分组更新为该节点的候选分组，并重新执行所述按照行分组和列分组的方式，分别对每个节点的候选分组进行分组，得到每个节点对应的多个行分组和多个列分组的步骤，直至候选分组包括的子节点的数量小于等于预设数量；

利用更新每个节点的候选分组时采用的分组方式，确定每个节点的布局描述信息。

6.根据权利要求5所述的装置，其特征在于，所述分组单元，具体用于：

对于每个节点：

若该节点对应的行分组的数量大于列分组的数量，则将该节点对应的行分组更新为该节点的候选分组；

若该节点对应的行分组的数量小于列分组的数量，则将该节点对应的列分组更新为该节点的候选分组；

若该节点对应的行分组的数量等于列分组的数量，则计算该节点对应的每相邻两个行分组之间的第一距离，该节点对应的每相邻两个列分组之间的第二距离；

若行距离差小于列距离差，则将该节点对应的行分组更新为该节点的候选分组，其中，所述行距离差为最大第一距离与最小第一距离的差值，所述列距离差为最大第二距离与最小第二距离的差值；

若所述行距离差大于等于所述列距离差，则将该节点对应的列分组更新为该节点的候选分组。

7.根据权利要求5所述的装置，其特征在于，所述装置还包括：

集成单元，用于在得到所述用户界面代码后，将所述用户界面代码集成在代码工程中。

8.根据权利要求5-7任一项所述的装置，其特征在于，所述多个图层包括蒙版图层，所述蒙版图层为：所述设计文件中覆盖了蒙版的原始图层上非透明显示的区域。

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；

所述存储器，用于存放计算机程序；

所述处理器，用于执行所述存储器上所存放的程序时，实现权利要求1-4任一所述的方法步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-4任一所述的方法步骤。