CN112799669A

CN112799669A - 应用程序界面布局代码的生成方法、装置及电子设备

Info

Publication number: CN112799669A
Application number: CN202110368620.0A
Authority: CN
Inventors: 钟辉; 韩潇雨
Original assignee: Wuhan Yuanguang Technology Co ltd
Current assignee: Wuhan Yuanguang Technology Co ltd
Priority date: 2021-04-06
Filing date: 2021-04-06
Publication date: 2021-05-14
Anticipated expiration: 2041-04-06
Also published as: CN112799669B

Abstract

本发明公开了一种应用程序界面布局代码的生成方法，包括：从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；根据控件的第一位置属性信息，确定控件的第一树形结构；根据第一树形结构，确定控件的第二树形结构；其中，第二树形结构包括控件和布局器，布局器位于第二树形结构的根节点或内部节点，控件位于第二树形结构中的叶子节点；根据第二树形结构，将控件的第一位置属性信息转换为相对于布局器的第二位置属性信息；遍历第二树形结构中的叶子节点，根据控件的第二位置属性信息，生成待开发应用程序的界面布局代码；通过将UI设计图的控件信息自动转化为界面布局代码，显著提高了开发效率。

Description

应用程序界面布局代码的生成方法、装置及电子设备

技术领域

本申请涉及软件开发技术领域，尤其涉及一种应用程序界面布局代码的生成方法、装置及电子设备。

背景技术

在应用程序的开发过程中，前端开发人员需要根据UI设计师提供的高保真程序用户界面UI设计图编写代码。在这个过程中，目前主要通过人工分析UI设计图中包括的各类控件的布局信息，如控件排列、坐标、对齐方式、分组信息等，然后根据控件的布局信息，通过人力劳动将UI设计图中的控件布局信息转换为前端的应用程序界面布局的代码描述。由于UI设计图中控件布局的多样性和随机性，以及应用程序开发需要面向多平台、适配多种分配率的电子设备的需求，故而对于每次应用程序界面改版，或对于每种需要适配的机型，都需要投入大量前端人员对UI控件布局进行重复编码，如此造成开发效率显著降低，存在错误隐患。

发明内容

本发明提供了一种应用程序界面布局代码的生成方法、装置及电子设备，以解决或者部分解决目前采用人工分析应用程序的UI控件布局信息，并将其转换为界面布局代码的方法效率较低，容易产生错误的技术问题。

为解决上述技术问题，根据本发明一个可选的实施例，提供了一种应用程序界面布局代码的生成方法，包括：

从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；其中，所述UI设计图中包括一个以上的控件，所述第一位置属性信息包括控件的坐标、宽度和高度；

根据所述控件的第一位置属性信息，确定所述控件的第一树形结构；

根据所述第一树形结构，确定所述控件的第二树形结构；其中，所述第二树形结构包括所述控件和布局器，所述布局器位于所述第二树形结构的根节点或内部节点，所述控件位于所述第二树形结构中的叶子节点；

根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；

遍历所述第二树形结构中的叶子节点，根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码。

可选的，所述第一树形结构包括父控件和子控件；

在所述根据所述控件的第一位置属性信息，确定所有控件的第一树形结构之后，在所述根据所述第一树形结构，确定所述控件的第二树形结构之前，所述生成方法还包括：

根据所述第一树形结构，将所述子控件的第一位置属性信息转换为相对于所述父控件的第三位置属性信息；

所述根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息，具体包括：

将所述子控件的第三位置属性信息转换为相对于所述布局器的第二位置属性信息。

进一步的，所述第一树形结构包括N层节点，N≥1且为整数；所述布局器为线性布局器；

所述根据所述第一树形结构，确定所述控件的第二树形结构，具体包括：

分别对所述第一树形结构中的第i层节点的控件进行横向遍历和/或纵向遍历递归，获得第i层节点的树形结构；i依次取值1,2,……,N；

根据所述第i层节点的树形结构，生成所述控件的第二树形结构；

其中，所述横向遍历包括：使用与Y轴平行的纵向轴线，沿着X轴方向对所述第i层节点的控件的第三位置属性信息进行横向扫描，获得所述纵向轴线与所述第i层节点的控件不相交的X轴坐标范围；根据所述X轴坐标范围，生成横向线性布局器；所述横向线性布局器中的每一列包括一个或大于一个的第i层节点的控件；

所述纵向遍历包括：使用与X轴平行的横向轴线，沿着Y轴方向对所述横向线性布局器中目标列的控件的第三位置属性信息进行纵向扫描，获得所述横向轴线与所述目标列的控件不相交的Y轴坐标范围；根据所述Y轴坐标范围，在所述目标列生成纵向线性布局器；所述目标列为控件数量大于一个的列；所述纵向线性布局器中的每一行包括一个所述目标列中的控件。

可选的，生成方法还包括：

从待开发应用程序的用户界面UI设计图中，获取控件的其它属性信息，所述其它属性信息包括控件的类型、控件的颜色信息、控件的形状信息、控件的文本信息中的至少一种；

所述根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码，具体包括：

根据所述控件的第二位置属性信息和所述其它属性信息，生成所述待开发应用程序的界面布局代码。

可选的，所述获取待开发的应用程序的用户界面UI设计图中的控件信息，具体包括：

获取待开发的应用程序的用户界面UI设计图；

根据所述UI设计图，获取所述UI设计图的JSON数据；

从所述JSON数据中获取所述UI设计图中的控件信息。

根据本发明又一个可选的实施例，还提供了一种应用程序界面布局代码的生成装置，包括：

获取模块，用于从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；其中，所述UI设计图中包括一个以上的控件，所述第一位置属性信息包括控件的坐标、宽度和高度；

第一确定模块，用于根据所述控件的第一位置属性信息，确定所述控件的第一树形结构；

第二确定模块，用于根据所述第一树形结构，确定所述控件的第二树形结构；其中，所述第二树形结构包括所述控件和布局器，所述布局器位于所述第二树形结构的根节点或内部节点，所述控件位于所述第二树形结构中的叶子节点；

转换模块，用于根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；

生成模块，用于遍历所述第二树形结构中的叶子节点，根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码。

可选的，所述第一树形结构包括父控件和子控件；

所述转换模块还用于：

所述第二确定模块具体用于：

根据本发明一个可选的实施例，还提供了一种电子设备，包括有存储器，以及一个或者两个以上的程序，其中一个或者两个以上程序存储于存储器中，且经配置以由一个或者两个以上处理器执行所述一个或者两个以上程序包含用于进行前述技术方案中任一所述生成方法的操作指令。

根据本发明一个可选的实施例，还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前述技术方案中任一所述生成方法的步骤。

通过本发明的一个或者多个技术方案，本发明具有以下有益效果或者优点：

本发明提供了一种应用程序界面布局代码的生成方法，通过从UI设计图中获取控件的第一位置属性信息：坐标、宽度和高度，根据第一位置属性信息，可以分析出UI设计图中所有控件的第一树形结构，获得了UI设计图中所有控件之间的父子级关系；接下来，根据所述第一树形结构构造所述控件的第二树形结构；在所述第二树形结构中，布局器位于所述第二树形结构的根节点或内部节点，所有的控件位于所述第二树形结构中的叶子节点；即，根据第一树形结构中得到的控件之间的父子级关系，将所有控件转换为以布局器为父级、控件为子级的第二控件树形结构；然后根据所述第二树形结构，将控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；如此，将原先在UI设计图中无容器的、以绝对坐标平铺的各类散落控件的布局信息，重新组织并转化为相对布局器的规范的、结构化的布局信息；通过利用布局器和第二树形结构得到的控件的第二位置属性信息，即控件布局信息，可以更好的适配不同机型、不同分辨率的电子设备，自动转化为待开发应用程序的界面布局代码，如此能够显著减少前端开发人员的人力编码劳动量和人为因素产生的错误，从而极大的提高了开发效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的应用程序界面布局代码生成方法的流程示意图；

图2示出了根据本发明一个实施例的待生成界面布局代码的UI控件示意图；

图3示出了根据本发明一个实施例的第一树形结构的示意图；

图4示出了根据本发明一个实施例的第二树形结构的示意图；

图5示出了根据本发明另一个实施例的待处理的UI界面示意图；

图6示出了根据本发明另一个实施例的第一树形结构的示意图；

图7示出了根据本发明另一个实施例的第二树形结构的示意图；

图8示出了根据本发明又一个实施例的应用程序界面布局代码生成装置示意图。

具体实施方式

为了使本申请所属技术领域中的技术人员更清楚地理解本申请，下面结合附图，通过具体实施例对本申请技术方案作详细描述。在整个说明书中，除非另有特别说明，本文使用的术语应理解为如本领域中通常所使用的含义。因此，除非另有定义，本文使用的所有技术和科学术语具有与本发明所属领域技术人员的一般理解相同的含义。若存在矛盾，本说明书优先。除非另有特别说明，本发明中用到的各种设备等，均可通过市场购买得到或者可通过现有方法制备得到。

为了提高开发效率，克服人工分析UI控件布局信息并人工编码产生的问题，如图1所示，本发明提供了一种应用程序界面布局代码的生成方法，其整体思路如下：

从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；其中，所述UI设计图中包括一个以上的控件，所述第一位置属性信息包括控件的坐标、宽度和高度；根据所述控件的第一位置属性信息，确定所述控件的第一树形结构；根据所述第一树形结构，确定所述控件的第二树形结构；其中，所述第二树形结构包括所述控件和布局器，所述布局器位于所述第二树形结构的根节点或内部节点，所述控件位于所述第二树形结构中的叶子节点；根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；遍历所述第二树形结构中的叶子节点，根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码。

总的来说，上述方案通过从UI设计图中获取控件的第一位置属性信息：坐标、宽度和高度，根据第一位置属性信息，可以分析出UI设计图中所有控件的第一树形结构，获得了UI设计图中所有控件之间的父子级关系；接下来，根据所述第一树形结构构造所述控件的第二树形结构；在所述第二树形结构中，布局器位于所述第二树形结构的根节点或内部节点，所有的控件位于所述第二树形结构中的叶子节点；即，根据第一树形结构中得到的控件之间的父子级关系，将所有控件转换为以布局器为父级、控件为子级的第二控件树形结构；然后根据所述第二树形结构，将控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；如此，将原先在UI设计图中无容器的、以绝对坐标平铺的各类散落控件的布局信息，重新组织并转化为相对布局器的规范的、结构化的布局信息；通过利用布局器和第二树形结构得到的控件的第二位置属性信息，即控件布局信息，可以更好的适配不同机型、不同分辨率的电子设备，自动转化为待开发应用程序的界面布局代码，如此能够显著减少前端开发人员的人力编码劳动量和人为因素产生的错误，从而极大的提高了开发效率。

为了更好的理解上述技术方案，下面通过附图以及具体实施例对本发明技术方案做详细的说明，应当理解本发明实施例以及实施例中的具体特征是对本发明技术方案的详细的说明，而不是对本发明技术方案的限定，在不冲突的情况下，本发明实施例以及实施例中的技术特征可以相互组合。

在一个可选的实施例中，如图1所示，将所述应用程序界面布局代码的生成方法应用到开发设备端，其方案为：

S1：从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；其中，所述UI设计图中包括一个以上的控件，所述第一位置属性信息包括控件的坐标、宽度和高度；

具体的，UI设计图中包括了各种各样的控件，如按钮、文本显示框、图片显示框、列表、选择框等，UI设计图中每种控件均包括一系列的属性，如控件的唯一标识，控件的坐标、宽度、高度、对齐方式、控件形状，文本结构等。其中，与控件布局直接相关的信息包括控件的坐标、宽度和高度。这些信息决定了控件在UI设计图中的位置与其它控件之间的包含关系（或父子关系）。

控件的第一位置属性信息可以从UI文件的界面JSON描述中提取，一种可选的方式如下：

S11：获取待开发的应用程序的用户界面UI设计图；

S12：根据所述UI设计图，获取所述UI设计图的JSON数据；

S13：从所述JSON数据中获取所述UI设计图中的控件信息。

具体的，UI设计图的JSON数据可通过浏览器插件进行自动获取，目前UI设计师在完成UI设计图后，通常会将UI设计图上传至第三方的UI文件共享平台，如蓝湖平台，方便程序开发人员，产品经理等人员查看。然后开发人员可使用现有的UI文件转JSON描述的浏览器插件，通过UI文件共享平台选择需要的UI全部界面或部分界面，直接获取到所选UI界面的JSON数据。然后，就可以从JSON数据中提取出所需要的控件的属性信息。在本实施例中主要关注的是控件的位置属性信息，位置属性信息包括控件相对于完整画布某参考点的绝对坐标，以及控件的宽度和高度信息；通常来说参考点根据实际需要确定，如程序界面完整画布的左上角，右上角或中间点。

实际上，JSON文件还包括但不限于如下的控件信息，可供开发人员直接获取：背景填充颜色、背景渐变颜色、背景边框、控件阴影，控件圆角信息(其中，左上角，右上角，左下角，中下角可分别获取)、控件的类型（如文本，图片，容器）、文本颜色、文本字体、文本字号、透明度、默认文本等。

S2：根据所述控件的第一位置属性信息，确定所述控件的第一树形结构；

具体的，所述第一树形结构，是根据所有控件的绝对坐标信息、控件的高度、控件的宽度，逐一计算形成的所有控件的树状图。在第一树形结构中包括了所有控件和各个控件对应的第一位置属性信息。其中，一个控件位于树形图中的一个节点，所有控件在第一树形结构中形成父子级关系；控件的父子级界定规则可以是：父级控件的坐标完全包含子级控件，如控件A的位置属性为：(x=10,y=10,w=80,h=80)，控件B的位置属性为：(x=12,y=18,w=30,h=30)。则可以确定控件A全包含控件B。那么控件A就是控件B的父级，控件B是控件A的子级。

可选的，无论待生成的是UI设计图中完整区域的控件布局，还是部分区域的控件布局，第一树形结构的根节点都可以是整个程序界面的画布控件。

由于第一树形结构中包括了所有控件的父子级关系，因此可选的，可将子控件的绝对坐标信息转换为相对于所属父控件的相对坐标信息，如此能更方便的进行S3的遍历步骤，因此本实施例提供的生成方法还可以包括：

S21：根据所述第一树形结构，将所述子控件的第一位置属性信息转换为相对于所述父控件的第三位置属性信息。

还是以上述控件A和控件B为例进行说明，由于控件B是控件A的子级，因此控件B相对于控件A为：(x=Bx-Ax,y=By-Ay,w=30,h=30)，即控件B的第三位置属性信息为：(2,8,30,30)。

至此，通过S2步骤得到的第一树形结构，其所有控件均是使用绝对坐标或固定坐标表述的父子级关系，固定坐标并不具有功能实用性，也不能良好适配不同机型、不同分辨率，并且也难于输出特定通用结构布局；例如经典的flex布局，需要按主轴与交叉轴描述，或者类似通常意义上的横向和纵向布局描述，故而，需要将第一树形结构中控件的“散落分布、无规律”的固定坐标，通过算法进一步生成可描述的规范线性结构。

基于上述原因，开始根据第一树形结构，构造包括布局器的所有控件的第二树形结构，具体如下：

S3：根据所述第一树形结构，确定所述控件的第二树形结构；其中，所述第二树形结构包括所述控件和布局器，所述布局器位于所述第二树形结构的根节点或内部节点，所述控件位于所述第二树形结构中的叶子节点；

具体的，可通过对第一树形结构中的所有子节点，也就是对所有的子级控件进行顺序遍历，将原先不带布局器控件的第一树形结构，转化成带布局器控件的第二树形结构。其中，本实施例中的布局器，是根据原先散落分布的原控件（组）的位置，作为新的父级控件，或替代原父级控件引入的。因此，在第二树形结构中，布局器占据根节点或内部节点；而所有的控件规范排列在布局器中，属于布局器的子级，故而占据第二树形结构的叶子节点。

可选的，布局器可以使用线性布局器（LinearLayout）或相对布局器（RelativeLayou），优选线性布局器，线性布局器内包含的子控件将以横向(HORIZONTAL)或竖向(VERTICAL)的方式排列。通过使用线性布局器，能将UI设计图中随机散落的控件重新按一维线性的、结构化的规范排列，更有利于后续将控件属性自动转换为界面布局代码。

接下来，本实施例中以线性布局器为例，给出了一种以N层的第一树形结构为对象，通过遍历第一树形结构的所有子节点确定第二树形结构的确定方法，具体如下：

S31：分别对所述第一树形结构中的第i层节点的控件进行横向遍历和/或纵向遍历递归，获得第i层节点的树形结构；i依次取值1,2,……,N；

所述纵向遍历包括：使用与X轴平行的横向轴线，沿着Y轴方向对所述横向线性布局器中目标列的控件的第三位置属性信息进行纵向扫描，获得所述横向轴线与所述目标列的控件不相交的Y轴坐标范围；根据所述Y轴坐标范围，在所述目标列生成纵向线性布局器；所述目标列为控件数量大于一个的列；所述纵向线性布局器中的每一行包括一个所述目标列中的控件；

所述横向遍历和/或纵向遍历递归，是指通过对每一层子节点的控件不断的进行横向遍历和/或纵向遍历，使位于第一树形结构的所有子节点的控件形成一维规则化的结构。当递归至所有线性布局器中的一行或一列区域内只包括一个控件，或无法继续对布局器中的一行或一列控件继续分组（即无法分为至少两组）后，递归目标完成。可选的，在首次递归时，是选择横向遍历还是选择纵向遍历，可根据实际需要确定。

总的来说，上述过程是分别对第一树形结构中的每一层子节点的控件进行横向遍历和/或纵向遍历递归，通过引入对应的横向线性布局器和/或纵向线性布局器，使当前层的所有子控件形成一维横向或纵向排列的规则结构。

S32：根据所述第i层节点的树形结构，生成所述控件的第二树形结构。

即，在所有层的子节点控件遍历完成后，将获得的每一层节点的控件树形结构进行组合，得到最终的第二树形结构。

为了直观的对上述步骤进行说明，参见附图2，提供了一个待处理的UI设计图的目标区域，其中，方框表示程序界面画布的一个待处理区域，A、B、C、D、E、F均是分布在待处理区域中的控件，根据控件的第一位置属性信息，可计算出所有控件的包含关系为：A、B、C、D为画布控件的子控件，而E、F是控件D的子控件，故而，根据步骤S2得到的第一树形结构的示意图如图3所示，第一树形结构为两层。

接下来开始使用横向轴线或纵向轴线，对第一层子节点的控件的第三位置属性信息进行纵向遍历或横向遍历；结合图2可知，若采用横向轴线进行纵向遍历，无法根据横向轴线不与控件相交的坐标，对第一层的控件进行分组，因此应当首先使用纵向轴线进行横向遍历。通过一条纵向轴线，沿图2中的横向从左到右的逐步移动扫描，记录扫描过程中，纵向轴线与控件无交点的X轴坐标，如此将横向上将A、B、C、D分为三组，形成横向布局器，横向布局器包括三列，左侧列包括控件A，中间列包括控件B和C，右侧列包括控件D。

由于横向线性布局器的左侧列只包含一个控件A，右侧列只包含一个控件D，因此对于第一层子节点对应的控件，布局器的左侧列和右侧列不需要继续遍历；而中间列包括两个控件B、C，因此还需要继续对中间列进行纵向遍历：使用一条与X轴平行的横向轴线，沿Y轴方向（纵向）从上到下逐步移动扫描，记录扫描过程中，与B、C无交点的Y轴坐标，故而纵向遍历将中间列分为上下两组，故而在横向布局器的中间列引入纵向布局器，纵向布局器包括两行，第一行为控件B，第二行为控件C。至此，第一树形结构的第一层的全部子节点控件已经递归完毕。

接下来是对第一树形结构的第二层子节点的控件进行递归，根据第一树形结构已知控件E、F是控件D的子控件，因此可以将控件D变成线性布局器，并将控件D的属性映射成线性布局器的属性；也可以选择保留控件D，新增一个线性布局器容纳E和F。在对E、F遍历时，根据E、F的第三位置属性信息，可使用横向线性布局器继续递归。

根据上述遍历过程，得到的待处理区域的第二树形结构示意图如图4所示，图4采用的是使用一个横向线性布局器替代控件D的实施方案，控件D的位置属性信息映射至横向线性布局器。

接下来，根据第二树形结构，生成所有控件的规范坐标，具体如下：

S4：根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；

具体的，在有了布局器之后，就可以将原先控件的第一位置属性信息，即控件相对于完整画布某参考点（如左上角）的绝对坐标，以及控件的宽度和高度信息，转化为控件相对于所属的父级布局器的规范坐标。

需要注意的是，如果在步骤S2和S3之间进行了将子控件的绝对坐标转换为相对于父级控件的相对坐标，即第一树形结构中的子控件对应的是第三位置属性信息，则此处步骤S4实际为：将所述子控件的第三位置属性信息转换为相对于所述布局器的第二位置属性信息。

在经过上述步骤后，将原先散落分布的控件转换为一维线性嵌套的第二树形结构，并将所有控件的位置坐标更新为相对于第二树形结构中的布局器的规则坐标，则接下来进行所有控件的属性的代码映射：

S5：遍历所述第二树形结构中的叶子节点，根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码。

总的来说，在获得所有控件相对于布局器的规则位置信息后，即可通过开发工具自动将待处理区域的所有控件的布局信息转换成为前端开发所需的应用程序界面布局代码。

为了进一步减少开发人员的工作量，上述生成方法还包括：

S131：从待开发应用程序的用户界面UI设计图中，获取控件的其它属性信息，所述其它属性信息包括控件的类型、控件的颜色信息、控件的形状信息、控件的文本信息中的至少一种；

所述S5：根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码，具体包括：

S51：根据所述控件的第二位置属性信息和所述其它属性信息，生成所述待开发应用程序的界面布局代码。

即，在根据控件的位置属性信息生成界面布局代码的这一过程中，还可以同步获取控件的其它属性信息，然后在执行步骤S5时，将其它属性信息同步映射为前端代码，通过其它属性信息的自动转换，能够显著减少人为因素带来的错误，极大减少编程人员的人力劳动，从而提高生产效率。

可选的，控件的类型，包括文本，图片，容器等描述控件的信息；

控件的颜色信息属性，包括：控件的背景填充颜色，背景渐变颜色等；

控件的形状信息属性，包括：控件的背景边框，控件阴影，控件圆角信息(分左上角，右上角，左下角，中下角)等；

控件的文本信息属性，包括：控件的文本颜色，文本字体，文本字号，透明度，默认文本等。

例如，对于步骤S1中获得的控件颜色属性："color":{"r":51,"b":51,"g": 51,"value":"rgba(51,51,51,1)","a": 1}，也通过步骤S5转换为前端代码可用的数据格式：”textColor”:”#333333”。

为了更直观的说明前述实施例的方案，在接下来的一个可选的实施例中，结合具体UI设计，对上述方案进行详细说明：

将上述方案应用到某实时公交信息服务的app开发，UI设计图的待处理区域如图5所示，其主要过程如下：

（1）获取待处理的目标区域，即图5方框内的UI界面的JSON描述；

（2）从JSON描述中提取待处理区域内所有控件的属性信息，包括第一位置属性信息和其它属性信息；其中，第一位置属性信息包括所有控件相对于完整画布的左上角的绝对坐标，控件宽度和高度；其它属性信息包括：控件的类型属性、控件的颜色属性、控件的形状属性、控件的文本属性等。

（3）根据获得的控件的绝对坐标、宽度和高度信息，逐一计算所有控件的父子级关系，获得如图6所示的第一树形结构；由于图5中所有控件均是相对于完整画布的子级控件，因此其绝对坐标实际上是相对于画布控件的固定坐标。

以图5中的文本框控件：“开往东直门”为例，根据其第一位置属性信息计算得到其相对于画布控件的第一树形结构的部分数据示例为：

"pluginVersion": "2.3.4",

"ArtboardScale": 2,

"skVersion": 54.1,

"sketchVersion": {},

"pageName": "Page 1",

"sliceScale": 4,

"ArtboardID": "9B9FB8B5-4E20-4B20-9B53-EFBAA676BBB1",

"flowData": [],

"skBuild": "76490",

"infos":

[

{

"id": "806EB912-5E2F-47F9-8D03-46F1993A6C33",

"left": 50,

"font": {

"verticalAlignment": "0",

"content": "开往东直门",

"color": {

"r": 153,

"b": 153,

"g": 153,

"value": "rgba(153,153,153,1)",

"a": 1

},

"displayName": "PingFang SC Regular",

"styles": [

{

"displayName": "PingFang SC Regular",

"strikethrough": "null",

"font": "PingFangSC-Regular",

"underline": "null",

"paragraphSpacing": "0",

"transform": "null",

"size": "13",

"length": "6",

"location": "0",

"color": {

"value": "rgba(153,153,153,1.000000)"

},

"spacing": "0",

"line": "0",

"align": "left",

"content": "开往东直门"

}

],

"size": 13,

"spacing": 0,

"line": 18,

"font": "PingFangSC-Regular",

"transform": "null",

"align": "left"

},

"isAutolayout": false,

"width": 70,

"parentID": "69DD2716-8D81-4B49-8E3E-D1EBC5E13997",

"type": "text",

"opacity": 100,

"height": 18,

"exportable": false,

"name": "开往东直门",

"top": 291

}

（4）对第一树形结构中的子节点进行遍历，生成规则规则的第二树形结构，具体如下：

1）顺序遍历第一树形结构的所有子节点；

a)横向遍历

为了直观起见，基于图5进行说明，获取图5中的所有子节点的控件属性信息，使用一条纵向轴线，沿横向方向（X轴方向）从左右至右逐步移动扫描，记录扫描过程中，与控件无交点的X轴坐标，可获得L1线和L2线，L1和L2线将待处理区域内的控件分成A、B、C三部分，每一个部分在X轴方向上均是一维线性结构，此时将自动生成一个横向的线性布局器，替代app画布作为待处理区域中所有控件的父级控件。如此，A，B，C三个区域在横向上形成了一维线性的规则结构。

b）纵向遍历

步骤a)得到的A区域只有一个“选中”控件，无需继续递归，而B、C区域中均包括两个纵向排列的文本控件，需要对B、C区域分别使用纵向遍历继续递归：在B区域中，使用横向轴线，沿纵向方向（Y轴方向）对B区域从上之下逐步移动扫描，记录扫描过程中，与控件无交点的Y轴坐标，可获得L3线，“102路”和“开往东直门”两个控件分成纵向两个区域；同理，C区域被L4线分为纵向两个区域，在B、C区域将分别生成纵向线性布局器，形成纵向的线性一维结构。

继续递归，发现所有区域无法再进一步细分，递归完成，生成如图7所示的第二树形结构，同时，再将第一树形结构中所有控件的固定坐标更新为相对于其父级线性布局器的规则坐标。

（5）在获得步骤（4）构造的一维线性嵌套的第二树形结构后，再遍历第二树形结构的所有叶子节点（所有控件均位于树形图中的叶子节点，非叶子节点为线性布局器），将叶子节点的属性信息重新映射为代码可用化的数据格式。

以图7中的中间一列为例，横向线性布局器作为父级（parent）控件，其包含一个子级（children）控件为纵向线性布局器，然后纵向线性布局器包括两个子级控件：“102路”和“开往东直门”，最终生成得到的界面布局代码如下所示：

{

"class": "LinearLayout",

"layout_width": "match_parent",

"layout_height": "78dp",

"orientation": "horizontal",

"background": "#FFFFFF",

"children": [{

"class": "LinearLayout",

"layout_width": "0dp",

"layout_height": "match_parent",

"layout_marginLeft": "12dp",

"layout_weight": "100",

"orientation": "vertical",

"gravity": "center_vertical",

"children": [{

"class": "TextView",

"layout_width": "wrap_content",

"layout_height": "wrap_content",

"ellipsize": "end",

"id": "102路",

"lines": "1",

"text": "102路",

"textColor": "#333333",

"textSize": "16dp",

"textStyle": "bold"

}, {

"class": "TextView",

"layout_width": "wrap_content",

"layout_height": "wrap_content",

"layout_marginTop": "5dp",

"ellipsize": "end",

"id": "开往东直门",

"lines": "1",

"text": "开往东直门",

"textColor": "#999999",

"textSize": "13dp",

"unikey": "50-291-70-18-开往东直门"

}]

}

总的来说，上述带线性布局器的一维线性嵌套的控件树，能够很方便的适配不同分辨率的多种机型，且界面布局代码的自动生成显著减少了开发人员的工作量。

基于前述实施例相同的发明构思，在又一个可选的实施例中，如图8所示，提供了一种应用程序界面布局代码的生成装置，包括：

获取模块10，用于从待开发应用程序的用户界面UI设计图中，获取控件的第一位置属性信息；其中，所述UI设计图中包括一个以上的控件，所述第一位置属性信息包括控件的坐标、宽度和高度；

第一确定模块20，用于根据所述控件的第一位置属性信息，确定所述控件的第一树形结构；

第二确定模块30，用于根据所述第一树形结构，确定所述控件的第二树形结构；其中，所述第二树形结构包括所述控件和布局器，所述布局器位于所述第二树形结构的根节点或内部节点，所述控件位于所述第二树形结构中的叶子节点；

转换模块40，用于根据所述第二树形结构，将所述控件的第一位置属性信息转换为相对于所述布局器的第二位置属性信息；

生成模块50，用于遍历所述第二树形结构中的叶子节点，根据所述控件的第二位置属性信息，生成所述待开发应用程序的界面布局代码。

可选的，所述转换模块40还用于：

所述第二确定模块30具体用于：

可选的，所述获取模块10还用于：从待开发应用程序的用户界面UI设计图中，获取控件的其它属性信息，所述其它属性信息包括控件的类型、控件的颜色信息、控件的形状信息、控件的文本信息中的至少一种；

所述生成模块50具体用于：

可选的，所述获取模块10具体用于：

获取待开发的应用程序的用户界面UI设计图；

根据所述UI设计图，获取所述UI设计图的JSON数据；

从所述JSON数据中获取所述UI设计图中的控件信息。

总的来说，本实施例提供了一种应用程序界面布局代码的生成装置或生成工具，能够自动从UI文件中获取控件的属性信息，并按照上述过程将其自动转化为应用程序界面布局代码，通过自动生成布局器，以及控件属性的自动转化，显著减少因人为因素带来的错误，极大减少编程人员枯燥的人力劳动，提高了程序开发效率。

基于前述实施例相同的发明构思，在又一个可选的实施例中，提供了一种电子设备，包括有存储器，以及一个或者两个以上的程序，其中一个或者两个以上程序存储于存储器中，且经配置以由一个或者两个以上处理器执行所述一个或者两个以上程序包含用于进行前述实施例中的任一所述生成方法的操作指令。

基于前述实施例相同的发明构思，在又一个可选的实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现前述实施例中的任一所述生成方法的步骤。

通过本发明的一个或者多个实施例，本发明具有以下有益效果或者优点：

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

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims

1.一种应用程序界面布局代码的生成方法，其特征在于，所述生成方法包括：

2.如权利要求1所述的生成方法，其特征在于，所述第一树形结构包括父控件和子控件；

3.如权利要求2所述的生成方法，其特征在于，所述第一树形结构包括N层节点，N≥1且为整数；所述布局器为线性布局器；

4.如权利要求1所述的生成方法，其特征在于，还包括：

5.如权利要求1所述的生成方法，其特征在于，所述获取待开发的应用程序的用户界面UI设计图中的控件信息，具体包括：

获取待开发的应用程序的用户界面UI设计图；

根据所述UI设计图，获取所述UI设计图的JSON数据；

从所述JSON数据中获取所述UI设计图中的控件信息。

6.一种应用程序界面布局代码的生成装置，其特征在于，所述生成装置包括：

7.如权利要求6所述的生成装置，其特征在于，所述第一树形结构包括父控件和子控件；

所述转换模块还用于：

8.如权利要求7所述的生成装置，其特征在于，所述第一树形结构包括N层节点，N≥1且为整数；所述布局器为线性布局器；

所述第二确定模块具体用于：

9.一种电子设备，其特征在于，包括有存储器，以及一个或者两个以上的程序，其中一个或者两个以上程序存储于存储器中，且经配置以由一个或者两个以上处理器执行所述一个或者两个以上程序包含用于进行如权利要求1~5任一所述生成方法的操作指令。

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