CN109324796A - 界面布局方法及装置 - Google Patents

Abstract

本申请公开了一种界面布局方法，包括：获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；根据所述视图树布局所述目标界面。以解决深层次的布局嵌套导致界面绘制效率降低的问题。

Description

界面布局方法及装置

技术领域

本申请涉及互联网技术领域，具体涉及一种界面布局方法及装置。

背景技术

目前，越来越多的终端APP伴随着智能终端和互联网的发展涌现出来，所谓终端APP(Application，或应用程序)指安装在智能终端上为用户提供更丰富的使用体验的软件。

由于终端APP提供的业务功能越来越复杂而多样，这使得终端APP界面的界面元素比较多并且相对关系也越来越复杂，复杂的界面可能存在深层次的布局嵌套，导致界面绘制效率降低，影响了用户体验。

发明内容

本申请提供一种界面布局方法，以解决深层次的布局嵌套导致界面绘制效率降低的问题。

本申请提供一种界面布局方法，包括：

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

可选的，所述界面布局方法，还包括：

获得所述目标界面的布局节点树；所述布局节点树的节点保存有所述界面元素的信息；

所述获得待布局到目标界面上的界面元素的信息，包括：

从所述布局节点树获取所述界面元素的信息；

所述获得所述界面元素在所述目标界面上的实际显示尺寸，包括：

根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸；

所述获得所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，包括：

根据所述布局节点树确定所述界面元素的第一布局位置；所述第一布局位置为所述界面元素相对所述界面元素的父元素的相对位置；

根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，所述第二布局位置为所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置；第三布局位置为所述界面元素的父元素相对所述目标界面的根元素的相对位置。

可选的，所述获得所述目标界面的布局节点树，包括：

获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树。

可选的，所述获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，包括：

从所述目标界面的设计信息中获取所述界面元素的父元素和/或子元素，根据所述界面元素的父元素和/或子元素确定所述界面元素的父子关系；

从所述目标界面的设计信息中获取所述界面元素的属性信息；

根据所述界面元素的属性信息，如果确定所述界面元素为固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的父元素的位置信息，所述界面元素相对于所述界面元素的父元素的位置信息为所述布局位置规则；

根据所述界面元素的属性信息，如果确定所述界面元素为非固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的兄弟元素的位置信息，所述界面元素相对于所述界面元素的兄弟元素的位置信息为所述布局位置规则。

可选的，所述根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树，包括：

将所述属性信息和所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则作为所述界面元素的信息，生成用于保存所述界面元素的信息的节点；

将所述节点按照所述父子关系生成所述目标界面的布局节点树。

可选的，所述根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸，包括：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，测量所述界面元素得到所述界面元素的实际显示尺寸。

可选的，所述测量所述界面元素得到所述界面元素的实际显示尺寸，包括：

确定所述界面元素为具有布局属性的布局元素；

根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸。

可选的，所述根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸，包括：

对所述布局元素的子元素进行测量，根据所述布局元素的布局规格、所述子元素的布局规格，得到所述子元素的实际显示尺寸；

根据所述布局元素的子元素的实际显示尺寸，以及子元素在所述布局元素的填充尺寸和留白尺寸，确定所述布局元素的实际显示尺寸。

可选的，所述根据所述布局节点树确定所述界面元素的第一布局位置，包括：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置。

可选的，所述根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置，包括：

从所述界面元素的信息中获得所述界面元素要显示的实际内容；

从所述界面元素的信息中获得所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述边界尺寸、所述界面元素要显示的实际内容以及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，确定所述界面元素的第一布局位置。

可选的，所述获得用于显示所述目标界面的显示区域的边界尺寸，包括：

获得屏幕尺寸或浏览器窗口尺寸，将所述屏幕尺寸或所述浏览器窗口尺寸作为所述边界尺寸。

可选的，所述根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，包括：

如果所述界面元素为根元素，则将所述界面元素的第一布局位置作为所述界面元素的第二布局位置；

如果所述界面元素不为根元素，则将所述界面元素的第一布局位置和所述界面元素的父元素的的第三布局位置进行叠加，得到所述界面元素的第二布局位置。

可选的，所述根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图，包括：

获得所述根元素的信息，生成根节点视图；

从所述界面元素的信息中获取属性信息，根据所述属性信息确定所述界面元素的显示外观，将所述实际显示尺寸作为所述界面元素的视图的实际显示尺寸，将所述相对位置作为所述界面元素的视图相对于所述根节点视图的位置，生成所述界面元素的视图。

可选的，所述根据所述视图树布局所述目标界面，包括：

根据所述视图树的根节点视图创建容器；

确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

可选的，所述确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局，包括：

获得所述视图树的子视图的实际显示尺寸；

获得所述视图树的子视图相对于所述根节点视图的位置，作为子视图的实际坐标位置；

根据所述视图树的子视图的实际显示尺寸和所述实际坐标位置，确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

本申请还提供一种界面布局装置，包括：

布局计算单元，用于获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

界面元素视图生成单元，用于根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

目标界面视图树生成单元，用于将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

布局单元，用于根据所述视图树布局所述目标界面。

本申请还提供一种电子设备，包括：

存储器，以及处理器；

所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令：

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

本申请还提供一种存储设备，存储有指令，所述指令能够被处理器加载并执行以下步骤：

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

与现有技术相比，本申请具有以下优点：

本申请提供的界面布局方法，通过根据界面元素的信息、实际显示尺寸以及界面元素在目标界面上相对于待布局到所述目标界面上的根元素的相对位置，生成所述界面元素的视图；将所述界面元素的视图作为根元素的视图的子视图，生成所述目标界面的视图树，简化了界面的布局层级，从而解决了深层次的布局嵌套导致界面绘制效率降低的问题。

附图说明

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

图2是本申请第一实施例包含的示例界面及示例界面的布局节点树示意图；

图3是本申请第一实施例包含的界面元素位置优化流程图；

图4是本申请第一实施例包含的示例界面的布局层级简化示意图；

图5是本申请第二实施例提供的界面布局装置示意图；

图6是本申请第三实施例提供的电子设备示意图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

本申请提供一种界面布局方法、装置、电子设备及存储设备。在下面的实施例中逐一进行详细说明。

本申请第一实施例提供一种界面布局方法。以下结合图1至图3对本申请实施例提供的界面布局方法进行说明。

图1所示的界面布局方法，包括：步骤S101至步骤S104。

步骤S101，获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素。

在终端APP绘制界面时，需要测量界面中的每个界面元素的视图实际尺寸，把每个界面元素的视图放置到相应的位置，这称为界面布局，然后将布局后的界面的每个界面元素的视图绘制出来，就显示在了终端的屏幕上。当界面比较复杂时，可能出现界面元素的视图的层级结构复杂，使得布局层级过深，可能存在布局嵌套的情形。

本申请实施例提供的界面布局方法，将界面的布局层级进行了简化，使得界面布局扁平化，从而提升性能。

本步骤是获得界面元素的信息、实际显示尺寸以及相对于待布局到所述目标界面上的根元素的相对位置。

本申请实施例中，以树形的数据结构表达从界面设计图中得到待布局到目标界面上的界面元素，即为布局节点树。所述布局节点树的节点保存有所述界面元素的信息。获得所述目标界面的布局节点树后，通过下述处理获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置：

从所述布局节点树获取所述界面元素的信息；

根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸；

根据所述布局节点树确定所述界面元素的第一布局位置；所述第一布局位置为所述界面元素相对所述界面元素的父元素的相对位置；

根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，所述第二布局位置为所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置；第三布局位置为所述界面元素的父元素相对所述目标界面的根元素的相对位置。

本申请实施例中，具体通过下述处理获得所述目标界面的布局节点树：

获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树。

优选的通过下述获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则：

从所述目标界面的设计信息中获取所述界面元素的父元素和/或子元素，根据所述界面元素的父元素和/或子元素确定所述界面元素的父子关系；

从所述目标界面的设计信息中获取所述界面元素的属性信息；

根据所述界面元素的属性信息，如果确定所述界面元素为固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的父元素的位置信息，所述界面元素相对于所述界面元素的父元素的位置信息为所述布局位置规则；

根据所述界面元素的属性信息，如果确定所述界面元素为非固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的兄弟元素的位置信息，所述界面元素相对于所述界面元素的兄弟元素的位置信息为所述布局位置规则。

优选的，具体通过下述处理生成所述目标界面的布局节点树：

将所述属性信息和所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则作为所述界面元素的信息，生成用于保存所述界面元素的信息的节点；

将所述节点按照所述父子关系生成所述目标界面的布局节点树。

举例如下，如图2所示，按照示例界面设计信息201中的界面元素生成的布局节点树202。其中，示例界面设计信息201的根元素a；a的子元素为b1和b2；b2的子元素为c1和c2；c1的子元素为d1，d2，d3，d4；c2的子元素为d5，d6，d7。由示例界面设计信息201得到的布局节点树202中有子元素的叶子节点的深度为3，需要布局的层级为3层布局。b1为固定元素，b1距离父元素a左边10像素，顶部10像素；d1，d2，d3，d4为非固定元素，依次从左向右排成一行，d4左侧与d3间距10像素。

本申请实施例中，对界面进行弹性布局，根据实际的显示区域的边界尺寸自适应的确定各界面元素的实际显示尺寸。优选的，获得屏幕尺寸或浏览器窗口尺寸，将所述屏幕尺寸或所述浏览器窗口尺寸作为所述边界尺寸。

本申请实施例中，根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸，具体包括：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，测量所述界面元素得到所述界面元素的实际显示尺寸。

优选的，通过下述处理对所述界面元素进行测量：

确定所述界面元素为具有布局属性的布局元素；

根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸。

沿用图2所示的例子，具有布局属性的布局元素包括根元素a以及界面元素b2，c1，c2，因此需要测量出a，b2，c1和c2的实际显示尺寸。

本申请实施例中，测量各界面元素和根元素的实际显示尺寸时，需要遍历整个布局节点树，依次测量每个界面元素的真实尺寸，测量过程中，每个布局元素根据所述布局元素的当前尺寸规格和所述布局元素的子元素的尺寸数据综合评定一个测量结果，可以用屏幕的像素值表示测量结果。具体包括：

对所述布局元素的子元素进行测量，根据所述布局元素的布局规格、所述子元素的布局规格，得到所述子元素的实际显示尺寸；

根据所述布局元素的子元素的实际显示尺寸，以及子元素在所述布局元素的填充尺寸和留白尺寸，确定所述布局元素的实际显示尺寸。

本申请实施例中，在界面元素的布局计算过程中，还需要根据所述布局节点树确定所述界面元素的第一布局位置，包括下述处理：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置。

具体的，从所述界面元素的信息中获得所述界面元素要显示的实际内容；

从所述界面元素的信息中获得所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述边界尺寸、所述界面元素要显示的实际内容以及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，确定所述界面元素的第一布局位置。

由于本申请实施例提供的界面布局方法将界面的布局层级进行了简化，使得界面布局扁平化，为了保证简化布局层级的情况下保证界面元素之间的正确的位置关系，需要针对所述第一布局位置进行优化处理，得到第二布局位置，用于后续生成目标界面的视图树。

本申请实施例中，根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，包括：

如果所述界面元素为根元素，则将所述界面元素的第一布局位置作为所述界面元素的第二布局位置；

如果所述界面元素不为根元素，则将所述界面元素的第一布局位置和所述界面元素的父元素的的第三布局位置进行叠加，得到所述界面元素的第二布局位置。

请参考图3，图3示出了本实施例包含的界面元素(布局节点树的单个节点)位置优化流程图，根据布局节点树对每个节点对应的界面元素的布局位置进行优化处理，包括：

1.节点的布局位置，即：获得当前处理的节点的当前布局位置；

2.是否有父节点？即：判断当前处理的节点是否有父节点；

3.如果有父节点，则叠加父节点的优化布局位置；

4.如果没有父节点，则不进行叠加，将当前处理的节点的当前布局位置作为优化布局位置。

步骤S102，根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图。

本步骤是生成所述界面元素的视图(view)。

本申请实施例中，根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图，具体包括下述处理：

获得所述根元素的信息，生成根节点视图；

从所述界面元素的信息中获取属性信息，根据所述属性信息确定所述界面元素的显示外观，将所述实际显示尺寸作为所述界面元素的视图的实际显示尺寸，将所述相对位置作为所述界面元素的视图相对于所述根节点视图的位置，生成所述界面元素的视图。

步骤S103，将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树。

本步骤是建立的视图的父子关系，生成视图树。

本申请实施例中，不按照所述布局节点树的节点关系生成视图树，而是将所有子节点视图与根节点视图建立父子关系，从而简化布局层级。

例如，布局节点树中的节点“a.b2.c1.d1”的父亲是“a.b2.c1”，则生成视图树时，将“a.b2.c1.d1”这个view直接添加到根节点对应的view“a”上。

请参考图4，图4是本实施例包含的示例界面的布局层级简化示意图，由三层布局简化为一层布局，包括：布局节点树401和布局层级优化视图树402；布局节点树401中根节点a；a的子节点为a.b1和a.b2；a.b2的子元素为a.b2.c1和a.b2.c2；a.b2.c1的子元素为a.b2.c1.d1，a.b2.c1.d2，a.b2.c1.d3，a.b2.c1.d4；

a.b2.c2的子元素为a.b2.c2.d5，a.b2.c2.d6，a.b2.c2.d7。由布局节点树401得到的布局层级优化视图树402中根节点为a，a的子节点包括：a.b1，a.b2，a.b2.c1，

a.b2.c2，a.b2.c1.d1，a.b2.c1.d2，a.b2.c1.d3，a.b2.c1.d4，a.b2.c2.d5，a.b2.c2.d6，

a.b2.c2.d7，需要布局的层级为一层布局。

步骤S104，根据所述视图树布局所述目标界面。

本步骤是根据布局层级简化后得到的视图树布局所述目标界面。

本申请实施例中，具体包括下述处理对所述目标界面进行布局：

根据所述视图树的根节点视图创建容器；

确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

优选的，通过下述处理确定所述视图树的子视图在所述容器中的位置：

获得所述视图树的子视图的实际显示尺寸；

获得所述视图树的子视图相对于所述根节点视图的位置，作为子视图的实际坐标位置；

根据所述视图树的子视图的实际显示尺寸和所述实际坐标位置，确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

与本申请第一实施例相对应，本申请第二实施例还提供了一种界面布局装置。

参照图5，其示出了本申请第二实施例提供的界面布局装置示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关的部分请参见方法实施例的对应说明即可。

图5所示的界面布局装置，包括：

布局计算单元501，用于获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

界面元素视图生成单元502，用于根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

目标界面视图树生成单元503，用于将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

布局单元504，用于根据所述视图树布局所述目标界面。

可选的，所述界面布局装置，还包括布局节点树生成单元，所述布局节点树生成单元用于：

获得所述目标界面的布局节点树；所述布局节点树的节点保存有所述界面元素的信息；

所述布局计算单元501，具体用于：

从所述布局节点树获取所述界面元素的信息；

根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸；

根据所述布局节点树确定所述界面元素的第一布局位置；所述第一布局位置为所述界面元素相对所述界面元素的父元素的相对位置；

根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，所述第二布局位置为所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置；第三布局位置为所述界面元素的父元素相对所述目标界面的根元素的相对位置。

可选的，所述布局节点树生成单元，具体用于：

获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树。

可选的，所述布局节点树生成单元，具体用于：

从所述目标界面的设计信息中获取所述界面元素的父元素和/或子元素，根据所述界面元素的父元素和/或子元素确定所述界面元素的父子关系；

从所述目标界面的设计信息中获取所述界面元素的属性信息；

根据所述界面元素的属性信息，如果确定所述界面元素为固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的父元素的位置信息，所述界面元素相对于所述界面元素的父元素的位置信息为所述布局位置规则；

根据所述界面元素的属性信息，如果确定所述界面元素为非固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的兄弟元素的位置信息，所述界面元素相对于所述界面元素的兄弟元素的位置信息为所述布局位置规则。

可选的，所述布局节点树生成单元，具体用于：

将所述属性信息和所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则作为所述界面元素的信息，生成用于保存所述界面元素的信息的节点；

将所述节点按照所述父子关系生成所述目标界面的布局节点树。

可选的，所述布局计算单元501包括测量子单元，所述测量子单元用于：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，测量所述界面元素得到所述界面元素的实际显示尺寸。

可选的，所述测量子单元具体用于：

确定所述界面元素为具有布局属性的布局元素；

根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸。

可选的，所述测量子单元具体用于：

对所述布局元素的子元素进行测量，根据所述布局元素的布局规格、所述子元素的布局规格，得到所述子元素的实际显示尺寸；

根据所述布局元素的子元素的实际显示尺寸，以及子元素在所述布局元素的填充尺寸和留白尺寸，确定所述布局元素的实际显示尺寸。

可选的，所述布局计算单元501包括位置计算子单元，所述位置计算子单元用于：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置。

可选的，所述位置计算子单元具体用于：

从所述界面元素的信息中获得所述界面元素要显示的实际内容；

从所述界面元素的信息中获得所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述边界尺寸、所述界面元素要显示的实际内容以及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，确定所述界面元素的第一布局位置。

可选的，所述布局计算子单元具体用于：

获得屏幕尺寸或浏览器窗口尺寸，将所述屏幕尺寸或所述浏览器窗口尺寸作为所述边界尺寸。

可选的，所述位置计算子单元具体用于：

如果所述界面元素为根元素，则将所述界面元素的第一布局位置作为所述界面元素的第二布局位置；

如果所述界面元素不为根元素，则将所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置进行叠加，得到所述界面元素的第二布局位置。

可选的，所述界面元素视图生成单元502具体用于：

获得所述根元素的信息，生成根节点视图；

从所述界面元素的信息中获取属性信息，根据所述属性信息确定所述界面元素的显示外观，将所述实际显示尺寸作为所述界面元素的视图的实际显示尺寸，将所述相对位置作为所述界面元素的视图相对于所述根节点视图的位置，生成所述界面元素的视图。

可选的，所述布局单元504具体用于：

根据所述视图树的根节点视图创建容器；

确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

可选的，所述布局单元504具体用于：

获得所述视图树的子视图的实际显示尺寸；

获得所述视图树的子视图相对于所述根节点视图的位置，作为子视图的实际坐标位置；

根据所述视图树的子视图的实际显示尺寸和所述实际坐标位置，确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

本申请第三实施例还提供了一种用于实现第一实施例提供的所述界面布局方法的电子设备，参照图6，其示出了本申请第三实施例提供的一种电子设备的示意图。

本申请第三实施例提供的所述电子设备描述得比较简单，相关的部分请参见第一实施例的对应说明即可。

图6所示的电子设备，包括：

存储器601，以及处理器602；

所述存储器601用于存储计算机可执行指令，所述处理器602用于执行所述计算机可执行指令：

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得所述目标界面的布局节点树；所述布局节点树的节点保存有所述界面元素的信息；

从所述布局节点树获取所述界面元素的信息；

根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸；

根据所述布局节点树确定所述界面元素的第一布局位置；所述第一布局位置为所述界面元素相对所述界面元素的父元素的相对位置；

根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，所述第二布局位置为所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置；第三布局位置为所述界面元素的父元素相对所述目标界面的根元素的相对位置。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树。

可选的，所述处理器602还用于执行下述计算机可执行指令：

从所述目标界面的设计信息中获取所述界面元素的父元素和/或子元素，根据所述界面元素的父元素和/或子元素确定所述界面元素的父子关系；

从所述目标界面的设计信息中获取所述界面元素的属性信息；

根据所述界面元素的属性信息，如果确定所述界面元素为固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的父元素的位置信息，所述界面元素相对于所述界面元素的父元素的位置信息为所述布局位置规则；

根据所述界面元素的属性信息，如果确定所述界面元素为非固定元素，则从所述目标界面的设计信息中获取所述界面元素相对于所述界面元素的兄弟元素的位置信息，所述界面元素相对于所述界面元素的兄弟元素的位置信息为所述布局位置规则。

可选的，所述处理器602还用于执行下述计算机可执行指令：

将所述属性信息和所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则作为所述界面元素的信息，生成用于保存所述界面元素的信息的节点；

将所述节点按照所述父子关系生成所述目标界面的布局节点树。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，测量所述界面元素得到所述界面元素的实际显示尺寸。

可选的，所述处理器602还用于执行下述计算机可执行指令：

确定所述界面元素为具有布局属性的布局元素；

根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸。

可选的，所述处理器602还用于执行下述计算机可执行指令：

对所述布局元素的子元素进行测量，根据所述布局元素的布局规格、所述子元素的布局规格，得到所述子元素的实际显示尺寸；

根据所述布局元素的子元素的实际显示尺寸，以及子元素在所述布局元素的填充尺寸和留白尺寸，确定所述布局元素的实际显示尺寸。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置。

可选的，所述处理器602还用于执行下述计算机可执行指令：

从所述界面元素的信息中获得所述界面元素要显示的实际内容；

从所述界面元素的信息中获得所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述边界尺寸、所述界面元素要显示的实际内容以及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，确定所述界面元素的第一布局位置。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得屏幕尺寸或浏览器窗口尺寸，将所述屏幕尺寸或所述浏览器窗口尺寸作为所述边界尺寸。

可选的，所述处理器602还用于执行下述计算机可执行指令：

如果所述界面元素为根元素，则将所述界面元素的第一布局位置作为所述界面元素的第二布局位置；

如果所述界面元素不为根元素，则将所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置进行叠加，得到所述界面元素的第二布局位置。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得所述根元素的信息，生成根节点视图；

从所述界面元素的信息中获取属性信息，根据所述属性信息确定所述界面元素的显示外观，将所述实际显示尺寸作为所述界面元素的视图的实际显示尺寸，将所述相对位置作为所述界面元素的视图相对于所述根节点视图的位置，生成所述界面元素的视图。

可选的，所述处理器602还用于执行下述计算机可执行指令：

根据所述视图树的根节点视图创建容器；

确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

可选的，所述处理器602还用于执行下述计算机可执行指令：

获得所述视图树的子视图的实际显示尺寸；

获得所述视图树的子视图相对于所述根节点视图的位置，作为子视图的实际坐标位置；

根据所述视图树的子视图的实际显示尺寸和所述实际坐标位置，确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。

本申请第四实施例还提供一种用于第一实施例提供的界面布局方法的存储设备，其描述得比较简单，相关的部分请参见第一实施例的对应说明即可。

本申请第四实施例提供一种存储设备，存储有指令，所述指令能够被处理器加载并执行以下步骤：

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

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

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

本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。

Claims (10)

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

获得待布局到目标界面上的界面元素的信息、所述界面元素在所述目标界面上的实际显示尺寸以及所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，其中，所述根元素不是所述界面元素的父元素；

根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图；

将所述界面元素的视图作为所述根元素的视图的子视图，生成所述目标界面的视图树；

根据所述视图树布局所述目标界面。

2.根据权利要求1所述的方法，其特征在于，还包括：

获得所述目标界面的布局节点树；所述布局节点树的节点保存有所述界面元素的信息；

所述获得待布局到目标界面上的界面元素的信息，包括：

从所述布局节点树获取所述界面元素的信息；

所述获得所述界面元素在所述目标界面上的实际显示尺寸，包括：

根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸；

所述获得所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置，包括：

根据所述布局节点树确定所述界面元素的第一布局位置；所述第一布局位置为所述界面元素相对所述界面元素的父元素的相对位置；

根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，所述第二布局位置为所述界面元素在所述目标界面上相对于待布局到所述目标界面上的根元素的相对位置；第三布局位置为所述界面元素的父元素相对所述目标界面的根元素的相对位置。

3.根据权利要求2所述的方法，其特征在于，所述获得所述目标界面的布局节点树，包括：

获取所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述界面元素的父子关系、属性信息及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，生成所述目标界面的布局节点树。

4.根据权利要求2所述的方法，其特征在于，所述根据所述布局节点树确定所述界面元素在所述目标界面上的实际显示尺寸，包括：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，测量所述界面元素得到所述界面元素的实际显示尺寸。

5.根据权利要求4所述的方法，其特征在于，所述测量所述界面元素得到所述界面元素的实际显示尺寸，包括：

确定所述界面元素为具有布局属性的布局元素；

根据所述布局元素的视图的布局规格对所述布局元素进行测量，得到所述布局元素的实际显示尺寸。

6.根据权利要求2所述的方法，其特征在于，所述根据所述布局节点树确定所述界面元素的第一布局位置，包括：

获得用于显示所述目标界面的显示区域的边界尺寸；

根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置。

7.根据权利要求6所述的方法，其特征在于，所述根据所述边界尺寸和所述布局节点树的节点保存的界面元素的信息，确定所述界面元素的第一布局位置，包括：

从所述界面元素的信息中获得所述界面元素要显示的实际内容；

从所述界面元素的信息中获得所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则；

根据所述边界尺寸、所述界面元素要显示的实际内容以及所述界面元素在所述目标界面上相对于其他界面元素的布局位置规则，确定所述界面元素的第一布局位置。

8.根据权利要求2所述的方法，其特征在于，所述根据所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置，得到所述界面元素的第二布局位置，包括：

如果所述界面元素为根元素，则将所述界面元素的第一布局位置作为所述界面元素的第二布局位置；

如果所述界面元素不为根元素，则将所述界面元素的第一布局位置和所述界面元素的父元素的第三布局位置进行叠加，得到所述界面元素的第二布局位置。

9.根据权利要求1所述的方法，其特征在于，所述根据所述界面元素的信息、所述实际显示尺寸以及所述相对位置，生成所述界面元素的视图，包括：

获得所述根元素的信息，生成根节点视图；

从所述界面元素的信息中获取属性信息，根据所述属性信息确定所述界面元素的显示外观，将所述实际显示尺寸作为所述界面元素的视图的实际显示尺寸，将所述相对位置作为所述界面元素的视图相对于所述根节点视图的位置，生成所述界面元素的视图。

10.根据权利要求1所述的方法，其特征在于，所述根据所述视图树布局所述目标界面，包括：

根据所述视图树的根节点视图创建容器；

确定所述视图树的子视图在所述容器中的位置，得到所述目标界面的布局。