[发明专利]界面布局文件的生成方法、界面生成方法、装置及设备

说明书

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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