[发明专利]应用程序界面布局代码的生成方法、装置及电子设备

说明书

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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