CN112035199A - 一种界面布局方法、电子设备以及计算机可读存储介质 - Google Patents

Abstract

本发明实施例提供的一种界面布局方法、电子设备以及计算机可读存储介质的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

Description

一种界面布局方法、电子设备以及计算机可读存储介质

【技术领域】

本发明涉及电子技术领域，具体地涉及一种界面布局方法、电子设备以及计算机可读存储介质。

【背景技术】

在分布式场景下，同一个应用需要在多个具有不同显示界面的电子设备上进行展示。由于电子设备不同，分辨率可能也不相同，例如智能手机和电脑的屏幕分辨率不同，所以同一应用的布局单元在智能手机和电脑上的界面布局也不相同。在相关技术中，开发人员需针对不同的设备形态编写不同的布局配置文件，使得电子设备根据对应的布局配置文件，实现布局单元的自适应布局，从而造成应用程序的开发成本大的问题。

【发明内容】

有鉴于此，本发明提供一种界面布局方法、电子设备以及计算机可读存储介质，能够根据一布局配置文件，计算出不同设备中的布局单元的大小和位置，从而降低了开发成本。

第一方面，本发明实施例提供了一种界面布局方法，包括：

获取设备信息；

获取参考界面的布局单元；

获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；

根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；

根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。

在一种可能的实现方式中，所述设备信息包括显示分辨率和设备类型，所述显示分辨率用于确定所述布局单元的位置的像素坐标，所述设备类型用于确定屏幕形态，以用于限定可显示区域的大小。

在一种可能的实现方式中，所述布局单元的类型包括自适应类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点；

所述生成所述布局单元的位置，包括：

根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括静态类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点和父级间距；

所述生成所述布局单元的位置，包括：

将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；

根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括变形类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面的所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点和父级间距；

所述生成所述布局单元的位置，包括：

将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；

根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括动态类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述动态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括参考点，或者参考边；

所述调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，包括：

以所述布局单元的指定的参考点为锁定点并以指定的参考边作为基准边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小等比例放大或者缩小，生成所述布局单元的大小；或者，以所述布局单元的指定的参考边作为锁定边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小非等比例放大或者缩小，生成所述布局单元的大小。

在一种可能的实现方式中，所述配置信息包括定位点；

所述生成所述布局单元的位置，包括：

根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述配置信息包括定位点和链关系，所述链关系包括所述布局单元与其它的布局单元之间的跟随关系；

所述生成所述布局单元的位置，包括：

根据布局单元的大小、所述定位点、所述链关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；

根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述配置信息包括定位点和族关系，所述族关系包括所述布局单元与其它的布局单元之间的排列方式；

所述生成所述布局单元的位置，包括：

根据所述族关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；

根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述参考点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

在一种可能的实现方式中，所述参考边包括布局单元的上边、下边、左边、右边、水平居中边或垂直居中边。

在一种可能的实现方式中，所述定位点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

在一种可能的实现方式中，所述排列方式包括左对齐、右对齐、水平居中对齐、上对齐、下对齐、垂直居中对齐、均分水平间距或均分垂直间距。

第二方面，本发明实施例提供了一种电子设备，包括：显示屏；一个或多个处理器；存储器；多个应用程序；以及一个或多个计算机程序，其中所述一个或多个计算机程序被存储在所述存储器中，所述一个或多个计算机程序包括指令，当所述指令被所述设备执行时，使得设备执行第一方面或者第一方面的任一可能的实现中的界面布局方法。

第三方面，本发明实施例提供了一种计算机可读存储介质，所述计算机介质存储用于设备执行的程序代码，所述程序代码包括用于执行第一方面或者第一方面的任一可能的实现方式中的方法的指令。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

【附图说明】

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

图1是本发明一实施例所提供的可显示区域的界面示意图；

图2是相关技术中的一种智能手机和电脑的结构示意图；

图3是本发明一实施例所提供的一种电子设备的架构图；

图4是本发明一实施例所提供的一种界面布局方法的流程图；

图5a是本发明一实施例所提供的一种参考界面的可显示区域下静态类型的布局单元的结构示意图；

图5b是本发明一实施例所提供的一种实际界面的可显示区域下静态类型的布局单元的结构示意图；

图6是本发明一实施例所提供的一种界面布局方法的流程图；

图7是本发明一实施例所提供的一种布局单元的定位点的示意图；

图8是本发明一实施例所提供的一种布局单元的定位点的示意图；

图9是本发明一实施例所提供的一种布局单元的定位点的示意图；

图10a是本发明一实施例所提供的一种参考界面的可显示区域下自适应类型的布局单元的结构示意图；

图10b是本发明一实施例所提供的一种实际界面的可显示区域下自适应类型的布局单元的结构示意图；

图11是本发明一实施例所提供的一种实际界面的可显示区域下自适应类型的布局单元的结构示意图；

图12a是本发明一实施例所提供的一种参考界面的可显示区域下自适应类型的布局单元的结构示意图；

图12b是本发明一实施例所提供的一种实际界面的可显示区域下自适应类型的布局单元的结构示意图；

图13a是本发明一实施例所提供的一种参考界面的可显示区域下自适应类型的布局单元的结构示意图；

图13b是本发明一实施例所提供的一种实际界面的可显示区域下自适应类型的布局单元的结构示意图；

图14a是本发明一实施例所提供的一种参考界面的可显示区域的界面示意图；

图14b是本发明一实施例所提供的一种实际界面的可显示区域的界面示意图；

图15是本发明一实施例所提供的一种界面布局方法的流程图；

图16是本发明一实施例所提供的一种静态类型的布局单元调整方式的示意图；

图17是本发明一实施例所提供的一种静态类型的布局单元调整方式的示意图；

图18是本发明一实施例所提供的一种界面布局方法的流程图；

图19a是本发明一实施例所提供的一种参考界面的可显示区域下变形类型的布局单元的结构示意图；

图19b是本发明一实施例所提供的一种实际界面的可显示区域下变形类型的布局单元的结构示意图；

图20是本发明一实施例所提供的一种界面布局方法的流程图；

图21是本发明一实施例所提供的一种布局单元的定位点的示意图；

图22a是本发明一实施例所提供的一种参考界面的可显示区域下动态类型的布局单元的结构示意图；

图22b是本发明一实施例所提供的一种实际界面的可显示区域下动态类型的布局单元的结构示意图；

图23是本发明一实施例所提供的一种动态类型的布局单元调整方式的示意图；

图24a是本发明一实施例所提供的一种参考界面的可显示区域下动态类型的布局单元的结构示意图；

图24b是本发明一实施例所提供的一种实际界面的可显示区域下动态类型的布局单元的结构示意图；

图25是本发明一实施例所提供的一种动态类型的布局单元调整大小的操作示意图；

图26是本发明一实施例所提供的一种动态类型的布局单元调整方式的示意图；

图27是本发明一实施例所提供的一种实际界面的可显示区域下自适应类型的布局单元的结构示意图；

图28a是本发明一实施例所提供的一种参考界面的可显示区域下动态类型的布局单元的结构示意图；

图28b是本发明一实施例所提供的一种实际界面的可显示区域下动态类型的布局单元的结构示意图；

图29a是本发明一实施例所提供的一种参考界面的可显示区域下动态类型的布局单元的结构示意图；

图29b是本发明一实施例所提供的一种实际界面的可显示区域下动态类型的布局单元的结构示意图；

图30是本发明一实施例所提供的一种界面布局方法的流程图；

图31a是本发明一实施例所提供的一种可显示区域下具有链关系的布局单元的示意图；

图31b是本发明一实施例所提供的一种可显示区域下具有链关系的布局单元的示意图；

图31c是本发明一实施例所提供的一种可显示区域下具有链关系的布局单元的示意图；

图32是本发明一实施例所提供的一种可显示区域下具有链关系的布局单元的示意图；

图33是本发明一实施例所提供的一种界面布局方法的流程图；

图34是本发明一实施例所提供的一种可显示区域下具有族关系的布局单元的示意图；

图35是本发明一实施例所提供的一种可显示区域下具有族关系的布局单元的示意图；

图36是本发明一实施例所提供的一种可显示区域下具有族关系的布局单元的示意图；

图37是本发明一实施例所提供的一种可显示区域下具有族关系的布局单元的示意图；

图38是本发明一实施例所提供的一种电子设备的结构示意图；

图39是本发明一实施例所提供的另一种电子设备的结构示意图。

【具体实施方式】

为了更好的理解本发明的技术方案，下面结合附图对本发明实施例进行详细描述。

应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，甲和/或乙，可以表示：单独存在甲，同时存在甲和乙，单独存在乙这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

为了便于理解，示例的给出部分与本发明实施例相关概念的说明以供参考。

(1)可显示区域

可显示区域包括电子设备的显示屏幕中用于显示图像的区域。其中，可显示区域的大小被电子设备的屏幕形态所限定，也就是说，可显示区域的大小小于或者等于电子设备的屏幕大小。

(2)布局单元

布局单元包括可显示区域中的一个显示元素。例如，布局单元可包括气泡、弹窗、菜单、标题栏、按钮、卡片、列表或者搜索框。电子设备的可显示区域包括至少一个布局单元。当可显示区域包括多个布局单元时，多个布局单元可为同级的布局单元或不同级的布局单元。

可显示区域中可包括多级布局单元，且多级布局单元之间形成多层嵌套的布局关系。其中，布局单元所属的父布局包括电子设备的可显示区域；或者，布局单元所属的父布局包括上一级的布局单元。例如，当可显示区域包括多个不同级的布局单元时，部分布局单元所属的父布局为可显示区域，部分布局单元所属的父布局为上一级布局单元。也就是说，当该布局单元包括父布局单元时，该布局单元可包括至少一个子布局单元。当该布局单元为子布局单元时，其所属的父布局是父布局单元。例如，如图1所示，可显示区域1包括布局单元11和布局单元12，其中，布局单元11包括布局单元111。如图1所示，布局单元11和布局单元12为同级的布局单元，且布局单元11和布局单元12所属的父布局为可显示区域1。布局单元12和布局单元11与布局单元111之间为不同级的布局单元，且布局单元11为布局单元111的上一级布局单元，即布局单元111为布局单元11的子布局单元，布局单元111所属的父布局为布局单元11。进一步地，布局单元111可包括其他布局单元，对此不做限。

(3)开发端设备

开发端设备包括具有开发功能的设备，通常为开发人员用于开发时采用的设备。

(4)参考界面

参考界面可包括同一电子设备的不同形态的显示界面，或者是除该电子设备之外的其他设备的显示界面。

通过上述对相关概念的说明之后，下列对相关技术中的界面布局方法进行简单介绍。

随着智能手机和电脑等移动终端设备的分辨率和屏幕尺寸的不断发展，不同型号的设备的分辨率以及屏幕尺寸存在不同。例如以智能手机和电脑为例，如图2所示，智能手机10和电脑20的分辨率和屏幕尺寸均不相同，因此，在智能手机10上布局效果良好的应用程序，若安装在电脑20上，可能会出现布局效果不理想的问题。例如，布局单元的大小和位置不合理等。

针对上述问题，在相关技术中常用的解决方式是，开发人员通过开发端设备根据待适配设备的设备信息和待显示的布局单元，设定布局单元的调整方式，并生成待适配设备对应的布局配置文件，以使得待适配设备通过获取该待适配设备对应的布局配置文件后，根据该布局配置文件，调整布局单元的大小和位置，并显示布局单元，从而实现界面的布局。例如，针对智能手机10，相关技术需要根据智能手机10生成对应的布局配置文件，在根据该布局配置文件调整大小，实现界面布局；而针对电脑20，又需要根据电脑20生成对应的布局配置文件，在根据电脑对应的配置文件调整大小，实现界面布局。也就是说，在相关技术中的布局配置文件与待适配设备之间的关系为一对一的关系。因此相关技术中的方案，依赖开发人员人为地针对每一个设备类型和布局单元进行按需设计，从而导致应用程序的开发成本大的问题。

针对相关技术中的问题，本发明实施例提供了一种界面布局方法，该方法使不同的待适配设备根据唯一的布局配置文件，实现界面的自适应布局。具体地，开发人员通过在开发端设备对设置的布局单元的分类规则，设定每一种布局单元的类型对应的配置信息，生成一布局配置文件。开发端设备将该布局配置文件下发至不同设备类型的待适配设备后，使得不同设备类型的待适配设备均能够根据该布局配置文件并结合自身设备的设备信息，对获取的参考界面的布局单元进行自适应调整大小和位置。例如，智能手机10和电脑20均能够根据同一个布局配置文件并结合自身设备的设备信息，对获取的参考界面的布局单元进行自适应调整大小和位置。也就是说，在本发明实施例中的布局配置文件与待适配设备之间的关系为一对多的关系，从而相对于相关技术的界面布局方法而言，本发明实施例提供的界面布局方法，能够降低开发难度、开发成本，缩短开发周期，并实现界面的自适应布局。

此外，本发明实施例提供的界面布局方法还能够应用于同一电子设备或者不同电子设备的界面自适应布局的场景中，下面对界面自适应布局的场景进行简单介绍。

界面自适应布局的场景：

场景一、同一电子设备的不同可显示区域的界面自适应布局的场景。

本发明的电子设备包括上述的待适配设备，例如，该电子设备可以是手机、平板电脑、电视、台式计算机、可穿戴设备(例如手表)、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或个人数字助理(personal digitalassistant，PDA)等具有显示功能的设备。本申请实施例对电子设备的具体类型不作任何限制。

针对同一电子设备，具有多种不同大小的可显示区域，以智能手机为例，智能手机的可显示区域可包括横屏显示界面、竖屏显示界面、分屏显示界面、画中画显示界面或者悬浮窗显示界面等。当该智能手机的可显示区域由竖屏显示界面转换为画中画显示界面时，智能手机能够根据获取的竖屏显示界面的布局单元、布局配置文件以及自身设备的设备信息，对竖屏显示界面的布局单元进行自适应调整，生成画中画显示界面的布局单元的大小和位置。

需要说明的是，可显示区域中可包括至少一个布局单元。例如，以智能手机的可显示区域显示某应用程序的界面为例，该界面中的气泡、弹窗、菜单、标题栏、按钮、卡片、列表或者搜索框均为布局单元。此外，布局单元还包括由标题栏、搜索框以及菜单组成的显示元素，或者，由卡片和列表组合的显示元素。也就是说，一个可显示区域可包括至少一个布局单元，一个布局单元可包括多个其他布局单元，也可以只包括其本身。

针对同一电子设备的不同显示界面自适应布局的场景，通过本发明实施例提供的界面布局方法，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出同一设备不同可显示区域下的布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

场景二、不同电子设备的显示界面自适应布局的场景。

本发明的电子设备包括上述的待适配设备，针对不同的电子设备，显示分辨率、设备类型、可显示区域的大小和位置各不相同。例如，智能手机、平板电脑以及笔记本电脑这三种电子设备的可显示区域的显示分辨率、设备类型、可显示区域的大小和位置各不相同。例如，将智能手机的布局单元显示在平板电脑时，也就是把智能手机的显示界面作为参考界面，将平板电脑的显示界面作为实际界面时，由于不同设备之间的可显示区域的显示分辨率、设备类型、可显示区域的大小和位置各不相同。因此平板电脑获取自身的设备信息，根据自身的设备信息确定出可显示区域的显示分辨率和大小，并根据获取的智能手机的显示界面中的布局单元、布局配置文件以及自身设备的设备信息，对智能手机的显示界面中的布局单元进行自适应调整，生成平板电脑的显示界面的布局单元的大小和位置。

针对不同电子设备的显示界面自适应布局的场景，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

相对于相关技术而言，本发明实施例提供的界面布局方法，针对同一设备的不同可显示区域，或者是不同设备的可显示区域均能够使用同一个布局配置文件，进行界面的自适应布局，从而使得开发成本降低，并且提高了界面布局的自适应能力。

图3为本发明一实施例提供的一种电子设备的架构图，如图3所示，电子设备110包括处理器111、显示单元112。其中，处理器111包括第一获取模块113、第二获取模块114以及计算模块115。

本发明实施例中，第一获取模块113用于获取设备信息，设备信息可包括显示分辨率、设备类型、可显示区域的大小和位置。其中，显示分辨率用于确定布局单元的像素位置，设备类型用于确定屏幕形态，以用于限定可显示区域的大小，其中，可显示区域的大小和位置用于限定布局单元的大小和位置，使布局单元处于可显示区域范围内。进一步地，第一获取模块113还用于获取参考界面的布局单元。通过获取参考界面的布局单元，并结合布局配置文件以及自身的设备信息，生成该电子设备的显示界面的布局单元的大小和位置。

第二获取模块114用于获取布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。也就是说，开发人员在采用开发端设备生成布局配置文件时，通过设置不同类型的布局单元的调整方式，生成布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息，生成布局配置文件。

本发明实施例中，开发人员在采用开发端设备生成布局配置文件时，通过设置有布局单元的类型对应的配置信息，以使得使用该布局配置文件的电子设备，能够获取参考界面的布局单元后，根据该布局配置文件中的布局单元的类型对应的配置信息对该布局单元进行自适应调整，生成电子设备的显示界面的布局单元的大小和位置，即通过该布局配置文件，使得不同的电子设备通过该布局配置文件并结合自身的设备信息，实现界面的自适应布局，避免了开发成本大的问题。

其中，布局单元的类型对应的配置信息可包括定位点、参考点、参考边、链关系、族关系和父级间距等，具体可参见下述实施例的介绍。不同类型对应的配置信息不同，因此不同类型的布局单元的调整方式，调整方式具体包括调整布局单元的大小、位置或者样式，具体可参见下述实施例的介绍。需要说明的是，该布局配置文件是唯一的布局配置文件。本发明实施例中，不同的电子设备通过获取该布局配置文件并结合设备自身的设备信息，实现不同设备界面的自适应布局。

计算模块115用于根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置。本发明实施例中，不同类型的布局单元，生成布局单元的大小和位置的方式不同，具体可参见下述实施例的介绍。

显示单元112用于根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

在本发明实施例中，上述的电子设备110能够获取布局配置文件、参考界面的布局单元以及自身的设备信息，能够自适应调整参考界面的布局单元的大小和位置，生成自身设备的布局单元的大小和位置，从而提高了界面布局的自适应能力。下面结合图2，包括步骤102至步骤110，对电子设备110执行界面布局方法的过程进行详细的说明。

图4为本发明一实施例提供的一种界面布局方法的流程图，如图4所示，该方法包括：

步骤102、获取设备信息。

本发明实施例中，各步骤由电子设备110执行。

本发明实施例中，设备信息包括显示分辨率、可显示区域大小、可显示区域位于显示屏幕的位置以及设备类型。其中，显示分辨率是电子设备110在显示图像时的分辨率，分辨率是用点来衡量的，其中，“点”用于指示像素(pixel)。显示分辨率的数值是指整个电子设备的显示区域上水平像素和垂直像素的数量。例如：800×600的分辨率，是指在整个显示区域上水平显示800个像素，垂直显示600个像素。通过获取显示分辨率，以便于后续步骤中确定出布局单元的位置的像素坐标。

设备类型包括电子设备所属的类型、系统等信息。由于不同的电子设备对应的设备类型不同，因此本发明实施例在电子设备进行界面自适应布局时，需要获取电子设备的设备类型。例如，待适配的电子设备包括电子设备A和电子设备B，而电子设备A和电子设备B可以包括相同的系统，不同的屏幕形态。或者，电子设备A和电子设备B可以包括不同的系统，例如，电子设备A为安卓手机和电子设备B为Mac手机的情况下，电子设备A的系统包括安卓系统，电子设备B的系统包括IOS系统，因此需要获取电子设备所属的类型、系统等信息，以便后续步骤对该电子设备实现界面的自适应布局。其中，设备类型用于确定屏幕形态，以用于限定可显示区域的大小，例如，可显示区域的大小小于或者等于电子设备的屏幕大小。设备类型可包括智能手机、平板电脑或笔记本电脑等设备。

可显示区域包括电子设备的屏幕当前可用于显示的区域，其中，可显示区域小于或等于屏幕区域。例如，可显示区域可包括当前屏幕区域的右下角区域。此外，可显示区域的大小包括可显示区域的宽度和高度，其中，可显示区域的宽度包括可显示区域在第一方向的长度，显示区域的高度包括可显示区域在第二方向的长度，且第一方向和第二方向垂直。

步骤104、获取参考界面的布局单元。

本发明实施例中，参考界面可包括同一电子设备的不同形态的显示界面，或者不同设备的显示界面。可通过获取参考界面的布局单元，并结合后续步骤布局配置文件以及自身的设备信息，能够调整参考界面的布局单元的大小和位置，从而生成当前显示界面的布局单元的大小和位置，以实现界面自适应布局。

下面分别对参考界面的不同情况进行简单举例：

当参考界面包括同一电子设备的不同形态的显示界面时，例如，以电子设备的可显示区域由竖屏显示界面转换为画中画显示界面为例，电子设备能够根据获取的竖屏显示界面的布局单元、后续步骤获取的布局配置文件、以及自身设备的设备信息，对竖屏显示界面的布局单元进行自适应调整，生成画中画显示界面的布局单元的大小和位置，即当前显示界面的布局单元的大小和位置。

当参考界面包括不同设备的显示界面时，例如，以智能手机的显示界面中的布局单元在平板电脑的显示界面中显示为例，平板电脑能够根据获取的智能手机的显示界面中的布局单元、后续步骤获取的布局配置文件以及自身设备的设备信息，对智能手机的显示界面中的布局单元进行自适应调整，生成平板电脑的显示界面的布局单元的大小和位置，即当前显示界面的布局单元的大小和位置。

步骤106、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，终端设备通过获取布局单元的特征，设置布局单元的分类规则。例如，卡片具有展示信息的功能，往往需要根据不同的显示界面呈现不同的大小，因此将卡片设为自适应类型的布局单元。其中，终端设备可包括开发端设备、电子设备或者其他设备。也就是说，每个终端设备均预先设置有该布局单元的分类规则。例如，开发端设备根据分类规则设置不同类型的布局单元的调整方式，生成布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息，生成布局配置文件。电子设备根据该分类规则能够确定出获取的布局单元的所属类型。

具体地，本发明实施例中，通过设置的布局单元的分类规则，能够对获取的多个布局单元进行分类，确定出每个布局单元的类型，其中，确定出布局单元的类型可包括自适应类型、静态类型、变形类型或者动态类型。

自适应类型的布局单元能够在不同的可显示区域之间进行位置的自适应变化。例如，自适应类型的布局单元包括菜单、卡片、按钮、评分条或气泡提示。需要说明的是，不同的可显示区域可包括同一设备中不同的可显示区域，或者不同设备中的可显示区域。

动态类型的布局单元能够在不同的可显示区域之间进行大小和位置的自适应变化，例如，动态类型的布局单元包括卡片、导航栏、弹窗、可滑动面板、底部页签、底部动作条、子页签、进度条或者播放按钮。

静态类型的布局单元能够在不同的可显示区域之间大小和相对位置均不改变。例如，静态类型的布局单元包括导航点、步骤导航器、新事件标记、及时反馈、多选、勾选或开关。需要说明的是，相对位置用于指示布局单元所在位置相对于父布局所在位置的相对值。例如，如图5a和图5b所示，布局单元I在参考界面的可显示区域1时，布局单元I的右边与可显示区域1的一边界的间距为L1，布局单元的下边与可显示区域1的另一边界的间距为L2，而当布局单元I在实际界面的可显示区域2时，虽然可显示区域2的大小大于可显示区域1的大小，但布局单元I的右边与可显示区域2的一边界的间距仍为L1，布局单元I的下边与可显示区域2的另一边界的间距仍为L2，也就是说，该布局单元I无论可显示区域是变大还是变小，该布局单元I的相对位置不变，仍处于可显示区域的右下角位置，且布局单元I的边与可显示区域的边界之间的间距不变，即相对值不变。

变形类型的布局单元能够在不同的可显示区域之间样式改变、而大小和相对位置不变。例如，变形类型的布局单元包括按钮、列表、标题栏、滑动选择器、网格式排列、滚动条或搜索框。

需要说明的是，布局配置文件除了包括布局单元的类型对应的配置信息之外，还可以包括其他信息，本发明对此不做限定。

本发明实施例中，可将该布局配置文件预置在应用程序中，例如，该应用程序可包括安卓应用程序包(Android application package，简称APK)，电子设备110通过安装该应用程序从而获取布局配置文件。其中，布局配置文件可包括布局单元的类型对应的配置信息，其中，配置信息包括不同类型的布局单元的特征以及不同类型的布局单元所对应的调整方式。其中，不同类型的布局单元的特征可包括定位点、参考点、参考边、链关系、族关系、父级间距等，具体可参见下述实施例的介绍。不同类型的布局单元的调整方式不同，调整方式具体包括调整布局单元的大小、位置或者样式，具体可参见下述实施例的介绍。

需要说明的是，该布局配置文件是唯一的布局配置文件。电子设备110通过该布局配置文件结合步骤102获取的设备信息以及步骤104获取的参考界面的布局单元，能够执行后续步骤，确定出布局单元的大小和位置并显示布局单元，从而能够实现界面的自适应布局。进一步地，该布局配置文件用于适配不同的电子设备，通过本发明实施例中所提供的布局配置文件，不同的电子设备均可通过该布局配置文件，实现界面的自适应布局。也就是说，对于同一电子设备而言，获取该布局配置文件后，能够以该布局配置文件实现同一设备不同显示区域的界面布局，而对于不同的电子设备而言，不同的电子设备均可通过该布局配置文件，实现界面的自适应布局。相对于相关技术中，开发人员需要针对不同的电子设备生成该设备对应的布局配置文件，本发明中不同的电子设备均使用同一布局配置文件，能够减少开发成本。

步骤108、根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置。

本发明实施例中，在执行步骤108之前，电子设备可通过设置的布局单元的分类规则确定出布局单元的类型。例如，当布局单元包括卡片时，根据布局单元的分类规则确定出卡片的类型为自适应类型。

本发明实施例中，在确定布局单元的大小和位置时，主要因素包括布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息。下面具体对每一个因素以及每个因素对布局单元大小和位置的影响进行简要说明：

首先，在布局配置文件中，将布局单元按照类型进行划分，具体地，布局单元可包括自适应类型的布局单元、动态类型的布局单元、静态类型的布局单元或者变形类型的布局单元，以智能手机的可显示区域为例，可显示区域包括多个布局单元，例如，多个布局单元包括气泡、弹窗、菜单、导航栏、按钮、卡片、列表和搜索框。根据布局单元的类型对多个布局单元进行划分，得到自适应类型的布局单元、动态类型的布局单元、静态类型的布局单元或者变形类型的布局单元。基于此，开发端设备在布局配置文件中，对于每一个布局单元的类型设置有对应的配置信息，该布局单元的类型对应的配置信息可理解为该类型的布局单元的调整方式。例如，以布局单元包括自适应类型的布局单元为例，自适应类型对应的配置信息可包括定位点，根据获取的定位点，以及结合布局单元所属的父布局的大小和位置以及设备信息，能够将该布局单元吸附至父布局的指定位置，并且该布局单元处于父布局范围内，以生成该布局单元的位置。

需要说明的是，不同类型的布局单元所对应的配置信息不同，电子设备110可通过布局配置文件获取布局单元的类型所对应的配置信息。其中，关于布局单元的不同类型对应的不同的配置信息的具体说明可参见下述实施例。

本发明实施例中，布局单元所属的父布局包括电子设备的可显示区域；或者，布局单元所属的父布局包括上一级的布局单元。其中，获取布局单元所属的父布局的大小和位置的具体方式可包括两种方式：

方式一：当布局单元所属的父布局包括电子设备的可显示区域时，获取的父布局的大小和位置即为可显示区域的大小和位置，因此可通过设备信息获取可显示区域的大小和位置。

方式二：当布局单元所属的父布局包括上一级的布局单元时，可将上一级的布局单元理解为更高级别的布局单元，因此可执行步骤108根据上一级的布局单元的类型对应的配置信息、获取的上一级的布局单元所属的父布局的大小和位置以及设备信息，确定出上一级的布局单元的大小和位置，直至确定出的最高级的布局单元所属的父布局为电子设备的可显示区域时，流程结束。通过执行该步骤流程，能够确定出每一级别的布局单元的大小和位置。

下面通过两个可选方案对布局单元所属的父布局包括电子设备的可显示区域；或者，布局单元所属的父布局包括上一级的布局单元的情况进行说明：

作为一种可选的方案，例如，如图1所示，电子设备的可显示区域1可包括多个同级的布局单元：布局单元11和布局单元12，即布局单元11和布局单元12所属的父布局包括电子设备的可显示区域1，因此可根据布局单元11的类型、布局单元11的配置信息、获取的可显示区域1的大小和位置以及设备信息，确定出布局单元11的大小和位置。

作为另一种可选的方案，例如，如图1所示，电子设备的可显示区域1包括多个不同级的布局单元：布局单元11和布局单元12，其中，布局单元11包括布局单元111。在图1中，布局单元11和布局单元12为同级的布局单元，布局单元111为布局单元11的子布局单元，即布局单元111所属的父布局包括上一级的布局单元11，因此可根据布局单元111的类型、布局单元111的配置信息、获取的布局单元111所属的父布局(布局单元11)的大小和位置以及设备信息，确定出布局单元111的大小和位置。其中，布局单元111所属的父布局包括布局单元11。

需要说明的是，获取布局单元所属的父布局的大小和位置的原因是在于，布局单元所处的位置由父布局的大小和位置限定，具体地，布局单元的大小不能大于父布局的大小，且布局单元只能位于父布局的范围内。例如，当某个可显示区域中只包括一个布局单元时，即该可显示区域为该布局单元的父布局，因此无论该布局单元的大小和位置如何调整，该布局单元始终限定在该可显示区域中。

此外，还需要根据设备信息，确定布局单元的大小和位置的原因是在于，设备信息包括显示分辨率和设备类型，通过获取显示分辨率，以便于后续步骤中确定出布局单元的位置的像素位置。通过获取设备类型，以确定屏幕形态，以用于限定可显示区域的大小。此外，设备信息还包括可显示区域的大小和可显示区域所处的显示屏幕的位置，通过获取可显示区域的大小和位置，以便于确定出以可显示区域为父布局的布局单元的大小和位置。

本发明实施例中，电子设备110根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置。而相关技术是根据每一个设备生成对应的布局配置文件，根据布局配置文件确定布局单元的大小和位置，本发明是由开发端设备预先生成布局配置文件，电子设备110根据布局配置文件再结合自身的设备信息，确定布局单元的大小和位置，因此本发明相对于相关技术而言，不需要根据每个设备单独生成对应的布局配置文件，而是通过一个布局配置文件适配多个设备，从而提高了界面布局的实用性和效率。

具体地，以获取的布局单元的类型为自适应类型，获取的配置信息为自适应类型对应的配置信息为例，例如，在布局配置文件中，自适应类型的布局单元包括在不同的显示区域之间位置的自适应变化、而大小不变的布局单元，因此根据自适应类型对应的配置信息，不调整该布局单元的大小，只调整该布局单元的位置。而具体调整布局单元的位置的方式，可根据自适应类型对应的配置信息、布局单元所属的父布局的大小和位置以及设备信息最终确定，具体地，确定自适应类型的布局单元的位置的过程可参见下述实施例步骤208。

以获取的布局单元的类型为静态类型，获取的配置信息为静态类型对应的配置信息为例，例如，在布局配置文件中，静态类型的布局单元包括在不同的显示区域之间大小和相对位置均不改变的布局单元。因此根据静态类型对应的配置信息，不调整该布局单元的大小，调整该布局单元的位置使得该布局单元的相对位置不变。而具体调整布局单元的位置的方式，可根据静态类型对应的配置信息、布局单元所属的父布局的大小和位置以及设备信息最终确定，具体地，确定静态类型的布局单元的位置的过程可参见下述实施例步骤308。

以获取的布局单元的类型为变形类型，获取的配置信息为变形类型对应的配置信息为例，例如，在布局配置文件中，变形类型的布局单元包括在不同的显示区域之间样式改变，而大小和相对位置不变的布局单元。因此根据变形类型对应的配置信息，调整该布局单元的样式，不调整该布局单元的大小，调整该布局单元的位置使得该布局单元的相对位置不变。而具体调整布局单元的位置的方式，可根据变形类型对应的配置信息、布局单元所属的父布局的大小和位置以及设备信息最终确定，具体地，确定变形类型的布局单元的位置的过程可参见下述实施例步骤408。

以获取的布局单元的类型为动态类型，获取的配置信息为动态类型对应的配置信息为例，例如，在布局配置文件中，动态类型的布局单元包括在不同的显示区域之间大小和位置的自适应变化的布局单元，因此根据动态类型对应的配置信息，调整该布局单元的大小和位置。而具体调整该布局单元的大小和位置的方式，可根据动态类型对应的配置信息、布局单元所属的父布局的大小和位置以及设备信息最终确定，具体地，确定动态类型的布局单元的位置的过程可参见下述实施例步骤508。

步骤110、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，如图1所示，通过上述步骤108获取布局单元11和布局单元12的大小和位置后，在电子设备110中，根据布局单元11和布局单元12的大小和位置，生成显示界面。需要说明的是，若布局单元11包括布局单元111时，需要继续执行上述步骤106计算出布局单元111的大小和位置，在电子设备110中，根据布局单元11和布局单元12的大小和位置、布局单元111的大小和位置，生成显示界面。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图6为本发明一实施例提供的一种界面布局方法的流程图，如图6所示，该方法包括：

步骤202、获取设备信息。

本发明实施例中，步骤202的执行过程可参见上述步骤102。

步骤204、获取参考界面的布局单元。

本发明实施例中，步骤204的执行过程可参见上述步骤104。

步骤206、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤206的执行过程可参见上述步骤106。

步骤208、根据自适应类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，将参考界面中布局单元的初始大小作为布局单元的大小，并生成布局单元的位置。

本发明实施例中，例如，在执行步骤208之前，电子设备根据设置的布局单元的分类规则确定出获取的布局单元的类型包括自适应类型时，获取的布局单元的类型对应的配置信息包括自适应类型对应的配置信息。其中，自适应类型对应的配置信息包括定位点与族关系或链关系。

其中，定位点用于将布局单元快速锁定至所属的父布局的指定位置。本发明实施例中，通过定位点，能够将该布局单元锁定至所属的父布局的指定位置。其中，该指定位置可根据需求进行设定。例如，如图7所示，以布局单元A为例，定位点包括左上角顶点a、顶部中点b、右上角顶点c、左边中点d、中心点e、右边中点f、左下角顶点g、底部中点h或者右下角顶点i。根据点击布局单元A的定位点，能够将该布局单元A快速锁定至所属的父布局的指定位置。例如，如图8所示，该布局单元A所属的父布局包括可显示区域1时，以该布局单元A的定位点为左上角顶点a为例，通过点击该布局单元A的左上角顶点a，能够快速将该布局单元A锁定至可显示区域1的左上角位置，并根据可显示区域1的大小和位置以及设备信息，确定出该布局单位的位置。

需要说明的是，通过获取布局单元的定位点，能够将该布局单元锁定至所属的父布局的指定位置的过程，实际上是该布局单元进行相对定位的过程，则布局单元的位置包括布局单元的相对位置。相对定位用于指示该布局单元相对于“它的起始点”的偏移量。在实际应用中，可通过left、right、top和bottom四个属性来设置布局单元的偏移量，例如，left用于指示该布局单元相对于其定位点的左侧偏移量，right用于指示该布局单元相对于其定位点的右侧偏移量，top用于指示该布局单元相对于其定位的上侧偏移量，bottom用于指示该布局单元相对于其定位的下侧偏移量。通常来说，偏移量只需要2个就能够对布局单元进行定位，一般选择一个水平方向偏移量和一个垂直方向偏移量即能够对布局单元进行定位。

此外，定位点用于指示该布局单元的相对位置，也就是说，布局单元的位置包括布局单元的定位点的相对位置。其中，如图8所示，以布局单元A为例，布局单元A的定位点包括左上角顶点a，在可显示区域1中，当以布局单元A的左上角顶点a为定位点时，将布局单元A的左上角顶点a的坐标确定为布局单元A的位置。例如，该布局单元A的配置信息包括定位点，其中，定位点为左上角顶点a时，根据获取的布局单元A所属的父布局的大小和位置以及设备信息，生成布局单元A的位置。例如，该布局单元A所属的父布局包括可显示区域1时，根据定位点、可显示区域的大小和位置以及设备信息，生成布局单元A的位置。具体地，通过获取设备信息用于确定可显示区域的像素大小以及布局单元的位置的像素坐标，例如，可显示区域1的大小包括宽度为1280P，高度为720P时，通过执行步骤208确定出布局单元A位于可显示区域1的左上角位置，由于布局单元A的左上角顶点a为定位点，因此将布局单元A的左上角顶点a的位置的像素坐标作为布局单元A的位置的像素坐标，例如，左上角顶点a的位置的像素坐标为(20，20)，则布局单元A的位置的像素坐标为(20，20)，并将该布局单元A的位置的像素坐标作为布局单元A的位置。

需要说明的是，当可显示区域包括多级的自适应类型的布局单元时，且每个布局单元的定位点均为左上角顶点时，则在确定出每个布局单元的大小后，按照层级顺序将每个布局单元的定位点以及获取的布局单元所属的父布局的大小和位置以及设备信息，依次排布每个布局单元。例如，如图9所示，可显示区域1中包括布局单元A和布局单元B，其中布局单元A和布局单元B为同一层级的布局单元，且布局单元A和布局单元B均以左上角顶点为定位点，将布局单元A和布局单元B依次锁定至可显示区域1中的指定位置。

介绍上述配置信息的相关概念后，下列对生成布局单元的大小和位置进行具体说明：

本发明实施例中，步骤208可具体包括：根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

例如，在布局配置文件中，自适应类型的布局单元包括在不同的显示区域之间位置的自适应变化，而大小不变的布局单元，因此根据自适应类型对应的配置信息的特点，不调整该布局单元的大小，只调整该布局单元的位置，即将参考界面中布局单元的初始大小确定为布局单元的大小。

本发明实施例中，生成布局单元的位置可具体包括：根据布局单元所属的父布局的大小和位置、设备信息、定位点确定出布局单元的位置。

其中，定位点用于将布局单元吸附至布局单元所属的父布局的指定位置，且布局单元的位置位于布局单元所属的父布局的范围内，设备信息包括显示分辨率和设备类型，其中，显示分辨率用于确定布局单元的像素位置，设备类型用于确定屏幕形态，以用于限定可显示区域的大小。具体地，通过获取布局单元所属的父布局的大小和位置和定位点，能够将布局单元快速锁定至所属的父布局的指定位置，且使该布局单元位于父布局范围内。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型便于后续确定出布局单元的位置的像素坐标。

在实际应用中，可设置布局库，该布局库用于布局规则计算，通过在布局库中输入布局单元所属的父布局的大小和位置、设备信息、定位点，获取布局库输出的布局单元的位置。

通过以下实例对确定出自适应类型的布局单元的大小和位置的具体过程进行说明：

实例一：父布局仅包括一个布局单元

在一种实现方式中，根据自适应类型对应的配置信息，将布局单元的初始大小作为布局单元的大小，使得自适应类型的布局单元的大小不变。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域为例，图10a为参考界面的可显示区域1中的布局单元A的结构示意图，图10b为实际界面的可显示区域2中的布局单元A的结构示意图，如图10a和图10b所示，布局单元A的类型包括自适应类型，因此根据自适应类型对应的配置信息，将参考界面中布局单元的初始大小作为布局单元的大小，即布局单元的大小不变。也就是说，实际界面的可显示区域的大小并不影响自适应类型的布局单元的大小。

需要说明的是，在实际应用中，还可以以电子设备110的可显示区域1作为参考界面的可显示区域，以电子设备110的可显示区域2作为实际界面的可显示区域。也就是说，各附图所表示的可以是同一电子设备的不同可显示区域之间的对比，还可以是不同电子设备的可显示区域之间的对比，本发明实施例对此不做限定，仅为举例说明。

进一步地，根据布局单元所属的父布局的大小和位置、设备信息、定位点确定出布局单元的位置。例如，父布局包括可显示区域和布局单元，且每一个父布局仅包括一个布局单元时，例如，如图11，图11的可显示区域1中包括布局单元11和布局单元111，且两者均为自适应类型的布局单元。其中，布局单元11所属的父布局包括可显示区域1，具体地，通过获取布局单元11的定位点，并根据可显示区域1的大小和位置、设备信息确定出该布局单元11的位置，使得该布局单元11能够根据定位点快速吸附至可显示区域1的指定位置，并且处于可显示区域1的范围内。而布局单元111为布局单元11的子布局单元，即布局单元111所属的父布局大小和位置为布局单元11的大小和位置。具体地，通过获取布局单元111的定位点，并根据布局单元111所属的父布局的大小和位置、设备信息确定出该布局单元111的位置，使得该布局单元111能够根据定位点快速吸附至布局单元11的指定位置，并且处于布局单元11的范围内，且布局单元111处于可显示区域1的范围内。例如，如图11所示，以布局单元111的左上角顶点作为定位点时，能够快速将该布局单元111锁定至布局单元11的左上角位置，并根据布局单元11的大小和位置以及设备信息，确定出该布局单位111的位置的像素坐标。例如，布局单元11的位置的像素坐标为(10，10)时，该布局单元111的位置的像素坐标为(11，11)，并将该布局单元111的位置的像素坐标作为布局单元111的位置。

需要说明的是，本发明实施例中，设备信息包括显示分辨率、设备类型、可显示区域的大小以及可显示区域位于显示屏幕的位置。通过获取设备信息，能够获取到显示区域的大小和可显示区域位于显示屏幕的位置，便于后续确定出布局单元的位置的像素坐标。通过获取布局单元所属的父布局的大小和位置和定位点，能够将布局单元快速锁定至所属的父布局的指定位置，并且使得该布局单元的位置只能处于父布局的范围之内。

实例二：父布局包括多个布局单元

在一种可选方案中，例如，父布局包括可显示区域，且可显示区域中包括多个布局单元时，根据自适应类型对应的配置信息，将参考界面中布局单元的初始大小作为布局单元的大小，使得自适应类型的布局单元的大小不变。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，图12a为参考界面的可显示区域1中的布局单元A和布局单元B的结构示意图，图12b为实际界面的可显示区域2中的布局单元A和布局单元B结构示意图，如图12a和图12b所示，布局单元A的类型和布局单元B的类型均为自适应类型，因此根据布局单元A的配置信息，将参考界面的布局单元A的初始大小作为实际界面的布局单元A的实际大小。根据布局单元B的配置信息，将参考界面的布局单元B的初始大小作为实际界面的布局单元B的实际大小。

进一步地，根据布局单元所属的父布局的大小和位置、设备信息、定位点，调整该布局单元的位置，并确定出布局单元的位置。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备的可显示区域为实际界面的可显示区域2为例，如图12a和图12b所示，图12b的参考界面的可显示区域1中包括布局单元A和布局单元B，且布局单元A和布局单元B呈纵向排列，其中，布局单元A和布局单元B所属的父布局大小和位置为可显示区域的大小和位置。具体地，通过获取布局单元A的定位点和布局单元B的定位点，并根据布局单元A和布局单元B所属的父布局的大小和位置、设备信息确定出该布局单元A和布局单元B的位置，使得布局单元A和布局单元B能够根据定位点快速吸附至所属的父布局的指定位置，并且处于所属的父布局的范围内。例如，如图12a和图12b所示，以布局单元A的左上角顶点作为定位点，布局单元B的左上角顶点作为定位点时，能够快速将该布局单元A和布局单元B锁定至可显示区域的左上角位置，此时，由于实际界面的可显示区域的宽度为参考界面的可显示区域的宽度的2倍，且布局单元A和布局单元B之间具有链关系，因此需要调整布局单元A和布局单元B的排列方式，使得布局单元B调整至布局单元A的后方，即布局单元A和布局单元B呈横向排列，并根据可显示区域2的大小和位置以及设备信息，确定出该布局单位A和布局单元B的位置的像素坐标。例如，布局单元A的位置的像素坐标为(20，20)时，该布局单元B的位置的像素坐标为(20，60)。其中，关于链关系的调整方式，可参见下述实施例步骤608的具体实现过程。

在上述方案的基础上，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备的可显示区域为实际界面的可显示区域2为例，如图13a和图13b所示，图13b的参考界面的可显示区域1中包括布局单元A和布局单元B，且布局单元A和布局单元B呈纵向排列，其中，布局单元A和布局单元B所属的父布局大小和位置为可显示区域的大小和位置。具体地，通过获取布局单元A的定位点和布局单元B的定位点，并根据布局单元A和布局单元B所属的父布局的大小和位置、设备信息确定出该布局单元A和布局单元B的位置。例如，如图13a和图13b所示，以布局单元A的左上角顶点作为定位点，布局单元B的左上角顶点作为定位点时，能够快速将该布局单元A和布局单元B锁定至可显示区域的左上角位置，此时，由于实际界面的可显示区域2的宽度大于参考界面的可显示区域1的2倍宽度，且根据布局单元的配置信息获取布局单元A和布局单元B之间具有族关系和链关系，因此需要调整不同的布局单元之间的排列形式和间距，具体地，调整实际界面的可显示区域2中的布局单元A与布局单元B之间的排列形式和间距，以使得布局单元A与布局单元B能够位于同一列，且布局单元A与布局单元B之间的间距达到合适的距离，以使得能够布局单元实际位置，从而提高了界面布局的自适应能力。例如，布局单元A的位置为(20，20)时，该布局单元B的位置为(20，80)。需要说明的是，相对于图12b的调整方式，图13b中布局单元A和布局单元B之间由于具有族关系，能够自适应调整图13b中的布局单元A和布局单元B之间的间距。其中，关于链关系的调整方式，可参见下述实施例步骤608的具体实现过程。其中，关于族关系的调整方式，可参见下述实施例步骤708的具体实现过程。

步骤210、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1的最下方包括8个按钮(按钮A、按钮B、按钮C、按钮D、按钮E、按钮F、按钮G、按钮H)，其中，8个按钮的类型均为自适应类型，且8个按钮之间具有族关系和链关系，如图14b所示，电子设备110根据所述自适应类型对应的配置信息、将参考界面中所述布局单元的初始大小作为所述布局单元的大小之后，通过根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，确定出8个按钮的位置后，根据8个按钮生成显示界面，其中，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。具体地，如图14a和图14b所示，8个按钮的大小不变，而由于可显示区域的变大，导致8个按钮的位置发生改变，具体包括按钮A、按钮B、按钮C、按钮D、按钮E、按钮F、按钮G、按钮H之间由两行排列的方式变为一行排列的方式。

本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。此外，如图14a所示，在参考界面的可显示区域1中还包括2个卡片(卡片N和卡片O)，其中2个卡片的类型均为自适应类型，且2个卡片之间具有族关系和链关系，如图14b所示，电子设备110通过步骤208根据自适应类型、布局单元的配置信息、获取的布局单元所属的父布局的大小和位置以及电子设备110的设备信息，确定出2个卡片的大小和位置后，根据2个卡片以及上述的8个按钮生成显示界面。如图14a和图14b所示，2个卡片的大小不变，而2个卡片的位置发生改变，具体包括卡片N和卡片0之间由两行排列的方式变为一行排列的方式。需要说明的是，在生成显示界面的过程中，是根据获取的多个布局单元的大小和位置，一次生成显示界面。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图15为本发明一实施例提供的一种界面布局方法的流程图，如图15所示，该方法包括：

步骤302、获取设备信息。

本发明实施例中，步骤302的执行过程可参见上述步骤102。

步骤304、获取参考界面的布局单元。

本发明实施例中，步骤304的执行过程可参见上述步骤104。

步骤306、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤306的执行过程可参见上述步骤106。

步骤308、根据静态类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，将参考界面中布局单元的初始大小作为布局单元的大小，并生成布局单元的位置。

本发明实施例中，例如，在执行步骤308之前，电子设备根据设置的布局单元的分类规则确定出获取的布局单元的类型包括静态类型，获取的配置信息包括静态类型对应的配置信息。其中，静态类型对应的配置信息包括定位点和父级间距。关于定位点的定义可参见上述实施例步骤208。

本发明实施例中，父级间距包括布局单元的至少一个指定边和父布局的与指定边对应的边之间的间距。如图7所示，以布局单元A为例，布局单元A的指定边包括布局单元A的上边ae、下边gi、左边ag、右边ei、水平居中边df或垂直居中边bh。例如，如图5a所示，父级间距可包括布局单元I的右边和可显示区域1的与右边对应的界面边之间的间距L1，父级间距可包括布局单元I的下边和可显示区域1的与下边对应的界面边之间的间距L2。

介绍上述配置信息的相关概念后，下列对生成布局单元的大小和位置进行具体说明：

本发明实施例中，步骤308可具体包括：根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

本发明实施例中，布局配置文件中的静态类型的布局单元包括在不同的显示区域之间大小和相对位置均不改变的布局单元。因此根据静态类型对应的配置信息，不调整该布局单元的大小，调整该布局单元的位置使得该布局单元的相对位置不变。也就是说，根据参考界面中的布局单元的初始大小确定出布局单元的大小。

本发明实施例中，生成布局单元的位置可具体包括：将布局单元的至少一个指定边和父布局的与指定边对应的边之间的间距设置为父级间距；根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置。

其中，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。具体地，通过布局单元所属的父布局的大小和位置、定位点以及父级间距，能够将布局单元快速锁定至所属的父布局的指定位置，并且使得该布局单元与父布局之间的间距包括父级间距。设备信息包括显示分辨率和设备类型。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型便于后续确定出布局单元的位置的像素坐标。

需要说明的是，父级间距的大小可根据需求进行设定，本发明对此不做限定。

通过以下实例对确定出静态类型的布局单元的大小和位置的具体过程进行说明：

本发明实施例中，根据静态类型对应的配置信息，将参考界面的布局单元的初始大小作为布局单元的大小，使得静态类型的布局单元的大小不变。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备的可显示区域为实际界面的可显示区域2为例，图5a为参考界面的可显示区域中的布局单元I的结构示意图，图5b为实际界面的可显示区域中的布局单元I的结构示意图，如图5a和图5b所示，布局单元I的类型均包括静态类型，因此根据布局单元的配置信息，将参考界面的布局单元的初始大小作为布局单元的大小，即布局单元的大小不变。也就是说，实际界面的可显示区域的大小并不影响静态类型的布局单元的大小。

进一步地，将布局单元的至少一个指定边和父布局的与指定边对应的边之间的间距设置为父级间距；根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，如图5a和图5b所示，将布局单元I的右边和实际的显示区域2的与右边对应的界面边之间的间距设置为父级间距L1，并根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置，使得该布局单元I能够根据定位点快速吸附至可显示区域2的指定位置，并且布局单元I的右边和实际的显示区域2的与右边对应的界面边之间的间距设置为父级间距L1，且布局单元I处于可显示区域2的范围内。由于实际界面的可显示区域2的长度大于参考界面的可显示区域1的长度，因此布局单元I的实际位置与布局单元I的初始位置不同，而相对位置不变。例如，布局单元I的初始位置为(90，90)，而生成布局单元I的初始位置为(190，190)。

需要说明的是，虽然布局单元I实际位置与布局单元I的初始位置不同，但布局单元I的相对位置不变。例如，如图5a和图5b所示，布局单元I在可显示区域1时，布局单元I的右边与可显示区域1的一边界间距为L1，布局单元的下边与可显示区域1的另一边界间距为L2，而当布局单元I在可显示区域2时，即使可显示区域2的大小大于可显示区域1的大小，但布局单元I的右边与可显示区域2的一边界间距为L1，布局单元的下边与可显示区域2的另一边界间距为L2，即说明该布局单元I的相对位置不变，即相对值不变。

除此之外，例如，如图16所示，还可以将布局单元的其他指定边和父布局的与指定边对应的边之间的间距设置为父级间距，具体地，包括：将布局单元上边和显示区域的与上边对应的界面边之间的间距设置为父级间距；将布局单元上边和显示区域的与下边对应的界面边之间的间距设置为父级间距；将布局单元左边和显示区域的与左边对应的界面边之间的间距设置为父级间距；将布局单元右边和显示区域的与右边对应的界面边之间的间距设置为父级间距；将布局单元左边以及上边和显示区域的与左边以及上边对应的界面边之间的间距设置为父级间距；将布局单元右边以及上边和显示区域的与右边以及上边对应的界面边之间的间距设置为父级间距；将布局单元左边以及下边和显示区域的与左边以及下边对应的界面边之间的间距设置为父级间距；将布局单元右边以及下边和显示区域的与右边以及下边对应的界面边之间的间距设置为父级间距，本发明对此不做限定，可根据需求进行设定。

在另一种可选方案中，生成布局单元的位置的具体过程还可以包括：将布局单元的四边锁定且指定方向居中显示；根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置。

具体地，例如，如图17所示，将布局单元的四边锁定，左右居中显示，以生成布局单元的实际位置；或者，将布局单元的四边锁定，上下居中显示，以生成布局单元的实际位置；或者，将布局单元的四边锁定，上下左右居中显示，以生成布局单元的实际位置，除此之外还可以包括其他方式，本发明对此不做限定，可根据需求进行设定。

步骤310、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1中的搜索框I的类型为静态类型，如图14b所示，电子设备110通过步骤308根据静态类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及电子设备110的设备信息，确定出搜索框I的大小和位置后，根据搜索框I生成显示界面。如图14a和图14b所示，搜索框I的大小不变，而搜索框I的位置发生改变，具体包括搜索框I的至少一个指定边和父布局的与指定边对应的边之间的间距设置为父级间距，即搜索框I的相对位置不变。也就是说，相对于图14a而言，图14b中的搜索框I的位置仍位于可显示区域的右上角。本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图18为本发明一实施例提供的一种界面布局方法的流程图，如图18所示，该方法包括：

步骤402、获取设备信息。

本发明实施例中，步骤402的执行过程可参见上述步骤102。

步骤404、获取参考界面的布局单元。

本发明实施例中，步骤404的执行过程可参见上述步骤304。

步骤406、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤406的执行过程可参见上述步骤106。

步骤408、根据变形类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，改变布局单元的样式，将参考界面的布局单元的初始大小作为布局单元的大小，并生成布局单元的位置。

本发明实施例中，例如，在执行步骤408之前，电子设备根据设置的布局单元的分类规则确定出获取的布局单元的类型包括变形类型，获取对应的配置信息包括变形类型对应的配置信息。其中，静态类型对应的配置信息包括定位点和父级间距，关于定位点的定义可参见上述实施例步骤208，关于父级间距的定义可参见上述实施例步骤308。

介绍上述配置信息的相关概念后，下列对生成布局单元的大小和位置进行具体说明：

本发明实施例中，步骤408可具体包括：根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

本发明实施例中，变形类型的布局单元相对于静态类型的布局单元而言，区别在于，变形类型的布局单元能够根据同一设备的不同显示区域，或者不同设备的显示区域改变自身的样式。其中，样式可包括颜色、形状、设计风格等。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，图19a为参考界面的可显示区域中的布局单元J的结构示意图，图19b为实际界面的可显示区域中的布局单元J的结构示意图，如图19a和图19b所示，将布局单元J的形状从初始形状变更至实际形状，具体地，包括将布局单元J的初始形状J1变更至实际形状J2。除此之外，还可以将布局单元J的形状从初始形状变更至其他的实际形状，具体可包括圆形、三角形、多边形等，本发明对此不做限定。

需要说明的是，变形类型的布局单元在改成样式时，只包括改变颜色、形状、设计风格等，因此变形类型的布局单元的样式不影响该布局单元的大小。此外，变形类型的布局单元在改变样式时，也不影响布局单元的位置，当布局单元的配置信息还包括其他的影响位置的信息时，则会有位置变化。例如，影响位置的信息可包括族关系和/或链关系。

本发明实施例中，布局配置文件的变形类型的布局单元包括在不同的显示区域之间样式改变，而大小和相对位置不变的布局单元。因此根据变形类型对应的配置信息，调整该布局单元的样式，不调整该布局单元的大小，调整该布局单元的位置使得该布局单元的相对位置不变。也就是说，根据变形类型对应的配置信息，将参考界面的布局单元的初始大小为布局单元的大小。

本发明实施例中，生成布局单元的位置可具体包括：将布局单元的至少一个指定边和父布局的与指定边对应的边之间的间距设置为父级间距；根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置。

其中，其中，定位点用于将布局单元吸附至布局单元所属的父布局的指定位置，且布局单元与布局单元所属的父布局之间的间距包括父级间距，布局单元的位置位于布局单元所属的父布局的范围内，设备信息用于确定布局单元的位置的像素坐标。具体地，通过布局单元所属的父布局的大小和位置、定位点以及父级间距，能够将布局单元快速锁定至所属的父布局的指定位置，并且使得该布局单元与父布局之间的间距包括父级间距。设备信息包括显示分辨率和设备类型。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型便于后续确定出布局单元的位置的像素坐标。

需要说明的是，父级间距的大小可根据需求进行设定，本发明对此不做限定。

通过以下实例对确定出静态类型的布局单元的大小和位置的具体过程进行说明：

在改变布局单元的样式之后，将参考界面的布局单元的初始大小作为布局单元的大小，并生成布局单元的位置。具体地，根据变形类型对应的配置信息，将参考界面的布局单元的初始大小作为布局单元的大小，使得变形类型的布局单元的大小不变。也就是说，变形类型的布局单元的样式不影响该布局单元的大小，实际界面的可显示区域的大小并不影响变形类型的布局单元的大小。

进一步地，将布局单元的至少一个指定边和父布局的与指定边对应的边之间的间距设置为父级间距；根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置。例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，如图19a和图19b所示，将布局单元J的右边和实际的显示区域2的与右边对应的界面边之间的间距设置为父级间距为L，并根据布局单元所属的父布局的大小和位置以及设备信息、定位点和父级间距确定出布局单元的位置，使得该布局单元J能够根据定位点快速吸附至可显示区域2的指定位置，并且布局单元J的右边和实际的显示区域2的与右边对应的界面边之间的间距设置为父级间距L，且布局单元J处于可显示区域2的范围内。由于实际界面的可显示区域2的长度大于参考界面的可显示区域1的长度，因此布局单元J的实际位置与布局单元J的初始位置不同，而相对位置不变。例如，布局单元J的初始位置为(90，90)，而生成布局单元J的初始位置为(190，190)。

需要说明的是，虽然布局单元J的实际位置与布局单元J的初始位置不同，但布局单元J的相对位置不变。例如，如图19a和图19b所示，布局单元J在可显示区域1时，布局单元J的右边与可显示区域1的一边界间距为L，而当布局单元J在可显示区域2时，即使可显示区域2的大小大于可显示区域1的大小，但布局单元J的右边与可显示区域2的一边界间距为L，即说明该布局单元J的相对位置不变，即相对值不变。

除此之外，还可以将布局单元的其他指定边和父布局的与指定边对应的边之间的间距设置为父级间距，具体方式可参见上述实施例步骤306的调整过程。

步骤410、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1中的标题栏J的类型为变形类型，如图14b所示，电子设备110通过步骤406根据变形类型、布局单元的配置信息、获取的布局单元所属的父布局的大小和位置以及电子设备110的设备信息，确定出标题栏J的大小和位置后，根据标题栏J生成显示界面。如图14a和图14b所示，标题栏J的大小不变，而标题栏J的相对位置不变。也就是说，相对于图14a而言，图14b中的标题栏J的位置仍位于可显示区域的左上角。本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图20为本发明一实施例提供的一种界面布局方法的流程图，如图20所示，该方法包括：

步骤502、获取设备信息。

本发明实施例中，步骤502的执行过程可参见上述步骤102。

步骤504、获取参考界面的布局单元。

本发明实施例中，步骤504的执行过程可参见上述步骤104。

步骤506、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤506的执行过程可参见上述步骤106。

步骤508、根据动态类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中布局单元的初始大小生成布局单元的大小，并生成布局单元的位置。

本发明实施例中，例如，在执行步骤508之前，电子设备根据设置的布局单元的分类规则确定出获取的布局单元的类型包括动态类型，获取配置信息包括动态类型对应的配置信息。其中，动态类型对应的配置信息包括定位点、参考点、参考边与族关系或者链关系。关于定位点的定义可参见上述实施例208，关于父级间距的定义可参见上述实施例308。参考点包括布局单元在调整大小时所参考的点，即以该点为依据进行调整布局单元的大小。例如，如图21所示，以布局单元K为例，参考点包括左上角顶点a、顶部中点b、右上角顶点c、左边中点d、中心点e、右边中点f、左下角顶点g、底部中点h或者右下角顶点i。参考边包括布局单元在调整大小时所参考的边，即以该边为依据进行调整布局单元的大小。如图21所示，以布局单元K为例，布局单元K的参考边包括布局单元A的上边ae、下边gi、左边ag、右边ei、水平居中边df或垂直居中边bh。

介绍上述配置信息的相关概念后，下列对生成布局单元的大小和位置进行具体说明：

本发明实施例中，步骤508可具体包括：根据所述动态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，并生成所述布局单元的位置。

本发明实施例中，布局配置文件的动态类型的布局单元包括在不同的显示区域之间大小和位置的自适应变化的布局单元，因此根据动态类型对应的配置信息，调整该布局单元的大小和位置。具体地，调整参考界面中布局单元的初始大小生成布局单元的大小可具体包括：以布局单元的指定的参考点为锁定点并以指定的参考边作为基准边，根据布局单元所属的父布局的大小，将参考界面中布局单元的初始大小等比例放大或者缩小，生成布局单元的大小；或者，以布局单元的指定的参考边作为锁定边，根据布局单元所属的父布局的大小，将参考界面中布局单元的初始大小非等比例放大或者缩小，生成布局单元的大小。

在一种可选方案中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，如图22a和图22b所示，可显示区域包括布局单元K，布局单元K所属的父布局大小为可显示区域的大小，由于实际界面的可显示区域2的宽度为参考界面的可显示区域1宽度的2倍，因此以布局单元的指定参考点为锁定点并以指定参考边作为基准边，将参考界面中布局单元的初始大小等比例放大，具体地，将布局单元K的左上角顶点作为指定参考点锁定，并将左边线作为基准边，将参考界面中布局单元K的初始大小等比例放大2倍，得到布局单元K的实际大小。也就是说，当布局单元所属的父布局的大小为布局单元的N倍时，将参考界面中布局单元的初始大小等比例放大或者缩小N倍，从而确定出布局单元的大小。

除此之外，例如图23所示，还可以包括以布局单元的其他指定参考点为锁定点并以其他指定参考边作为基准边，将参考界面中布局单元的初始大小等比例放大，具体地，包括：以左上角顶点为锁定点并以左边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以左上角顶点为锁定点并以上边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以右上角顶点为锁定点并以右边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以右上角顶点为锁定点并以上边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以右下角顶点为锁定点并以右边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以右下角顶点为锁定点并以下边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以左下角顶点为锁定点并以左边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以左下角顶点为锁定点并以下边线为基准边，将参考界面中布局单元的初始大小等比例放大；或者，以中心点为锁定点并以四边线为基准边，将参考界面中布局单元的初始大小等比例放大，本发明对此不做限定，可根据需求进行设定。

在另一种可选方案中，如图24a和图24b所示，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，例如，可显示区域1包括布局单元K，布局单元K所属的父布局大小为可显示区域的大小，由于实际界面的可显示区域的宽度为参考界面的可显示区域宽度的2倍，因此以布局单元K的指定参考边作为锁定边，将参考界面中布局单元K的初始大小非等比例放大或者缩小，具体地，如图25的操作示意图所示，将动态类型的布局单元K的左边锁定，将布局单元K的右边拉伸，使得布局单元K的长度拉伸2倍，从而得到布局单元A的实际大小。

除此之外，例如图26所示，还可以包括以布局单元的指定参考边作为锁定边，将参考界面中布局单元的初始大小非等比例放大或者缩小，具体地，包括：以布局单元的左边作为锁定边，将布局单元的右边放大/缩小；或者，以布局单元的右边作为锁定边，将布局单元的左边放大或缩小；或者，以布局单元的上边作为锁定边，将布局单元的下边放大或缩小；或者，以布局单元的下边作为锁定边，将布局单元的上边放大或缩小；或者，以布局单元的对角边作为锁定边，将布局单元的左边和右边同时放大或缩小；或者，以布局单元的对角边作为锁定边，将布局单元的上边和下边同时放大或缩小；或者，以布局单元的对角边作为锁定边，将布局单元的四边同时放大或缩小，通过上述方式，以使参考界面中布局单元的初始大小非等比例放大或者缩小，从而生成布局单元的实际大小，本发明对此不做限定，可根据需求进行设定。

本发明实施例中，进一步地，根据布局单元所属的父布局的大小和位置、设备信息、定位点确定出布局单元的位置。

其中，定位点用于将布局单元吸附至布局单元所属的父布局的指定位置，且布局单元的位置位于布局单元所属的父布局的范围内，设备信息包括显示分辨率和设备类型，其中，显示分辨率用于确定布局单元的像素位置，设备类型用于确定屏幕形态，以用于限定可显示区域的大小。具体地，通过获取布局单元所属的父布局的大小和位置和定位点，能够将布局单元快速锁定至所属的父布局的指定位置，且使该布局单元位于父布局范围内。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型便于后续确定出布局单元的位置的像素坐标。在一种可选的实施例中，例如，父布局包括可显示区域和布局单元，且每一个父布局仅包括一个布局单元时，例如，如图27的可显示区域1中包括布局单元11和布局单元111，且两者均为动态类型的布局单元。其中，布局单元11所属的父布局包括可显示区域，具体地，通过获取布局单元11的定位点，并根据可显示区域1的大小和位置、设备信息确定出该布局单元11的位置，使得该布局单元11能够根据定位点快速吸附至可显示区域1的指定位置，并且处于可显示区域1的范围内。而布局单元111为布局单元11的子布局单元，即布局单元111所属的父布局大小和位置为布局单元11的大小和位置。具体地，通过获取布局单元111的定位点，并根据布局单元111所属的父布局的大小和位置、设备信息确定出该布局单元111的位置，使得该布局单元111能够根据定位点快速吸附至布局单元11的指定位置，并且处于布局单元11的范围内，且布局单元111处于可显示区域1的范围内。如图11所示，以布局单元111的左上角顶点作为定位点时，能够快速将该布局单元111锁定至布局单元11的左上角位置，并根据布局单元11的大小和位置以及设备信息，确定出该布局单位111的位置的像素坐标。例如，布局单元11的位置的像素坐标为(10，10)时，该布局单元111的位置的像素坐标为(11，11)。

在另一种可选的实施例中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备的可显示区域为实际界面的可显示区域2为例，如图28a和图28b所示，图28b的参考界面的可显示区域1中包括布局单元K和布局单元L，且布局单元K和布局单元L呈纵向排列，其中，布局单元K和布局单元L所属的父布局大小和位置为可显示区域2的大小和位置。具体地，通过获取布局单元K的定位点和布局单元L的定位点，并根据布局单元K和布局单元L所属的父布局的大小和位置、设备信息确定出该布局单元K和布局单元L的位置，使得布局单元K和布局单元L能够根据定位点快速吸附至可显示区域2的指定位置，并且处于可显示区域2的范围内。例如，如图28a和图28b所示，以布局单元K的左上角顶点作为定位点，布局单元L的左上角顶点作为定位点时，能够快速将该布局单元K和布局单元L锁定至可显示区域的左上角位置，此时，由于实际界面的可显示区域的宽度为参考界面的可显示区域的宽度的2倍，且布局单元K和布局单元L之间具有链关系，因此需要根据布局单元K和布局单元L的定位点调整布局单元K和布局单元L的排列方式，并且根据动态类型对应的配置信息调整布局单元K和布局单元L的大小，使得布局单元L调整至布局单元K的后方的同时，将布局单元K和布局单元L进行拉伸，即，使得布局单元K和布局单元L呈横向排列，且布局单元K和布局单元L以下边为指定边等比例拉伸，从而确定出布局单元K和布局单元L的大小，进一步地，在上述调整的基础上，根据可显示区域2的大小和位置以及设备信息和布局单元K和布局单元L的排列方式，确定出该布局单位K和布局单元L的位置的像素坐标。例如，布局单元K的位置的像素坐标为(20，20)时，该布局单元L的位置的像素坐标为(20，60)。其中，关于链关系的调整方式，可参见下述实施例步骤606的具体实现过程。

在上述方案的基础上，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备的可显示区域为实际界面的可显示区域2为例，如图29a和图29b所示，图29b的参考界面的可显示区域1中包括布局单元K和布局单元L，且布局单元K和布局单元L呈纵向排列，其中，布局单元K和布局单元L所属的父布局大小和位置为可显示区域的大小和位置。具体地，通过获取布局单元K的定位点和布局单元L的定位点，并根据布局单元K和布局单元L所属的父布局的大小和位置、设备信息确定出该布局单元K和布局单元L的位置。例如，如图29a和图29b所示，以布局单元K的左上角顶点作为定位点，布局单元L的左上角顶点作为定位点时，能够快速将该布局单元K和布局单元L锁定至可显示区域的左上角位置，此时，由于实际界面的可显示区域2的宽度大于参考界面的可显示区域1的2倍宽度，且根据布局单元的配置信息获取布局单元K和布局单元L之间具有族关系和链关系，因此需要根据布局单元K和布局单元L的定位点调整布局单元K和布局单元L的排列方式，根据布局单元K和布局单元L之间的族关系调整布局单元之间的间距，并根据动态类型对应的配置信息调整布局单元K和布局单元L的大小，具体地，调整实际界面的可显示区域2中的布局单元K与布局单元L之间的排列形式和间距的同时，将布局单元K和布局单元L进行拉伸，以使得布局单元K与布局单元L拉伸的同时能够位于同一列，且布局单元K与布局单元L之间的间距达到合适的距离，从而根据可显示区域2的大小和位置以及设备信息，确定出该布局单位K和布局单元L的位置的像素坐标，提高了界面布局的自适应能力。例如，布局单元K的位置为(20，20)时，该布局单元L的位置为(20，80)。需要说明的是，相对于图28b的调整方式，图29b中布局单元K和布局单元L之间由于具有族关系，能够自适应调整图29b中的布局单元K和布局单元L之间的间距。其中，关于链关系的调整方式，可参见下述实施例步骤608的具体实现过程。其中，关于族关系的调整方式，可参见下述实施例步骤708的具体实现过程。

步骤510、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1中的1个卡片(卡片K)的类型为动态类型，如图14b所示，电子设备110通过步骤206根据动态类型、布局单元的配置信息、获取的布局单元所属的父布局的大小和位置以及电子设备110的设备信息，确定出卡片K的大小和位置后，根据卡片K生成显示界面。如图14a和图14b所示，卡片K的大小随着可显示区域2的变大而变大，而卡片K的位置发生改变。本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。

此外，如图14a所示，在参考界面的可显示区域1中还包括2个卡片(卡片L和卡片M)的类型为自适应类型，且2个卡片之间具有族关系和链关系，如图14b所示，电子设备110通过步骤506根据董磊类型、布局单元的配置信息、获取的布局单元所属的父布局的大小和位置以及电子设备110的设备信息，等比例放大2个卡片的大小，并确定出2个卡片的位置后，根据2个卡片以及上述的卡片生成显示界面。如图14a和图14b所示，2个卡片等比例放大，且2个卡片的位置发生改变。需要说明的是，在生成显示界面的过程中，是根据获取的多个布局单元的大小和位置，一次生成显示界面。

本发明实施例提供的技术方案中获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图30为本发明一实施例提供的一种界面布局方法的流程图，如图30所示，该方法包括：

步骤602、获取设备信息。

本发明实施例中，步骤602的执行过程可参见上述步骤102。

步骤604、获取参考界面的布局单元。

本发明实施例中，步骤604的执行过程可参见上述步骤104。

步骤606、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤606的执行过程可参见上述步骤106。

步骤608、根据布局单元的类型对应的配置信息，确定出布局单元的大小。本发明实施例，确定出布局单元的大小的过程可参见上述四种类型的布局单元确定出布局单元大小的实施例。

步骤610、根据布局单元的大小、定位点、链关系和布局单元所属的父布局的大小，调整布局单元与其它的布局单元之间的排列位置。

本发明实施例中，配置信息包括定位点和链关系，链关系包括布局单元与其它的布局单元之间的跟随关系。

具体地，布局单元的大小、定位点、链关系和布局单元所属的父布局的大小，能够影响布局单元与其它的布局单元之间的排列位置。在一种可选方案中，如图31a所示，布局单元A、布局单元B、布局单元C以及布局单元D的定位点为左上角，且布局单元A、布局单元B、布局单元C以及布局单元D之间具有链关系，因此当父布局足够宽时，使得布局单元A、布局单元B、布局单元C以及布局单元D能够根据定位点和链关系呈横向排列，且这4个布局单元均处于所属的父布局的范围内。在另一种可选方案中，如图31b所示，布局单元A、布局单元B、布局单元C以及布局单元D的定位点为左上角，且布局单元A、布局单元B、布局单元C以及布局单元D之间具有链关系，因此当父布局足够高时，使得布局单元A、布局单元B、布局单元C以及布局单元D能够根据定位点和链关系呈纵向排列，且这4个布局单元均处于所属的父布局的范围内。在另一种可选方案中，如图32所示，布局单元A、布局单元B、布局单元C以及布局单元D的定位点为左上角，且布局单元A、布局单元B、布局单元C以及布局单元D之间具有链关系，当父布局的宽度不足以容纳这4个布局单元呈横向排列时，根据布局单元的定位点，实现折行，即，将布局单元A和布局单元B为同一列，而布局单元C和布局单元D为同一列。需要说明的是，当满足父布局足够宽的条件时，由于布局单元A、布局单元B、布局单元C以及布局单元D之间具有链关系，因此这4个布局单元会由折行的排列方式转变为4个布局单元呈横向排列的排列方式。

步骤612、根据排列位置、布局单元所属的父布局的大小和位置以及设备信息、定位点确定出布局单元的位置。

具体地，通过获取布局单元所属的父布局的大小和位置、定位点以及排列方式，能够使得多个将布局单元快速锁定至所属的父布局的指定位置，并且按照排列方式进行排列。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型，以便后续确定出布局单元的位置的像素坐标。

下面通过以下几个实例对配置信息包括链关系时，生成布局单元的位置的具体过程进行说明：

当可显示区域包括多个同级的布局单元时，多个同级的布局单元之间可能具备链关系，例如，如图31a所示，可显示区域1中包括布局单元A、布局单元B、布局单元C、布局单元D以及布局单元E，由布局配置文件获取到布局单元A和布局单元B为自适应类型的布局单元，布局单元C和布局单元D为动态类型的布局单元，布局单元E为静态类型的布局单元。根据各个类型对应的配置信息能够获取到布局单元E是锁定于可显示区域的固定位置。而布局单元A、布局单元B、布局单元C和布局单元D之间存在链关系。其中，当布局单元之间具有链关系时，能够在的父布局的大小不足时，能够根据布局单元的定位点，实现折行。例如，如图31a和图31b所示，以标准设备的可显示区域为参考界面的可显示区域1，以电子设备110的可显示区域为实际界面的可显示区域2为例，在参考界面的可显示区域1中，布局单元A、布局单元B、布局单元C和布局单元D呈横向排布，而由于实际界面的可显示区域2的宽度小于参考界面的可显示区域1，因此需要根据布局单元A、布局单元B、布局单元C和布局单元D的定位点，将这3个布局单元折行排布，例如，布局单元A、布局单元B、布局单元C和布局单元D的定位点为左上角顶点时，如图31b所示，将布局单元A、布局单元B、布局单元C和布局单元D折行排布。例如，布局单元A、布局单元B、布局单元C和布局单元D的定位点为右下角顶点时，如图31c所示，将布局单元A、布局单元B、布局单元C和布局单元D折行排布。此外，如图32所示，折行排布的方式还可以包括将布局单元A和布局单元B排列成一行，将布局单元C和布局单元D排列成一行的方式。需要说明的是，具体的排列结果需要根据布局单元的大小、定位点、链关系和布局单元所属的父布局的大小综合决定。

需要说明的是，具有链关系的多个布局单元，可包括同一类型的多个布局单元，也可以包括不同类型的多个布局单元。本发明对此不做限定。

步骤614、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域1为参考界面的可显示区域1，以电子设备110电子设备的可显示区域为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1中8个按钮(按钮A、按钮B、按钮C、按钮D、按钮E、按钮F、按钮G、按钮H)为一个链，通过执行上述步骤，计算出各个布局单元的实际大小和实际位置，在实际界面的可显示区域2显示这4个布局单元。如图14a和图14b所示，由于实际界面的可显示区域的宽度为参考界面的可显示区域的宽度的2倍，即实际界面的可显示区域的宽度能够满足8个按钮由折行排列调整为同一行排列的条件，因此8个按钮的大小不变，而8个按钮的位置发生改变，具体包括按钮A、按钮B、按钮C和按钮D与按钮E、按钮F、按钮G和按钮H之间由两行排列的方式变为一行排列的方式。本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图33为本发明一实施例提供的一种界面布局方法的流程图，如图33所示，该方法包括：

步骤702、获取设备信息。

本发明实施例中，步骤702的执行过程可参见上述步骤102。

步骤704、获取参考界面的布局单元。

本发明实施例中，步骤704的执行过程可参见上述步骤104。

步骤706、获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息。

本发明实施例中，步骤706的执行过程可参见上述步骤106。

步骤708、根据布局单元的类型对应的配置信息，确定出布局单元的大小。

本发明实施例，确定出布局单元的大小的过程可参见上述四种类型的布局单元确定出布局单元大小的实施例。

步骤710、根据族关系和布局单元所属的父布局的大小，调整布局单元与其它的布局单元之间的排列位置。

本发明实施例中，配置信息包括定位点和族关系，族关系包括布局单元与其它的布局单元之间的排列方式，也就是说，当多个布局单元之间具有族关系时，能够调整多个布局单元之间的排列方式。其中，调整排列方式可包括调整对齐方式以及调整布局单元之间的间距。

具体地，布局单元的大小、定位点、族关系和布局单元所属的父布局的大小，能够影响布局单元与其它的布局单元之间的排列位置，例如，当父布局足够宽时，使得多个布局单元之间能够根据定位点和族关系，增大布局单元之间的水平均分距离。

步骤712、根据排列位置、布局单元所属的父布局的大小和位置以及设备信息、定位点确定出布局单元的位置。

具体地，通过获取布局单元所属的父布局的大小和位置、定位点以及排列方式，能够多个将布局单元快速锁定至所属的父布局的指定位置，并且按照排列方式进行排列。设备信息包括显示分辨率和设备类型。通过获取显示分辨率和设备类型，能够确定出显示区域的大小和所处的显示屏的位置，以便后续确定出布局单元的位置。

下面通过以下几个实例对配置信息包括链关系时，生成布局单元的位置的具体过程进行说明：

当可显示区域包括多个同级的布局单元时，多个同级的布局单元之间可能具备族关系，例如，如图34所示，可显示区域1中包括布局单元A、布局单元B、布局单元C、布局单元D以及布局单元E，由布局配置文件获取到布局单元A和布局单元B为自适应类型的布局单元，布局单元C和布局单元D为动态类型的布局单元，布局单元E为静态类型的布局单元。根据各个类型对应的配置信息能够获取到布局单元E是锁定于可显示区域的固定位置，布局单元A、布局单元B、布局单元C和布局单元D之间存在族关系。其中，当多个布局单元之间具有族关系时，能够调整多个布局单元之间的排列方式。其中，调整排列方式可包括调整对齐方式以及调整布局单元之间的间距。

例如，如图34所示，以标准设备的可显示区域为参考界面的可显示区域，以电子设备110的可显示区域为实际界面的可显示区域为例，在参考界面的可显示区域中，布局单元A、布局单元B、布局单元C呈横向排布，根据布局配置文件获取到布局单元A、布局单元B、布局单元C和布局单元D具有按照上对齐的排列方式的族关系，因此如图34所示，将布局单元A、布局单元B、布局单元C和布局单元D调整为上对齐，并根据排列位置、布局单元所属的父布局的大小和位置以及设备信息、定位点确定出布局单元的位置。或者根据布局配置文件获取到布局单元A、布局单元B、布局单元C和布局单元D之间具有按照均分垂直间距的排列方式的族关系，因此如图35所示，将布局单元A、布局单元B、布局单元C和布局单元D之间的间距调整为均分垂直间距S，并根据排列位置、布局单元所属的父布局的大小和位置以及设备信息、定位点确定出布局单元的位置。

除此之外，例如图36所示，调整对齐方式还可以包括：将族内的布局单元调整为左对齐(图36中图S1)；将族内的布局单元调整为右对齐(图36中的图S2)；将族内的布局单元调整为水平居中对齐(图36中的图S4)；将族内的布局单元调整为垂直居中对齐(图36中的图S3)；将族内的布局单元调整为上对齐(图中未示出)；将族内的布局单元调整为下对齐(图中未示出)。

除此之外，例如，如图37所示，调整布局单元之间的间距还可以包括均分水平间距。

需要说明的是，具有链关系的多个布局单元，可包括同一类型的多个布局单元，也可以包括不同类型的多个布局单元。本发明对此不做限定。

步骤714、根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元。

本发明实施例中，例如，以标准设备的可显示区域1为参考界面的可显示区域1，以电子设备110电子设备的可显示区域为实际界面的可显示区域2为例，如图14a所示，在参考界面的可显示区域1中8个按钮(按钮A、按钮B、按钮C、按钮D、按钮E、按钮F、按钮G、按钮H)为一个族，通过执行上述步骤，计算出各个布局单元的实际大小和实际位置，在实际界面的可显示区域2显示这4个布局单元。如图14a和图14b所示，由于8个按钮之间存在族关系，因此需要根据族关系和布局单元所属的父布局的大小，调整布局单元与其它的布局单元之间的排列位置，例如，调整8个按钮之间的对齐方式，将8个按钮调整为水平居中对齐，另外，还可以调整8个按钮之间的间距，使得8个按钮之间为均分水平间距，即按钮与按钮之间的间距是相同。此外，由于卡片L和卡片M之间也具有族关系，因此能够调整两个卡片之间的排列位置，具体包括调整对齐方式和间距。由于卡片N和卡片O之间也具有族关系，因此能够调整两个卡片之间的排列位置，具体包括调整对齐方式和间距本发明实施例中，通过执行上述的界面自适应布局，能够实现在不同的可显示区域下，自适应显示布局单元的大小和位置，从而提高了界面布局的自适应能力。

需要说明的是，图14b中的8个按钮的排列位置是根据按钮所属的类型、按钮之间的族关系、链关系等配置信息综合确定的。

本发明实施例提供的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据一布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

图38是本发明一实施例所提供的一种电子设备的结构示意图，应理解，电子设备110能够执行上述高动态范围图像合成方法中的各个步骤，为了避免重复，此处不再详述。电子设备110包括：处理单元401和显示单元402。

处理单元401用于获取设备信息；获取参考界面的布局单元；获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。

显示单元402用于显示所述显示界面。

在一种可能的实现方式中，所述设备信息包括显示分辨率和设备类型，所述显示分辨率用于确定所述布局单元的位置的像素坐标，所述设备类型用于确定屏幕形态，以用于限定可显示区域的大小。

在一种可能的实现方式中，所述布局单元的类型包括自适应类型；

所述处理单元401还用于根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点；

所述处理单元401还用于根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括静态类型；

所述处理单元401还用于根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点和父级间距；

所述处理单元401还用于将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括变形类型；

所述处理单元401还用于根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面的所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括定位点和父级间距；

所述处理单元401还用于将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述布局单元的类型包括动态类型；

所述处理单元401还用于根据所述动态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，并生成所述布局单元的位置。

在一种可能的实现方式中，所述配置信息包括参考点，或者参考边；

所述处理单元401还用于以所述布局单元的指定的参考点为锁定点并以指定的参考边作为基准边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小等比例放大或者缩小，生成所述布局单元的大小；或者，以所述布局单元的指定的参考边作为锁定边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小非等比例放大或者缩小，生成所述布局单元的大小。

在一种可能的实现方式中，所述配置信息包括定位点；

所述处理单元401还用于根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述配置信息包括定位点和链关系，所述链关系包括所述布局单元与其它的布局单元之间的跟随关系；

所述处理单元401还用于根据布局单元的大小、所述定位点、所述链关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述配置信息包括定位点和族关系，所述族关系包括所述布局单元与其它的布局单元之间的排列方式；

所述处理单元401还用于根据所述族关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

在一种可能的实现方式中，所述参考点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

在一种可能的实现方式中，所述参考边包括布局单元的上边、下边、左边、右边、水平居中边或垂直居中边。

在一种可能的实现方式中，所述定位点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

在一种可能的实现方式中，所述排列方式包括左对齐、右对齐、水平居中对齐、上对齐、下对齐、垂直居中对齐、均分水平间距或均分垂直间距。

应理解，这里的信息显示设备110以功能单元的形式体现。这里的术语“单元”可以通过软件和/或硬件形式实现，对此不作具体限定。例如，“单元”可以是实现上述功能的软件程序、硬件电路或二者结合。所述硬件电路可能包括应用特有集成电路(applicationspecific integrated circuit，ASIC)、电子电路、用于执行一个或多个软件或固件程序的处理器(例如共享处理器、专有处理器或组处理器等)和存储器、合并逻辑电路和/或其它支持所描述的功能的合适组件。

因此，在本发明的实施例中描述的各示例的单元，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

本发明实施例还提供一种电子设备，该电子设备可以是终端设备也可以是内置于所述终端设备的电路设备。该设备可以用于执行上述方法实施例中的功能/步骤。

图39为本发明一实施例提供的另一种电子设备的结构示意图，如图39所示，电子设备900包括处理器910和收发器920。可选地，该电子设备900还可以包括存储器930。其中，处理器910、收发器920和存储器930之间可以通过内部连接通路互相通信，传递控制和/或数据信号，该存储器930用于存储计算机程序，该处理器910用于从该存储器930中调用并运行该计算机程序。

可选地，电子设备900还可以包括天线940，用于将收发器920输出的无线信号发送出去。

上述处理器910可以和存储器930可以合成一个处理装置，更常见的是彼此独立的部件，处理器910用于执行存储器930中存储的程序代码来实现上述功能。具体实现时，该存储器930也可以集成在处理器910中，或者，独立于处理器910。该处理器910可以与图38中电子设备110中的处理单元401对应。

除此之外，为了使得电子设备900的功能更加完善，该电子设备900还可以包括输入单元960、显示单元970、音频电路980、摄像头990和传感器901等中的一个或多个，所述音频电路还可以包括扬声器982、麦克风984等。其中，显示单元970可以包括显示屏。

可选地，上述电子设备900还可以包括电源950，用于给终端设备中的各种器件或电路提供电源。

应理解，图39所示的电子设备900能够实现图4、图6、图15、图18、图20、图30、图33所示界面布局方法实施例的各个过程。电子设备900中的各个模块的操作和/或功能，分别为了实现上述方法实施例中的相应流程。具体可参见上述方法实施例中的描述，为避免重复，此处适当省略详细描述。

应理解，图39所示的电子设备900中的处理器910可以是片上系统(system on achip，SOC)，该处理器910中可以包括中央处理器(central processing unit，CPU)，还可以进一步包括其他类型的处理器，所述CPU可以叫主CPU。各部分处理器配合工作实现之前的方法流程，并且每部分处理器可以选择性执行一部分软件驱动程序。

总之，处理器910内部的各部分处理器或处理单元可以共同配合实现之前的方法流程，且各部分处理器或处理单元相应的软件程序可存储在存储器930中。

本发明还提供了一种计算机存储介质，该计算机存储介质中存储有指令，当该指令在计算机上运行时，使得计算机执行如上述图6所示的高动态范围图像合成方法中的各个步骤。

以上各实施例中，涉及的处理器910可以例如包括中央处理器(centralprocessing unit，CPU)、微处理器、微控制器或数字信号处理器，还可包括GPU、NPU和ISP，该处理器还可包括必要的硬件加速器或逻辑处理硬件电路，如特定应用集成电路(application-specific integrated circuit，ASIC)，或一个或多个用于控制本发明技术方案程序执行的集成电路等。此外，处理器可以具有操作一个或多个软件程序的功能，软件程序可以存储在存储器中。

存储器可以是只读存储器(read-only memory，ROM)、可存储静态信息和指令的其它类型的静态存储设备、随机存取存储器(random access memory，RAM)或可存储信息和指令的其它类型的动态存储设备，也可以是电可擦可编程只读存储器(electricallyerasable programmable read-only memory，EEPROM)、只读光盘(compact disc read-only memory，CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其它磁存储设备，或者还可以是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其它介质等。

本发明实施例中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示单独存在A、同时存在A和B、单独存在B的情况。其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项”及其类似表达，是指的这些项中的任意组合，包括单项或复数项的任意组合。例如，a，b和c中的至少一项可以表示：a，b，c，a-b，a-c，b-c，或a-b-c，其中a，b，c可以是单个，也可以是多个。

本领域普通技术人员可以意识到，本文中公开的实施例中描述的各单元及算法步骤，能够以电子硬件、计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，任一功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-onlymemory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。本发明的保护范围应以所述权利要求的保护范围为准。

Claims (19)

1.一种界面布局方法，其特征在于，所述方法应用于电子设备，所述方法包括：

获取设备信息；

获取参考界面的布局单元；

获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；

根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；

根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。

2.根据权利要求1所述的方法，其特征在于，所述设备信息包括显示分辨率和设备类型，所述显示分辨率用于确定所述布局单元的位置的像素坐标，所述设备类型用于确定屏幕形态，以用于限定可显示区域的大小。

3.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括自适应类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

4.根据权利要求3所述的方法，其特征在于，所述配置信息包括定位点；

所述生成所述布局单元的位置，包括：

根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

5.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括静态类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

6.根据权利要求5所述的方法，其特征在于，所述配置信息包括定位点和父级间距；

所述生成所述布局单元的位置，包括：

将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；

根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

7.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括变形类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。

8.根据权利要求7所述的方法，其特征在于，所述配置信息包括定位点和父级间距；

所述生成所述布局单元的位置，包括：

将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；

根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

9.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括动态类型；

所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：

根据所述动态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，并生成所述布局单元的位置。

10.根据权利要求9所述的方法，其特征在于，所述配置信息包括参考点，或者参考边；

所述调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，包括：

以所述布局单元的指定的参考点为锁定点并以指定的参考边作为基准边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小等比例放大或者缩小，生成所述布局单元的大小；或者，以所述布局单元的指定的参考边作为锁定边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小非等比例放大或者缩小，生成所述布局单元的大小。

11.根据权利要求9所述的方法，其特征在于，所述配置信息包括定位点；

所述生成所述布局单元的位置，包括：

根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

12.根据权利要求3、5、7或者9所述的方法，其特征在于，所述配置信息包括定位点和链关系，所述链关系包括所述布局单元与其它的布局单元之间的跟随关系；

所述生成所述布局单元的位置，包括：

根据布局单元的大小、所述定位点、所述链关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；

根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

13.根据权利要求3、5、7或者9所述的方法，其特征在于，所述配置信息包括定位点和族关系，所述族关系包括所述布局单元与其它的布局单元之间的排列方式；

所述生成所述布局单元的位置，包括：

根据所述族关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；

根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。

14.根据权利要求10所述的方法，其特征在于，所述参考点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

15.根据权利要求10所述的方法，其特征在于，所述参考边包括布局单元的上边、下边、左边、右边、水平居中边或垂直居中边。

16.根据权利要求4、6、8、11、12或者13所述的方法，其特征在于，所述定位点包括布局单元的左上角顶点、顶部中点、右上角顶点、左边中点、中心点、右边中点、左下角顶点、底部中点或右下角顶点。

17.根据权利要求13所述的方法，其特征在于，所述排列方式包括左对齐、右对齐、水平居中对齐、上对齐、下对齐、垂直居中对齐、均分水平间距或均分垂直间距。

18.一种电子设备，其特征在于，包括：显示屏；一个或多个处理器；存储器；多个应用程序；以及一个或多个计算机程序，其中所述一个或多个计算机程序被存储在所述存储器中，所述一个或多个计算机程序包括指令，当所述指令被所述设备执行时，使得所述设备执行包括权利要求1至17中的任一项所述的界面布局方法。

19.一种计算机可读存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行包括权利要求1至17中的任一项所述的界面布局方法。

Images