CN114816409A - 界面生成方法、装置以及存储介质 - Google Patents

Abstract

本申请公开了一种界面生成方法、装置以及存储介质，涉及信息技术领域。其中，一种界面生成方法，包括：获取与待生成的目标界面对应的界面设计稿；通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及将存在关联关系的多个循环子节点进行布局，并生成目标界面。解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

Description

界面生成方法、装置以及存储介质

技术领域

本申请涉及信息技术领域，特别是涉及一种界面生成方法、装置以及存储介质。

背景技术

目前在现有的系统界面中会存在多个类似的组件，为了提高工作效率，减少不必要的人力成本，应运而生的是根据一个组件，利用智能生成代码的形式生成其他类似的组件。

但是现有技术中对于智能生成代码的方式，通常会利用组件的形状和样式属性，采用最小编辑距离，并结合生成对抗神经网络对循环体进行检测。具体地，首先需要用户自己标注循环，之后利用MED距离判断两节点相似程度，并利用生成对抗网络实现端到端的生成，并降低人为定义规则的影响。但传统方法忽视了节点内部的分布情况，并且简单的神经网络仅仅是在视觉层次上对循环体进行检测，而无法顾及到节点间的相互关系，从而造成生成的代码冗余量过多的问题，同时，节点与检测框之间的关系判定也会引入新的误差。另外，该类产品的用户可能并不了解前端代码，对代码中的循环定义并不清楚，因此人为标注可能是既费力又不准确的方法。

现有技术1（CN105786506A）：一种用户界面自动生成的系统及方法，其中系统包括：界面准备模块对用户界面效果图进行解析、命名和存储；资源配置模块将用户界面效果图转化为界面配置文件；界面生成模块，使用可视化界面自动生成模拟用户界面。本发明中方法包括：对用户界面效果图进行解析、命名和存储；将用户界面效果图转化为界面配置文件；使用可视化界面自动生成模拟用户界面。本发明的有益效果为：大大缩短程序和美术开发用户界面的研发时间；规范了用户界面开发流程和用户界面图片资源从而方便资源的有效管理;规范了用户界面代码从而方便减少他人调试交接的时间、进行代码框架的有效管理。

现有技术2（CN111652208A）：一种用户界面组件的识别方法、装置、电子设备及存储介质，所述方法包括：获取用户界面图像以及用户界面组件的标注信息，所述标注信息包括类别和坐标；对所述用户界面图像进行图像检测，并根据图像检测结果，对各用户界面组件的坐标进行校正和/或将多个所述用户界面组件进行融合；按类别对所述用户界面组件的坐标进行界面布局分析，根据界面布局分析结果对各类别的所述用户界面组件的坐标分别进行校正。通过本申请，解决了相关技术中用户界面组件自动检测算法的检测精度不高的技术问题，达到了对用户界面组件从局部至整体进行精准校正的目的，提高了用户界面组件的检测精度。

针对上述的现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题，目前尚未提出有效的解决方案。

发明内容

本申请的实施例提供了一种界面生成方法、装置以及存储介质，以至少解决现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

根据本申请实施例的一个方面，提供了一种界面生成方法，包括：获取与待生成的目标界面对应的界面设计稿；通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及将存在关联关系的多个循环子节点进行布局，并生成目标界面。

根据本申请实施例的另一个方面，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时由处理器执行以上任意一项所述的方法。

根据本申请实施例的另一个方面，还提供了一种界面生成装置，包括：第一获取模块，用于获取与待生成的目标界面对应的界面设计稿；第一筛选模块，用于通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；关系确定模块，用于通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及界面生成模块，用于将存在关联关系的多个循环子节点进行布局，并生成目标界面。

根据本申请实施例的另一个方面，还提供了一种界面生成装置，包括：处理器；以及存储器，与处理器连接，用于为处理器提供处理以下处理步骤的指令：获取与待生成的目标界面对应的界面设计稿；通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及将存在关联关系的多个循环子节点进行布局，并生成目标界面。

在本申请实施例中，计算设备将界面设计稿进行拆分，将每个组件作为一个节点，之后从多个节点中筛选出符合可生成代码的循环规律的多个循环子节点，并根据多个循环子节点之间的关联关系，对其中的一个或多个循环子节点进行布局，之后生成目标界面。从而本技术方案除了在视觉层次上对循环体进行检测外，还会顾及到节点间的相互关系，从而在生成代码时，可以根据节点间的关联关系，清晰明了地得到节点内部的分布情况，准确找到需要循环的端点，避免了代码冗余量过多的问题，并且也不需要通过人为标注的方式得到循环的端点。从而节省了人力物力，精简了代码量，提高了界面生成效率。进而解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是用于实现根据本申请实施例1所述的方法的计算设备的硬件结构框图；

图2是根据本申请实施例1的第一个方面所述的界面生成方法的流程示意图；

图3是根据本申请实施例1的第一个方面所述的界面设计稿的示意图；

图4是根据本申请实施例1的第一个方面所述的界面设计稿的节点属性值的示意图；

图5是根据本申请实施例1的第一个方面所述的界面设计稿的节点树状图的示意图；

图6是根据本申请实施例1的第一个方面所述的目标界面的示意图；

图7是根据本申请实施例2所述的界面生成装置的示意图；以及

图8是根据本申请实施例3所述的界面生成装置的示意图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本实施例，提供了一种界面生成方法的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本实施例所提供的方法实施例可以在移动终端、计算机终端、服务器或者类似的计算设备中执行。图1示出了一种用于实现界面生成方法的计算设备的硬件结构框图。如图1所示，计算设备可以包括一个或多个处理器（处理器可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置）、用于存储数据的存储器、以及用于通信功能的传输装置。除此以外，还可以包括：显示器、输入/输出接口（I/O接口）、通用串行总线（USB）端口（可以作为I/O接口的端口中的一个端口被包括）、网络接口、电源和/或相机。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，计算设备还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

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

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

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

显示器可以例如触摸屏式的液晶显示器（LCD），该液晶显示器可使得用户能够与计算设备的用户界面进行交互。

此处需要说明的是，在一些可选实施例中，上述图1所示的计算设备可以包括硬件元件（包括电路）、软件元件（包括存储在计算机可读介质上的计算机代码）、或硬件元件和软件元件两者的结合。应当指出的是，图1仅为特定具体实例的一个实例，并且旨在示出可存在于上述计算设备中的部件的类型。

在上述运行环境下，根据本实施例的第一个方面，提供了一种界面生成方法。图2示出了该方法的流程示意图，参考图2所示，该方法包括：

S202：获取与待生成的目标界面对应的界面设计稿；

S204：通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；

S206：通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及

S208：将存在关联关系的多个循环子节点进行布局，并生成目标界面。

具体地，在开发人员开发系统界面之前，需要设计师画出界面设计稿。计算设备获取与待生成的目标界面对应的界面设计稿，之后对该界面设计稿进行检测，将界面设计稿中的每个元素确定为一个节点。之后计算设备根据界面设计稿中所有节点的位置和层级，确定各个节点的位置属性。参考图3所示，图3为进行检测后的界面设计稿。其中该界面设计稿中的元素共有11个组件，分别为：组件0~组件10。每个组件对应一个节点，分别为：节点0~节点10。节点0的上一层级为节点1~节点3，节点1~节点3在同一层级。计算设备根据节点0~节点10的层级确定各个节点的索引以及位置属性的属性值（对应于图4中的zIndex值）。

参考图4所示，例如，节点0~节点108的索引分别为zIndex0~zIndex10。节点0在最低层级，计算设备将节点0的zIndex值设置为0，节点1~节点3在节点0的上一层级，同时节点1~节点3在同一层级，因此节点1~节点3的zIndex的值都为1。以此类推，节点4为的zIndex值为2，节点5~节点10的zIndex值为3。参考图5所示，计算设备根据各个节点的位置，建立节点之间的从属关系。

计算设备基于预设的第一判断规则，利用节点的zIndex值对界面设计稿中的节点中进行判断，将循环子节点筛选出来。参考图3所示，计算设备得到的循环子节点为节点0~节点3以及节点5~节点10，节点4不符合第一判断规则，从而将其滤除。其中节点0~节点3以及节点5~节点10为层层嵌套关系，符合一定的规律。

进一步地，计算设备将节点0~节点3以及节点5~节点10（即，循环子节点）利用第二判断规则进行比较，得到节点0~节点3以及节点5~节点10（即，循环子节点）之间的关联关系。例如，计算设备利用第二判断规则，得到的判断结果为节点0包含有节点1~节点3，因此节点0和节点1~节点3存在从属关系。

进一步地，计算设备根据布局相似的循环子节点，生成前端代码。参考图3所示，组件2、组件7、组件8与组件3、组价9、组件10是相同的两个组件，因此，在生成界面时，组件2、组件7和组件8为一个循环体，即根据组件2、组件7和组件8的代码生成组件3、组价9和组件10的代码。

又例如，参考图6所示，当计算设备要生成如图6的系统界面时，将组件a作为循环体，根据组件a的代码生成组件b~组件h的代码。从而在目标界面中进行布局，生成目标界面。

正如背景技术中所述的，现有技术中对于智能生成代码的方式，通常会利用组件的形状和样式属性，采用最小编辑距离，并结合生成对抗神经网络对循环体进行检测。具体地，首先需要用户自己标注循环，之后利用MED距离判断两节点相似程度，并利用生成对抗网络实现端到端的生成，并降低人为定义规则的影响。但传统方法忽视了节点内部的分布情况，并且简单的神经网络仅仅是在视觉层次上对循环体进行检测，而无法顾及到节点间的相互关系，从而造成生成的代码冗余量过多的问题，同时，节点与检测框之间的关系判定也会引入新的误差。另外，该类产品的用户可能并不了解前端代码，对代码中的循环定义并不清楚，因此人为标注可能是既费力又不准确的方法。

针对以上所述的技术问题，通过本申请实施例的技术方案，计算设备将界面设计稿进行拆分，将每个组件作为一个节点，之后从多个节点中筛选出符合可生成代码的循环规律的多个循环子节点，并根据多个循环子节点之间的关联关系，对其中的一个或多个循环子节点进行布局，之后生成目标界面。从而本技术方案除了在视觉层次上对循环体进行检测外，还会顾及到节点间的相互关系，从而在生成代码时，可以根据节点间的关联关系，清晰明了地得到节点内部的分布情况，准确找到需要循环的端点，避免了代码冗余量过多的问题，并且也不需要通过人为标注的方式得到循环的端点。从而节省了人力物力，精简了代码量，提高了界面生成效率。进而解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

可选地，通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点的操作，包括：根据界面设计稿中的第一节点和第二节点的层级，生成第一节点和第二节点的位置属性的属性值，其中第一节点层级高于第二节点，并且第一节点的位置属性的属性值大于第二节点的位置属性的属性值；以及在第一节点属于第二节点并且第一节点与第二节点之间不存在其他节点的情况下，将第一节点确定为循环子节点，其中第一节点和其他循环子节点不存在交集。

具体地，节点0（即，第二节点）的层级低于节点1（即，第一节点）的层级。计算设备根据节点0（即，第二节点）和节点1（即，第一节点）的层级，确定节点0（即，第二节点）的zIndex值（即，位置属性的属性值）为0，节点1（即，第一节点）的zIndex值（即，位置属性的属性值）为1。

计算设备利用第一判断规则在界面设计稿中的所有节点中筛选循环子节点，其中第一判断规则可用公式表示为：

（1）

其中，v为第一节点，node为第二节点，zIndex_v为第一节点的zIndex值，zIndex_node为第二节点的zIndex值，pos表示节点的表示框（例如，可以用 x,y,w,h表示）。

（2）

其中，v’为第一节点和第二节点之间的其他节点。

即，节点v和节点node直接存在节点v’，并且节点v和v’存在交集。

具体地，计算设备将父节点，即节点0（即，第二节点）和它的子节点，即节点1（即，第一节点）通过公式（1）进行比较。从而计算设备判定节点1（即，第一节点）的层级高于节点0（即，第二节点），节点1（即，第一节点）的zIndex值为1，节点0（即，第二节点）为0，则节点1（即，第一节点）的zIndex值大于节点0（即，第二节点）的zIndex值。之后计算设备确定节点1（即，第一节点）和节点0（即，第二节点）在界面设计稿中的坐标（即，x和y）、长度和宽度，从而判断得到节点1（即，第一节点）属于节点0（即，第二节点）。

进一步地，计算设备通过公式（2）将节点1（即，第一节点）和节点0（即，第二节点）进行比对，计算设备判定节点1（即，第一节点）属于节点0（即，第二节点），并且节点1（即，第一节点）和节点0（即，第二节点）之间不存在其他节点，以及与节点1（即，第一节点）存在交集的节点为节点4，但是由于节点4虽然属于它的父节点，即节点0，但是在节点4与节点0之间还存在其他的节点，因此节点4不属于循环子节点。因此计算设备判定与节点1（即，第一节点）虽然与节点4存在交集，但由于节点4不属于循环子节点，因此节点1（即，第一节点）为循环子节点。同理，计算设备判断其他子节点是否为循环子节点的方式如上面所述，因此计算设备判断在节点0~节点10中，节点4不是循环子节点，因此将其滤除，从而得到的循环子节点为节点0~节点3以及节点5~节点10。

从而本技术方案通过根据界面设计稿中节点的层级确定属性值，并根据节点之间的包含关系，将界面设计稿中的节点进行筛选，从而可以快速地从节点中确定循环子节点。从而提高了之后确定循环子节点之间的关联关系的效率。

可选地，第二判断规则包括粗判断规则和细判断规则，其中通过预设的第二判断规则确定多个循环子节点之间的关联关系的操作，包括：通过粗判断规则计算多个循环子节点之间的相似度，并根据相似度得到多个循环子节点之间的第一关联关系；以及通过细判断规则生成与多个循环子节点对应的关系树，并根据关系树确定多个循环子节点之间的第二关联关系，其中第二关联关系用于指示多个循环子节点之间的从属关系。

具体地，计算设备通过粗判断规则计算多个循环子节点之间的相似度，其中计算设备相似度所涉及的循环子节点为同一层级的循环子节点，并且进行比对的循环子节点拥有同一个父节点。即计算父节点下的同一层级的循环子节点之间的相似度。例如，计算设备将节点1和节点2进行比对，计算节点1和节点2的相似度。其中计算的相似度包括长度、宽度、层级以及面积分布。

进一步地，计算设备基于预设的网络表示学习模型生成与多个循环子节点对应的关系树，之后根据关系树体现的多个循环子节点之间的关联关系，确定背景节点和组件节点。其中网络表示学习模型包括但不限于GraphGAN、Faster-rcnn和Yolo v4。则计算设备会把背景节点和与其有从属关系的组件节点进行合并，从而过滤掉背景节点这样的非必要节点。

之后计算设备依照上述方式，根据粗判断规则和细判断规则确定下一层级的循环子节点之间的关联关系，直到将所有循环子节点关联完成。

从而本技术方案先通过计算相似度的粗判断规则，得到循环子节点之间的大致的循环结构，再通过建立关系树并滤除非必要节点这样的细判断规则，将循环子节点之间的循环结构进行细致划分，从而有效地将多个循环子节点进行关联，根据清楚明了的循环结构，生成界面组件代码，减少了因循环结构不清晰带来的代码冗余，提高了界面生成效率。

可选地，通过粗判断规则计算多个循环子节点之间的相似度，并根据相似度得到多个循环子节点之间的第一关联关系的操作，包括：根据多个循环子节点的长度、宽度以及坐标，计算多个循环子节点之间的第一相似度；根据多个循环子节点的编辑距离，计算多个循环子节点之间的第二相似度；根据多个循环子节点的面积分布情况，计算多个循环子节点的第三相似度；以及根据第一相似度、第二相似度以及第三相似度，得到循环子节点之间的第一关联关系。

具体地，计算设备通过粗判断规则计算多个循环子节点之间的相似度L所使用的计算公式如下：

L=L_pos+L_MED+L_JS

其中，L_pos为两个循环子节点之间的长度、宽度以及坐标相似度；L_MED为两个循环子节点之间的最小编辑距离的相似度；L_JS为两个循环子节点之间的面积分布相似度。

例如，节点1和节点2为同一层级的循环子节点，计算设备将节点1和节点2进行比对，计算两个节点之间的相似度L。则计算设备首先分别获取节点1和节点2的长度、宽度和坐标（x和y），之后将节点1的长度、宽度和坐标（x和y）与节点2的长度、宽度和坐标（x和y）进行比较，从而得到相似度L_pos（即，第一相似度）。

之后计算设备分别获取节点1和节点2，之后将节点1和节点2根据其与父节点从属关系进行比较。例如，节点1的父节点为节点0，节点2的父节点也为节点0，则节点1被编辑的步骤为0，可得到节点0。其中编辑操作包括删除、替换、增加。从而计算设备得到节点1和节点2的最小编辑距离，根据最小编辑距离得到节点1和节点2之间的相似度L_MED（即，第二相似度）。

之后计算设备分别获取节点1和节点2的子节点所占面积，即获取节点1的子节点，即节点5和节点6的总面积。之后计算设备获取节点2的子节点，即节点7和节点8的总面积，之后计算设备将节点5和节点6的总面积与节点7和节点8的总面积进行比较，计算JS距离，从而得到相似度L_JS（即，第三相似度）。

进一步地，计算设备根据相似度L_pos（即，第一相似度），相似度L_MED（即，第二相似度）以及相似度L_JS（即，第三相似度），计算节点1和节点2相似度L，从而根据相似度L得到节点1和节点2之间的相似关系（即，第一关联关系）。

同理，其他同一层级的循环子节点依照上述方式进行相似度计算，例如，节点5、节点7以及节点9两两之间的相似度。此处不再赘述。

从而本技术方案通过比较同一层级的循环子节点之间的长宽、距离和面积等特征的相似度，从而判断多个循环子节点之间是否相似，快速得到多个循环子节点的循环结构。

可选地，通过细判断规则生成与多个循环子节点对应的关系树，并根据关系树确定多个循环子节点之间的第二关联关系的操作，包括：利用组件识别网络提取循环子节点的特征，并基于循环子节点的位置属性根据循环子节点的特征生成第一关系树，其中第一关系树用于指示循环子节点之间的从属关系；根据第一关系树中的循环子节点的关系，将非必要节点滤除，生成第二关系树；以及根据第二关系树确定循环子节点之间的第二关联关系。

具体地，计算设备利用网络表示学习模型中的组件识别网络提取所有循环子节点的特征。之后根据循环子节点的特征以及利用位置属性得到的循环子节点之间的从属关系，生成循环子节点之间的关系树（即，第一关系树），其中第一关系树中连接每个循环子节点的边存在包含关系。

进一步地，计算设备根据第一关系树对每个循环子节点进行检测，从循环子节点中将背景节点筛选出来，其中背景节点可能是由多个图片组成的无意义的节点，并且背景节点为非必要节点。参考图6所示，图中的多个相同轮廓的组件中，圆角正方形的组件为一个节点，但是其上的图案为另一个节点，计算设备则会将该图案对应的节点判定为背景节点，之后将该背景节点与该背景节点下的节点（即，圆角正方形的组件）进行合并，从而成为一个节点。依照上述方式，计算设备将所有非必要节点滤除后，得到第二关系树，其中第二关系树中的所有树节点为必要节点。

进一步地，计算设备根据第二关系树上的节点之间的连接关系，得到循环子节点之间的第二关联关系。其中第二关联关系为除了非必要节点的循环子节点之间的从属关系。

此外，参考图6所示，计算设备通过粗判断规则生成的循环结构会忽略组件g和组件h。由于计算设备在根据细判断规则对组件进行检测时，会检测组件的长宽属性值，因此在细判断规则中，计算设备会根据组件g和组件h的长宽属性值判断其是否为背景节点。从而计算设备对组件g和组件h进行判断后，得到组件g和组件h并不是背景节点，因此组件g和组件h虽然没有完整地显示，但是也并不会被滤除。

从而本技术方案通过对背景节点这样的非必要节点进行滤除，可以对循环子节点有一个详尽的筛选。从而可以避免非必要节点加入循环布局中，提高了代码生成的效率，减少了冗余。

此外，参考图1所示，根据本实施例的第二个方面，提供了一种存储介质。所述存储介质包括存储的程序，其中，在所述程序运行时由处理器执行以上任意一项所述的方法。

从而根据本实施例，计算设备将界面设计稿进行拆分，将每个组件作为一个节点，之后从多个节点中筛选出符合可生成代码的循环规律的多个循环子节点，并根据多个循环子节点之间的关联关系，对其中的一个或多个循环子节点进行布局，之后生成目标界面。从而本技术方案除了在视觉层次上对循环体进行检测外，还会顾及到节点间的相互关系，从而在生成代码时，可以根据节点间的关联关系，清晰明了地得到节点内部的分布情况，准确找到需要循环的端点，避免了代码冗余量过多的问题，并且也不需要通过人为标注的方式得到循环的端点。从而节省了人力物力，精简了代码量，提高了界面生成效率。进而解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，或者网络设备等）执行本发明各个实施例所述的方法。

实施例2

图7示出了根据本实施例所述的界面生成装置700，该装置700与根据实施例1的第一个方面所述的方法相对应。参考图7所示，该装置700包括：第一获取模块710，用于获取与待生成的目标界面对应的界面设计稿；第一筛选模块720，用于通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；关系确定模块730，用于通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及界面生成模块740，用于将存在关联关系的多个循环子节点进行布局，并生成目标界面。

可选地，第一筛选模块720，包括：第一生成子模块，用于根据界面设计稿中的第一节点和第二节点的层级，生成第一节点和第二节点的位置属性的属性值，其中第一节点层级高于第二节点，并且第一节点的位置属性的属性值大于第二节点的位置属性的属性值；以及第一确定子模块，用于在第一节点属于第二节点并且第一节点与第二节点之间不存在其他节点的情况下，将第一节点确定为循环子节点，其中第一节点和其他循环子节点不存在交集。

可选地，关系确定模块730，包括：第二确定子模块，用于通过粗判断规则计算多个循环子节点之间的相似度，并根据相似度得到多个循环子节点之间的第一关联关系；以及第三确定子模块，用于通过细判断规则生成与多个循环子节点对应的关系树，并根据关系树确定多个循环子节点之间的第二关联关系，其中第二关联关系用于指示多个循环子节点之间的从属关系。

可选地，第二确定子模块，包括：第一计算单元，用于根据多个循环子节点的长度、宽度以及坐标，计算多个循环子节点之间的第一相似度；第二计算单元，用于根据多个循环子节点的编辑距离，计算多个循环子节点之间的第二相似度；第三计算单元，用于根据多个循环子节点的面积分布情况，计算多个循环子节点的第三相似度；以及第一确定单元，用于根据第一相似度、第二相似度以及第三相似度，得到循环子节点之间的第一关联关系。

可选地，第三确定子模块，包括：第一生成单元，用于利用组件识别网络提取循环子节点的特征，并基于循环子节点的位置属性根据循环子节点的特征生成第一关系树，其中第一关系树用于指示循环子节点之间的从属关系；第二生成单元，用于根据第一关系树中的循环子节点的关系，将非必要节点滤除，生成第二关系树；以及第二确定单元，用于根据第二关系树确定循环子节点之间的第二关联关系。

从而根据本实施例，计算设备将界面设计稿进行拆分，将每个组件作为一个节点，之后从多个节点中筛选出符合可生成代码的循环规律的多个循环子节点，并根据多个循环子节点之间的关联关系，对其中的一个或多个循环子节点进行布局，之后生成目标界面。从而本技术方案除了在视觉层次上对循环体进行检测外，还会顾及到节点间的相互关系，从而在生成代码时，可以根据节点间的关联关系，清晰明了地得到节点内部的分布情况，准确找到需要循环的端点，避免了代码冗余量过多的问题，并且也不需要通过人为标注的方式得到循环的端点。从而节省了人力物力，精简了代码量，提高了界面生成效率。进而解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

实施例3

图8示出了根据本实施例所述的界面生成装置800，该装置800与根据实施例1的第一个方面所述的方法相对应。参考图8所示，该装置800包括：处理器810；以及存储器820，与处理器810连接，用于为处理器810提供处理以下处理步骤的指令：获取与待生成的目标界面对应的界面设计稿；通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中多个循环子节点为界面设计稿中的符合排列规则的元素；通过预设的第二判断规则确定多个循环子节点之间的关联关系；以及将存在关联关系的多个循环子节点进行布局，并生成目标界面。

可选地，通过预设的第一判断规则根据界面设计稿中的节点的位置属性，筛选得到多个循环子节点的操作，包括：根据界面设计稿中的第一节点和第二节点的层级，生成第一节点和第二节点的位置属性的属性值，其中第一节点层级高于第二节点，并且第一节点的位置属性的属性值大于第二节点的位置属性的属性值；以及在第一节点属于第二节点并且第一节点与第二节点之间不存在其他节点的情况下，将第一节点确定为循环子节点，其中第一节点和其他循环子节点不存在交集。

可选地，第二判断规则包括粗判断规则和细判断规则，其中通过预设的第二判断规则确定多个循环子节点之间的关联关系的操作，包括：通过粗判断规则计算多个循环子节点之间的相似度，并根据相似度得到多个循环子节点之间的第一关联关系；以及通过细判断规则生成与多个循环子节点对应的关系树，并根据关系树确定多个循环子节点之间的第二关联关系，其中第二关联关系用于指示多个循环子节点之间的从属关系。

可选地，通过粗判断规则计算多个循环子节点之间的相似度，并根据相似度得到多个循环子节点之间的第一关联关系的操作，包括：根据多个循环子节点的长度、宽度以及坐标，计算多个循环子节点之间的第一相似度；根据多个循环子节点的编辑距离，计算多个循环子节点之间的第二相似度；根据多个循环子节点的面积分布情况，计算多个循环子节点的第三相似度；以及根据第一相似度、第二相似度以及第三相似度，得到循环子节点之间的第一关联关系。

可选地，通过细判断规则生成与多个循环子节点对应的关系树，并根据关系树确定多个循环子节点之间的第二关联关系的操作，包括：利用组件识别网络提取循环子节点的特征，并基于循环子节点的位置属性根据循环子节点的特征生成第一关系树，其中第一关系树用于指示循环子节点之间的从属关系；根据第一关系树中的循环子节点的关系，将非必要节点滤除，生成第二关系树；以及根据第二关系树确定循环子节点之间的第二关联关系。

从而根据本实施例，计算设备将界面设计稿进行拆分，将每个组件作为一个节点，之后从多个节点中筛选出符合可生成代码的循环规律的多个循环子节点，并根据多个循环子节点之间的关联关系，对其中的一个或多个循环子节点进行布局，之后生成目标界面。从而本技术方案除了在视觉层次上对循环体进行检测外，还会顾及到节点间的相互关系，从而在生成代码时，可以根据节点间的关联关系，清晰明了地得到节点内部的分布情况，准确找到需要循环的端点，避免了代码冗余量过多的问题，并且也不需要通过人为标注的方式得到循环的端点。从而节省了人力物力，精简了代码量，提高了界面生成效率。进而解决了现有技术中存在的在智能生成组件代码时，人工标注准确率低以及代码生成冗余量多的技术问题。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可为个人计算机、服务器或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

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

获取与待生成的目标界面对应的界面设计稿；

通过预设的第一判断规则根据所述界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中所述多个循环子节点为所述界面设计稿中的符合排列规则的元素；

通过预设的第二判断规则确定所述多个循环子节点之间的关联关系；以及

将存在关联关系的所述多个循环子节点进行布局，并生成所述目标界面。

2.根据权利要求1所述的方法，其特征在于，通过预设的第一判断规则根据所述界面设计稿中的节点的位置属性，筛选得到多个循环子节点的操作，包括：

根据所述界面设计稿中的第一节点和第二节点的层级，生成所述第一节点和所述第二节点的位置属性的属性值，其中所述第一节点层级高于所述第二节点，并且所述第一节点的位置属性的属性值大于所述第二节点的位置属性的属性值；以及

在所述第一节点属于所述第二节点并且所述第一节点与所述第二节点之间不存在其他节点的情况下，将所述第一节点确定为所述循环子节点，其中所述第一节点和其他循环子节点不存在交集。

3.根据权利要求1所述的方法，其特征在于，所述第二判断规则包括粗判断规则和细判断规则，其中通过预设的第二判断规则确定所述多个循环子节点之间的关联关系的操作，包括：

通过所述粗判断规则计算所述多个循环子节点之间的相似度，并根据所述相似度得到所述多个循环子节点之间的第一关联关系；以及

通过所述细判断规则生成与所述多个循环子节点对应的关系树，并根据所述关系树确定所述多个循环子节点之间的第二关联关系，其中所述第二关联关系用于指示所述多个循环子节点之间的从属关系。

4.根据权利要求3所述的方法，其特征在于，通过所述粗判断规则计算所述多个循环子节点之间的相似度，并根据所述相似度得到所述多个循环子节点之间的第一关联关系的操作，包括：

根据所述多个循环子节点的长度、宽度以及坐标，计算所述多个循环子节点之间的第一相似度；

根据所述多个循环子节点的编辑距离，计算所述多个循环子节点之间的第二相似度；

根据所述多个循环子节点的面积分布情况，计算所述多个循环子节点的第三相似度；以及

根据所述第一相似度、所述第二相似度以及所述第三相似度，得到所述循环子节点之间的第一关联关系。

5.根据权利要求3所述的方法，其特征在于，通过所述细判断规则生成与所述多个循环子节点对应的关系树，并根据所述关系树确定所述多个循环子节点之间的第二关联关系的操作，包括：

利用组件识别网络提取所述循环子节点的特征，并基于所述循环子节点的位置属性根据所述循环子节点的特征生成第一关系树，其中所述第一关系树用于指示所述循环子节点之间的从属关系；

根据所述第一关系树中的循环子节点的关系，将非必要节点滤除，生成第二关系树；以及

根据所述第二关系树确定所述循环子节点之间的第二关联关系。

6.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时由处理器执行权利要求1至5中任意一项所述的方法。

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

第一获取模块，用于获取与待生成的目标界面对应的界面设计稿；

第一筛选模块，用于通过预设的第一判断规则根据所述界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中所述多个循环子节点为所述界面设计稿中的符合排列规则的元素；

关系确定模块，用于通过预设的第二判断规则确定所述多个循环子节点之间的关联关系；以及

界面生成模块，用于将存在关联关系的所述多个循环子节点进行布局，并生成所述目标界面。

8.根据权利要求7所述的装置，其特征在于，通过预设的第一判断规则根据所述界面设计稿中的节点的位置属性，筛选得到多个循环子节点的操作，包括：

第一生成子模块，用于根据所述界面设计稿中的第一节点和第二节点的层级，生成所述第一节点和所述第二节点的位置属性的属性值，其中所述第一节点层级高于所述第二节点，并且所述第一节点的位置属性的属性值大于所述第二节点的位置属性的属性值；以及

第一确定子模块，用于在所述第一节点属于所述第二节点并且所述第一节点与所述第二节点之间不存在其他节点的情况下，将所述第一节点确定为所述循环子节点，其中所述第一节点和其他循环子节点不存在交集。

9.根据权利要求7所述的装置，其特征在于，所述第二判断规则包括粗判断规则和细判断规则，其中通过预设的第二判断规则确定所述多个循环子节点之间的关联关系的操作，包括：

第二确定子模块，用于通过所述粗判断规则计算所述多个循环子节点之间的相似度，并根据所述相似度得到所述多个循环子节点之间的第一关联关系；以及

第三确定子模块，用于通过所述细判断规则生成与所述多个循环子节点对应的关系树，并根据所述关系树确定所述多个循环子节点之间的第二关联关系，其中所述第二关联关系用于指示所述多个循环子节点之间的从属关系。

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

处理器；以及

存储器，与所述处理器连接，用于为所述处理器提供处理以下处理步骤的指令：

获取与待生成的目标界面对应的界面设计稿；

通过预设的第一判断规则根据所述界面设计稿中的节点的位置属性，筛选得到多个循环子节点，其中所述多个循环子节点为所述界面设计稿中的符合排列规则的元素；

通过预设的第二判断规则确定所述多个循环子节点之间的关联关系；以及

将存在关联关系的所述多个循环子节点进行布局，并生成所述目标界面。

Images