一种页面布局文件生成方法及装置的制造方法
【技术领域】
[0001] 本发明涉及计算机技术领域，尤其涉及一种页面布局文件生成方法及装置。
【背景技术】
[0002] 在图形用户界面（Graphical User Interface，简称⑶I)的开发中，需要对图形用 户界面中的界面元素（图形、文字等）进行排布。优秀的布局能简化用户与应用程序之间 的交互操作，迎合用户的使用习惯，提高用户使用的用户体验。
[0003] 现有的应用程序的⑶I开发过程通常包括两个阶段的工作，g卩：⑶I图形设计和 GUI前端开发。GUI图形设计师首先利用绘图软件（如Photoshop，PS)将应用程序的外观设 计出来，再按照前端开发工程师的页面布局要求，裁剪设计图获得单个UI元素的切片图。
[0004] 在获得GUI设计师裁剪出的UI元素的切片图之后，前端开发工程师将所述切片图 作为资源导入应用程序引用的资源库中，并按照开发框架的编码规则，利用所述切片图重 新组织生成页面布局文件。
[0005] 现有技术中，前端开发工程师需要重复⑶I图形设计师的页面布局工作，这样既 浪费了开发资源，又降低了开发效率。
【发明内容】
[0006] 本发明实施例提供了一种页面布局文件生成方法及装置，可实现直接根据目标图 像文件生成页面布局文件，提高了 GUI开发的效率和人力开发成本。
[0007] 第一方面，提供了一种页面布局文件生成方法方法，包括：
[0008] 获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图层的 分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关 系；
[0009] 根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对 应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文 件经过编译运行会产生所述图形用户界面；
[0010] 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。
[0011] 结合第一方面，在第一种可能的实现方式中，所述根据所述各个图层组各自对应 的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的 布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应 的布局信息生成页面布局文件，包括：
[0012] 根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域、所述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码；
[0013] 根据所述各个图层各自对应的控件属性、所述各个图层各自对应的布局信息生成 用于布局所述各个图层各自对应的控件的代码；所述各个图层各自对应的控件由所述各个 图层各自对应的控件属性所表征；
[0014] 根据所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所 述页面布局文件。
[0015] 结合第一方面的第一种可能的实现方式，在第二种可能的实现方式中，所述根据 所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所 述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码，包括：
[0016] 根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对 应的布局区域的代码；
[0017] 根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个 图层组各自对应的布局区域的代码组成所述框架布局代码。
[0018] 结合第一方面的第二种可能的实现方式，在第三种可能的实现方式中，所述根据 所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所述页面布局文 件，包括：
[0019] 将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用 于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文 件。
[0020] 结合第一方面，或者，结合第一方面的第一种至第三种中任一种可能的实现方式， 在第四种可能的实现方式中，在所述获取目标图像文件，以及所述获取所述多个图层的分 组信息之后，所述方法还包括：根据所述各个图层组之间的组织关系分层显示所述各个图 层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层 显不〇
[0021] 第二方面，提供了一种页面布局文件生成装置，包括：
[0022] 获取单元，用于获取目标图像文件，所述目标图像文件包括多个图层，以及获取所 述多个图层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组 之间组织关系；
[0023] 生成单元，用于根据所述各个图层组各自对应的在所述获取单元获取的目标图像 文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布 局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页 面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；
[0024] 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。
[0025] 结合第二方面，在第一种可能的实现方式中，所述生成单元，包括：第一生成子单 元、第二生成子单元和第三生成子单元，其中：
[0026] 所述第一生成子单元，用于根据所述各个图层组各自对应的在所述目标图像文件 所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关 系生成框架布局代码；
[0027] 所述第二生成子单元，用于根据所述各个图层各自对应的控件属性、所述各个图 层各自对应的布局信息生成用于布局所述各个图层各自对应的控件的代码；所述各个图层 各自对应的控件由所述各个图层各自对应的控件属性所表征；
[0028] 所述第三生成子单元，用于根据所述框架布局代码和用于布局所述各个图层各自 对应的控件的代码生成所述页面布局文件。
[0029] 结合第二方面的第一种可能的实现方式，在第二种可能的实现方式中，所述第一 生成子单元，具体用于：根据所述各个图层组各自对应的布局区域生成用于布局所述各个 图层组各自对应的布局区域的代码；根据所述各个图层组各自对应的布局区域之间的布局 关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。
[0030] 结合第二方面的第二种可能的实现方式，在第三种可能的实现方式中，所述第三 生成子单元，具体用于：将用于布局所述各个图层各自对应的控件的代码，填充到所述框架 布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所 述页面布局文件。
[0031] 结合第二方面，或者，结合第二方面的第一种至第三种中任一种可能的实现方式， 在第四种可能的实现方式中，所述装置还包括：显示单元，用于在所述获取单元获取目标图 像文件，以及获取所述多个图层的分组信息之后，根据所述各个图层组之间的组织关系分 层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的 堆叠顺序进行分层显示。
[0032] 第三方面，提供了一种终端，包括：存储器和与所述存储器耦合的处理器，其中，所 述处理器读取所述存储器中存储的指令，用于执行以下步骤：
[0033] 获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图层的 分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织关 系；
[0034] 根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对 应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文 件经过编译运行会产生所述图形用户界面；
[0035] 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。
[0036] 本发明实施例中，通过根据目标图像文件包含的各个图层组各自对应的布局区域 和所述各个图层组各自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图 层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布 局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布 局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控 件属性由输入的配置操作指定。上述方案可实现直接根据目标图像文件生成页面布局文 件，提高了 GUI开发的效率，节约了开发成本。
【附图说明】
[0037] 为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使 用的附图作简单地介绍。
[0038] 图1是本发明实施例涉及的目标图像文件所展示的用户界面的示意图；
[0039] 图2是本发明实施例提供的一种页面布局文件生成方法的流程示意图；
[0040] 图3A是本发明实施例提供的图层组对应的布局区域的示意图；
[0041] 图3B是本发明实施例提供的三种布局区域的排布方式的示意图；
[0042] 图4A是本发明实施例提供的目标图像文件对应的多个图层的分组示意图；
[0043] 图4B是本发明实施例提供的各个图层组对应的布局区域的层级结构示意图；
[0044] 图5是本发明实施例提供的目标图像文件中底部导航菜单包含应用图标的示意 图；
[0045] 图6是本发明实施例提供的分层显示目标图像文件对