一种页面布局文件生成方法及装置制造方法及图纸

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

【技术实现步骤摘要】

本专利技术涉及计算机
，尤其涉及一种页面布局文件生成方法及装置。
技术介绍
在图形用户界面（Graphical User Interface，简称⑶I)的开发中，需要对图形用 户界面中的界面元素（图形、文字等）进行排布。优秀的布局能简化用户与应用程序之间 的交互操作，迎合用户的使用习惯，提高用户使用的用户体验。 现有的应用程序的⑶I开发过程通常包括两个阶段的工作，g卩：⑶I图形设计和 GUI前端开发。GUI图形设计师首先利用绘图软件（如Photoshop，PS)将应用程序的外观设 计出来，再按照前端开发工程师的页面布局要求，裁剪设计图获得单个UI元素的切片图。 在获得GUI设计师裁剪出的UI元素的切片图之后，前端开发工程师将所述切片图 作为资源导入应用程序引用的资源库中，并按照开发框架的编码规则，利用所述切片图重 新组织生成页面布局文件。 现有技术中，前端开发工程师需要重复⑶I图形设计师的页面布局工作，这样既 浪费了开发资源，又降低了开发效率。
技术实现思路
本专利技术实施例提供了一种页面布局文件生成方法及装置，可实现直接根据目标图 像文件生成页面布局文件，提高了 GUI开发的效率和人力开发成本。 第一方面，提供了一种页面布局文件生成方法方法，包括： 获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图层的 分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关 系； 根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对 应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文 件经过编译运行会产生所述图形用户界面； 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。 结合第一方面，在第一种可能的实现方式中，所述根据所述各个图层组各自对应 的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的 布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应 的布局信息生成页面布局文件，包括： 根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域、所述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码； 根据所述各个图层各自对应的控件属性、所述各个图层各自对应的布局信息生成 用于布局所述各个图层各自对应的控件的代码；所述各个图层各自对应的控件由所述各个 图层各自对应的控件属性所表征； 根据所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所 述页面布局文件。 结合第一方面的第一种可能的实现方式，在第二种可能的实现方式中，所述根据 所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所 述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码，包括： 根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对 应的布局区域的代码； 根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个 图层组各自对应的布局区域的代码组成所述框架布局代码。 结合第一方面的第二种可能的实现方式，在第三种可能的实现方式中，所述根据 所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所述页面布局文 件，包括： 将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用 于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文 件。 结合第一方面，或者，结合第一方面的第一种至第三种中任一种可能的实现方式， 在第四种可能的实现方式中，在所述获取目标图像文件，以及所述获取所述多个图层的分 组信息之后，所述方法还包括：根据所述各个图层组之间的组织关系分层显示所述各个图 层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层 显不〇 第二方面，提供了一种页面布局文件生成装置，包括： 获取单元，用于获取目标图像文件，所述目标图像文件包括多个图层，以及获取所 述多个图层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组 之间组织关系； 生成单元，用于根据所述各个图层组各自对应的在所述获取单元获取的目标图像 文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布 局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页 面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面； 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。 结合第二方面，在第一种可能的实现方式中，所述生成单元，包括：第一生成子单 元、第二生成子单元和第三生成子单元，其中： 所述第一生成子单元，用于根据所述各个图层组各自对应的在所述目标图像文件 所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关 系生成框架布局代码； 所述第二生成子单元，用于根据所述各个图层各自对应的控件属性、所述各个图 层各自对应的布局信息生成用于布局所述各个图层各自对应的控件的代码；所述各个图层 各自对应的控件由所述各个图层各自对应的控件属性所表征； 所述第三生成子单元，用于根据所述框架布局代码和用于布局所述各个图层各自 对应的控件的代码生成所述页面布局文件。 结合第二方面的第一种可能的实现方式，在第二种可能的实现方式中，所述第一 生成子单元，具体用于：根据所述各个图层组各自对应的布局区域生成用于布局所述各个 图层组各自对应的布局区域的代码；根据所述各个图层组各自对应的布局区域之间的布局 关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。 结合第二方面的第二种可能的实现方式，在第三种可能的实现方式中，所述第三 生成子单元，具体用于：将用于布局所述各个图层各自对应的控件的代码，填充到所述框架 布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所 述页面布局文件。 结合第二方面，或者，结合第二方面的第一种至第三种中任一种可能的实现方式， 在第四种可能的实现方式中，所述装置还包括：显示单元，用于在所述获取单元获取目标图 像文件，以及获取所述多个图层的分组信息之后，根据所述各个图层组之间的组织关系分 层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的 堆叠顺序进行分层显示。 第三方面，提供了一种终本文档来自技高网...

【技术保护点】
一种页面布局文件生成方法，其特征在于，包括：获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关系；根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。

【技术特征摘要】

【专利技术属性】
技术研发人员：潘健敏，王华利，郑维希，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：广东;44