CN111258575A - 一种页面布局处理方法及装置 - Google Patents

Abstract

本申请实施例公开了一种页面布局处理方法及装置。所述方法包括：获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。利用本申请方法或装置实施例，可以使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。

Description

一种页面布局处理方法及装置

技术领域

本申请涉及软件开发技术领域，特别涉及一种页面布局处理方法及装置。

背景技术

在应用开发过程中，开发人员需要对应用的界面进行布局。一般的页面布局流程如下所述：应用界面设计师根据应用的业务需求设计应用界面的视觉图稿，该视觉图稿往往布局合理，能够给用户提供较好的视觉体验和操作体验。设计师在完成视觉图稿之后，将视觉图稿提交给开发人员。开发人员在接收到视觉图稿之后，主要任务是将该视觉图稿转换成开发代码，以便于用户在-打开应用时，复原视觉图稿中的界面布局。

在最初阶段，开发人员的转换方式主要是人工获取视觉图稿中各个元素的属性信息，如文字的字体、颜色、大小、位置，图片的大小、位置等，再根据各个元素的属性信息编写相应的开发代码。上述方式不仅费时费力，还存在一个弊端：当客户端设备显示屏的尺寸变化时，应用界面设计师需要重新设计视觉图稿，且开发人员需要重新开发代码，导致开发成本较高。

因此，现有技术中亟需一种高效、开发成本低的页面布局的方法。

发明内容

本申请实施例的目的在于提供一种页面布局处理方法及装置，可以使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。

本申请实施例提供的一种页面布局处理方法及装置具体是这样实现的：

一种页面布局处理方法，所述方法包括：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

一种页面布局处理装置，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现上述的方法。

本申请提供的页面布局处理方法及装置，可以根据页面布局视图中视觉元素的树形结构，确定视觉元素的布局类型，再根据所述布局类型，设置各个元素的布局方式。基于上述页面布局方式，使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。相对于现有技术而言，当显示屏的尺寸发生变化时，可以不需要重新计算视觉元素的属性，即能够合理地展示视觉元素。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请提供的页面布局处理方法的一种实施例的方法流程图；

图2是本申请提供的页面布局处理方法的一种应用场景的示意图；

图3是本申请提供的页面布局处理方法的一种应用场景的示意图；

图4是本申请提供的页面布局处理方法的一种应用场景的示意图；

图5是本申请提供的页面布局处理方法的一种应用场景的示意图；

图6是本申请提供的页面布局处理方法的一种应用场景的示意图；

图7是本申请提供的控件布局装置的一种实施例的模块结构示意图。

具体实施方式

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

由上文可知，现有技术中进页面布局的方式需要人工获取视觉图稿中各个元素的属性信息，且需要根据所述属性信息进行代码开发，开发成本较高。基于类似于上文所述的实际技术需求，本申请提供的页面布局处理方式，可以重复利用预设控件代码库中已有的控件封装代码，快速生成页面中控件的代码，不仅可以大幅度提升开发效率，还可以降低页面开发成本。

下面结合附图1对本申请所述的页面布局处理方法进行详细的说明。图1是本申请提供的页面布局处理方法的一种实施例的方法流程图。虽然本申请提供了如下述实施例或附图所示的方法操作步骤，但基于常规或者无需创造性的劳动在所述方法中可以包括更多或者更少的操作步骤。在逻辑性上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本申请实施例提供的执行顺序。所述方法在实际中的页面布局处理过程中或者装置执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

具体的本申请提供的页面布局处理方法的一种实施例如图1所示，所述方法可以包括：

S101：获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息。

S103：确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素。

S105：根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型。

S107：基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

本实施例中，所述页面布局视图可以包括应用界面设计师根据应用的业务需求设计的应用界面的视觉图稿。所述视觉图稿例如可以具有布局合理、给用户提供较好的视觉体验和操作体验的特征。在一些实施例中，所述页面布局视图的文件格式可以包括下述中的至少一种：Photoshop文档(PSD)、Sketch、Marketch、PDF。

其中，所述PSD格式为图像处理软件Photoshop的专用格式，PSD格式可以用于存储Photoshop应用中图层、通道、参考线、注解、颜色模式等多种信息。当应用界面复杂，需要较多图层时，应用界面设计师可以利用Photoshop进行视觉图稿的设计，生成的文档即为PSD格式。Sketch、Marketch都是基于矢量绘图的视图格式，其中，Marketch为Sketch应用的在线预览插件，可以实现文档导出、动态标注、单位转换、动态切图等多种功能。矢量绘图具有文件存储空间较小、可无极缩放的优点，当应用界面的复杂度较小时，可以利用Sketch、Marketch应用进行视觉图稿的设计。而PDF格式可以将文字、字型、格式、颜色及独立于设备和分辨率的图形、图像等信息封装于一个文件中。PDF格式文件还可以包含超文本链接、声音和动态影像等电子信息，支持存储空间较大的文件，集成度和安全可靠性都较高，且易于传输，通用性较强。当应用界面中包含的信息元素的类型比较丰富时，为了能够向开发人员准确表达应用界面的设计信息，应用界面设计师可以利用PDF进行视觉图稿的设计。当然，在其他实施方式中，所述页面布局视图的文件格式还可以包括其他多种格式，例如基于矢量绘图的CorelDraw、Adobe Illustrator等，本申请在此不做限制。

本实施例中的页面布局视图可以包括多个视觉元素，且所述视觉元素具有属性信息。在一些实施例中，所述视觉元素的类型可以包括下述中的至少一种：按钮、图像、标签、文本框、输入框、选择器等等。所述视觉元素的属性信息可以包括下述中的至少一种：位置信息、样式信息、文本内容、图片链接、音视频链接等属性，其中，所述样式信息例如可以包括文字的字体、字号、文字颜色、字体是否加粗、字体是否倾斜等、图片的图片尺寸、图片颜色、背景色、透明度、阴影、边框粗细、边框颜色等信息。在本申请的一个实施例中，可以通过一些应用软件获取所述视觉元素的属性信息。例如，如果设计师在Sketch中完成页面布局视图的设计，则可以从Sketch提取出所述页面布局视图中任意一个视觉元素对应的属性信息。当然，在本公开的其他实施例中，还可以通过其他应用软件或者方式从所述页面布局视图中视觉元素的属性信息。

在本申请的实施例中，还可以获取所述视觉元素的树形结构。在页面布局视图中的视觉元素中，很多视觉元素嵌套设置于其他视觉元素中，这样，元素之间的嵌套关系可以形成树形结构。如图2所示，视觉元素B、C、D、E、F设置于视觉元素A中，那么，在树形结构中，视觉元素A为视觉元素B、C、D、E、F的父亲节点，视觉元素B、C、D、E、F为视觉元素A的孩子节点。同样地，视觉元素E为视觉元素G、H、I的父亲节点，视觉元素G、H、I为视觉元素E的孩子节点。因此，图2上部所示的页面布局视图可以生成图2下部所示的树形结构。需要说明的是，所述树形结构也可以根据Sketch等应用软件获取，所述树形结构可以包括DOM树、XML语言等形式，本申请对此不做限制。

在获取所述树形结构并确定所述树形结构中的父视觉元素和子视觉元素之后，可以确定所述子视觉元素的父布局类型。在一个实施例中，所述父布局类型包括下述中的一种：横向线性布局、纵向线性布局、相对布局。在一个示例中，对于图2中的视觉元素，视觉元素G、H、I作为视觉元素E的子视觉元素，其属于横向线性布局。视觉元素B、C、D、E、F作为视觉元素A的子视觉元素，其属于相对布局。

具体地，判断子视觉元素是否属于横向线性布局的方法可以包括：

S201：在所述子视觉元素的纵向边界在预设坐标系中的横坐标值之间没有重叠的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界以及所述子视觉元素中距离所述纵轴最远的第二纵向边界；

S203：计算所述第一纵向边界和所述第二纵向边界之间的边界距离；

S205：在相邻的所述子视觉元素之间的横向边界距离小于第一预设阈值，且所述边界距离大于第二预设阈值的情况下，确定所述父布局类型为所述横向线性布局。

下面结合图3说明上述步骤，图3中最大的方形为父视觉元素A的边界，基于父视觉元素A设置有预设坐标系，该预设坐标系为原点与父视觉元素边界A的左上角重合、横轴向右、纵轴向下的直角坐标系。所述子视觉元素的纵向边界在预设坐标系中的横坐标值之间没有重叠，即子视觉元素B、子视觉元素C、子视觉元素D的左右边界的横坐标值均没有重叠，也就是说，子视觉元素B右边界的横坐标值小于子视觉元素C左边界的横坐标值，子视觉元素C右边界的横坐标值小于子视觉元素D左边界的横坐标值。基于此，所述父视觉元素A距离预设坐标系中纵轴较远的第一纵向边界即为所述父视觉元素A的右边界，所述子视觉元素中距离所述纵轴最远的第二纵向边界为子视觉元素D的右边界。基于所述直角坐标系，根据所述父视觉元素和所述子视觉元素D的属性信息，可以计算得到所述子视觉元素D的右边界距离所述父视觉元素A右边界的边界距离。在相邻的所述子视觉元素之间的横向边界距离小于第一预设阈值，且所述边界距离大于第二预设阈值的情况下，确定所述父布局类型为所述横向线性布局。即在图4中的子视觉元素B的右边界和子视觉元素C的左边界之间的距离、所述子视觉元素C的右边界与所述子视觉元素D的左边界之间的距离均小于第一预设阈值且所述边界距离大于第二预设阈值的情况下，可以确定所述子视觉元素B、所述子视觉元素C与所述子视觉元素D之间的布局为横向线性布局。所述第一预设阈值、所述第二预设阈值可以包括9/160、15/160英尺等等。反之，对于图4所示的页面布局，由于子视觉元素D的左边界距离子视觉元素C的右边界太远，大于第一预设阈值，且子视觉元素D的右边界距离父视觉元素A的右边界比较近，小于第二预设阈值，因此，图4的页面布局部不属于横向线性布局。

对于纵向线性布局的判断方式与判断横向线性布局的方式相似，本申请在此不再赘述。

在本申请的实施例中，在确定所述父布局类型为所述横向线性布局的情况下，将所述子视觉元素按照距离所述纵轴由近至远的顺序在所述父视觉元素中依次布局。如图3所示，可以按照距离Y轴由近及远的顺序在父视觉元素A中依次布局子视觉元素B、子视觉元素C、子视觉元素D。具体地，在布局过程中，可以从子视觉元素B、子视觉元素C、子视觉元素D在所述页面布局视图中的属性信息设置在所述父视觉元素A中的位置、大小等属性。同样地，对于纵向线性布局，可以按照距离X轴由近及远的顺序布局子视觉元素。

在本公开的实施例中，在确定所述父视觉元素和所述子视觉元素之间既不属于横向线性布局，也不属于纵向线性布局的情况下，可以确定属于相对布局，如图4中的布局类型。在对相对布局的子视觉元素进行布局时，可以按照下述步骤进行布局：

S301：在确定所述视觉元素的父布局类型为所述相对布局的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界，以及距离所述预设坐标系中横轴较远的第一横向边界；

S303：确定所述子视觉元素中距离所述第一纵向边界小于第三预设阈值和距离所述第一横向边界小于第四预设阈值的边界子视觉元素；

S305：将所述边界子视觉元素布局于所述父视觉元素中；

S307：以所述边界子视觉元素为参考元素，在相同方向上布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素。

下面结合图5说明上述步骤，图5中最大的方形为父视觉元素A的边界，基于父视觉元素A设置有预设坐标系，该预设坐标系为原点与父视觉元素A的左上角重合、横轴向右、纵轴向下的直角坐标系。所述父视觉元素A距离预设坐标系中纵轴较远的第一纵向边界为所述父视觉元素A的右边界，所述距离所述预设坐标系中横轴较远的第一横向边界为所述父视觉元素A的下边界。然后，可以确定距离所述父视觉元素A的右边界较近的边界子视觉元素，如所述边界子视觉元素的右边界距离所述父视觉元素的右边界小于第三预设阈值，如图5中的子视觉元素F。还可以确定距离所述父视觉元素A的下边界较近的子视觉元素，如所述边界子视觉元素的下边界距离所述父视觉元素的下边界小于第四预设阈值，如图5中的子视觉元素E。在提取出上述边界子视觉元素之后，可以直接对所述边界子视觉元素进行布局，并且，还可以在相同方向上布局距离所述边界子视觉元素较近的子视觉元素，例如可以布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素。所述在相同方向可以包括图5中的子视觉元素F可以作为布局在横向上的相邻元素的参考元素，图5中的子视觉元素E可以作为布局在纵向上的相邻元素的参考元素。

本申请实施例中，在对所述边界子视觉元素进行布局的过程中，可以设置所述边界子视觉元素距离所述第一纵向边界或者所述第一横向边界的距离，具体可以根据所述边界子视觉元素距离与其父视觉元素的属性计算得到。然后，还可以根据所述边界子视觉元素在所述页面布局视图中的属性信息，分别确定所述边界子视觉元素在所述父视觉元素中的垂直属性、宽度属性、高度属性、交叠属性。其中，所述垂直属性可以包括所述边界子视觉元素在所述父视觉元素中是否垂直居中，若不垂直居中，可以按照所述边界子视觉元素的属性信息确定其距离所述父视觉元素的上边界近还是下边界近，并计算距离比较近的边界的距离。所述宽度属性可以根据所述边界子视觉元素的属性信息确定，例如对于文字类型，所述边界子视觉元素的宽度可以随着文字的变化而调整。所述边界子视觉元素的宽度还可以与所述父视觉元素的宽度相同，即所述边界子视觉元素的宽度可以随着所述父视觉元素的宽度伸缩。当然，所述边界子视觉元素的宽度还可以固定值，或者为父视觉元素的固定比例值，如1/3，本申请对于宽度属性的设置不做限制。所述高度属性与所述宽度属性的设置相似，在此不做限制。所述交叠属性可以包括与所述边界子视觉元素至少部分交叠的子视觉元素，如在图像元素上设置文字元素，则图像元素和所述文字元素具有交叠关系，需要确定交叠的顺序。因此所述交叠属性可以包括所述边界子视觉元素与其交叠的子视觉元素之间的交叠顺序。

本申请实施例中，在以所述边界子视觉元素为参考元素，在相同方向上布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素的过程中，可以判断所述边界子视觉元素是否存在相邻视觉元素。在确定所述相邻视觉元素的过程中，可以以图5所示的页面布局说明获取上下左右相邻视觉元素的方式，如图6所示，可以将图5中的子视觉元素按照从左至右或者从上至下按序编号。然后，可以分别确定排序完成的子视觉元素的左、上、右、下方向的相邻视觉元素，并建立相邻关系矩阵。在本实施例中，左右相邻关系需要两个视觉元素在高度上至少有部分交叠，上下相邻关系需要两个视觉元素在宽度上至少有部分交叠。本实施例中，可以利用1，2，3，4分别设置左、上、右、下的相邻关系，0表示没有关系。最后，可以以图6所示的编号关系建立相邻关系矩阵，表1为根据图6所示的编号关系建立的相邻关系矩阵，例如，在矩阵中[1,2]的值为3，可以表示子视觉元素2为子视觉元素1的右邻居。

表1视觉元素相邻关系矩阵

	1	2	3	4	5
						1	0	3	0	0	0
2	1	0	3	0	0
						3	0	1	0	2	3
4	0	1	4	0	0
						5	0	0	1	0	0

基于以上相邻关系矩阵，可以判断边界子视觉元素是否存在相邻视觉元素。根据表1所示的相邻关系矩阵，图5中边界子视觉元素F存在与其在相同方向(即左右方向)上的相邻视觉元素E。若确定所述边界子视觉元素存在相邻视觉元素，则可以判断所述相邻视觉元素在与所述边界子视觉元素相对的一侧是否存在相邻的视觉元素，即判断子视觉元素E的左侧是否存在相邻的视觉元素。根据表1，可以确定子视觉元素E的左侧存在相邻的视觉元素C。基于此，可以计算视觉元素E分别与视觉元素F、视觉元素C之间的第一距离、第二距离。在所述第一距离大于所述第二距离，即视觉元素E与视觉元素C之间的距离比较近的情况下，确定所述相邻视觉元素与所述相邻的视觉元素(即视觉元素E与视觉元素C)之间的相对属性，所述相对属性用于在确定视觉元素E与视觉元素C其中之一的属性的情况下确定另一个的属性。若不存在，则可以以F为参考，设置E的的位置和属性。

本申请实施例中，在确定不存在所述边界子视觉元素或者已经设置所述边界子视觉元素以及所述边界子视觉元素的相邻视觉元素的情况下，可以将剩余的还未设置布局的子视觉元素按照预设坐标系的轴向的方向依次设置于父所述视觉元素中，直至完成对所有子视觉元素的设置。例如按照X轴从左至右的顺序，或者按照Y轴从上之下的顺序。

在本申请的一个实施例中，在对按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局的过程中，可以包括：

(1)在按照纵轴方向依次布局的情况下，确定所述父视觉元素距离所述预设坐标系纵轴较近的第二纵向边界；

(2)判断子视觉元素在靠近所述第二纵向边界的一侧是否存在相邻视觉元素；

(3)若存在，则确定所述子视觉元素与所述相邻视觉元素之间的相对属性；

(4)对所述相邻视觉元素重复步骤(2)和(3)，直至确定所述相邻视觉元素在父视觉元素中的布局。

本实施例中，在按照纵轴方向依次布局的情况下，可以确定所述父视觉元素距离所述预设坐标系纵轴较近的第二纵向边界。即在图5中，若按照Y轴正方向依次布局，及布局顺序为视觉元素D、B、C、F、E，则确定父视觉元素A距离Y轴最近的纵向边界，即父视觉元素A的左边界。然后，可以判断子视觉元素在靠近所述第二纵向边界的一侧是否存在相邻视觉元素。图5中，在设置子视觉元素D的布局方式时，可以判断子视觉元素D的左侧是否存在相邻视觉元素。若存在，则确定所述子视觉元素与所述相邻视觉元素之间的相对属性。根据表1的视觉元素相邻关系表，可以确定子视觉元素D的左侧有相邻视觉元素C。然后，可以确定子视觉元素D与相邻视觉元素C之间的相对属性，当子视觉元素C或者D中有一个设置完成，则可以设置另一个的位置和属性。例如，子视觉元素D为水平居中，且靠近X轴，则可以确定子视觉元素D的位置和属性，基于子视觉元素D与相邻视觉元素C之间的相对属性，则可以确定相邻视觉元素C的位置和属性。

需要说明的是，本申请各个实施例描述了在一个父视觉元素中各个子视觉元素的布局方式。在实际应用环境中，往往视觉元素之间具有多层嵌套关系。例如图2中的视觉元素E，视觉元素E既是父视觉元素A的子视觉元素，也是子视觉元素G、H、I的父视觉元素。因此，在一种实施例中，在对图2所示的页面视图布局进行设置时，可以从树形结构的根据开始，由上至下遍历所述树形结构。例如，在设置父视觉元素A中子视觉元素的布局时，可以将E作为一个整体，与其他兄弟视觉元素一起完成布局。然后，在对E中的子视觉元素进行布局。

本申请提供的页面布局处理方法，可以根据页面布局视图中视觉元素的树形结构，确定视觉元素的布局类型，再根据所述布局类型，设置各个元素的布局方式。基于上述页面布局方式，可以将页面布局视图中的元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。相对于现有技术而言，当显示屏的尺寸发生变化时，可以不需要重新计算视觉元素的属性，即能够合理地展示视觉元素。

如图7所示，本申请另一方面还提供一种页面布局处理装置，可以包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

可选的，在本申请的一个实施例中，所述父布局类型包括下述中的一种：横向线性布局、纵向线性布局、相对布局。

可选的，在本申请的一个实施例中，所述处理器在实现步骤根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型时包括：

在所述子视觉元素的纵向边界在预设坐标系中的横坐标值之间没有重叠的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界以及所述子视觉元素中距离所述纵轴最远的第二纵向边界；

计算所述第一纵向边界和所述第二纵向边界之间的边界距离；

在相邻的所述子视觉元素之间的横向边界距离小于第一预设阈值，且所述边界距离小于第二预设阈值的情况下，确定所述父布局类型为所述横向线性布局。

可选的，在本申请的一个实施例中，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局时包括：

在确定所述父布局类型为所述横向线性布局的情况下，将所述子视觉元素按照距离所述纵轴由近至远的顺序在所述父视觉元素中依次布局。

可选的，在本申请的一个实施例中，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局时包括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界，以及距离所述预设坐标系中横轴较远的第一横向边界；

确定所述子视觉元素中距离所述第一纵向边界小于第三预设阈值和距离所述第一横向边界小于第四预设阈值的边界子视觉元素；

将所述边界子视觉元素布局于所述父视觉元素中；

以所述边界子视觉元素为参考元素，在相同方向上布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素。

可选的，在本申请的一个实施例中，所述处理器在实现步骤将所述边界子视觉元素布局于所述父视觉元素中时包括：

设置所述边界子视觉元素距离所述第一纵向边界或者所述第一横向边界的距离；

根据所述边界子视觉元素在所述页面布局视图中的属性信息，分别确定所述边界子视觉元素在所述父视觉元素中的垂直属性、宽度属性、高度属性、交叠属性。

可选的，在本申请的一个实施例中，所述处理器在实现步骤以所述边界子视觉元素为参考元素，布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素时包括：

在确定所述边界子视觉元素存在相邻视觉元素的情况下，判断所述相邻视觉元素在与所述边界子视觉元素相对的一侧是否存在相邻的视觉元素；

若判断结果为是，则计算所述相邻视觉元素分与所述边界子视觉元素之间的第一距离、与所述相邻的视觉元素之间的第二距离；

在所述第一距离大于所述第二距离的情况下，确定所述相邻视觉元素与所述相邻的视觉元素之间的相对属性，所述相对属性用于在确定所述相邻视觉元素和所述相邻的视觉元素其中之一的属性的情况下确定另一个的属性。

可选的，在本申请的一个实施例中，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局包时括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局。

可选的，在本申请的一个实施例中，所述处理器在实现步骤按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局时包括：

(1)在按照纵轴方向依次布局的情况下，确定所述父视觉元素距离所述预设坐标系纵轴较近的第二纵向边界；

(2)判断子视觉元素在靠近所述第二纵向边界的一侧是否存在相邻视觉元素；

(3)若存在，则确定所述子视觉元素与所述相邻视觉元素之间的相对属性；

(4)对所述相邻视觉元素重复步骤(2)和(3)，直至确定所述相邻视觉元素在父视觉元素中的布局。

本申请另一方面还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时可以实现上述任一实施例所述的方法。

所述计算机可读存储介质可以包括用于存储信息的物理装置，通常是将信息数字化后再以利用电、磁或者光学等方式的媒体加以存储。本实施例所述的计算机可读存储介质有可以包括：利用电能方式存储信息的装置如，各式存储器，如RAM、ROM等；利用磁能方式存储信息的装置如，硬盘、软盘、磁带、磁芯存储器、磁泡存储器、U盘；利用光学方式存储信息的装置如，CD或DVD。当然，还有其他方式的可读存储介质，例如量子存储器、石墨烯存储器等等。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device，PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (19)

1.一种页面布局处理方法，其特征在于，所述方法包括：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

2.根据权利要求1所述的方法，其特征在于，所述父布局类型包括下述中的一种：横向线性布局、纵向线性布局、相对布局。

3.根据权利要求2所述的方法，其特征在于，所述根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型包括：

在所述子视觉元素的纵向边界在预设坐标系中的横坐标值之间没有重叠的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界以及所述子视觉元素中距离所述纵轴最远的第二纵向边界；

计算所述第一纵向边界和所述第二纵向边界之间的边界距离；

在相邻的所述子视觉元素之间的横向边界距离小于第一预设阈值，且所述边界距离小于第二预设阈值的情况下，确定所述父布局类型为所述横向线性布局。

4.根据权利要求3所述的方法，其特征在于，所述基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局包括：

在确定所述父布局类型为所述横向线性布局的情况下，将所述子视觉元素按照距离所述纵轴由近至远的顺序在所述父视觉元素中依次布局。

5.根据权利要求2所述的方法，其特征在于，所述基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局包括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界，以及距离所述预设坐标系中横轴较远的第一横向边界；

确定所述子视觉元素中距离所述第一纵向边界小于第三预设阈值和距离所述第一横向边界小于第四预设阈值的边界子视觉元素；

将所述边界子视觉元素布局于所述父视觉元素中；

以所述边界子视觉元素为参考元素，在相同方向上布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素。

6.根据权利要求5所述的方法，其特征在于，所述将所述边界子视觉元素布局于所述父视觉元素中包括：

设置所述边界子视觉元素距离所述第一纵向边界或者所述第一横向边界的距离；

根据所述边界子视觉元素在所述页面布局视图中的属性信息，分别确定所述边界子视觉元素在所述父视觉元素中的垂直属性、宽度属性、高度属性、交叠属性。

7.根据权利要求5所述的方法，其特征在于，所述以所述边界子视觉元素为参考元素，布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素包括：

在确定所述边界子视觉元素存在相邻视觉元素的情况下，判断所述相邻视觉元素在与所述边界子视觉元素相对的一侧是否存在相邻的视觉元素；

若判断结果为是，则计算所述相邻视觉元素分与所述边界子视觉元素之间的第一距离、与所述相邻的视觉元素之间的第二距离；

在所述第一距离大于所述第二距离的情况下，确定所述相邻视觉元素与所述相邻的视觉元素之间的相对属性，所述相对属性用于在确定所述相邻视觉元素和所述相邻的视觉元素其中之一的属性的情况下确定另一个的属性。

8.根据权利要求2所述的方法，其特征在于，所述基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局包括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局。

9.根据权利要求8所述的方法，其特征在于，所述按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局包括：

(1)在按照纵轴方向依次布局的情况下，确定所述父视觉元素距离所述预设坐标系纵轴较近的第二纵向边界；

(2)判断子视觉元素在靠近所述第二纵向边界的一侧是否存在相邻视觉元素；

(3)若存在，则确定所述子视觉元素与所述相邻视觉元素之间的相对属性；

(4)对所述相邻视觉元素重复步骤(2)和(3)，直至确定所述相邻视觉元素在父视觉元素中的布局。

10.一种页面布局处理装置，其特征在于，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

11.根据权利要求10所述的装置，其特征在于，所述父布局类型包括下述中的一种：横向线性布局、纵向线性布局、相对布局。

12.根据权利要求11所述的装置，其特征在于，所述处理器在实现步骤根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型时包括：

在所述子视觉元素的纵向边界在预设坐标系中的横坐标值之间没有重叠的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界以及所述子视觉元素中距离所述纵轴最远的第二纵向边界；

计算所述第一纵向边界和所述第二纵向边界之间的边界距离；

在相邻的所述子视觉元素之间的横向边界距离小于第一预设阈值，且所述边界距离小于第二预设阈值的情况下，确定所述父布局类型为所述横向线性布局。

13.根据权利要求12所述的装置，其特征在于，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局时包括：

在确定所述父布局类型为所述横向线性布局的情况下，将所述子视觉元素按照距离所述纵轴由近至远的顺序在所述父视觉元素中依次布局。

14.根据权利要求11所述的装置，其特征在于，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局时包括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，确定所述父视觉元素距离预设坐标系中纵轴较远的第一纵向边界，以及距离所述预设坐标系中横轴较远的第一横向边界；

确定所述子视觉元素中距离所述第一纵向边界小于第三预设阈值和距离所述第一横向边界小于第四预设阈值的边界子视觉元素；

将所述边界子视觉元素布局于所述父视觉元素中；

以所述边界子视觉元素为参考元素，在相同方向上布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素。

15.根据权利要求14所述的装置，其特征在于，所述处理器在实现步骤将所述边界子视觉元素布局于所述父视觉元素中时包括：

设置所述边界子视觉元素距离所述第一纵向边界或者所述第一横向边界的距离；

根据所述边界子视觉元素在所述页面布局视图中的属性信息，分别确定所述边界子视觉元素在所述父视觉元素中的垂直属性、宽度属性、高度属性、交叠属性。

16.根据权利要求14所述的装置，其特征在于，所述处理器在实现步骤以所述边界子视觉元素为参考元素，布局与所述边界子视觉元素之间的距离小于第四阈值的子视觉元素时包括：

在确定所述边界子视觉元素存在相邻视觉元素的情况下，判断所述相邻视觉元素在与所述边界子视觉元素相对的一侧是否存在相邻的视觉元素；

若判断结果为是，则计算所述相邻视觉元素分与所述边界子视觉元素之间的第一距离、与所述相邻的视觉元素之间的第二距离；

在所述第一距离大于所述第二距离的情况下，确定所述相邻视觉元素与所述相邻的视觉元素之间的相对属性，所述相对属性用于在确定所述相邻视觉元素和所述相邻的视觉元素其中之一的属性的情况下确定另一个的属性。

17.根据权利要求11所述的装置，其特征在于，所述处理器在实现步骤基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局包时括：

在确定所述视觉元素的父布局类型为所述相对布局的情况下，按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局。

18.根据权利要求17所述的装置，其特征在于，所述处理器在实现步骤按照预设坐标系的轴向的方向依次设置所述子视觉元素在父视觉元素中的布局时包括：

(1)在按照纵轴方向依次布局的情况下，确定所述父视觉元素距离所述预设坐标系纵轴较近的第二纵向边界；

(2)判断子视觉元素在靠近所述第二纵向边界的一侧是否存在相邻视觉元素；

(3)若存在，则确定所述子视觉元素与所述相邻视觉元素之间的相对属性；

(4)对所述相邻视觉元素重复步骤(2)和(3)，直至确定所述相邻视觉元素在父视觉元素中的布局。

19.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述指令被执行时实现权利要求1-9任意一项所述的方法。

Images