[发明专利]一种页面布局文件生成方法及装置

说明书

本发明公开了一种页面布局文件生成方法及装置。该方法包括：获取包括多个图层的目标图像文件，以及所述多个图层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关系；根据各个图层组各自对应的布局区域和所述各个图层组各自对应的布局区域之间的布局关系、各个图层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。上述方案可提高了GUI开发的效率，节约开发成本。

技术领域

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

背景技术

在图形用户界面(Graphical User Interface，简称GUI)的开发中，需要对图形用户界面中的界面元素(图形、文字等)进行排布。优秀的布局能简化用户与应用程序之间的交互操作，迎合用户的使用习惯，提高用户使用的用户体验。

现有的应用程序的GUI开发过程通常包括两个阶段的工作，即：GUI图形设计和GUI前端开发。GUI图形设计师首先利用绘图软件(如Photoshop，PS)将应用程序的外观设计出来，再按照前端开发工程师的页面布局要求，裁剪设计图获得单个UI元素的切片图。

在获得GUI设计师裁剪出的UI元素的切片图之后，前端开发工程师将所述切片图作为资源导入应用程序引用的资源库中，并按照开发框架的编码规则，利用所述切片图重新组织生成页面布局文件。

现有技术中，前端开发工程师需要重复GUI图形设计师的页面布局工作，这样既浪费了开发资源，又降低了开发效率。

发明内容

本发明实施例提供了一种页面布局文件生成方法及装置，可实现直接根据目标图像文件生成页面布局文件，提高了GUI开发的效率和人力开发成本。

第一方面，提供了一种页面布局文件生成方法方法，包括：

获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关系；

根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；

其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。

结合第一方面，在第一种可能的实现方式中，所述根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，包括：

根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码；

根据所述各个图层各自对应的控件属性、所述各个图层各自对应的布局信息生成用于布局所述各个图层各自对应的控件的代码；所述各个图层各自对应的控件由所述各个图层各自对应的控件属性所表征；

根据所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所述页面布局文件。