CN114579912A - 页面布局方法、装置、设备及介质 - Google Patents

Abstract

本申请提供一种页面布局方法、装置、设备及介质，该页面布局方法包括：获取目标页面的原始布局数据，原始布局数据包括目标页面上多个页面元素的位置和尺寸；根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据。从而，实现页面的自动布局，并在自动布局中将相关联的页面元素划分至同一页面区域，避免显示窗口的大小变化导致关联的页面元素位置关系发生较大变化，提高自动布局后的页面显示效果，提高用户的浏览体验。

Description

页面布局方法、装置、设备及介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面布局方法、装置、设备及介质。

背景技术

页面布局是数据可视化搭建过程中的重要一环。便捷的布局操作可以帮助用户快速搭建出数据报表页面，而且通过布局可以将相关联的页面元素排列在一起，方便用户更加集中地获取数据信息。

目前，用户有着数据报表页面的多端浏览需求，比如，用户需要在手机和电脑上浏览数据报表页面。不同设备的显示屏幕大小不同，同一页面在不同设备上往往需要采用不同的页面布局。一种布局方式是，前端开发人员提前准备好适用于不同端的页面布局，这需要消耗大量的时间；另一种布局方式是，采用自动布局方法，基于一端的页面布局快速生成其他端的页面布局。

传统的用于自动布局的多端适配方法主要是按照元素顺序对页面上的每个元素进行裁剪，然而，该方案下，宽屏布局下关联的页面元素在窄屏布局中的位置关系会发生较大变化，导致用户无法通过窄屏中页面元素的位置关系感知到页面元素之间的关联，进而导致用户在窄屏下的页面浏览体验不佳。

发明内容

本申请提供一种页面布局方法、装置、设备及介质。用以解决页面自动布局中页面元素的位置关系发生较大变化，导致用户浏览体验不佳的问题。

第一方面，本申请实施例提供一种页面布局方法，包括：获取目标页面的原始布局数据，原始布局数据包括目标页面上多个页面元素的位置和尺寸；根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据；根据目标布局数据，在显示窗口对目标页面进行显示。

第二方面，本申请实施例提供一种页面布局装置，包括：获取单元，用于获取目标页面的原始布局数据，原始布局数据包括目标页面上多个页面元素的位置、尺寸和标识；区域确定单元，用于根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；布局确定单元，用于根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据；显示单元，用于根据目标布局数据，在显示窗口对目标页面进行显示。

第三方面，本申请实施例提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使电子设备能够执行本申请第一方面中任一项提供的页面布局方法。

第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本申请第一方面中任一项提供的页面布局方法。

本申请实施例中，基于目标页面的原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；再基于目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据，实现了目标页面在显示窗口的自适应布局；接着，基于目标布局数据，在显示窗口显示目标页面。因此，通过将关联的页面元素划分至同一页面区域，避免自适应布局后原本关联的页面元素的位置关系发生较大变化，使得用户依旧可以基于自适应布局后页面元素的位置关系感知出页面元素之间的关联，提高页面布局效果，提高用户浏览体验。

附图说明

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

图1为页面布局的示例图一；

图2为页面布局的示例图二；

图3为本申请实施例提供的页面布局方法的场景示意图；

图4为本申请实施例提供的页面布局方法的流程示意图一；

图5为本申请实施例提供的页面布局方法的流程示意图二；

图6为本申请实施例提供的页面布局方法中目标页面的一次分割过程的流程示意图；

图7为本申请实施例提供的页面布局方法中第N次分割中对目标区域进行行分割的流程示意图；

图8为本申请实施例提供的页面布局方法中自适应布局的页面示例图；

图9为本申请实施例提供的页面布局方法中第N次分割中对第一区域进行行分割的流程示意图；

图10为本申请实施例提供的页面布局方法的流程示意图三；

图11为本申请实施例提供的页面布局方法中对目标节点的位置和尺寸进行调整的流程示意图；

图12为本申请实施例提供的一种页面布局装置的结构框图；

图13为本申请实施例提供的电子设备的硬件结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

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

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。

此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块。

首先，对本申请实施例的部分用语进行解释：

页面：可以为万维网(World Wide Web，Web)，比如基于超文本标记语言(HyperText Markup Language，HTML)编写的Web页面，或者，也可以是客户端原生(Native)页面。

页面元素：又称为页面的元素，是指页面上展示的信息，比如页面上的图片、文字、表格、音频、视频等。在构建页面的过程中，前端人员可定义页面元素所展示的内容、页面元素的位置、页面元素的尺寸等。

在宽屏下开发人员可以将展示数据相关联的页面元素排列在一起，使得用户可以通过页面元素的位置关系感知页面元素之间的关联性。在屏幕变窄，即页面的显示窗口变小的情况下，页面上的页面元素需要适用于变化后的显示窗口进行重新布局。布局方式一为：基于显示窗口变化前后的尺寸比例，对页面元素进行等比缩放，该方式会导致页面元素过小，不利于查看也不利于用户对页面元素进行交互操作。布局方式二为：按照页面元素在页面上的位置顺序，依次对页面元素进行裁剪，再基于该位置顺序在变窄的显示窗口中对裁剪后的页面元素进行重新布局，该方式中原本相关联的页面元素在重新布局后可能会插入不相关的元素，即原本相关联的页面元素被拆开，导致用户无法通过页面元素的位置关系感知出页面元素之间的关联。布局方式三为：逐个将超出显示窗口的页面元素下移，该方式也会导致相关联的页面元素被拆开。下面针对布局方式一和布局方式二提供示例：

作为示例的，图1为页面布局的示例图一。其中，在图1中，(a)为原始布局下的数据报表页面，(b)为显示窗口变窄后采用布局方式一得到的数据报表页面，(c)为显示窗口变窄后采用布局方式二得到的数据报表页面。如图1所示，在原始布局下的数据报页面中包括页面元素A、页面元素B、页面元素C、页面元素D、页面元素E和页面元素F。采用布局方式一后，这些页面元素的尺寸明显缩小，不利于用户查看页面元素所展示的内容也不利于用户对页面元素进行交互操作。采用布局方式二后，原本关联的页面元素C和页面元素D之间插入页面元素E，用户无法基于(c)中页面元素C与页面元素D之间的位置关系感知到页面元素C与页面元素D的关联性。

又作为示例的，图2为页面布局的示例图二。如图2所示，宽屏下的数据报表页面中，页面元素一和页面元素二位置相邻且所展示的数据是相关的，用户通过页面元素一和页面元素二的位置关系可以感知到页面元素一与页面元素二的关联性；窄屏下的数据报表页面中，页面元素一和页面元素二之间插入了页面元素三，用户通过页面元素一和页面元素二的位置关系无法感知到页面元素一与页面元素二的关联性。

为了解决上述问题，本申请实施例提出了一种页面布局方法。在该方法中，基于页面的原始布局数据，确定页面的多个页面区域，同一页面区域内的页面元素为相关联的页面元素；基于用于展示页面的显示窗口、多个页面区域和原始布局数据，确定适合该显示窗口的布局数据，继而基于该布局数据，在显示窗口对页面进行显示。从而，通过对页面进行区域将相关联的页面元素划分至相同的页面区域的方式，保证同一页面区域内的页面元素(即在原始布局数据中相关联的页面元素)尽量排布在一起，使得在页面自适应布局后用户依旧可以基于页面元素的位置排布感知页面元素之间的关联。

示例性的，图3为本申请实施例提供的页面布局方法的场景示意图，如图3所示，用户在终端上访问目标页面时，终端需从服务端获取目标页面的原始布局数据，基于目标页面的原始布局数据进行自适应布局，最后显示自适应布局后的目标页面。其中，图3以终端为手机为例。

其中，目标页面的自适应布局的过程包括：获取目标页面的原始布局数据；基于目标页面的原始布局数据，确定目标页面的多个页面区域；基于用于展示目标页面的显示窗口、页面区域和原始布局数据，确定适合显示窗口的目标布局数据；根据目标布局数据，在显示窗口对目标页面进行显示。

如图3所示，在确定页面布局时，同一页面布局内的页面元素为相关联的元素，比如相关联的页面元素A和页面元素B位于同一页面区域内，在自适应布局后，页面元素A和页面元素B依旧排列在同一页面区域内。又比如相关联的页面元素C和页面元素E位于同一页面区域内，在自适应布局后，页面元素C和页面元素E依旧排列在同一页面区域内，并未被拆开，用户基于自适应布局后的目标页面可以感知到页面元素C与页面元素E的关联关系。

上述只是示例性的一个应用场景，上述页面元素的排布顺序也仅为一个示例性的排布。本申请实施例可以应用于互联网中任何页面显示场景中，比如应用程序页面显示场景、Web页面显示场景等。

下面，通过具体实施例对本申请的技术方案进行详细说明。需要说明的是，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。

需要说明的是，本申请实施例的方法执行主体为电子设备，电子设备例如为终端，终端可以是个人数字处理(personal digital assistant，简称PDA)设备、具有无线通信功能的手持设备(例如智能手机、平板电脑)、计算设备(例如个人电脑(personal computer，简称PC))、车载设备、可穿戴设备(例如智能手表、智能手环)、智能家居设备(例如智能显示设备)等。

参考图4，图4为本申请实施例提供的页面布局方法的流程示意图一。本申请实施例提供一种页面布局方法，具体包括以下步骤：

S401，获取目标页面的原始布局数据。

其中，目标页面为待进行自适应布局的页面且用于显示目标页面的显示窗口小于目标页面的原始页面尺寸。原始页面尺寸是指目标页面的原始布局数据所反映的页面尺寸，即目标页面未经过缩放和/或裁剪时的页面尺寸。

其中，目标页面的原始布局数据包括目标页面上多个页面元素的属性信息，页面元素的属性信息包括页面元素的位置和页面元素的尺寸，可由前端人员在充分考虑页面元素之间的关联的前提下设计得到。比如，在原始布局数据中，将展示内容为关联内容的页面元素排列在同一列或者同一行。

可选的，在原始布局数据中，页面元素的属性信息还可包括页面元素所展示的内容和页面元素的标识。其中，页面元素所展示的内容可在显示目标页面时进行展示，例如，页面元素所展示的内容为页面元素所展示的图片、文本等。其中，页面元素的标识唯一，用于区分页面元素。

本实施例中，可从本地或者从服务端获取目标页面的原始布局数据。例如，目标页面为Web页面时，可从服务端获取目标页面的原始布局数据；目标页面为客户端原生页面时，可从本地获取目标页面的原始布局数据。

可选的，响应于访问目标页面的请求，获取目标页面的原始布局数据。比如，在检测到用户输入目标页面的网址以访问目标页面的情况下，获取目标页面的原始布局数据。从而，提高用户访问页面时页面的布局效果。

又可选的，在检测到用于展示目标页面的显示窗口的尺寸变化的情况下，获取目标页面的原始布局数据。比如，在检测到用户缩小浏览器的窗口大小时，获取浏览器的窗口所显示的页面的原始布局数据，以在页面所在显示窗口的尺寸变化时及时对页面进行自适应布局。其中，显示窗口的尺寸变化包括显示窗口的尺寸变大和/或显示窗口的尺寸变小，显示窗口变化后的尺寸小于目标页面的原始页面尺寸。

S402，根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素。

其中，在多个页面区域中，至少一个页面区域中包含至少两个页面元素。不同的页面区域之间可以重叠或者不重叠。

本实施例中，在得到目标页面的原始布局数据之后，由于原始布局数据中包括目标页面上多个页面元素的位置和尺寸，所以原始布局数据可反映出目标页面上多个页面元素的位置分布，可基于原始布局数据反映出的多个页面元素的位置分布，确定多个页面元素之间的关联关系，基于多个页面元素之间的关联关系，确定目标页面的多个页面区域，以使得同一页面区域内的页面元素为相关联的页面元素。

可选的，基于目标页面上多个页面元素的位置和尺寸，对多个页面元素进行聚类，基于聚类结果确定目标页面的多个页面区域。从而，通过聚类方式确定页面元素之间的关联关系，提高页面区域划分的准确性。

本可选方式中，在聚类时，可将目标页面上位置相邻的页面元素归为同一类，或者，可将目标页面上位置相邻且尺寸相似度超过相似度阈值的页面元素归为一类。在确定页面区域时，可将各类中所有页面元素的并集分别确定为各类对应的页面区域，如此得到多个页面区域。其中，尺寸相似度包括如下至少一种：高度相似度、宽度相似度、形状相似度。

除了聚类方式之外，还可以通过其他方式来确定页面区域。可选的，可预先设置判断两两页面元素是否关联条件。在确定页面区域时，可根据原始布局数据，依次判断两两页面元素是否满足关联条件，如果两两页面元素满足该关联条件，则确定该两个页面元素为一对相关联的页面元素，如此得到多个相关联的页面元素，进而根据多个相关联的页面元素的位置和尺寸，确定包含该多个相关联的页面元素的页面区域。

其中，在页面元素的尺寸包括页面元素的高度和宽度的情况下，关联条件可包括如下至少一种：页面元素的位置并列且页面元素的宽度一致、页面元素并排且页面元素的高度一致。以图3为例，先判断页面元素A和页面元素B，确定页面元素A和页面元素B满足“页面元素并排且页面元素的高度一致”的关联条件，确定页面元素A和页面元素B为相关联的页面元素，接着判断页面元素C和页面元素E，确定页面元素C和页面元素E满足“页面元素的位置并列且页面元素的宽度一致”的关联条件，确定页面元素C和页面元素E为相关联的页面元素。

S403、根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据。

其中，用于展示目标页面的显示窗口：例如，用于展示目标页面的浏览器窗口；又如，目标页面所属的客户端应用程序在终端上所占的显示区域。

其中，目标布局数据包括目标页面上多个页面元素调整后的位置和尺寸。

本实施例中，在自适应布局中，页面区域的尺寸要受到显示窗口的尺寸的约束，页面区域中的页面元素的尺寸要受到页面区域的尺寸的约束，因此，可在用于展示目标页面的显示窗口的范围内，对页面区域进行位置调整和/或尺寸调整(如尺寸裁剪)，可在位置调整和/或尺寸调整后的页面区域内，对该页面区域中的页面元素进行位置调整和/或尺寸调整，以保证同一页面区域内的页面元素依旧是位于同一页面区域内，不会被插入无关的页面元素。最终，得到适合显示窗口的目标布局数据。其中，这里的位置调整和尺寸调整都是在原始布局数据的基础上进行的，以提高位置调整和尺寸调整的合理性。

S404、根据目标布局数据，在显示窗口对目标页面进行显示。

本实施例中，按照目标布局数据中多个页面元素的位置和尺寸，在显示窗口中对目标页面上的多个页面元素进行渲染，完成目标页面的显示。在此，对页面元素的渲染操作不做限制。

本申请实施例中，通过对页面进行区域将相关联的页面元素划分至相同的页面区域的方式，保证自适应布局后原始布局数据中相关联的页面元素之间不会被插入无关的页面元素，使得在页面自适应布局后用户依旧可以基于页面元素的位置排布感知页面元素之间的关联，提高页面布局效果。

基于前述实施例，除了聚类、预先设置关联条件之外，还可采用行分割和/或列分割方式确定目标区域，具体可参照图5～图9所示的实施例。

参照图5，图5为本申请实施例提供的页面布局方法的流程示意图二。如图5所示，该页面布局方法具体包括如下步骤：

S501，获取目标页面的原始布局数据。

其中，S501的实现原理和技术效果可参照前述实施例，不再赘述。

S502，基于原始布局数据，对目标页面进行行分割和/或列分割，得到多个页面区域，页面区域包括行区域和/或列区域。

其中，行区域是对目标页面进行行分割得到的页面区域，列区域是对目标页面进行列分割得到的页面区域。行分割是指按行进行分割，比如以一个或多个行位置为基准进行分割，行位置可为页面的第几行，也可以将页面视为二维坐标系，以二维坐标系中的Y坐标表示行位置。列分割是指按列进行分割，比如以一个或多个列位置为基准进行分割，列位置可为页面的第几列，也可以将页面视为二维坐标系，以该二维坐标系中的X坐标表示列位置。

本实施例中，考虑到并排(即同排、同行)的页面元素为相关联的页面元素的概率较高且原始布局数据可反映出页面元素在行位置上的分布情况，可遍历原始布局数据中页面元素的位置和尺寸，基于页面元素的位置和尺寸，对目标页面进行行分割，得到行区域。和/或，考虑到并列(即同列)的页面元素为相关联的页面元素的概率较高且原始布局数据可反映出页面元素在列位置上的分布情况，可遍历原始布局数据中页面元素的位置和尺寸，基于页面元素的位置和尺寸，对目标页面进行列分割，得到列区域。

可选的，在对目标页面进行行分割时，可基于原始布局数据中页面元素的位置和尺寸，确定两两页面元素在目标页面所在的行是否存在交叉(即重叠)，若存在则确定该两两页面元素属于同一行区域，如此，确定一个或多个行区域；在对目标页面进行列分割时，可基于原始布局数据中页面元素的位置和尺寸，确定两两页面元素在目标页面所在的列是否存在交叉，若存在则确定该两两页面元素属于同一列区域，如此，确定一个或多个列区域。

S503、根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据。

S504、根据目标布局数据，在显示窗口对目标页面进行显示。

其中，S503、S504的实现原理和技术效果可参照前述实施例，不再赘述。

本申请实施例中，利用并排和/或并列的页面元素为相关联的页面元素的概率较高的特点，对目标页面进行行分割和/或列分割，得到目标页面的多个页面区域，提高页面区域划分的准确性，使得相关联的页面元素更准确地落在同一页面区域内，进而提高了页面自适应布局的准确性。

基于图5所示的实施例，在一些实施例中，目标页面的分割次数大于或等于1，基于此，下面提供页面分割的可选实施例。

参考图6，图6为本申请实施例提供的页面布局方法中目标页面的一次分割过程的流程示意图，目标页面的分割过程具体包括以下步骤：

S601、确定第N次待分割的目标区域，目标区域包含多个页面元素；

其中，第N次待分割的目标区域是指在目标页面的第N次分割过程中待分割的页面区域，由于包含至少两个页面元素的页面区域才有分割的必要，所以，目标区域需为包含多个页面元素的页面区域。目标区域可为一个或多个。如果目标区域为多个，则可对各个目标区域分别进行行分割和/或列分割，得到各个目标区域中的行区域和/或列区域。

本实施例中，在N等于1的情况下，由于还未对目标页面进行过区域分割，可确定目标区域为目标页面；在N大于1的情况下，可确定目标区域为上一次(即第N-1次)分割得到的且包含多个页面元素的页面区域，在页面区域包括行区域和/或列区域的情况下，进一步的，可确定目标区域为上一次分割得到的且包含多个页面元素的行区域和/或列区域。

S602、根据原始布局数据，确定目标区域中页面元素的位置顺序、目标区域中页面元素的位置以及目标区域中页面元素的尺寸。

本实施例中，目标区域的位置和尺寸已知，可从原始布局数据中获得目标区域中页面元素的位置和尺寸，并按照从左到右和从上到下的顺序，对目标区域中的页面元素进行排序，得到目标区域中页面元素的位置顺序。即，目标区域中最左上角的页面元素为目标区域中的第一个页面元素，从左到右并从上到下再依次确定目标区域中的第二个页面元素、第三个页面元素等等。

S603、根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割和/或列分割，得到目标区域中的行区域和/或列区域。

本实施例中，按照目标区域中页面元素的位置顺序，依次遍历目标区域中的页面元素，可根据遍历到的页面元素的位置和尺寸，在目标区域内确定与遍历到的页面元素相关的行区域和/或列区域。如此，完成目标页面的第N次分割。如果仅对目标页面进行一次分割，则N等于1，后续可基于目标页面的显示窗口、该次分割得到的行区域和/或列区域以及原始布局数据，确定适合显示窗口的目标布局数据；如果对目标页面进行多次分割，则N大于或等于1，可将第N次分割得到的行区域和/或列区域确定为下一次分割中待分割的目标区域，如此，迭代进行目标页面的分割，直至目标页面的分割满足预设分割条件。其中，预设分割条件可包括如下一种或多种：N大于或等于预设次数阈值(即若N大于或等于预设次数阈值，则结束对目标页面的分割)、N次分割后得到的行区域和/或列区域仅包含一个页面元素(即若第N次分割得到的行区域和/或列区域仅包含一个页面元素，则结束对目标页面的分割)。

在对目标区域进行行分割时，可基于目标区域中的第一个页面元素，确定第一个行区域；确定目标区域中的第二个页面元素是否应该属于第一个行区域，若是，则更新第一个行区域的位置和尺寸，以使得第一个行区域包裹第一个页面元素和第二个页面元素，否则基于第二个页面元素确定第二个行区域。如此，依次遍历各个页面元素，得到一个或多个行区域。

在对目标区域进行列分割时，可基于目标区域中的第一个页面元素，确定第一个列区域；确定目标区域中的第二个页面元素是否应该属于第一个列区域，若是，则更新第一个列区域的位置和尺寸，以使得第一个列区域包裹第一个页面元素和第二个页面元素，否则基于第二个页面元素确定第二个列区域。如此，依次遍历各个页面元素，得到一个或多个列区域。

在对目标区域进行行分割和列分割时，可以先进行行分割，再进行列分割，也可以先进行列分割，再进行行分割。行分割、列分割可参照上述描述。

在一可选实施例中，在先进行列分割再进行列分割时，可对目标区域进行行分割，得到一个或多个行区域，对该一个或多个行区域中包含多个页面元素的行区域进行列分割。在先进行列分割再进行行分割时，可对目标区域进行列分割，得到一个或多个列区域，对该一个或多个列区域中包含的多个页面元素的列区域进行行分割。从而，通过如此方式结合行分割和列分割，提高页面区域划分的准确性，进而提高页面自适应布局效果。

本可选实施例中，考虑到页面布局时通常同行的页面元素的关联程度低于同列的页面元素的关联程度，比如图2中同行的页面元素一与页面元素三的关联程度低于同列的页面元素一与页面元素二的关联程度，因此，先进行行分割再进行列分割，可以按照关联程度从低到高的程度更准确地将关联的页面元素划分到同一页面区域内。所以，先进行行分割再进行列分割的效果优于先进行列分割再进行行分割的效果。

基于先进行行分割再进行列分割，如图6所示，S603包括：

S6031、根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割，得到第一区域，第一区域为目标区域中的行区域。

本实施例中，在对目标区域进行行分割时，可基于目标区域中的第一个页面元素的位置和尺寸，确定第一个行区域的位置和尺寸；基于第一个行区域的位置和尺寸以及第二个页面元素的位置，确定目标区域中的第二个页面元素是否应该属于第一个行区域，若是，则更新第一个行区域的位置和尺寸，以使得第一个行区域除第一个页面元素之外还包括第二个页面元素，否则基于第二个页面元素的位置和尺寸，确定第二个行区域的位置和尺寸。如此，依次遍历各个页面元素，得到一个或多个行区域，即一个或多个第一区域。

S6032、如果第一区域包含多个页面元素，则根据第一区域中页面元素的位置顺序、位置和尺寸，对第一区域进行列分割，得到第二区域，第二区域为目标区域中的列区域。

其中，第一区域中页面元素的位置顺序是按照从左到右且从上到下的顺序确定的，其中，第一区域中最左上角的页面元素为第一个页面元素，第一页面元素右侧相邻的页面元素为第二个页面元素，如此类推。

本实施例中，在对目标区域进行行分割后，只需要对行分割得到的包含多个页面元素的第一区域继续进行分割。因此，若第一区域包含多个页面元素，即在对目标区域进行列分割得到的第一区域中，若存在包含多个页面元素的第一区域，则针对包含多个页面元素的第一区域进行列分割。在对第一区域进行列分割时，可基于第一区域中的第一个页面元素的位置和尺寸，确定第一区域中第一个列区域的位置和尺寸；基于第一个列区域的位置和尺寸以及第二个页面元素的位置，确定目标区域中的第二个页面元素是否应该属于第一个列区域，若是，则更新第一个列区域的位置和尺寸，以使得第一个列区域除第一个页面元素之外还包裹第二个页面元素，否则基于第二个页面元素的位置和尺寸，确定第二个列区域的位置和尺寸。如此，依次遍历各个页面元素，得到一个或多个列区域，即一个或多个第二区域。

如此，完成对目标页面的第N次分割。如果仅对目标页面进行一次分割，则N等于1，后续可基于目标页面的显示窗口、该次分割得到的行区域和/或列区域以及原始布局数据，确定适合显示窗口的目标布局数据；如果对目标页面进行多次分割，则N大于或等于1，可将第N次分割得到的列区域确定为下一次分割中待分割的目标区域，如此，迭代进行目标页面的分割，直至目标页面的分割满足预设分割条件。其中，预设分割条件可包括如下一种或多种：N大于或等于预设次数阈值(即若N大于或等于预设次数阈值，则结束对目标页面的分割)、N次分割后得到的列区域仅包含一个页面元素(即若第N次分割得到的列区域仅包含一个页面元素，则结束对目标页面的分割)。

在一些实施例中，页面元素的位置包括页面元素的行位置，页面元素的尺寸包括页面元素的高度，此时，如图7所示，在第N次分割中对目标区域进行行分割的过程，可包括：

S701、基于目标区域中页面元素的位置顺序，确定目标区域中待划分的第M个页面元素。

其中，目标区域中页面元素的位置顺序可参照前述实施例，不再赘述。

本实施例中，按照目标区域中页面元素的位置顺序，可依次确定目标区域中的第一个页面元素、第二个页面元素、……分别为待划分的第一个页面元素、待划分的第二个页面元素、……。

S702、M是否等于1。

本实施例中，M为正整数。在M等于1的情况下，即第M个页面元素为目标区域中第一个页面元素的情况下，目标区域中不存在行区域，需要直接根据第一个页面元素确定第一行区域，所以执行S703；在M不等于1(即M大于1)的情况下，目标区域中存着至少一个行区域，需要判断第M个页面元素与目标区域中行区域的行关联关系，即判断第M个页面元素与目标区域中排列在第M个页面元素之前的页面元素的行关联关系，所以执行S704。

S703、根据第M个页面元素的行位置、第M个页面元素的高度和目标区域，确定目标区域中第一个行区域，第一个行区域包裹第M个页面元素。

本实施例中，在M等于1的情况下，可将第M个页面元素的行位置确定为第一个行区域的行位置，将第M个页面元素的高度确定为第一个行区域的高度，将目标区域的列位置确定为第一个行区域的列位置，将目标区域的宽度确定为第一个行区域的宽度，如此，得到第一个行区域。

可选的，页面元素的行位置为页面元素的上侧边位置和/或下侧边位置。此时，可将第M个页面元素的上侧边位置确定为第一个行区域的上侧边位置，和/或，将第M个页面元素的下侧边位置确定为第一个行区域的下侧边位置。

可选的，目标区域的列位置包括目标区域的左侧边位置和/或右侧边位置，此时，可将目标区域的左侧边位置确定为第一个行区域的左侧边位置，和/或，将目标区域的右侧边位置确定为第一个行区域的右侧边位置。

S704、根据第M个页面元素的行位置，确定第M个页面元素与目标行区域是否存在行关联关系。

其中，目标行区域包括在第N次分割中得到的包裹目标区域中第M-1个页面元素的行区域。比如，M＝2时，目标行区域包括第N次分割中得到的包裹目标区域中第一个页面元素的行区域，包括目标区域中的第一个行区域。

可选的，目标行区域包括第N次分割中目标区域中的多个行区域，该多个行区域时包括包裹位于第M个页面元素之前的至少一个页面元素的行区域。比如，M＝3时，目标行区域包括包裹目标区域中第一个页面元素的行区域和/或包裹目标区域中第二个页面元素的行区域。

本实施例中，在M大于1的情况下，在已知目标行区域的位置和尺寸的情况下，可基于M个页面元素的行位置，确定第M个页面元素与目标行区域是否在行上有重叠，若第M个页面元素与目标行区域在行上有重叠(即第M个页面元素中的局部区域与目标行区域中的局部区域落在相同的行位置上，比如在目标区域中第M个页面元素与目标行区域是并排的区域)，则确定第M个页面元素与目标行区域存在行关联关系，可执行S705，否则，确定第M个页面元素与目标行区域不存在行关联关系，可执行S706。

其中，第M个页面元素与目标行区域存在行关联关系，相当于第M个页面元素与目标行区域中的页面元素存在行关联关系。

可选的，页面元素的行位置包括页面元素的上侧边位置，目标行区域的行位置包括目标行区域的上侧边位置。此时，确定第M个页面元素与目标行区域是否存在行关联关系，包括：确定第M个页面元素的上侧边位置是否大于或等于目标行区域的上侧边位置以及小于或等于目标行区域的上边缘位置与目标行区域的高度之和(即目标行区域的下边缘位置)，如果第M个页面元素的上侧边位置大于或等于目标行区域的上侧边位置且小于或等于目标行区域的上边缘位置与目标行区域的高度之和，则可确定第M个页面元素与目标行区域存在行关联关系。从而，提高行关联关系判断的准确性。

本可选方式中，第M个页面元素的上侧边位置大于或等于目标行区域的上侧边位置，表示第M个页面元素的上侧边位置位于目标行区域的上侧边位置的下方，第M个页面元素的上侧边位置小于或等于目标行区域的上边缘位置与目标行区域的高度之和，表示第M个页面元素的上侧边位置位于目标行区域的下侧边位置的上方。因此，第M个页面元素的上侧边位置大于或等于目标行区域的上侧边位置且第M个页面元素的上侧边位置小于或等于目标行区域的上边缘位置与目标行区域的高度之和，说明第M个页面元素与目标行区域在行上有重叠，可确定第M个页面元素与目标行区域存在行关联关系。

当然，除了基于上侧边位置进行比较外，也可以基于页面元素的下侧边位置来确定页面元素与目标行区域之间的行关联关系，在此不进行详述。

S705、更新目标行区域，更新后的目标行区域包裹第M个页面元素。

本实施例中，在第M个页面元素与目标行区域存在行关联关系的情况下，由于目标行区域的列位置为目标区域的列位置，目标行区域的宽度为目标区域的宽度，即目标行区域的宽度已经是目标区域所能容纳的最大宽度，目标行区域的列位置也是目标区域所能容纳的极限，所以目标行区域的列位置和宽度无需调整，可通过调整目标行区域的行位置和/或高度的方式，更新目标行区域，从而，使得除了位于更新前的目标行区域内的页面元素之外，第M个页面元素也位于更新后的目标行区域内。

可选的，在页面元素的行位置包括页面元素的上侧边位置，目标行区域的行位置包括目标行区域的上侧边位置的情况下，更新目标行区域的方式包括：在目标行区域中所有页面元素的上侧边位置和第M个页面元素的上侧边位置中，确定最小上侧边位置，在目标行区域中所有页面元素的下侧边位置(可根据上侧边位置和高度确定)和第M个页面元素的下侧边位置中，确定最大下侧边位置，将目标行区域的高度更新为最大下侧边位置与最小上侧边位置之间的差值。从而，使得更新后的目标行区域包括第M个页面元素，并降低了目标行区域的更新复杂度。

S706、根据第M个页面元素的行位置、第M个页面元素的高度和目标区域，确定下一个行区域，下一个行区域包裹第M个页面元素。

本实施例中，在第M个页面元素与目标行区域不存在行关联关系的情况下，说明第M个页面元素与目标行区域内的页面元素不存在行关联关系，因此，可基于第M个页面元素的行位置、第M个页面元素的高度和目标区域，创建下一个行区域。可将第M个页面元素的行位置确定为第一个行区域的行位置，将第M个页面元素的高度确定为第一个行区域的高度，将目标区域的列位置确定为第一个行区域的列位置，将目标区域的宽度确定为第一个行区域的宽度，如此，得到下一个行区域。

之后，如果第M个页面元素为目标区域内的最后一个页面元素，则结束对目标区域的行分割，在行分割与列分割结合的情况下，可对目标区域内多个行区域的列分割，直至完成对目标区域内多个行区域的列分割才完成对目标区域的分割，在完成对第N次分割中所有待分割的目标区域的分割后，才完成对目标页面的第N次分割。如果第M个元素不是目标区域内的最后一个页面元素，则更新M＝M+1，继续执行图7所示的上述步骤。

作为示例的，假设N＝1，目标区域为目标页面，如图8所示，按从上到下且从做左到右的顺序，自适应布局前的目标页面中页面元素依次为：页面元素A、页面元素B、页面元素C、页面元素E、页面元素D和页面元素F。目标页面的第一次行分割过程如下：

首先，在M＝1的情况下，可先根据页面元素A的上侧边位置和高度以及目标页面的左侧边位置和宽度，确定第一个行区域c1，此时，c1的上侧边位置为页面元素A的上侧边位置，c1的高度为页面元素A的高度，c1的左侧边位置为目标页面的左侧边位置，c1的宽度为目标页面的宽度。

接着，在M＝2的情况下，可判断页面元素B的上侧边位置是否大于或等于c1的上侧边位置且小于或等于c1的上侧边位置与c1的高度之和，从图8可知，页面元素B的上侧边位置大于或等于c1的上侧边位置且小于或等于c1的上侧边位置与c1的高度之和，所以更新c1的高度为页面元素B的下侧边位置与页面元素A的上侧边位置的差值(从图8可以看出，页面元素B的下侧边位置大于页面元素A的上侧边位置)。

接着，在M＝3的情况下，从图8可知，页面元素C不满足页面元素与行区域存着行关联关系的上述条件，即页面元素C与c1不存在行关联关系，所以，可基于页面元素C的上侧边位置和高度以及页面区域的左侧边位置和宽度，建立目标页面的下一个行区域c2。如此，再依次判断页面元素E、页面元素D和页面元素F，得到包裹页面元素C、页面元素E和页面元素D的行区域c2以及包括页面元素F的行区域c3，完成对页面区域的行分割。

在一些实施例中，页面元素的位置包括页面元素的列位置，页面元素的尺寸包括页面元素的宽度，此时，如图9所示，在第N次分割中对第一区域(即对目标区域进行行分割得到的行区域)进行列分割的过程，可包括：

S901、如果第一区域包含多个页面元素，则基于第一区域中页面元素的位置顺序，确定第一区域中待划分的第K个页面元素。

其中，第一区域中页面元素的位置顺序的确定，可参照前述实施例中目标区域中页面元素的位置顺序的确定过程，在此不再赘述。

本实施例中，按照目标区域中页面元素的位置顺序，可依次确定第一区域中的第一个页面元素、第二个页面元素、……分别为待划分的第一个页面元素、待划分的第二个页面元素、……。

S902、K是否等于1。

本实施例中，K为正整数。在K等于1的情况下，即第K个页面元素为第一区域中第一个页面元素的情况下，第一区域中不存在列区域，需要直接根据第一个页面元素确定第一列区域，所以执行S903；在K不等于1(即K大于1)的情况下，第一区域中存着至少一个列区域，需要判断第K个页面元素与第一区域中列区域的列关联关系，即判断第K个页面元素与第一区域中排列在第K个页面元素之前的页面元素的列关联关系，所以执行S904。

S903、根据第K个页面元素的列位置、第K个页面元素的宽度以及第一区域，确定第一区域中第一个列区域，第一个列区域包裹第K个页面元素。

本实施例中，在K等于1的情况下，可将第K个页面元素的列位置确定为第一个列区域的列位置，将第K个页面元素的宽度确定为第一个列区域的宽度，将第一区域的行位置确定为第一个列区域的行位置，将第一区域的高度确定为第一个列区域的高度，如此，得到第一个列区域。

可选的，页面元素的列位置为页面元素的左侧边位置和/或右侧边位置。此时，可将第K个页面元素的左侧边位置确定为第一个列区域的左侧边位置，和/或，将第K个页面元素的右侧边位置确定为第一个列区域的右侧边位置。

可选的，第一区域的行位置包括第一区域的上侧边位置和/或下侧边位置，此时，可将第一区域的上侧边位置确定为第一个列区域的上侧边位置，和/或，将第一区域的下侧边位置确定为第一个列区域的下侧边位置。

S904、根据第K个页面元素的列位置，确定第K个页面元素与目标列区域是否存在列关联关系。

其中，目标列区域包括在第N次分割中得到的包裹第一区域中第K-1个页面元素的列区域；比如，K＝2时，目标列区域为第N次分割中得到的包裹第一区域中第一个页面元素的列区域，即第一区域中的第一个列区域。

可选的，目标列区域包括第N次分割中第一区域中的多个列区域，该多个列区域时包括包裹位于第K个页面元素之前的至少一个页面元素的列区域。比如，K＝3时，目标列区域包括包裹第一区域中第一个页面元素的列区域和/或包裹目标区域中第二个页面元素的列区域。

本实施例中，在K大于1的情况下，在已知目标列区域的位置和尺寸的情况下，可基于K个页面元素的列位置，确定第K个页面元素与目标列区域是否在列上有重叠，若第K个页面元素与目标列区域在列上有重叠(即第K个页面元素中的局部区域与目标列区域中的局部区域落在相同的列位置上，比如在第一区域中第K个页面元素与目标列区域是并列的区域)，则确定第K个页面元素与目标列区域存在列关联关系，可执行S905，否则，确定第K个页面元素与目标列区域不存在列关联关系，可执行S906。

其中，第K个页面元素与目标列区域存在列关联关系，相当于第K个页面元素与目标列区域中的页面元素存在列关联关系。

可选的，在页面元素的列位置包括页面元素的左侧边位置，目标列区域的列位置包括目标行区域的左侧边位置的情况下，确定第K个页面元素与目标列区域是否存在列关联关系，包括：确定第K个页面元素的左侧边位置是否大于或等于目标列区域的左侧边位置以及小于或等于目标列区域的左边缘位置与目标列区域的宽度之和(即目标列区域的右边缘位置)，如果第K个页面元素的左侧边位置大于或等于目标列区域的左侧边位置且小于或等于目标列区域的左边缘位置与目标列区域的宽度之和，则可确定第K个页面元素与目标列区域存在列关联关系。从而，提高列关联关系判断的准确性。

本可选方式中，第K个页面元素的左侧边位置大于或等于目标列区域的左侧边位置，表示第K个页面元素的左侧边位置位于目标列区域的左侧边位置的右方，第K个页面元素的左侧边位置小于或等于目标列区域的左边缘位置与目标列区域的宽度之和，表示第K个页面元素的左侧边位置位于目标列区域的右侧边位置的左方。因此，第K个页面元素的左侧边位置大于或等于目标列区域的左侧边位置且小于或等于目标列区域的左边缘位置与目标列区域的高度之和，说明第K个页面元素与目标列区域在列上有重叠，可确定第K个页面元素与目标列区域存在列关联关系。

当然，除了基于左侧边位置进行比较外，也可以基于页面元素的右侧边位置来确定页面元素与目标列区域之间的列关联关系，在此不进行详述。

S905、更新目标列区域，更新后的目标列区域包裹第K个页面元素。

本实施例中，在第K个页面元素与目标列区域存在列关联关系的情况下，由于目标列区域的行位置为第一区域的列位置，目标列区域的高度为第一区域的高度，即目标列区域的高度已经是第一区域所能容纳的最大高度，目标列区域的行位置也是第一区域所能容纳的极限，所以目标列区域的行位置和高度无需调整，可通过调整目标列区域的列位置和/或宽度的方式，更新目标列区域，从而，使得除了位于更新前的目标列区域内的页面元素之外，第K个页面元素也位于更新后的目标列区域内。

可选的，在页面元素的列位置包括页面元素的左侧边位置，目标列区域的列位置包括目标列区域的左侧边位置的情况下，更新目标列区域的方式包括：在目标列区域中所有页面元素的左侧边位置和第K个页面元素的左侧边位置中，确定最小左侧边位置，在目标列区域中所有页面元素的右侧边位置(可根据左侧边位置和宽度确定)和第K个页面元素的右侧边位置中，确定最大右侧边位置，将目标列区域的高度更新为最大右侧边位置与最小左侧边位置之间的差值。从而，使得更新后的目标列区域包括第K个页面元素，并降低了目标列区域的更新复杂度。

S906、根据第K个页面元素的列位置、第K个页面元素的宽度和第一区域，确定下一个列区域，下一个列区域包裹第K个页面元素。

本实施例中，在第K个页面元素与目标列区域不存在列关联关系的情况下，说明第K个页面元素与目标列区域内的页面元素不存在列关联关系，因此，可基于第K个页面元素的列位置、第K个页面元素的宽度和第一区域，创建第一区域中的下一个列区域。可将第K个页面元素的列位置确定为下一个列区域的行位置，将第K个页面元素的宽度确定为下一个行区域的宽度，将第一区域的行位置确定为第一个列区域的行位置，将目标区域的高度确定为下一个列区域的高度，如此，得到下一个列区域。

之后，如果第K个页面元素为第一区域内的最后一个页面元素，则结束对第一区域的列分割，在完成对所有包含多个页面元素的第一区域的列分割时，结束对目标页面的第N次分割。如果第K个元素不是第一区域内的最后一个页面元素，则更新K＝K+1，继续执行图9所示的上述步骤。

作为示例的，假设N＝1，目标区域为目标页面，如图8所示，按从上到下且从做左到右的顺序，目标页面的页面元素依次为页面元素A、页面元素B、页面元素C、页面元素E、页面元素D和页面元素F，在行分割后得到的第一区域有：包裹页面元素A和页面元素B的行区域c1、包裹页面元素C、页面元素E和页面元素D的行区域c2以及包裹页面元素F的行区域c3，其中，需要对c1和c2进行列分割。其中，对c2进行列分割过程如下：

首先，在K＝1的情况下，可确定：c2中第一个列区域r3的左侧边位置为页面元素C的上侧边位置，r3的宽度为页面元素C的宽度，r3的上侧边位置为c2的上侧边位置，r3的高度为c2的高度。

接着，在K＝2的情况下，可判断页面元素E的左侧边位置是否大于或等于r3的左侧边位置且小于或等于r3的左侧边位置与r3的宽度之和，从图8可知，页面元素E的左侧边位置不符合该条件，所以基于页面元素E的左侧边位置和宽度以及c2的上侧边位置及高度，确定c2中第二个列区域r4。

接着，在K＝3的情况下，从图8可知，页面元素D的左侧边位置大于或等于r3的左侧边位置且小于或等于r3的左侧边位置与r3的宽度之和，所以，页面元素D与r3之间存在列相关关系，由于页面元素D的列位置与页面元素C的列位置相同，r3已包裹页面元素D，可无需更新r3。

参考图10，图10为本申请实施例提供的页面布局方法的流程示意图三。本申请实施例提供一种页面布局方法，具体包括以下步骤：

S1001，获取目标页面的原始布局数据。

S1002，根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素。

其中，本实施例中的S1001和S1002的实现原理和技术效果可参照前述实施例，不再赘述。

S1003、根据页面区域与页面元素之间的位置包裹关系、不同页面区域之间的位置包裹关系以及不同页面元素之间的位置包裹关系，确定树结构。

本实施例中，在确定目标页面的多个页面区域后，页面区域可包裹(即包含)一个或多个页面元素，页面元素也可能会包裹其他页面元素，页面区域也可能包裹其他页面区域，比如，在对行区域进行列分割时，行区域包裹分割得到的一个或多个列区域。所以，可以基于页面区域与页面元素之间的位置包裹关系、不同页面区域之间的位置包裹关系以及不同页面元素之间的位置包裹关系，构建树结构。在该树结构中，节点包括目标页面、页面区域和页面元素，其中，根节点为目标页面，树结构的边表示位置包裹关系。

因此，可先将目标页面确定为根节点，在将目标页面所直接包裹的页面区域确定为根节点的子节点，再将该子节点所直接包括的页面区域和页面元素确定为该子节点的子节点，依次类推，得到树结构。

以图8所示的自适应布局前的目标页面为例，在树结构中：根节点为目标页面；根节点的子节点包括c1、c2和c3；c1的子节点包括r1和r2，r1的子节点包括页面元素A，r2的子节点包括页面元素B；c2的子节点包括r3和r4，r3的子节点包括页面元素C和页面元素D，r4的子节点包括页面元素E。

S1004、在树结构中，从根节点开始，依次根据父节点的位置和父节点的尺寸，对父节点的子节点的位置和子节点的尺寸进行调整。

本实施例中，目标页面的自适应布局，要满足调整后的目标页面位于显示窗口内，调整后的页面区域位于目标页面内，调整后的页面元素位于包裹页面元素的页面区域内。所以，可从根节点开始，对树结构中各个节点的位置和尺寸进行调整。首先，以显示窗口的宽度为约束条件，对根节点的尺寸进行调整，即对目标页面的宽度进行调整；接着，以调整后的目标页面的位置和尺寸为约束条件，对目标页面的子节点的位置和尺寸进行调整；如此，根据父节点的位置和父节点的尺寸，对父节点的子节点的位置和子节点的尺寸进行调整，直至完成树结构中所有节点的调整。该调整过程清晰体现了页面区域对页面元素布局的约束，确保了相关联的页面元素在重新布局后依旧位于同一页面区域内且不会被插入无关的页面元素，提高了页面布局效果。

可选的，为避免页面元素自适应布局后尺寸过小，可对页面元素进行分行布局，即将不同的页面元素布局在不同的行，考虑到显示窗口变窄，在分行布局的过程中，可对页面元素的宽度进行裁剪。在该过程中，同样是基于树结构，从根节点开始依次调整各个节点的宽度和位置，使其适应于子节点的宽度并分行排布。如图8所示，自适应布局后的页面中，在各个页面区域内，页面元素均是分行排布的，避免了页面元素过小导致操作不便，同时又保证了相关联的页面元素在自适应布局后依旧排列在一起。

S1005、根据树结构中节点调整后的位置、节点调整后的尺寸以及目标页面中页面元素与树结构中节点的对应关系，得到目标布局数据。

本实施例中，在调整树结构中各个节点的位置和尺寸之后，可将树结构转换为数组结构，得到各个节点调整后的位置和尺寸。在各个节点调整后的位置和尺寸中，可将与页面区域对应的节点调整后的位置和尺寸删除，保留与页面元素对应的节点调整后的位置和尺寸，即保留页面元素自适应布局后的位置和尺寸，如此，根据多个页面元素自适应布局后的位置和尺寸，得到目标布局数据。当然，除了页面元素的位置和尺寸之外，目标布局数据中还可包括页面元素所展示的内容和页面元素的标识。

S1006、根据目标布局数据，在显示窗口对目标页面进行显示。

其中，S1006的实现原理和技术效果可参照前述实施例，不再赘述。

在一可选的实施例中，在S1004中，依次根据父节点的位置和父节点的尺寸，对父节点的子节点的位置和子节点的尺寸进行调整，包括：在树结构中，确定待裁剪和布局的目标节点；根据目标节点的宽度、目标节点的父节点的宽度、与目标节点属于同一父节点的剩余子节点的位置以及该剩余子节点的尺寸，对目标节点的位置和目标节点的尺寸进行调整。

本可选方式中，在树结构中，按照从根节点往下的顺序，依次确定待裁剪和布局的目标节点，并对目标节点的位置和尺寸进行调整。其中，对目标节点的位置和尺寸进行调整的过程，如图11所示，可包括：

S1101、确定目标节点的宽度是否小于或等于目标节点所属父节点的宽度与目标所属父节点中剩余子节点的宽度的差值。

其中，剩余子节点包括目标节点的上一兄弟节点以及调整后的位置与该上一兄弟节点调整后的位置并排的其他兄弟节点。

本实施例中，确定剩余子节点的宽度之和，确定父节点的宽度与剩余子节点的宽度之和的差值，确定目标节点的宽度是否小于或等于该差值。其中，如果目标节点的宽度小于或等于该差值，则说明在自适应布局的目标页面中，目标节点可以与上一兄弟节点并排排列，此时可执行S1102，否则，说明目标节点与上一兄弟节点要分行排列，此时可执行S1103。

其中，在不存在剩余子节点的情况下，比如在目标节点为父节点的第一个子节点或者目标节点为父节点的唯一子节点的情况下，可确定剩余子节点的宽度为0，即确定目标节点的宽度是否小于或等于目标节点所在父节点的宽度，如果是，则执行S1102，否则，执行S1103。

S1102、根据剩余子节点的行位置，调整目标节点的行位置，并根据剩余子节点的列位置和尺寸，调整目标节点的列位置。

其中，父节点的列位置是指父节点调整后的列位置，剩余节点的列位置也是指剩余节点调整后的列位置。

本实施例中，目标节点的宽度小于或等于目标节点所属父节点的宽度与该父节点中剩余子节点的宽度的差值，说明目标节点的宽度不需要调整且目标节点可以与剩余子节点并排排列，所以，可保持目标节点的宽度不变，并将目标节点的行位置调整为剩余子节点的行位置，根据剩余子节点的列位置和剩余子节点的尺寸，调整目标节点的列位置，以使目标节点位于剩余子节点的右侧。因此，最终目标节点与剩余子节点并排且位于剩余子节点右侧。

可选的，在行位置包括上侧边位置且列位置包括左侧边位置的情况下，将目标节点的行位置调整为剩余子节点的行位置，根据剩余子节点的列位置和剩余子节点的尺寸，调整目标节点的列位置，包括：将目标节点的上侧边位置调整为剩余子节点的上侧边位置，将目标节点的左侧边位置调整为剩余子节点的左侧边位置与剩余子节点的宽度之和。如果剩余子节点的数量为多个，则可以将目标节点调整后的左侧边位置调整为：剩余子节点的左侧边位置中最大左侧边位置与该最大左侧边位置所属剩余子节点的宽度的和。从而，使得目标子节点并排位于剩余子节点的右侧，提高布局准确性。

S1103、根据剩余子节点的行位置和剩余子节点的高度，调整目标节点的行位置，根据父节点的宽度和目标节点的宽度，调整目标节点的宽度，并确定目标节点的列位置为显示窗口的起始列位置。

本实施例中，目标节点的宽度大于目标节点所属父节点的宽度与该父节点中剩余子节点的宽度的差值，说明目标节点需要在排列在新的一行，即目标节点与剩余子节点需要分行排布。因此，可基于剩余子节点的行位置和剩余子节点的高度，调整目标节点的行位置，使得目标节点位于剩余子节点的下方，基于根据父节点的宽度和目标节点的宽度，调整目标节点的宽度，以使得目标节点的宽度不超过父节点的宽度，确定目标节点的列位置为显示窗口的起始列位置，使得目标节点排列为新的一行中的第一个节点。

可选的，在行位置包括上侧边位置的情况下，基于剩余子节点的行位置和剩余子节点的高度，调整目标节点的行位置，包括：将目标节点的上侧边位置调整为剩余子节点的上侧边位置与剩余子节点的高度之和。在剩余子节点为多个的情况下，可将目标子节点的上侧边位置调整为：剩余子节点的上侧边位置中最大上侧边位置与该最大上侧边位置所属剩余子节点的高度之和。从而，使得目标子节点位于剩余子节点的下方，提高布局效果。

可选的，基于根据父节点的宽度和目标节点的宽度，调整目标节点的宽度，包括：确定父节点的宽度和目标节点的宽度中的最小值，将目标节点的宽度调整为该最小值。从而，在目标节点的宽度小于或等于父节点的宽度的情况下，保持目标节点的宽度不变，在目标节点的宽度大于父节点的宽度时，将目标节点的宽度调整为父节点的宽度，避免目标节点的宽度过小，导致目标节点因尺寸过小而不便于用户浏览和交互。

可选的，在列位置包括左侧边位置，显示窗口的起始列位置为显示窗口的左侧边位置的情况下，确定目标节点的列位置为显示窗口的起始列位置，包括：确定目标节点的左侧边位置为显示窗口的左侧边位置。进一步的，在显示窗口的左侧边位置为0的情况下，可确定目标节点的左侧边位置为0。从而，使得目标节点在新的一行重新排布，提高布局效果。

S1104、确定目标节点是否存在子节点。

其中，如果目标节点存在子节点，则执行S1105，否则执行S1106。

S1105、将目标节点确定为下一次迭代中的父节点，将目标节点的子节点确定为下一次迭代中的目标节点，进行递归调用，根据子节点递归后的高度、子节点递归后的行位置以及目标节点的行位置，对目标节点的高度进行调整。

本实施例中，如果目标节点存在子节点，则以目标节点为下一次迭代中的父节点，以目标节点的子节点为下一次迭代的目标节点，跳转至执行S1101，以进行下一轮的节点位置和尺寸调整，并通过递归调用方式得到目标节点的子节点在递归后的高度和目标节点的子节点在递归后的行位置。基于子节点递归后的高度、子节点递归后的行位置以及目标节点的行位置，对目标节点的高度进行调整，以提高目标节点调整后的高度的准确性。

可选的，在行位置包括上侧边位置的情况下，基于子节点递归后的高度、子节点递归后的行位置以及目标节点的行位置，对目标节点的高度进行调整，包括：确定子节点递归后的高度与子节点递归后的上侧边位置之和的最大值，将目标节点的高度调整为该最大值与目标节点的上侧边位置的差值。

本可选方式中，目标节点可能有多个子节点，在确定子节点递归后的高度与子节点递归后的上侧边位置之和的最大值时，针对各个子节点分别进行高度和上侧边位置的求和，如此得到多个和，确定该多个和中的最大值，该最大值反映了所有子节点中位于最下方的子节点的下侧边位置。如此，通过将目标节点的高度调整为该最大值与目标节点的上侧边位置的差值，使得目标节点能够包裹自身的各个子节点，确保在自适应布局的过程中，节点之间的包裹关系不变，即页面区域与页面元素之间的包裹关系不变、页面区域与页面区域之间的包裹关系不变以及页面元素与页面元素之间的包裹关系不变，确保相关联的页面元素在自适应布局后依旧位于同一页面区域。

S1106、保持目标节点的高度不变。

本实施例中，在目标节点没有子节点时，保持目标节点的高度不变。

本申请实施例中，在基于目标页面的原始布局数据，确定目标页面的页面区域，使得同一页面区域内的页面元素相关联，之后，基于页面区域与页面元素之间的包裹关系、页面区域与页面区域之间的包裹关系以及页面元素与页面元素之间的包裹关系，构建树结构，利用树结构和递归调用方式对树结构中节点的位置和尺寸进行调整，提高了对页面区域和页面元素的位置和尺寸调整的效果，确保相关联的页面元素在自适应布局中依旧位于相同的页面区域内，而不会被插入无关的页面元素，提高了页面布局效果。

参考图12，图12为本申请一实施例提供的页面布局装置120的结构框图。如图12所示，本申请实施例提供的页面布局装置120包括：获取单元121、区域确定单元122、布局确定单元123和显示单元124，其中：

获取单元121，用于获取目标页面的原始布局数据，原始布局数据包括目标页面上多个页面元素的位置、尺寸和标识；

区域确定单元122，用于根据原始布局数据，确定目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；

布局确定单元123，用于根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据；

显示单元124，用于根据目标布局数据，在显示窗口对目标页面进行显示。

在本申请的一个实施例中，页面区域包括行区域和/或列区域，在根据原始布局数据，确定目标页面的多个页面区域的过程中，区域确定单元122具体用于：基于原始布局数据，对目标页面进行行分割和/或列分割，得到行区域和/或列区域。

在本申请的一个实施例中，目标页面的分割次数大于或等于1，在目标页面的一次分割过程中，区域确定单元122具体用于：确定第N次待分割的目标区域，目标区域包含多个页面元素；根据原始布局数据，确定目标区域中页面元素的位置顺序、目标区域中页面元素的位置以及目标区域中页面元素的尺寸；根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割和/或列分割，得到目标区域中的行区域和/或列区域。

在本申请的一个实施例中，在根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割和/或列分割，得到目标区域中的行区域和/或列区域的过程中，区域确定单元122具体用于：根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割，得到第一区域，第一区域为目标区域中的行区域；如果第一区域包含多个页面元素，则根据第一区域中页面元素的位置顺序、位置和尺寸，对第一区域进行列分割，得到第二区域，第二区域为目标区域中的列区域。

在本申请的一个实施例中，页面元素的位置包括页面元素的行位置，页面元素的尺寸包括页面元素的高度，第一区域为一个或多个，在根据目标区域中页面元素的位置顺序、位置和尺寸，对目标区域进行行分割，得到第一区域的过程中，区域确定单元122具体用于：基于目标区域中页面元素的位置顺序，确定目标区域中待划分的第M个页面元素；在M等于1的情况下，根据第M个页面元素的行位置、第M个页面元素的高度和目标区域，确定目标区域中第一个行区域，第一个行区域包裹第M个页面元素；在M大于1的情况下，根据第M个页面元素的行位置，确定第M个页面元素与目标行区域是否存在行关联关系，目标行区域包括在第N次分割中得到的包裹目标区域中第M-1个页面元素的行区域；如果第M个页面元素与目标行区域存在行关联关系，则更新目标行区域，更新后的目标行区域包裹第M个页面元素，否则根据第M个页面元素的行位置、第M个页面元素的高度和目标区域，确定下一个行区域，下一个行区域包裹第M个页面元素。

在本申请的一个实施例中，页面元素的位置包括页面元素的列位置，页面元素的尺寸包括页面元素的宽度，第二区域为一个或多个，在如果第一区域包含多个页面元素，则根据第一区域中页面元素的位置顺序、位置和尺寸，对第一区域进行列分割，得到第二区域的过程中，区域确定单元122具体用于：如果第一区域包含多个页面元素，则基于第一区域中页面元素的位置顺序，确定第一区域中待划分的第K个页面元素；在K等于1的情况下，根据第K个页面元素的列位置、第K个页面元素的宽度以及第一区域，确定第一区域中第一个列区域，第一个列区域包裹第K个页面元素；在K大于1的情况下，根据第K个页面元素的列位置，确定第K个页面元素与目标列区域是否存在列关联关系，目标列区域包括在第N次分割中得到的包裹第一区域中第K-1个页面元素的列区域；如果第K个页面元素与目标列区域存在列关联关系，则更新目标列区域，更新后的目标列区域包裹第K个页面元素，否则根据第K个页面元素的列位置、第K个页面元素的宽度和第一区域，确定下一个列区域，下一个列区域包裹第K个页面元素。

在本申请的一个实施例中，在确定第N次待分割的目标区域的过程中，区域确定单元122具体用于：在N等于1的情况下，确定目标区域为目标页面；在N大于1的情况下，确定目标区域为上一次分割得到的且包含多个页面元素的行区域和/或列区域。

在本申请的一个实施例中，在根据用于展示目标页面的显示窗口、多个页面区域和原始布局数据，确定适合显示窗口的目标布局数据的过程中，布局确定单元具体123用于：根据页面区域与页面元素之间的位置包裹关系、不同页面区域之间的位置包裹关系以及不同页面元素之间的位置包裹关系，确定树结构，树结构的节点包括目标页面、页面区域和页面元素，其中，根节点为目标页面，树结构的边表示位置包裹关系；在树结构中，从根节点开始，依次根据父节点的位置和父节点的尺寸，对父节点的子节点的位置和子节点的尺寸进行调整；根据树结构中节点调整后的位置、节点调整后的尺寸以及目标页面中页面元素与树结构中节点的对应关系，得到目标布局数据。

在本申请的一个实施例中，在树结构中，从根节点开始，依次根据父节点的位置和父节点的尺寸，对父节点的子节点的位置和子节点的尺寸进行调整的过程中，布局确定单元123具体用于：在树结构中，确定待裁剪和布局的目标节点；根据目标节点的宽度、目标节点的父节点的宽度、与目标节点属于同一父节点的剩余子节点的位置以及剩余子节点的尺寸，对目标节点的位置和目标节点的尺寸进行调整。

本申请实施例提供的页面布局装置，用于执行上述任一方法实施例中的技术方案，其实现原理和技术效果类似，在此不再赘述。

图13为本申请实施例提供的电子设备的硬件结构示意图。如图13所示，本申请实施例的电子设备130可以包括：至少一个处理器131(图13中仅示出了一个处理器)；以及，与至少一个处理器通信连接的存储器132。其中，存储器132存储有可被至少一个处理器131执行的指令，指令被至少一个处理器131执行，以使电子设备130能够执行前述任一方法实施例中的技术方案。

可选的，存储器132既可以是独立的，也可以跟处理器131集成在一起。

当存储器132是独立于处理器131之外的器件时，电子设备130还包括：总线133，用于连接存储器132和处理器131。

可选的，电子设备130为移动终端。

本申请实施例提供的电子设备可以执行前述任一方法实施例的技术方案，其实现原理和技术效果类似，在此不再赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机程序，当计算机程序被处理器执行时用于实现前述任一方法实施例中的技术方案。

本申请实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现前述任一方法实施例中的技术方案。

本申请实施例还提供了一种芯片，包括：处理模块与通信接口，该处理模块能执行前述方法实施例中的技术方案。

进一步地，该芯片还包括存储模块(如，存储器)，存储模块用于存储指令，处理模块用于执行存储模块存储的指令，并且对存储模块中存储的指令的执行使得处理模块执行前述方法实施例中的技术方案。

应理解，上述处理器可以是中央处理单元(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital Signal Processor，简称：DSP)、专用集成电路(英文：Application Specific Integrated Circuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。

总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互连(Peripheral Component，PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，本申请附图中的总线并不限定仅有一根总线或一种类型的总线。

上述存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。

一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于专用集成电路(Application Specific Integrated Circuits，简称：ASIC)中。当然，处理器和存储介质也可以作为分立组件存在于电子设备中。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (12)

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

获取目标页面的原始布局数据，所述原始布局数据包括所述目标页面上多个页面元素的位置和尺寸；

根据所述原始布局数据，确定所述目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；

根据用于展示所述目标页面的显示窗口、所述多个页面区域和所述原始布局数据，确定适合所述显示窗口的目标布局数据；

根据所述目标布局数据，在所述显示窗口对所述目标页面进行显示。

2.根据权利要求1所述的页面布局方法，其特征在于，所述页面区域包括行区域和/或列区域，所述根据所述原始布局数据，确定所述目标页面的多个页面区域，包括：

基于所述原始布局数据，对所述目标页面进行行分割和/或列分割，得到所述行区域和/或所述列区域。

3.根据权利要求2所述的页面布局方法，其特征在于，所述目标页面的分割次数大于或等于1，所述目标页面的一次分割过程包括：

确定第N次待分割的目标区域，所述目标区域包含多个页面元素；

根据所述原始布局数据，确定所述目标区域中页面元素的位置顺序、所述目标区域中页面元素的位置以及所述目标区域中页面元素的尺寸；

根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割和/或列分割，得到所述目标区域中的行区域和/或列区域。

4.根据权利要求3所述的页面布局方法，其特征在于，所述根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割和/或列分割，得到所述目标区域中的行区域和/或列区域，包括：

根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割，得到第一区域，所述第一区域为所述目标区域中的行区域；

如果所述第一区域包含多个页面元素，则根据所述第一区域中页面元素的位置顺序、位置和尺寸，对所述第一区域进行列分割，得到第二区域，所述第二区域为所述目标区域中的列区域。

5.根据权利要求4所述的页面布局方法，其特征在于，所述页面元素的位置包括所述页面元素的行位置，所述页面元素的尺寸包括所述页面元素的高度，所述第一区域为一个或多个，所述根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割，得到第一区域，包括：

基于所述目标区域中页面元素的位置顺序，确定所述目标区域中待划分的第M个页面元素；

在M等于1的情况下，根据所述第M个页面元素的行位置、所述第M个页面元素的高度和所述目标区域，确定所述目标区域中第一个行区域，所述第一个行区域包裹所述第M个页面元素；

在M大于1的情况下，根据所述第M个页面元素的行位置，确定所述第M个页面元素与目标行区域是否存在行关联关系，所述目标行区域包括在第N次分割中得到的包裹所述目标区域中第M-1个页面元素的行区域；

如果所述第M个页面元素与所述目标行区域存在行关联关系，则更新所述目标行区域，更新后的目标行区域包裹所述第M个页面元素，否则根据所述第M个页面元素的行位置、所述第M个页面元素的高度和所述目标区域，确定下一个行区域，所述下一个行区域包裹所述第M个页面元素。

6.根据权利要求4所述的页面布局方法，其特征在于，所述页面元素的位置包括所述页面元素的列位置，所述页面元素的尺寸包括所述页面元素的宽度，所述第二区域为一个或多个，所述如果所述第一区域包含多个页面元素，则根据所述第一区域中页面元素的位置顺序、位置和尺寸，对所述第一区域进行列分割，得到第二区域，包括：

如果所述第一区域包含多个页面元素，则基于所述第一区域中页面元素的位置顺序，确定所述第一区域中待划分的第K个页面元素；

在K等于1的情况下，根据所述第K个页面元素的列位置、所述第K个页面元素的宽度以及所述第一区域，确定所述第一区域中第一个列区域，所述第一个列区域包裹所述第K个页面元素；

在K大于1的情况下，根据所述第K个页面元素的列位置，确定所述第K个页面元素与目标列区域是否存在列关联关系，所述目标列区域包括在第N次分割中得到的包裹所述第一区域中第K-1个页面元素的列区域；

如果所述第K个页面元素与所述目标列区域存在列关联关系，则更新所述目标列区域，更新后的目标列区域包裹所述第K个页面元素，否则根据所述第K个页面元素的列位置、所述第K个页面元素的宽度和所述第一区域，确定下一个列区域，所述下一个列区域包裹所述第K个页面元素。

7.根据权利要求3所述的页面布局方法，其特征在于，所述确定第N次待分割的目标区域，包括：

在N等于1的情况下，确定所述目标区域为所述目标页面；

在N大于1的情况下，确定所述目标区域为上一次分割得到的且包含多个页面元素的行区域和/或列区域。

8.根据权利要求1至7任一项所述的页面布局方法，其特征在于，所述根据用于展示所述目标页面的显示窗口、所述多个页面区域和所述原始布局数据，确定适合所述显示窗口的目标布局数据，包括：

根据所述页面区域与所述页面元素之间的位置包裹关系、不同页面区域之间的位置包裹关系以及不同页面元素之间的位置包裹关系，确定树结构，所述树结构的节点包括所述目标页面、所述页面区域和所述页面元素，其中，根节点为所述目标页面，所述树结构的边表示位置包裹关系；

在所述树结构中，从所述根节点开始，依次根据父节点的位置和所述父节点的尺寸，对所述父节点的子节点的位置和所述子节点的尺寸进行调整；

根据所述树结构中节点调整后的位置、节点调整后的尺寸以及所述目标页面中页面元素与所述树结构中节点的对应关系，得到所述目标布局数据。

9.根据权利要求8所述的页面布局方法，其特征在于，所述在所述树结构中，从所述根节点开始，依次根据父节点的位置和所述父节点的尺寸，对所述父节点的子节点的位置和所述子节点的尺寸进行调整，包括：

在所述树结构中，确定待裁剪和布局的目标节点；

根据所述目标节点的宽度、所述目标节点的父节点的宽度、与所述目标节点属于同一父节点的剩余子节点的位置以及所述剩余子节点的尺寸，对所述目标节点的位置和所述目标节点的尺寸进行调整。

10.一种页面布局装置，其特征在于，包括：

获取单元，用于获取目标页面的原始布局数据，所述原始布局数据包括所述目标页面上多个页面元素的位置、尺寸和标识；

区域确定单元，用于根据所述原始布局数据，确定所述目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；

布局确定单元，用于根据用于展示所述目标页面的显示窗口、所述多个页面区域和所述原始布局数据，确定适合所述显示窗口的目标布局数据；

显示单元，用于根据所述目标布局数据，在所述显示窗口对所述目标页面进行显示。

11.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述电子设备能够执行权利要求1至9中任一项所述的页面布局方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的页面布局方法。

Images