CN115981640A - 界面布局方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请公开一种界面布局方法、装置、电子设备和存储介质，可应用于云技术、人工智能、智慧交通、辅助驾驶等各种场景。方法包括：获取待展示的目标操作界面的布局配置文件，布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；基于多个控件各自的尺寸属性信息，分别确定多个控件各自的显示尺寸；基于获得的多个控件各自的显示尺寸，结合多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定多个控件各自的界面位置信息；基于获得的多个控件各自的界面位置信息，分别将多个控件绘制在目标操作界面中。本申请可以满足应用软件对于界面布局的需求。

Description

界面布局方法、装置、电子设备和存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种界面布局方法、装置、电子设备和存储介质。

背景技术

随着互联网技术的不断发展，越来越多的应用软件被开发出来，并得到了广泛应用。每种应用软件都需要通过可视化界面进行功能展示，以便使用对象在可视化界面中进行相应的操作。

相关技术中，在应用软件的界面开发过程中，可以基于预置的界面布局框架实现界面布局；例如，采用的界面布局框架可以是Duilib等。

通常情况下，界面布局框架支持纵向布局、横向布局和绝对布局等布局方式；其中，纵向布局可以使界面容器中所包含的元素纵向排列，横向布局可以使界面容器中所包含的元素横向排列，绝对布局可以指定某个元素在相应容器中的绝对位置。

但是，应用软件的界面布局方式是多样化的，上述界面布局框架的布局方式，并不能满足应用软件对于界面布局的需求。

发明内容

本申请实施例提供一种界面布局方法、装置、电子设备和存储介质，用于满足应用软件对于界面布局的需求。

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

响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，所述布局配置文件包括：所述目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；

基于所述多个控件各自的尺寸属性信息，分别确定所述多个控件各自的显示尺寸；

基于获得的所述多个控件各自的显示尺寸，结合所述多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定所述多个控件各自的界面位置信息；

基于获得的所述多个控件各自的界面位置信息，分别将所述多个控件绘制在所述目标操作界面中。

一方面，本申请实施例提供一种界面布局装置，包括：

获取模块，用于响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，所述布局配置文件包括：所述目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；

尺寸确定模块，用于基于所述多个控件各自的尺寸属性信息，分别确定所述多个控件各自的显示尺寸；

位置确定模块，用于基于获得的所述多个控件各自的显示尺寸，结合所述多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定所述多个控件各自的界面位置信息；

绘制模块，用于基于获得的所述多个控件各自的界面位置信息，分别将所述多个控件绘制在所述目标操作界面中。

在一种可能的实施例中，所述尺寸确定模块还包括：

第一确定子模块，用于若一个控件的尺寸属性信息包括固定尺寸信息，则根据所述一个控件的固定尺寸信息，得到所述一个控件的显示尺寸；

第二确定子模块，用于若一个控件的尺寸属性信息为非固定尺寸信息，则根据所述一个控件与其他控件之间的关联属性信息，确定与所述一个控件对应的关联控件，并根据所述关联控件的显示尺寸，确定所述一个控件的显示尺寸。

在一种可能的实施例中，所述非固定尺寸信息为依赖子控件信息或者弹性尺寸信息；

所述第二确定子模块还用于：

若一个控件的尺寸属性信息包括依赖子控件信息，则根据所述一个控件与其他控件之间的关联属性信息，确定所述一个控件对应的至少一个子控件，并根据所述至少一个子控件的显示尺寸，确定所述一个控件的显示尺寸；

若一个控件的尺寸属性信息包括弹性尺寸信息，则根据所述一个控件与其他控件之间的关联属性信息，确定所述一个控件对应的父控件，并根据所述父控件的显示尺寸，确定所述一个控件的显示尺寸。

在一种可能的实施例中，所述根据所述一个控件对应的父控件的显示尺寸，确定所述一个控件的显示尺寸时，所述第二确定子模块还用于：

根据所述一个控件对应的父控件的显示尺寸，以及与所述一个控件归属于同一父控件的其他控件的显示尺寸，确定所述一个控件对应的父控件的剩余尺寸；

根据所述一个控件对应的父控件的剩余尺寸，确定所述一个控件的显示尺寸。

在一种可能的实施例中，所述装置还包括尺寸缩放模块，用于：

针对具有非固定尺寸信息的目标控件，若所述目标控件的尺寸属性信息还包括可缩放尺寸信息，且所述目标控件对应的父控件的显示尺寸满足预设条件，则将所述目标控件的显示尺寸按照所述可缩放尺寸信息进行缩放。

在一种可能的实施例中，所述位置确定模块还用于：

根据所述多个控件各自与其他控件的关联属性信息，确定所述多个控件中的多个父控件，以及所述多个父控件各自对应的至少一个子控件；

针对所述多个控件中的多个父控件，按照预设顺序依次执行以下操作：

基于一个父控件的显示尺寸以及布局属性信息，以及所述一个父控件对应的至少一个子控件各自的显示尺寸以及布局属性信息，分别确定所述至少一个子控件在所述一个父控件中的位置信息，并将所述位置信息作为界面位置信息。

在一种可能的实施例中，每个父控件的布局属性信息包括以下至少一种：

布局主轴方向、子控件在布局主轴上的对齐方式、子控件在交叉轴上的对齐方式、换行布局方式、换列布局方式；其中，所述布局主轴与所述交叉轴相互垂直；

每个子控件的布局属性信息至少包括：在父控件中的排列顺序。

一方面，本申请实施例提供一种电子设备，其包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行上述任一种概念标签生成方法的步骤。

一方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有计算机指令，当所述计算机指令在计算机上运行时，使得计算机执行上述任一种概念标签生成方法的步骤。

一方面，本申请实施例一种计算机程序产品，其包括计算机指令，所述计算机指令存储在计算机可读存储介质中；当计算机设备的处理器从所述计算机可读存储介质读取所述计算机指令时，所述处理器执行该计算机指令，使得所述计算机设备执行上述任一种概念标签生成方法的步骤。

由于本申请实施例采用上述技术方案，至少具有如下技术效果：

在本申请实施例的方案中，当需要展示目标应用的目标操作界面时，可以对目标操作界面中的多个控件进行布局，具体地，获取目标操作界面的布局配置文件，该布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；基于上述布局配置文件可以分别确定多个控件各自的显示尺寸，进而分别确定多个控件各自的界面位置信息；最后基于多个控件各自的界面位置信息，分别将多个控件绘制在目标操作界面中。

这样，针对目标应用的每个操作界面，通过设置的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息，可以实现该操作界面中各个控件的多样化布局方式，满足应用软件对于界面布局的需求。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

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

图1为本申请实施例提供的一种界面布局方法的应用场景示意图；

图2为本申请实施例提供的一种目标操作界面中的多个控件的示意图；

图3为本申请实施例提供的一种FlexBox的布局主轴和交叉轴的示意图；

图4为本申请实施例提供的一种FlexBox的布局主轴方向的示意图；

图5为本申请实施例提供的一种FlexBox的换行布局方式的示意图；

图6为本申请实施例提供的一种FlexBox的子控件在布局主轴上的对齐方式的示意图；

图7为本申请实施例提供的一种FlexBox的子控件在交叉轴上的对齐方式的示意图；

图8为本申请实施例提供的另一种FlexBox的子控件在交叉轴上的对齐方式的示意图；

图9为本申请实施例提供的一种FlexBox的子控件在父控件中的排列顺序的示意图；

图10为本申请实施例提供的一种FlexBox的子控件的尺寸放大示意图；

图11为本申请实施例提供的一种FlexBox的子控件的尺寸缩小示意图；

图12为本申请实施例提供的一种界面布局方法的流程图；

图13为本申请实施例提供的一种控件的显示尺寸示意图；

图14为本申请实施例提供的另一种控件的显示尺寸示意图；

图15A为本申请实施例提供的另一种界面布局方法的流程图；

图15B为本申请实施例提供的一种界面布局的展示示意图；

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

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

图18为本申请实施例提供的一种电子设备的结构示意图；

图19为本申请实施例中的另一种电子设备的结构示意图。

具体实施方式

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

为了便于本领域技术人员更好地理解本申请的技术方案，下面对本申请涉及的名词进行介绍。

控件：是一种图形用户界面元素，用于开发构建用户界面，包括但不限于视窗、文本框、按钮、下拉式菜单等界面元素。一些控件可以看作一个容器，而容器也可以理解为父控件，其内部可以设置其它控件，例如视窗可以看作一个父控件，其内部可以设置文本框、按钮等，文本框、按钮等可以看作视窗的子控件。

Duilib：一种开源的DirectUI(直接在父窗口上绘图)界面库，使用XML来描述界面风格，界面布局，将界面与逻辑分离，能够快速开发美观的界面。Duilib框架支持纵向布局、横向布局和绝对布局。其中，纵向布局可以使界面容器中所包含的元素纵向排列，横向布局可以使界面容器中所包含的元素横向排列，绝对布局可以指定某个元素在相应界面容器中的绝对位置。本申请实施例中，父控件可以理解为界面容器，子控件可以理解为元素。

Flexbox：一种UI界面布局技术，应用FlexBox进行布局的控件，可以根据控件空间的大小调整其内部子控件的宽高和排列顺序。

下文中所用的词语“示例性”的意思为“用作例子、实施例或说明性”。作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。

文中的术语“第一”、“第二”仅用于描述目的，而不能理解为明示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。

相关技术中，在应用软件的界面开发过程中，可以基于预置的界面布局框架实现界面布局；例如，采用的界面布局框架可以是Duilib等。通常情况下，界面布局框架支持纵向布局、横向布局和绝对布局等布局方式。但是，应用软件的界面布局方式是多样化的，上述界面布局框架的布局方式，并不能满足应用软件对于界面布局的需求。

有鉴于此，本申请实施例提供一种界面布局方法、装置、电子设备和存储介质，针对每个界面，通过设置的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息，可以实现该界面中各个控件的多样化布局方式，满足应用软件对于界面布局的需求。

以下结合说明书附图对本申请的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本申请，并不用于限定本申请，并且在不冲突的情况下，本申请实施例及实施例中的特征可以相互组合。

下面对本申请实施例的应用场景进行示例性介绍。

如图1所示，本申请实施例提供的界面布局方法可以应用于终端设备100。终端设备100中可以安装各种应用软件，例如游戏类软件、社交类软件、即时通信类软件、浏览器类软件、资讯类软件等等，目标应用可以是终端设备100上的各种应用软件中的一种。在目标应用的开发过程中，可以基于界面布局框架进行界面布局的开发，具体地，基于界面布局框架编写目标应用的多个操作界面的布局代码，并将各个操作界面的布局代码分别生成相应的布局配置文件。

在本申请实施例中，终端设备100为用户使用的电子设备，该电子设备包括但不限于个人计算机、手机、平板电脑、笔记本、电子书阅读器、智能语音交互设备、智能家电、车载终端等。

在实际应用中，用户可以使用终端设备100登录并打开目标应用，在展示目标应用的操作界面时，可以采用本申请实施例的界面布局方法，对操作界面中的各个控件进行布局。具体地，在需要展示目标应用的目标操作界面(即目标操作界面)时，获取目标操作界面的布局配置文件，该布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；基于布局配置文件，分别确定多个控件各自的显示尺寸，进而分别确定多个控件各自的界面位置信息；基于获得的多个控件各自的界面位置信息，分别将多个控件绘制在目标操作界面中，从而完成目标操作界面的布局。

进一步地，用户可以在目标操作界面中进行相应的操作。例如，目标应用为游戏类软件，其目标操作界面为游戏界面，用户可以在游戏界面中执行相应的游戏操作；又例如，目标应用为即时通信类软件，其目标操作界面为通信界面，用户可以在通信界面中与其他用户进行即时通信。

应当说明的是，图1是对本申请的界面布局方法的应用场景进行示例介绍，实际本申请实施例中的方法可以适用的应用场景并不限于此。并且，本申请实施例可应用于云技术、人工智能、智慧交通、辅助驾驶等各种场景。

下面结合附图对本申请实施例的界面布局方法的具体实施方式进行介绍。

本申请实施例的界面布局方法可以应用于终端设备，例如上述图1中的终端设备100，终端设备中安装有目标应用，当需要对目标应用的目标操作界面进行展示时，可以采用界面布局方法对目标操作界面进行布局，具体地，可以基于目标操作界面的布局配置文件进行布局，该布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息。

因此，在介绍本申请实施例的界面布局方法之前，首先介绍一下目标应用的目标操作界面以及其布局配置文件。

本申请实施例中，目标操作界面中包括多个控件，具体可以包括多个父控件以及多个父控件各自对应的至少一个子控件，至少一个字控件可以设置在其父控件的内部。因此，每个控件与其他控件之间的关联属性信息包括父控件信息、子控件信息中的至少一种，即该控件为其他控件的父控件或者子控件。

如图2所示，目标操作界面中包括父控件0、父控件1、父控件2、父控件3、父控件4和父控件5，父控件0的内部包括子控件01、子控件02、子控件03和子控件04，父控件1、父控件2、父控件3、父控件4和父控件5的内部也包括相应的子控件。需要说明的是，目标操作界面的窗口控件也可以看作一个父控件，其内部设置有父控件0、父控件1、父控件2、父控件3、父控件4和父控件5。

在目标应用的界面开发过程中，针对目标操作界面进行布局时，可以基于界面布局框架结合界面布局方法实现，例如，界面布局框架包括但不限于Duilib，Duilib是一个开源的DirectUI界面库。界面布局方法包括但不限于Flexbox，Flexbox是一种用户界面布局技术，应用了FlexBox布局的元素，可随空间的大小去调整其内部子元素的宽高和排列顺序，本申请下面实施例中以FlexBox为例进行介绍。

如图3所示，Flexbox容器可以理解为父控件，其内部的元素可以理解为父控件内部的子控件；Flexbox包括2个轴，即主轴(main axis)和交叉轴(cross axis)，主轴与交叉轴相互垂直，主轴的起点位置为main start，终点位置为main end，交叉轴的起点位置为cross start，终点位置为cross end。

本申请实施例可以在界面布局框架的基础上，通过Flexbox设置目标操作界面中的各个控件的布局属性信息以及尺寸属性信息。下面对布局属性信息和尺寸属性信息分别进行介绍。

在一些实施例中，每个父控件的布局属性信息可以包括以下至少一种：布局主轴方向、子控件在布局主轴上的对齐方式、子控件在交叉轴上的对齐方式、换行布局方式、换列布局方式；其中，布局主轴与交叉轴相互垂直；每个子控件的布局属性信息至少包括：在父控件中的排列顺序。

需要说明的是，当某个控件既具有父控件又具有子控件时，该控件可以同时作为父控件和子控件，具有父控件的布局属性信息和子控件的布局属性信息。例如：目标操作界面的窗口作为一个父控件，该父控件的内部包括子控件A、子控件B和子控件C，而在子控件A的内部，还可以设置其他子控件，因此，子控件A也可以作为其他子控件的父控件，子控件B和子控件C与子控件A类似，也可以作为其他子控件的父控件。

下面对上述几种布局属性信息分别进行示例性介绍。

一、父控件的布局属性信息

(1)布局主轴方向，例如可以表示为flex-direction，用于指定布局主轴方向是水平方向还是垂直方向，flex-direction的值可以包括以下至少一种：

row：主轴为水平方向，起点位置在左端。

row-reverse：主轴为水平方向，起点位置在右端。

column：主轴为垂直方向，起点位置在上沿。

column-reverse：主轴为垂直方向，起点位置在下沿。

上述flex-direction的各个值所表示的布局主轴方向如图4所示。在具体实施中，可以设置flex-direction的默认值，例如row，在此不做限定。

(2)换行布局方式、换列布局方式，例如可以表示为flex-wrap，用于指定给父控件中添加子控件时的换行方式或换列方式，根据布局主轴方向确定是换行还是换列，即当布局主轴方向为水平方向时，flex-wrap为换行布局方式，当布局主轴方向为垂直方向时，flex-wrap为换列布局方式；flex-wrap的值可以包括以下至少一种：

nowrap：不换行或不换列。

wrap：换行或换列，当换行时，第一行在上方(即向下换行)；当换列时，第一列在左侧(即向右换列)。

wrap-reverse：换行或换列，当换行时，第一行在下方(即向上换行)；当换列时，第一列在右侧(即向左换列)。

以flex-wrap表示换行布局方式为例，假设主轴为水平方向，起点位置在左端，上述flex-wrap的各个值所表示的换行布局方式如图5所示，其中，多个子控件上的数值1、2、3、4、5、6可以表示多个子控件的排列顺序。

在具体实施中，当父控件中的多个子控件，不能全部布局在一行或一列中时，可以设置换行布局方式或换列布局方式，上述flex-wrap可以设置默认值，例如nowrap，在此不做限定。

(3)子控件在布局主轴上的对齐方式，例如可以表示为justify-content，用于指定子控件在布局主轴上的对齐方式，justify-content的值可以包括以下至少一种：

flex-start：主轴的起点对齐

flex-end：主轴的终点对齐

center：居中

space-between：两端对齐，子控件之间的间隔都相等。

space-around：每个子控件两侧的间隔相等，即靠近父控件的子控件间隔大一倍。

假设主轴为水平方向，起点位置在左端，上述justify-content的各个值所表示的对齐方式如图6所示。在具体实施中，上述justify-content可以设置默认值，例如flex-start，在此不做限定。

(4)子控件在交叉轴上的对齐方式，例如可以表示为align-items，用于指定子控件在交叉轴上的对齐方式，align-items的值可以包括以下至少一种：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

假设交叉轴的起点位置在上沿，上述align-items的各个值所表示的对齐方式如图7所示。在具体实施中，上述align-items可以设置默认值，例如flex-start，在此不做限定。

此外，当父控件内部包含多行子控件或者多列子控件时，还可以设置多行子控件或者多列子控件在交叉轴上的对齐方式，例如表示为align-content，align-content的值可以包括以下至少一种：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

假设交叉轴的起点位置在上沿，上述align-content的各个值所表示的对齐方式如图8所示。在具体实施中，上述align-content可以设置默认值，例如flex-start，在此不做限定。

二、子控件的布局属性信息：在父控件中的排列顺序，可以表示为order，用于指定子控件加入到其父控件中的顺序，例如，order的值可以为数值，可以设定数值越小，表示排列顺序越靠前；或者数值越大，表示排列顺序越靠前。

示例性的，order的值越小，排列顺序越靠前，如图9所示，假设某个父控件的主轴方向为水平方向，起点位置为左侧，该父控件中的多个子控件的order的值依次为1、2、3、4、5，按照order的值从小到大依次横向排列。

在目标应用的界面开发过程中，可以设置目标操作界面的各个控件的布局属性信息，具体可以根据上述几种布局属性信息进行设置，以便在目标操作界面的布局过程中，基于各个控件的布局属性信息进行各个控件的布局。

在介绍完布局配置文件中的布局属性信息之后，下面对布局配置文件中的尺寸属性信息进行介绍。

由本申请上述实施例可知，父控件的布局配置文件中至少包括布局属性信息、尺寸属性信息、与其他控件之间的关联属性信息；子控件的布局配置文件中至少包括尺寸属性信息、与其他控件之间的关联属性信息。

其中，每个控件的尺寸属性信息可以为固定尺寸信息或者非固定尺寸信息，固定尺寸信息即包括具体的宽和高，非固定尺寸信息可以根据需要设置。

例如：某个控件为除了窗口控件之外的父控件，其显示尺寸可以依赖于其子控件的显示尺寸，此时，非固定尺寸信息可以为依赖子控件信息；又例如：某个控件为子控件，其显示尺寸可以依赖于其父控件的显示尺寸，此时，非固定尺寸信息可以为弹性尺寸信息。

此外，某个控件具有非固定尺寸信息时，其非固定尺寸信息还可以包括可缩放尺寸信息，具体地，可缩放尺寸信息可以为可放大尺寸信息或者可缩小尺寸信息，这样，当该控件的父控件的显示尺寸发生变化时，可以基于该控件的可缩放尺寸信息，对该控件进行缩放，以适应其父控件的尺寸变化。下面对可缩放尺寸信息进行介绍。

(a)可放大尺寸信息，例如可以表示为flex-grow。

对于没有设置固定尺寸信息的控件，可以设置flex-grow。如果在某个父控件的一行中加入了几个子控件后有多余的空间，对于这几个子控件中设置了flex-grow的子控件，可以根据父控件的多余空间的大小，将该子控件自动进行放大处理。其中，flex-grow的值可以根据需要设置。

当父控件的布局主轴方向为水平方向时，可以对设置了flex-grow的子控件的宽度进行放大；当父控件的布局主轴方向为垂直方向时，可以对设置了flex-grow的子控件的高度进行放大。

另外，还可以设置两个子控件之间的放大倍数。例如，如果子控件a1和子控件a2的flex-grow分别设置为1和2，那么子控件a1自动放大，子控件a2也自动放大，且子控件a2的尺寸是子控件a1的尺寸的2倍。

示例性的，如图10所示，假设某个父控件的布局主轴方向为水平方向，当该父控件中布局了多个子控件后，还具有多余的宽度，则可以放大设置了flex-grow的子控件的宽度。

(b)可缩小尺寸信息，例如可以表示为flex-shrink。

对于某个父控件，如果该父控件的布局主轴方向为水平方向，且指定其换行布局方式flex-wrap的值是nowrap，即不换行，那么当多个子控件加入该父控件时，如果该父控件的宽度不够，则对于设置了flex-shrink的子控件，可以自动缩小该子控件的宽度。如果该父控件内部的多个子控件都设置了flex-shrink，那么可以将多个子控件等比例缩小。其中，flex-shrink的值可以根据需要设置。

同样地，如果该父控件的布局主轴方向为垂直方向，且指定其换列布局方式flex-wrap的值是nowrap，即不换列，那么当多个子控件加入该父控件时，如果该父控件的高度不够，则对于设置了flex-shrink的子控件，可以自动缩小该子控件的高度。

另外，还可以设置两个子控件之间的缩小倍数。例如，如果子控件b1和子控件b2的flex-grow分别设置为1和2，那么子控件b1自动缩小，子控件b2也自动缩小，且子控件b2的尺寸是子控件b1的尺寸的0.5倍。

示例性的，如图11所示，假设某个父控件的布局主轴方向为水平方向，当该父控件中布局多个子控件时，宽度不够，则可以缩小设置了flex-grow的子控件的宽度。

本申请实施例中，可以采用界面布局框架duilib，结合flexbox布局方法快速实现很多布局效果。界面布局框架duilib支持纵向布局、横向布局和绝对布局，在此基础上，通过flexbox布局方法设置控件的布局属性信息和尺寸属性信息，可以简单实现子控件居中、子控件换行布局或换列布局、子控件自动缩放布局等，提高界面开发效率。

在介绍完目标应用的目标操作界面的布局配置文件之后，下面对本申请实施例的界面布局方法进行示例性介绍。

图12示出了本申请实施例提供的一种界面布局方法的流程图，该方法可以由终端设备执行，例如图1中的终端设备100。如图12所示，本申请实施例提供的一种界面布局方法，包括如下步骤：

步骤S1201，响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息。

本申请实施例中，目标应用可以是安装在终端设备中的任意一种应用软件，例如上述游戏类软件、社交类软件、即时通信类软件、浏览器类软件或者资讯类软件等。

在上述步骤S1201中，用户在使用终端设备时，可以针对目标应用触发界面展示操作，例如：界面展示操作可以是启动操作或者界面切换操作，启动操作可以是点击目标应用的图标，此时，待展示的目标操作界面可以是目标应用的首个操作界面；界面切换操作可以是点击某个操作界面中相应的功能按钮，以切换至另一个操作界面，即目标操作界面。终端设备可以响应上述界面展示操作，获取目标操作界面的布局配置文件。

可以理解的是，目标应用具有多个操作界面，每个操作界面对应一个布局配置文件。在具体实施中，可以在目标应用的开发过程中，为目标应用的各个操作界面分别设置一个界面标识，将每个操作界面的界面标识与其对应的布局配置文件进行保存。进而在目标应用运行过程中，当需要展示某个操作界面时，可以基于该操作界面的界面标识，查找该界面标识对应的布局配置文件。

步骤S1202，基于多个控件各自的尺寸属性信息，分别确定多个控件各自的显示尺寸。

其中，尺寸属性信息可以包括固定尺寸信息和非固定尺寸信息，固定尺寸信息即包括具体的宽和高，非固定尺寸信息可以根据相应控件的尺寸要求进行设置，本申请下面实施例中将对非固定尺寸信息进行详细介绍。

该步骤中，针对多个控件，可以按照设定顺序依次确定多个控件的显示尺寸，该设定顺序可以根据需要设置，在此不作限定，例如：多个控件可以构成控件树结构，此时可以按照树的深度遍历顺序遍历各个控件。在具体实施时，可以首先确定具有固定尺寸信息的控件，并根据控件的固定尺寸信息获得其显示尺寸，然后再确定具有非固定尺寸信息的控件的显示尺寸。

在一些实施例中，上述步骤S1202可以至少包括以下两种情况：

第一种情况、若一个控件的尺寸属性信息包括固定尺寸信息，则根据一个控件的固定尺寸信息，得到一个控件的显示尺寸。

例如，控件A的固定尺寸信息包括：宽5厘米，高3厘米，则控件A的显示尺寸即宽5厘米，高3厘米。

第二种情况、若一个控件的尺寸属性信息为非固定尺寸信息，则根据一个控件与其他控件之间的关联属性信息，确定与一个控件对应的关联控件，并根据关联控件的显示尺寸，确定一个控件的显示尺寸。

其中，非固定尺寸信息可以根据需要进行设置，例如包括：依赖子控件信息、弹性尺寸信息中的一种。如果某个控件的尺寸属性信息为依赖子控件信息，则该控件的显示尺寸依赖于它的子控件的显示尺寸；如果某个控件的尺寸属性信息为弹性尺寸信息，则该控件的显示尺寸可以依赖于它的父控件的显示尺寸。

在一些实施例中，上述步骤S1202中的第二种情况，还可以包括以下两种可能的实施方式：

实施方式一、若一个控件的尺寸属性信息包括依赖子控件信息，则根据一个控件与其他控件之间的关联属性信息，确定一个控件对应的至少一个子控件，并根据至少一个子控件的显示尺寸，确定一个控件的显示尺寸。

例如，控件c的尺寸属性信息为依赖子控件信息，其内部设置有子控件c1、子控件c2、子控件c3，当确定子控件c1、子控件c2、子控件c3各自的显示尺寸后，可以根据这三个子控件的显示尺寸，确定控件c的显示尺寸。如图13所示，假设根据控件c的布局属性信息可以确定，控件c的布局主轴方向为水平方向，子控件之间的间隔为2，它的三个子控件的显示尺寸分别为4*3(例如宽4厘米、高3厘米)、5*4、6*4，则控件c的显示尺寸可以为19*4，即宽为三个子控件的宽度之和，再加上子控件之间的间隔，即4+2+5+2+6＝19，高为三个子控件之中的最大高度。

实施方式二、若一个控件的尺寸属性信息包括弹性尺寸信息，则根据一个控件与其他控件之间的关联属性信息，确定一个控件对应的父控件，并根据父控件的显示尺寸，确定一个控件的显示尺寸。

具体地，某个控件的尺寸属性信息为弹性尺寸信息，说明该控件的显示尺寸依赖于它的父控件的显示尺寸，需要根据其父控件的显示尺寸，以及其父控件的其他子控件的显示尺寸，确定该控件的显示尺寸。

在一些实施例中，实施方式二可以包括如下步骤：

A1、根据一个控件对应的父控件的显示尺寸，以及与一个控件归属于同一父控件的其他控件的显示尺寸，确定一个控件对应的父控件的剩余尺寸；

A2、根据一个控件对应的父控件的剩余尺寸，确定一个控件的显示尺寸。

例如，一个控件为子控件d1，它的尺寸属性信息为弹性尺寸信息，其父控件为控件d，控件d的内部还设置有子控件d2、子控件d3，当确定控件d、子控件d2、子控件d3各自的显示尺寸后，可以确定控件d的剩余尺寸。

如图14所示，假设根据控件d的布局属性信息可以确定，控件d的布局主轴方向为水平方向，子控件之间的间隔为2，控件d、子控件d2、子控件d3的显示尺寸分别为20*5(例如宽20厘米、高5厘米)、5*4、6*4，则控件d的剩余宽度为20-5-2-6-2＝5，则子控件d1的宽度可以为5厘米，高度可以与控件d的高度相同，也可以不同，例如：子控件d1的显示尺寸可以为5*5。

在一些实施例中，考虑到一些父控件可能由于用户操作或者自身变化，导致其显示尺寸发生变化，例如目标操作界面的窗口控件的显示尺寸发生变化，为了适应父控件的尺寸变化，可以针对具有非固定尺寸信息的目标控件，在其尺寸属性信息中设置可缩放尺寸信息，该可缩放尺寸信息参见本申请上述实施例，在此不再赘述。

因此，在本申请实施例中，针对具有非固定尺寸信息的目标控件，若目标控件的尺寸属性信息还包括可缩放尺寸信息，且目标控件对应的父控件的显示尺寸满足预设条件，则将目标控件的显示尺寸按照可缩放尺寸信息进行缩放。

其中，可缩放尺寸信息可以为可放大尺寸信息或者可缩小尺寸信息。目标控件对应的父控件的显示尺寸满足预设条件可以是：父控件在容纳其多个子控件后，还有多余的显示尺寸，或者父控件的显示尺寸不够容纳其子控件。当父控件在容纳其子控件后，还有多余的显示尺寸，对于具有可放大尺寸信息的目标控件，可以放大其显示尺寸；当父控件的显示尺寸不够容纳其多个子控件时，对于具有可缩小尺寸信息的目标控件，可以缩小其显示尺寸。这样，可以使一些子控件适应其父控件的尺寸变化。

步骤S1203，基于获得的多个控件各自的显示尺寸，结合多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定多个控件各自的界面位置信息。

其中，每个控件的布局属性信息可以包括上述父控件的布局属性信息、子控件的布局属性信息中的一种或两种。父控件的布局属性信息包括以下至少一种：布局主轴方向、子控件在布局主轴上的对齐方式、子控件在交叉轴上的对齐方式、换行布局方式、换列布局方式；子控件的布局属性信息至少包括：在父控件中的排列顺序，具体参见本申请上述实施例，在此不再赘述。

在一些实施例中，步骤S1203可以包括如下步骤：

B1、根据多个控件各自与其他控件的关联属性信息，确定多个控件中的多个父控件，以及多个父控件各自对应的至少一个子控件。

该步骤中，如果控件e的内部设置有控件e1、控件e2、控件e3，则控件e与控件e1、控件e2、控件e3的关联属性信息为父控件信息，即控件e为控件e1、控件e2、控件e3的父控件，同样地，控件e1、控件e2、控件e3各自与控件e的关联属性信息为子控件信息；这样，根据多个控件各自与其他控件的关联属性信息，可以确定多个控件中的多个父控件，以及多个父控件各自对应的至少一个子控件，其中，目标操作界面的窗口控件也为父控件，简称窗口父控件。

B2、针对多个控件中的多个父控件，按照预设顺序依次执行以下操作：

基于一个父控件的显示尺寸以及布局属性信息，以及一个父控件对应的至少一个子控件各自的显示尺寸以及布局属性信息，分别确定至少一个子控件在一个父控件中的位置信息，并将位置信息作为界面位置信息。

其中，预设顺序可以是：首先确定目标操作界面的窗口父控件内部的多个子控件，根据窗口父控件的显示尺寸以及布局属性信息，确定窗口控件内部的多个子控件的位置信息；如果窗口控件内部的某个子控件的内部还设置有其他子控件，则该子控件可以作为其他子控件的父控件，根据这个父控件的显示尺寸以及布局属性信息，确定该父控件内部的其他子控件的位置信息，以此类推。

步骤S1204，基于获得的多个控件各自的界面位置信息，分别将多个控件绘制在目标操作界面中。

具体地，可以首先在目标操作界面的窗口控件中，绘制窗口控件中的多个控件，再针对这些控件中的每个父控件，按照设定顺序绘制该父控件中的各个子控件，以此类推，直至绘制完所有控件，其中，设定顺序可以根据需要设置，在此不作限定。

本申请实施例中，针对目标应用的每个操作界面，通过设置的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息，可以实现该操作界面中各个控件的多样化布局方式，满足应用软件对于界面布局的需求。

下面结合图15A对本申请实施例的界面布局方法进行示例性介绍。

如图15A所示，本申请实施例的界面布局方法包括测量阶段、布局阶段和绘制阶段，下面对这几个阶段分别进行介绍。

在测量阶段，根据目标操作界面的各个控件的尺寸属性信息，测量各个控件的宽和高；在布局阶段，根据各个控件的宽和高，以及各个控件的布局属性信息，确定各个控件的界面位置；在绘制阶段，将各个控件绘制在目标操作界面上。

当用户操作某个控件或者某个控件自身变化，导致该控件的大小和位置不变但内容变化(例如背景颜色改变)时，可以将这个控件设置为脏区域，触发操作系统刷新该区域的内容。当用户操作某个控件或者某个控件自身变化，导致该控件的大小发生变化时，可以重新执行测量阶段、布局阶段和绘制阶段，以重新调整相应控件的大小和位置，并重新绘制有变动的区域。

在测量阶段中，如果各个控件启用了flexbox布局，在获得基于flexbox设置的各个控件的尺寸属性信息后，基于各个控件的尺寸属性信息，分别确定各个控件的显示尺寸，即宽和高。

具体地，若某个控件的尺寸属性信息为固定尺寸信息，则根据该控件的固定尺寸信息，得到该控件的显示尺寸；若某个控件的尺寸属性信息为依赖子控件信息，则根据该控件内部设置的多个子控件的显示尺寸，确定该控件的显示尺寸；若某个控件的尺寸属性信息为弹性尺寸信息，则根据该控件所在的父控件的显示尺寸，以及该父控件的其他子控件的显示尺寸，确定该控件的父控件的剩余尺寸，进而根据该控件的父控件的剩余尺寸，确定该控件的显示尺寸。

经过测量阶段后，可以确定各个控件的宽和高，接下来进入布局阶段。

在布局阶段中，如果各个控件启动了flexbox布局，即基于flexbox设置了各个控件的布局属性信息，可以根据各个控件的宽和高，结合各个控件的布局属性信息，确定各个控件的具体位置。

示例性的，如图15B所示，窗口父控件的内部设置有子控件e1、子控件e2、子控件e3、子控件e4、子控件e5、子控件e6，窗口父控件的布局属性信息中包括flex-wrap，即换行，那么在逐个排列窗口父控件的多个子控件时，如果当前一行在布局子控件e1、子控件e2、子控件e3、子控件e4后，无法再容纳子控件e5、子控件e6，则将子控件e5、子控件e6布局到下一行的位置。

经过布局阶段后，可以确定各个控件的界面位置信息，接下来进入绘制阶段，根据各个控件的界面位置信息，将各个控件绘制在目标操作界面上。具体地，首先绘制父控件，再绘制父控件中的多个子控件。

与本申请上述方法实施例基于同一发明构思，本申请实施例中还提供了一种界面布局装置，该界面布局装置解决问题的原理与上述实施例的方法相似，因此该界面布局装置的实施可以参见上述方法的实施，重复之处不再赘述。

图16示出了本申请实施例提供的一种界面布局装置。如图16所示，该界面布局装置，包括获取模块161、尺寸确定模块162、位置确定模块163和绘制模块164。

获取模块161，用于响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，布局配置文件包括：目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；

尺寸确定模块162，用于基于多个控件各自的尺寸属性信息，分别确定多个控件各自的显示尺寸；

位置确定模块163，用于基于获得的多个控件各自的显示尺寸，结合多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定多个控件各自的界面位置信息；

绘制模块164，用于基于获得的多个控件各自的界面位置信息，分别将多个控件绘制在目标操作界面中。

在一种可能的实施例中，如图17所示，尺寸确定模块162还包括：

第一确定子模块1621，用于若一个控件的尺寸属性信息包括固定尺寸信息，则根据一个控件的固定尺寸信息，得到一个控件的显示尺寸；

第二确定子模块1622，用于若一个控件的尺寸属性信息为非固定尺寸信息，则根据一个控件与其他控件之间的关联属性信息，确定与一个控件对应的关联控件，并根据关联控件的显示尺寸，确定一个控件的显示尺寸。

在一种可能的实施例中，非固定尺寸信息为依赖子控件信息或者弹性尺寸信息；

第二确定子模块1622还用于：

若一个控件的尺寸属性信息包括依赖子控件信息，则根据一个控件与其他控件之间的关联属性信息，确定一个控件对应的至少一个子控件，并根据至少一个子控件的显示尺寸，确定一个控件的显示尺寸；

若一个控件的尺寸属性信息包括弹性尺寸信息，则根据一个控件与其他控件之间的关联属性信息，确定一个控件对应的父控件，并根据父控件的显示尺寸，确定一个控件的显示尺寸。

在一种可能的实施例中，根据一个控件对应的父控件的显示尺寸，确定一个控件的显示尺寸时，第二确定子模块1622还用于：

根据一个控件对应的父控件的显示尺寸，以及与一个控件归属于同一父控件的其他控件的显示尺寸，确定一个控件对应的父控件的剩余尺寸；

根据一个控件对应的父控件的剩余尺寸，确定一个控件的显示尺寸。

在一种可能的实施例中，装置还包括尺寸缩放模块165，用于：

针对具有非固定尺寸信息的目标控件，若所述目标控件的尺寸属性信息还包括可缩放尺寸信息，且所述目标控件对应的父控件的显示尺寸满足预设条件，则将所述目标控件的显示尺寸按照所述可缩放尺寸信息进行缩放。

在一种可能的实施例中，位置确定模块163还用于：

根据多个控件各自与其他控件的关联属性信息，确定多个控件中的多个父控件，以及多个父控件各自对应的至少一个子控件；

针对多个控件中的多个父控件，按照预设顺序依次执行以下操作：

基于一个父控件的显示尺寸以及布局属性信息，以及一个父控件对应的至少一个子控件各自的显示尺寸以及布局属性信息，分别确定至少一个子控件在一个父控件中的位置信息，并将位置信息作为界面位置信息。

在一种可能的实施例中，每个父控件的布局属性信息包括以下至少一种：

布局主轴方向、子控件在布局主轴上的对齐方式、子控件在交叉轴上的对齐方式、换行布局方式、换列布局方式；其中，布局主轴与交叉轴相互垂直。

为了描述的方便，以上各部分按照功能划分为各模块(或单元)分别描述。当然，在实施本申请时可以把各模块(或单元)的功能在同一个或多个软件或硬件中实现。

关于上述实施例中的装置，其中各个模块的具体执行方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

在介绍了本申请示例性实施方式的音频节目内容的文稿显示控制方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的电子设备。

与本申请上述方法实施例基于同一发明构思，本申请实施例中还提供了一种电子设备，该电子设备解决问题的原理与上述实施例的方法相似，因此该电子设备的实施可以参见上述方法的实施，重复之处不再赘述。

参阅图18所示，电子设备180可以至少包括处理器181、以及存储器182。其中，存储器182存储有程序代码，当程序代码被处理器181执行时，使得处理器181执行上述任意一种界面布局方法中的步骤。

在一些可能的实施方式中，根据本申请的电子设备可以至少包括至少一个处理器、以及至少一个存储器。其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行本说明书上述描述的根据本申请各种示例性实施方式的界面布局方法中的步骤。例如，处理器可以执行如图2中所示的步骤。

在示例性实施例中，本申请还提供了一种包括程序代码的存储介质，例如包括程序代码的存储器182，上述程序代码可由电子设备180的处理器181执行以完成上述界面布局方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

下面参照图19来描述根据本申请的这种实施方式的电子设备190。图19的电子设备190仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图19，电子设备190以通用电子设备的形式表现。电子设备190的组件可以包括但不限于：上述至少一个处理单元191、上述至少一个存储单元192、连接不同系统组件(包括存储单元192和处理单元191)的总线193。

总线193表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元192可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)19219和/或高速缓存存储单元1922，还可以进一步包括只读存储器(ROM)1923。

存储单元192还可以包括具有一组(至少一个)程序模块1924的程序/实用工具1925，这样的程序模块1924包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

电子设备190也可以与一个或多个外部设备194(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与电子设备190交互的设备通信，和/或与使得该电子设备190能与一个或多个其它电子设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口195进行。并且，电子设备190还可以通过网络适配器196与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器196通过总线193与用于电子设备190的其它模块通信。应当理解，尽管图中未示出，可以结合电子设备190使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

与上述方法实施例基于同一发明构思，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述任意一种界面布局方法的步骤。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本申请的实施方式的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在计算装置上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被命令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由命令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

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

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

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

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

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (11)

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

响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，所述布局配置文件包括：所述目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；

基于所述多个控件各自的尺寸属性信息，分别确定所述多个控件各自的显示尺寸；

基于获得的所述多个控件各自的显示尺寸，结合所述多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定所述多个控件各自的界面位置信息；

基于获得的所述多个控件各自的界面位置信息，分别将所述多个控件绘制在所述目标操作界面中。

2.根据权利要求1所述的方法，其特征在于，所述基于所述多个控件各自的尺寸属性信息，分别确定所述多个控件各自的显示尺寸，包括：

若一个控件的尺寸属性信息包括固定尺寸信息，则根据所述一个控件的固定尺寸信息，得到所述一个控件的显示尺寸；

若一个控件的尺寸属性信息为非固定尺寸信息，则根据所述一个控件与其他控件之间的关联属性信息，确定与所述一个控件对应的关联控件，并根据所述关联控件的显示尺寸，确定所述一个控件的显示尺寸。

3.根据权利要求2所述的方法，其特征在于，所述非固定尺寸信息为依赖子控件信息或者弹性尺寸信息；

所述若一个控件的尺寸属性信息为非固定尺寸信息，则根据所述一个控件与其他控件之间的关联属性信息，确定所述一个控件对应的关联控件，并根据所述关联控件的显示尺寸，确定所述一个控件的显示尺寸，包括：

若一个控件的尺寸属性信息包括依赖子控件信息，则根据所述一个控件与其他控件之间的关联属性信息，确定所述一个控件对应的至少一个子控件，并根据所述至少一个子控件的显示尺寸，确定所述一个控件的显示尺寸；

若一个控件的尺寸属性信息包括弹性尺寸信息，则根据所述一个控件与其他控件之间的关联属性信息，确定所述一个控件对应的父控件，并根据所述父控件的显示尺寸，确定所述一个控件的显示尺寸。

4.根据权利要求3所述的方法，其特征在于，所述根据所述一个控件对应的父控件的显示尺寸，确定所述一个控件的显示尺寸，包括：

根据所述一个控件对应的父控件的显示尺寸，以及与所述一个控件归属于同一父控件的其他控件的显示尺寸，确定所述一个控件对应的父控件的剩余尺寸；

根据所述一个控件对应的父控件的剩余尺寸，确定所述一个控件的显示尺寸。

5.根据权利要求2至4任一项所述的方法，其特征在于，所述方法还包括：

针对具有非固定尺寸信息的目标控件，若所述目标控件的尺寸属性信息还包括可缩放尺寸信息，且所述目标控件对应的父控件的显示尺寸满足预设条件，则将所述目标控件的显示尺寸按照所述可缩放尺寸信息进行缩放。

6.根据权利要求1至4任一项所述的方法，其特征在于，所述基于获得的所述多个控件各自的显示尺寸，结合所述多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定所述多个控件各自的界面位置信息，包括：

根据所述多个控件各自与其他控件的关联属性信息，确定所述多个控件中的多个父控件，以及所述多个父控件各自对应的至少一个子控件；

针对所述多个控件中的多个父控件，按照预设顺序依次执行以下操作：

基于一个父控件的显示尺寸以及布局属性信息，以及所述一个父控件对应的至少一个子控件各自的显示尺寸以及布局属性信息，分别确定所述至少一个子控件在所述一个父控件中的位置信息，并将所述位置信息作为界面位置信息。

7.根据权利要求6所述的方法，其特征在于，每个父控件的布局属性信息包括以下至少一种：

布局主轴方向、子控件在布局主轴上的对齐方式、子控件在交叉轴上的对齐方式、换行布局方式、换列布局方式；其中，所述布局主轴与所述交叉轴相互垂直；

每个子控件的布局属性信息至少包括：在父控件中的排列顺序。

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

获取模块，用于响应于针对目标应用触发的界面展示操作，获取待展示的目标操作界面的布局配置文件，所述布局配置文件包括：所述目标操作界面对应的多个控件各自的布局属性信息、尺寸属性信息以及与其他控件之间的关联属性信息；

尺寸确定模块，用于基于所述多个控件各自的尺寸属性信息，分别确定所述多个控件各自的显示尺寸；

位置确定模块，用于基于获得的所述多个控件各自的显示尺寸，结合所述多个控件各自的布局属性信息以及与其他控件之间的关联属性信息，分别确定所述多个控件各自的界面位置信息；

绘制模块，用于基于获得的所述多个控件各自的界面位置信息，分别将所述多个控件绘制在所述目标操作界面中。

9.一种电子设备，其特征在于，其包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行权利要求1～7中任一所述方法的步骤。

10.一种计算机可读存储介质，其特征在于，其包括程序代码，当所述程序代码在电子设备上运行时，所述程序代码用于使所述电子设备执行权利要求1～7中任一所述方法的步骤。

11.一种计算机程序产品，其特征在于，其包括计算机指令，所述计算机指令存储在计算机可读存储介质中；当计算机设备的处理器从所述计算机可读存储介质读取所述计算机指令时，所述处理器执行该计算机指令，使得所述计算机设备执行权利要求1～7中任一方法的步骤。

Images