CN105354022B - 一种页面布局文件生成方法及装置 - Google Patents

Abstract

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

Description

一种页面布局文件生成方法及装置

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码；

根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

结合第一方面的第二种可能的实现方式，在第三种可能的实现方式中，所述根据所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所述页面布局文件，包括：

将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

结合第一方面，或者，结合第一方面的第一种至第三种中任一种可能的实现方式，在第四种可能的实现方式中，在所述获取目标图像文件，以及所述获取所述多个图层的分组信息之后，所述方法还包括：根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

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

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

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

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

结合第二方面，在第一种可能的实现方式中，所述生成单元，包括：第一生成子单元、第二生成子单元和第三生成子单元，其中：

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

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

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

结合第二方面的第一种可能的实现方式，在第二种可能的实现方式中，所述第一生成子单元，具体用于：根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码；根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

结合第二方面的第二种可能的实现方式，在第三种可能的实现方式中，所述第三生成子单元，具体用于：将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

结合第二方面，或者，结合第二方面的第一种至第三种中任一种可能的实现方式，在第四种可能的实现方式中，所述装置还包括：显示单元，用于在所述获取单元获取目标图像文件，以及获取所述多个图层的分组信息之后，根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

第三方面，提供了一种终端，包括：存储器和与所述存储器耦合的处理器，其中，所述处理器读取所述存储器中存储的指令，用于执行以下步骤：

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

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

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

本发明实施例中，通过根据目标图像文件包含的各个图层组各自对应的布局区域和所述各个图层组各自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。上述方案可实现直接根据目标图像文件生成页面布局文件，提高了GUI开发的效率，节约了开发成本。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍。

图1是本发明实施例涉及的目标图像文件所展示的用户界面的示意图；

图2是本发明实施例提供的一种页面布局文件生成方法的流程示意图；

图3A是本发明实施例提供的图层组对应的布局区域的示意图；

图3B是本发明实施例提供的三种布局区域的排布方式的示意图；

图4A是本发明实施例提供的目标图像文件对应的多个图层的分组示意图；

图4B是本发明实施例提供的各个图层组对应的布局区域的层级结构示意图；

图5是本发明实施例提供的目标图像文件中底部导航菜单包含应用图标的示意图；

图6是本发明实施例提供的分层显示目标图像文件对应的多个图层的三维坐标体系的示意图；

图7是本发明实施例提供的分层显示目标图像文件对应的多个图层的效果示意图；

图8是本发明实施例提供的页面布局文件生成装置的第一实施例的结构示意图；

图9是本发明实施例提供的页面布局文件生成装置的第二实施例的结构示意图；

图10是本发明实施例提供的终端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚地描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了更好的理解本发明实施例，下面先结合图1简单介绍本发明实施例涉及的页面布局的一些基本概念。图1所示的图形用户界面(GUI)300示出了目前应用广泛的一种页面布局样式，包括：顶部导航菜单301(Header)、内容302(Content)和底部导航菜单303(Footer)。

举例来说，在手机的主页(Home)对应的页面布局中，顶部导航菜单301通常用来放置一些系统设置图标(Icon)，内容302通常用来放置安装在手机中的应用程序的图标，底部导航菜单303通常用来放置用户经常使用的应用程序的图标。

本发明实施例中，一个页面布局文件用于布局一个图形用户界面中的界面元素，所述页面布局文件包含了用于布局所述用户界面中的每一个界面元素的代码。并且，所述页面布局文件的编码中包含了框架-容器-界面元素的层级关系。

本发明实施例中，容器对应图形用户界面上的布局区域，用于放置界面元素。例如，图1所示图形用户界面300包括顶部导航菜单301、内容302和底部导航菜单303三个主要布局区域。以Android的页面布局文件为例，每一对标签(一堆尖括号)表示图形用户界面上的一个布局区域，一对标签内包含有分布在该布局区域中的界面元素。例如，一对<LinearLayout></LinearLayout>表示一个布局方式为线性布局的布局区域，<LinearLayout>与</LinearLayout>之间包含有线性排布于该布局区域中的界面元素。

本发明实施例中，布局区域中还可以嵌套布局区域。例如，图1中的内容302嵌套有内容3021和内容3022。

本发明实施例中，框架是指各个布局区域按照一定的布局关系形成的用于表征页面布局样式的布局框架。例如，图1中的顶部导航菜单301、内容302和底部导航菜单303形成了3行垂直排布的布局样式。

本发明实施例中，所述界面元素可包括但不限于：按键、滑动条、表格、窗口、视图(如Android的View)等组件。

针对现有技术中存在的问题，本发明实施例提供了一种页面布局文件生成方法及装置，通过根据目标图像文件包含的各个图层组各自对应的布局区域和所述各个图层组各自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。上述方案可实现直接根据目标图像文件生成页面布局文件，提高了GUI开发的效率，节约了开发成本。以下分别进行详细说明。

参见图2，图2是本发明实施例提供的页面布局文件生成方法的流程示意图。如图2所示，该方法包括：

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

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

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

本发明实施例中，所述目标图像文件是GUI图形设计师通过多个图层设计的用于展示用户界面的图形文件，其中，一个图层对应一个界面元素。可以理解的，为了更好的组织和管理所述多个图层，GUI图形设计师会对所述多个图层进行分组。通常，在一个布局区域中的界面元素可以分在一个图层组中，便于以组为单位对界面元素进行管理。

本发明实施例中，一个图层组在用户界面上对应一个布局区域，所述布局区域可以根据所述图层组包含的图层的布局信息来确定。

需要说明的，一个图层组可包含图层或者子图层组。本发明实施例中，如果一个图层组包含子图层组，那么，可将所述子图层组中的图层作为所述图层组中的图层。

应当理解的，在确定该图层组对应的布局区域之前，需要确定出该图层组包含的所有图层的布局信息。

例如，如图3A所示，一个图层组包括子图层组A、图层B、图层C、图层D。其中，子图层组A包括图层1和图层2。具体实现中，可以根据图层1和图层2的布局信息确定出子图层组A的布局信息，并结合图层B、图层C、图层D各自的布局信息确定出该图层组对应的布局区域(虚线框所示)。

本发明实施例中，可以通过图像识别技术获取图层的布局信息，也可以从所述目标图像文件携带的各个图层的布局参数获取图层的布局信息(如Photoshop中记录的图层的大小、位置参数)，这里不作限制。

可以理解的，确定出图层组对应的布局区域则可获知所述图层组对应的布局区域的布局信息(大小和位置)。从代码生成的角度来说，根据图层组对应的布局区域的布局信息可以生成用于布局所述布局区域的代码。

例如，图3A中的虚线框所示的布局区域可通过如下布局代码示意：

其中，<Container></Container>这一对标签表示一个图层组对应的布局区域；“layout:width”、“layout:height”分别表示布局区域的宽和高(用于限定布局区域的大小)；“layout:x”、“layout:y”分别表示布局区域的横、纵坐标(用于限定布局区域的位置)；“dp”是屏幕密度单位。

需要说明的，上述代码仅仅是本发明实施例提供的示意代码，实际应用中，布局区域的大小和位置等布局信息还可以通过其他方式表示，这里不作限制。

可以理解的，根据各个图层组对应的布局区域的布局信息可以分析出所述布局区域的排布方式。例如，图3B示出了3种常见的排布方式：3行排布、3列排布和九宫格排布，其中，每一个黑色矩形区域均表示一个图层组对应的布局区域。

本发明实施例中，所述各个图层组之间组织关系可以如图4A所示通过文件夹的目录结构体现，其中，一个文件夹用于管理一个图层组。也即是说，图4A中的一个文件夹对应一个图层组。

那么，根据图4A所示的文件夹组织结构可以分析出各个图层组对应的布局区域的布局关系如图4B所示，其中，文件夹A、文件夹B、文件夹C、文件夹B-1和文件夹B-2分别对应布局区域A、布局区域B、布局区域C、布局区域B-1和布局区域B-2。

从图4B可知，布局区域A、布局区域B、布局区域C处于同一层级，布局区域B-1和布局区域B-2处于第二层级，布局区域B中嵌套有布局区域B-1和布局区域B-2，类似于图1中，内容302中嵌套有内容3021和内容3022。

需要说明的，实际应用中，除了通过文件夹的组织结构，所述各个图层组之间组织关系还可以通过其他数据结构来表示，例如图层树，这里不作限制。

本发明实施例涉及的页面布局样式可由所述各个图层各自对应的布局区域以及所述各个图层对应的布局区域之间布局关系确定。

本发明实施例涉及的页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中。

本发明实施例中，所述页面布局文件经过编译运行会产生所述目标图像文件表征的图形用户界面。

具体实现中，可以根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码，并根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

本发明实施例中，所述框架布局代码经过编译运行会产生所述目标图像文件设计的页面布局样式。

例如，图1所示的页面布局样式可通过如下框架布局代码示意：

其中，一对标签表示一个图层组对应的布局区域。<main></main>表示用户界面300；<Header></Header>表示顶部导航菜单301；<Content></Content>表示内容302，<Content></Content>中嵌套有<Content1></Content1>和<Content2></Content2>，<Content1></Content1>表示内容3021，<Content2></Content2>表示内容3022；<Footer></Footer>表示底部导航菜单303。“layout:width”、“layout:height”分别表示布局区域的宽和高，“layout:orientation”表示嵌套在布局区域中的元素的布局方式。

需要说明的，上述框架布局代码仅仅是本发明实施例提供的示意代码，并不是可编译连接的代码。实际应用中，图1示出的页面布局样式还可以根据实际的开发语言和开发平台来实现代码转化，这里不作限制。

具体实现中，在确定所述各个图层各自对应的控件属性之后，可以根据所述各个图层各自对应的控件属性、所述各个图层各自对应的布局信息生成用于布局所述各个图层各自对应的控件的代码。其中，所述各个图层各自对应的控件由所述各个图层各自对应的控件属性所表征。

例如，一个图层对应的控件属性是“按键”，那么，所述图层对应的控件布局代码可如下所示：

其中，<Button><Button/>表示所述图层对应的控件是“按键”，“layout:width”、“layout:height”分别表示该控件的宽和高；“text”表示该控件的显示文本。

需要说明的，上述控代码仅仅是本发明实施例提供的示意代码，实际应用中，用于布局图层对应的控件的代码还可以是其他形式，例如包括控件的背景图片的设置代码，这里不作限制。

具体实现中，在生成表征页面布局样式的框架布局代码和用于布局所述各个图层各自对应的控件的代码之后，可以利用所述框架布局代码和用于布局所述各个图层各自对应的控件的代码组合生成所述页面布局文件。

具体的，可以将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

例如，如图5所示，在图形设计时，通过3个图形图层表示底部导航菜单303中的3个应用程序的图标。并且所述3个图形图层对应的控件属性均被用户配置成“按键”。那么，将用于布局所述3个图形图层各自对应控件的代码填充到用于布局底部导航菜单303的代码中，图5所示的用户界面300对应的可通过如下页面布局代码示意：

其中，<Footer></Footer>中填充了3对<Button></Button>表示的用于布局按键的代码，分别用于布局“信息”、“日历”、“邮箱”这3个按键。

需要说明的，上述代码仅仅是本发明实施例提供的示意代码，并不是可编译连接的代码。实际应用中，图5示出的用户界面300还可以根据实际的开发语言和开发平台来实现代码转化，这里不作限制。

进一步的，在将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中之前，还可以分析出所述各个图层各自所属图层组对应的布局区域的布局方式，用以在用于布局所述布局区域的代码中设置所述布局方式，可实现将所述目标图像文件转换成更为准确具体的页面布局文件。

例如，如图5所示，底部导航菜单303中水平线性布局有“信息”、“日历”、“邮箱”3个图标。那么，进一步的，用于布局底部导航菜单303的代码可具体如下：

其中，<LinearLayout></LinearLayout>和“layout:orientation＝‘horizontal’”分别表示底部导航菜单303的布局方式是：水平线性布局。

需要说明的，上述代码仅仅是本发明实施例提供的示意代码，实际应用中，布局区域的布局方式可以根据实际的开发语言和开发平台来实现代码转化，这里不作限制。

优选的，为了使用户更加直观的获知所述目标图像文件所表征的图形用户界面中各个界面元素的层级关系，在获取目标图像文件，以及所述获取所述多个图层的分组信息之后，还可以根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

在本发明实施例的一种实现方式中，分层显示所述多个图层的三维坐标体系可如图6所示。其中，各个图层沿着Z轴纵向分层显示，各个图层所在的显示平面与XY平面平行。实际应用中，Z轴与屏幕之间的角度可以调节。

以图4A所示的多个图层为例，在本发明实施例的一种实现方式中，可以通过下述步骤分层显示所述多个图层：

A.为第一层级的图层组(图4A中的文件夹A、文件夹B、文件夹C)对应生成一个线框，如图7中的线框703，第一层级的图层组对应线框的Z轴值设置为0；

B.将第一层级的图层组中的图层按照图层堆叠顺序分层显示，相邻层次间的纵向间距可以是预设距离，例如30px(像素，Pixel)；可以理解的，如果第一层级的图层组包含的图层数量为n，则最上面的图层Z轴值为30n；

C.同理，为第二层级的图层组(图4A中的文件夹B-1、文件夹B-2)也对应生成一个线框，其Z轴值为30n+30；

D.将第二层级的图层组中的图层按照图层堆叠顺序分层显示，相邻层次间的纵向间距可以是预设距离，例如30px(像素，Pixel)；可以理解的，如果第二层级的图层组包含的图层数量为m，则最上面的图层Z轴值为30n+30+30m。

从上述步骤A-D可知，一个图层组的子图层组显示在所述图层组上方，所述子图层组与所述图层组之间沿Z轴方向上的间距是30个像素。实际应用中，所述图层组与所述子图层组之间沿Z轴方向上的间距还可以是其他值，这里不作限制。

从上述步骤A-D可知，在同一个图层组中，相邻层次的两个图层之间沿Z轴方向上的间距是30个像素。实际应用中，所述相邻层次的两个图层之间沿Z轴方向上的间距还可以是其他值，这里不作限制。

具体实现中，如图7所示，还可以为放置图层701的生成容器线框，如线框702。

在本发明实施例的一种实现方式中，可以如图7所示，在分层展示所述多个图层时，还可以提供用户配置图层对应的控件属性的用户界面，可提高用户配置控件属性的便捷性和直观性。例如，图7的右侧菜单栏提供了用户设置左侧图层对应的控件属性的控件704。

本发明实施例，所述配置操作可以是触控操作、按键操作、语音控制操作、体感操作等等用于指定所述各个图层的控件属性的操作。例如，从左侧的多个图层中选中待配置的图层之后，用户通过触摸屏116点击图7所示界面中的控件704，并从界面上弹出的控件属性列表中通过点击某一项来指定该项对应的控件属性为所述待配置图层的控件属性。

示例仅仅是本发明实施例的一种实现方式，实际应用中还可以不同，不应构成限定。

实施本发明实施例，通过根据目标图像文件包含的各个图层组各自对应的布局区域和所述各个图层组各自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。上述方案可实现直接根据目标图像文件生成页面布局文件，提高了GUI开发的效率，节约了开发成本。

参见图8，图8是本发明实施例提供的页面布局文件生成装置的第一实施例的结构示意图。如图8所示的装置80可包括：获取单元801，生成单元803。其中：

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

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

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

本发明实施例中，一个图层组在用户界面上对应一个布局区域，所述布局区域可以根据所述图层组包含的图层的布局信息来确定。需要说明的，所述元素可以是图层或者子图层组。

需要说明的，一个图层组可包含图层或者子图层组。本发明实施例中，如果一个图层组包含子图层组，那么，可将所述子图层组中的图层作为所述图层组中的图层。

本发明实施例中，可以通过图像识别技术获取图层的布局信息，也可以从所述目标图像文件携带的各个图层的布局参数获取图层的布局信息(如Photoshop中记录的图层的大小、位置参数)，这里不作限制。

可以理解的，确定出图层组对应的布局区域则可获知所述图层组对应的布局区域的布局信息(大小和位置)。从代码生成的角度来说，根据图层组对应的布局区域的布局信息可以生成用于布局所述布局区域的代码。

本发明实施例中，所述各个图层组之间组织关系可以如图4A所示通过文件夹的目录结构体现，其中，一个文件夹用于管理一个图层组。也即是说，图4A中的一个文件夹对应一个图层组。

那么，第二分析单元805可以根据图4A所示的文件夹组织结构可以分析出各个图层组对应的布局区域的布局关系如图4B所示，其中，文件夹A、文件夹B、文件夹C、文件夹B-1和文件夹B-2分别对应布局区域A、布局区域B、布局区域C、布局区域B-1和布局区域B-2。

从图4B可知，布局区域A、布局区域B、布局区域C处于同一层级，布局区域B-1和布局区域B-2处于第二层级，布局区域B中嵌套有布局区域B-1和布局区域B-2，类似于图1中，内容302中嵌套有内容3021和内容3022。

需要说明的，实际应用中，除了通过文件夹的组织结构，所述各个图层组之间组织关系还可以通过其他数据结构来表示，例如图层树，这里不作限制。

本发明实施例涉及的页面布局样式可由所述各个图层对应的布局区域以及所述各个图层对应的布局区域之间布局关系确定。

本发明实施例涉及的页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中。

本发明实施例中，所述页面布局文件经过编译运行会产生所述目标图像文件表征的图形用户界面。

进一步的，生成单元803可包括：第一生成子单元、第二生成子单元和第三生成子单元，其中：

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

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

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

具体的，所述第一生成子单元可具体用于：根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码；根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

本发明实施例中，所述框架布局代码经过编译运行会产生所述目标图像文件设计的页面布局样式。

具体的，所述第三生成子单元可具体用于：将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

需要说明的，在实际生成所述页面布局文件时，开发人员可以根据实际的开发语言和开发平台来实现代码转化，这里不作限制。

进一步的，在将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中之前，所述第三生成子单元还可以分析出所述各个图层各自所属图层组对应的布局区域的布局方式，用以在用于布局所述布局区域的代码中设置所述布局方式，可实现将所述目标图像文件转换成更为准确具体的页面布局文件。

更进一步的，如图9所示，装置80在包括：获取单元801，生成单元803外，还包括：显示单元805，用于在获取单元801获取目标图像文件，以及获取所述多个图层的分组信息之后，根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

在本发明实施例的一种实现方式中，在分层展示所述多个图层时，显示单元805可输出用户配置图层对应的控件属性的用户界面，可提高用户配置控件属性的便捷性和直观性。例如，图7的右侧菜单栏提供了用户设置左侧图层对应的控件属性的控件704。示例仅仅是本发明实施例的一种实现方式，实际应用中，不应构成限定。

可以理解的，装置80中各功能模块的功能可根据图2方法实施例中的方法具体实现，这里不再赘述。

为了便于实施本发明实施例，本发明提供了一种终端，用于实现图2实施例所述的页面布局文件生成方法。参见图10，终端100可包括：基带芯片100、存储器105(可包括一个或多个计算机可读存储介质)、射频(RF)模块106、外围系统107、显示器(LCD)113、摄像头114、音频电路115、触摸屏116以及传感器117(可包括一个或多个传感器)。其中，基带芯片100可集成包括：一个或多个处理器101、时钟模块102以及电源管理模块103。这些部件可在一个或多个通信总线104上通信。

应当理解，终端100仅为本发明的一个例子，并且，终端100可具有比示出的部件更多或更少的部件，可以组合两个或更多个部件，或者可具有部件的不同配置实现。

存储器105与处理器101耦合，用于存储各种软件程序和/或多组指令。具体实现中，存储器105可包括高速随机存取的存储器，并且也可包括非易失性存储器，例如一个或多个磁盘存储设备、闪存设备或其他非易失性固态存储设备。

射频(RF)模块106用于接收和发送射频信号。射频(RF)模块106通过射频信号与通信网络和其他通信设备通信。具体实现中，射频(RF)模块106可包括但不限于：天线系统、RF收发器、一个或多个放大器、调谐器、一个或多个振荡器、数字信号处理器、CODEC芯片、SIM卡和存储介质等。在一些实施例中，可在单独的芯片上实现射频(RF)模块106。

外围系统107主要用于实现终端100和用户/外部环境之间的交互功能，主要包括终端200的输入输出装置。具体实现中，外围系统107可包括：显示器(LCD)控制器108、摄像头控制器109、音频控制器110、触摸屏控制器111以及传感器管理模块112。其中，各个控制器可与各自对应的外围设备耦合。在一些实施例中，外围系统107还可以包括其他I/O外设的控制器。

集成于基带芯片100中的时钟模块102主要用于为处理器101产生数据传输和时序控制所需要的时钟。集成于基带芯片100中的电源管理模块103主要用于为处理器101、射频模块106以及外围系统提供稳定的、高精确度的电压。集成于基带芯片100中的处理器101主要用于调用存储于存储器105中的布局文件生成程序，并执行如下步骤：

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

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

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

本发明实施例中，一个图层组在用户界面上对应一个布局区域，所述布局区域可以根据所述图层组包含的图层的布局信息来确定。

需要说明的，一个图层组可包含图层或者子图层组。本发明实施例中，如果一个图层组包含子图层组，那么，可将所述子图层组中的图层作为所述图层组中的图层。

应当理解的，在确定该图层组对应的布局区域之前，处理器101需要确定出该图层组包含的所有图层的布局信息。

例如，如图3A所示，一个图层组包括子图层组A、图层B、图层C、图层D。其中，子图层组A包括图层1和图层2。具体实现中，处理器101可以根据图层1和图层2的布局信息确定出子图层组A的布局信息，并结合图层B、图层C、图层D各自的布局信息确定出该图层组对应的布局区域(虚线框所示)。

本发明实施例中，处理器101可以通过图像识别技术获取图层的布局信息，也可以从所述目标图像文件携带的各个图层的布局参数获取图层的布局信息(如Photoshop中记录的图层的大小、位置参数)，这里不作限制。

可以理解的，处理器101确定出图层组对应的布局区域则可获知所述图层组对应的布局区域的布局信息(大小和位置)。从代码生成的角度来说，处理器101可以根据图层组对应的布局区域的布局信息生成针对所述布局区域的布局代码。

本发明实施例中，所述各个图层组之间组织关系可以如图4A所示通过文件夹的目录结构体现。实际应用中，除了通过文件夹的组织结构，所述各个图层组之间组织关系还可以通过其他数据结构来表示，例如图层树，这里不作限制。

本发明实施例涉及的页面布局样式可由所述各个图层各自对应的布局区域以及所述各个图层对应的布局区域之间的布局关系决定。

本发明实施例涉及的页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中。

本发明实施例中，所述页面布局文件经过编译运行会产生所述目标图像文件表征的图形用户界面。

具体实现中，处理器101可以根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码，并根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

本发明实施例中，所述框架布局代码经过编译运行会产生所述目标图像文件设计的页面布局样式。

具体实现中，在确定所述各个图层各自对应的控件属性之后，处理器101可以根据所述各个图层各自对应的控件属性、所述各个图层各自对应的布局信息生成用于布局所述各个图层各自对应的控件的代码。其中，所述各个图层各自对应的控件由所述各个图层各自对应的控件属性所表征。

具体实现中，在生成表征页面布局样式的框架布局代码和用于布局所述各个图层各自对应的控件的代码之后，处理器101可以利用所述框架布局代码和用于布局所述各个图层各自对应的控件的代码组合生成所述页面布局文件。

具体的，处理器101可以将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

进一步的，在将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中之前，处理器101还可以分析出所述各个图层各自所属图层组对应的布局区域的布局方式，用以在用于布局所述布局区域的代码中设置所述布局方式，可实现将所述目标图像文件更为准确具体的转换成页面布局文件。

优选的，为了使用户更加直观的获知所述目标图像文件所表征的图形用户界面中各个界面元素的层级关系，在获取目标图像文件，以及所述获取所述多个图层的分组信息之后，处理器101还可以根据所述各个图层组之间的组织关系通过显示器113(LCD)分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

在本发明实施例的一种实现方式中，在通过显示器113(LCD)分层展示所述多个图层时，处理器101可以在显示器113(LCD)上显示用户配置图层对应的控件属性的用户界面，可提高用户配置控件属性的便捷性和直观性。例如，在显示器113(LCD)上显示图7所示界面，其右侧菜单栏提供了用户设置左侧图层对应的控件属性的控件704。

本发明实施例，所述配置操作可以是通过触摸屏116接收的触控操作、按键操作，通过音频电路115接收的语音控制操作、通过传感器117中的运动传感器接收的体感操作等等用于指定所述各个图层的控件属性的操作。

例如，在选中待配置的图层之后，用户通过触摸屏116点击图7所示界面中的控件704，并从界面上弹出的控件属性列表中通过点击某一项来指定该项对应的控件属性为所述待配置图层的控件属性。

示例仅仅是本发明实施例的一种实现方式，实际应用中还可以不同，不应构成限定。

可理解的是，处理器101的执行步骤还可参照图2方法实施例的内容，这里不再赘述。

综上所述，实施本发明实施例，通过根据目标图像文件包含的各个图层组各自对应的布局区域和所述各个图层组各自对应的布局区域之间的布局关系、所述目标图像文件包含的各个图层各自对应的控件属性、布局信息生成页面布局文件；其中，所述各个图层组各自对应的布局区域由所述各个图层组各自包含的图层的布局信息确定；所述各个图层组各自对应的布局区域之间的布局关系由所述各个图层组之间组织关系确定；所述各个图层各自对应的控件属性由输入的配置操作指定。上述方案可实现直接根据目标图像文件生成页面布局文件，提高了GUI开发的效率，节约了开发成本。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所揭露的仅为本发明部分实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (11)

1.一种页面布局文件生成方法，其特征在于，包括：

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

根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；所述页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中；

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

2.如权利要求1所述的方法，其特征在于，所述根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，包括：

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

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

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

3.如权利要求2所述的方法，其特征在于，所述根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系生成框架布局代码，包括：

根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码；

根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

4.如权利要求3所述的方法，其特征在于，所述根据所述框架布局代码和用于布局所述各个图层各自对应的控件的代码生成所述页面布局文件，包括：

将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

5.如权利要求1-4中任一项所述的方法，其特征在于，在所述获取目标图像文件，以及所述获取所述多个图层的分组信息之后，所述方法还包括：

根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

6.一种页面布局文件生成装置，其特征在于，包括：

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

生成单元，用于根据所述各个图层组各自对应的在所述获取单元获取的目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；所述页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中；

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

7.如权利要求6所述的装置，其特征在于，所述生成单元，包括：第一生成子单元、第二生成子单元和第三生成子单元，其中：

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

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

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

8.如权利要求7所述的装置，其特征在于，所述第一生成子单元，具体用于：根据所述各个图层组各自对应的布局区域生成用于布局所述各个图层组各自对应的布局区域的代码；根据所述各个图层组各自对应的布局区域之间的布局关系，将用于布局所述各个图层组各自对应的布局区域的代码组成所述框架布局代码。

9.如权利要求8所述的装置，其特征在于，所述第三生成子单元，具体用于：将用于布局所述各个图层各自对应的控件的代码，填充到所述框架布局代码中用于布局所述各个图层各自所属图层组对应的布局区域的代码中，从而生成所述页面布局文件。

10.如权利要求6-9中任一项所述的装置，其特征在于，还包括：显示单元，用于在所述获取单元获取目标图像文件，以及获取所述多个图层的分组信息之后，根据所述各个图层组之间的组织关系分层显示所述各个图层组，其中，同一图层组中的图层被按照图层在所述目标图像文件中的堆叠顺序进行分层显示。

11.一种终端，其特征在于，包括：存储器和与所述存储器耦合的处理器，其中，所述处理器读取所述存储器中存储的指令，用于执行以下步骤：

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

根据所述各个图层组各自对应的在所述目标图像文件所表征的图形用户界面中的布局区域、所述各个图层组各自对应的布局区域之间的布局关系、所述各个图层各自对应的控件属性以及所述各个图层各自对应的布局信息生成页面布局文件，所述页面布局文件经过编译运行会产生所述图形用户界面；所述页面布局文件包括两部分代码：表征页面布局样式的框架布局代码和用于布局控件的代码，其中，用于布局控件的代码填充在框架布局代码中；

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