应的多个图层的三维坐标 体系的不意图；
[0046] 图7是本发明实施例提供的分层显示目标图像文件对应的多个图层的效果示意 图；
[0047] 图8是本发明实施例提供的页面布局文件生成装置的第一实施例的结构示意图；
[0048] 图9是本发明实施例提供的页面布局文件生成装置的第二实施例的结构示意图；
[0049] 图10是本发明实施例提供的终端的结构示意图。
【具体实施方式】
[0050] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚地描 述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中 的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例， 都属于本发明保护的范围。
[0051] 为了更好的理解本发明实施例，下面先结合图1简单介绍本发明实施例涉及的页 面布局的一些基本概念。图1所示的图形用户界面（⑶1)300示出了目前应用广泛的一 种页面布局样式，包括：顶部导航菜单301 (Header)、内容302 (Content)和底部导航菜单 303 (Footer)〇
[0052] 举例来说，在手机的主页（Home)对应的页面布局中，顶部导航菜单301通常用来 放置一些系统设置图标（Icon)，内容302通常用来放置安装在手机中的应用程序的图标， 底部导航菜单303通常用来放置用户经常使用的应用程序的图标。
[0053] 本发明实施例中，一个页面布局文件用于布局一个图形用户界面中的界面元素， 所述页面布局文件包含了用于布局所述用户界面中的每一个界面元素的代码。并且，所述 页面布局文件的编码中包含了框架-容器-界面元素的层级关系。
[0054] 本发明实施例中，容器对应图形用户界面上的布局区域，用于放置界面元素。例 如，图1所示图形用户界面300包括顶部导航菜单301、内容302和底部导航菜单303三 个主要布局区域。以Android的页面布局文件为例，每一对标签（一堆尖括号）表示图 形用户界面上的一个布局区域，一对标签内包含有分布在该布局区域中的界面元素。例 如，一对〈LinearLayoutX/LinearLayout〉表示一个布局方式为线性布局的布局区域， 〈LinearLayout〉与〈/LinearLayout〉之间包含有线性排布于该布局区域中的界面元素。
[0055] 本发明实施例中，布局区域中还可以嵌套布局区域。例如，图1中的内容302嵌套 有内容3021和内容3022。
[0056] 本发明实施例中，框架是指各个布局区域按照一定的布局关系形成的用于表征页 面布局样式的布局框架。例如，图1中的顶部导航菜单301、内容302和底部导航菜单303 形成了3行垂直排布的布局样式。
[0057] 本发明实施例中，所述界面元素可包括但不限于：按键、滑动条、表格、窗口、视图 (如Android的View)等组件。
[0058] 针对现有技术中存在的问题，本发明实施例提供了一种页面布局文件生成方法及 装置，通过根据目标图像文件包含的各个图层组各自对应的布局区域和所述各个图层组各 自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图层各自对应的控件属 性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图 层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关 系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置 操作指定。上述方案可实现直接根据目标图像文件生成页面布局文件，提高了 GUI开发的 效率，节约了开发成本。以下分别进行详细说明。
[0059] 参见图2,图2是本发明实施例提供的页面布局文件生成方法的流程示意图。如图 2所示，该方法包括：
[0060] S101，获取目标图像文件，所述目标图像文件包括多个图层，以及获取所述多个图 层的分组信息，所述分组信息用于指示各个图层所属的图层组，以及各个图层组之间组织 关系。
[0061] S103,根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界 面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各 自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布 局文件经过编译运行会产生所述图形用户界面。
[0062] 其中，所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中 的布局区域由所述各个图层组各自包含的图层的布局信息确定，所述图层的布局信息包括 所述图层在所述图形用户界面中的大小和位置；所述各个图层组各自对应的布局区域之间 的布局关系由所述各个图层组之间的组织关系确定；所述各个图层各自对应的控件属性由 输入的配置操作指定。
[0063] 本发明实施例中，所述目标图像文件是GUI图形设计师通过多个图层设计的用于 展示用户界面的图形文件，其中，一个图层对应一个界面元素。可以理解的，为了更好的组 织和管理所述多个图层，GUI图形设计师会对所述多个图层进行分组。通常，在一个布局区 域中的界面元素可以分在一个图层组中，便于以组为单位对界面元素进行管理。
[0064] 本发明实施例中，一个图层组在用户界面上对应一个布局区域，所述布局区域可 以根据所述图层组包含的图层的布局信息来确定。
[0065] 需要说明的，一个图层组可包含图层或者子图层组。本发明实施例中，如果一个图 层组包含子图层组，那么，可将所述子图层组中的图层作为所述图层组中的图层。
[0066] 应当理解的，在确定该图层组对应的布局区域之前，需要确定出该图层组包含的 所有图层的布局信息。
[0067] 例如，如图3A所示，一个图层组包括子图层组A、图层B、图层C、图层D。其中，子 图层组A包括图层1和图层2。具体实现中，可以根据图层1和图层2的布局信息确定出子 图层组A的布局信息，并结合图层B、图层C、图层D各自的布局信息确定出该图层组对应的 布局区域（虚线框所示）。
[0068] 本发明实施例中，可以通过图像识别技术获取图层的布局信息，也可以从所述目 标图像文件携带的各个图层的布局参数获取图层的布局信息（如Photoshop中记录的图层 的大小、位置参数），这里不作限制。
[0069] 可以理解的，确定出图层组对应的布局区域则可获知所述图层组对应的布局区域 的布局信息（大小和位置）。从代码生成的角度来说，根据图层组对应的布局区域的布局信 息可以生成用于布局所述布局区域的代码。
[0070] 例如，图3A中的虚线框所示的布局区域可通过如下布局代码示意：
[0072] 其中，〈ContainerX/Container〉这一对标签表示一个图层组对应的布局区域； "layout:width"、"layout:height"分别表示布局区域的宽和高（用于限定布局区域的大 小）；"lay〇Ut:X"、"lay〇ut:y"分别表示布局区域的横、纵坐标（用于限定布局区域的位 置）；"dp"是屏幕密度单位。
[0073] 需要说明的，上述代码仅仅是本发明实施例提供的示意代码，实际应用中，布局区 域的大小和位置等布局信息还可以通过其他方式表示，这里不作限制。
[0074] 可以理解的，根据各个图层组对应的布局区域的布局信息可以分析出所述布局区 域的排布方式。例如，图3B示出了 3种常见的排布方式：3行排布、3列排布和九宫格排布， 其中，每一个黑色矩形区域均表示一个图层组对应的布局区域。
[0075] 本发明实施例中，所述各个图层组之间组织关系可以如图4A所示通过文件夹的 目录结构体现，其中，一个文件夹用于管理一个图层组。也即是说，图4A中的一个文件夹对 应一个图层组。
[0076] 那么，根据图4A所示的文件夹组织结构可以分析出各个图层组对应的布局区域 的布局关系如图4B所示，其中，文件夹A、文件夹B、文件夹C、文件夹B-1和文件夹B-2分别 对应布局区域A、布局区域B、布局区域C、布局区域B-1和布局区域B-2。
[0077] 从图4B可知，布局区域A、布局区域B、布局区域C处于同一层级，布局区域B-1和 布局区域B-2处于第二层级，布局区域B中嵌套有布局区域B-1和布局区域B-2，类似于图 1中，内容302中嵌套有内容3021和内容3022。
[0078] 需要说明的，实际应用中，除了通过文件夹的组织结构，所述各个图层组之间组织 关系还可以通过其他数据结构来表示，例如图层树，这里不作限制。
[0079] 本发明实施例涉及的页面布局样式可由所述各个图层各自对应的布局区域以及 所述各个图层对应的布局区域之间布局关系确定。
[0080] 本发明实施例涉及的页面布局文件包括两部分代码：表征页面布局样式的框架布 局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中。
[0081] 本发明实施例中，所述页面布局文件经过编译运行会产生所述目标图像文件表征 的图形用户界面。
[0082] 具体实现中，可以根据所述各个图层组各自对应的布局区域生成用于布局所述各 个图层组各自对应的布局区域的代码，并根据所述各个图层组各自对应的布局区域之间的 布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代 码。
[0083] 本发明实施例中，所述框架布局代码经过编译运行会产生所述目标图像文件设计 的页面布局样式。
[0084] 例如，图1所示的页面布局样式可通过如下框架布局代码示意：
[0087] 其中，一对标签表示一个图层组对应的布局区域。〈main>〈/main>表示用户界 面 300 ;〈Header>〈/Header> 表;^顶部导航菜单 301 ;〈Content>〈/Content> 表;^ 内容 302， 〈ContentX/Content〉中嵌套有〈ContentlX/Contentl〉和 <Content2X/Content2>， 〈ContentΙΧ/Content 1> 表；^ 内容 3021，<Content2X/Content2> 表；^ 内容 3022 ; 〈FooterX/Footer〉表示底部导航菜单 303。"layout:width"、"layout:height"分别表示 布局区域的宽和高，"layout :orientation"表示嵌套在布局区域中的元素的布局方式。
[0088] 需要说明的，上述框架布局代码仅仅是本发明实施例提供的示意代码，并