CN116126450A - 界面布局方法、装置、车辆及存储介质 - Google Patents

Abstract

本公开是关于一种界面布局方法、装置、车辆及存储介质，涉及智能座舱技术领域，该方法包括：获取目标布局树，其中，目标布局树包括：多个目标节点，目标节点与目标界面元素相关联，目标节点由目标界面元素的目标布局信息描述，不同目标界面元素由至少一个初始界面元素分割得到；根据目标界面元素和目标布局信息，生成目标界面。通过本公开，能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

Description

界面布局方法、装置、车辆及存储介质

技术领域

本公开涉及智能座舱技术领域，尤其涉及一种界面布局方法、装置、车辆及存储介质。

背景技术

在电子设备的界面布局场景中，可以支持配置化可拖拽重组布局，其是一种非常有用的功能。可以支持开发人员自由调整界面布局，使得应用程序更加灵活和可定制。在这种方式下，电子设备的界面中通常包含若干个可拖拽的窗口或面板，开发人员可以自由拖拽窗口或面板来调整布局。配置化可拖拽重组布局，可以使得开发人员关注的信息更加突出，更方便查看。通过配置化的编码方式可以解决重复造轮子的工作，也能大幅提升界面布局效率。

在相关技术中，配置化可拖拽重组布局，是一种绝对定位式拖拽布局，随着拖拽布局的窗口或面板数量的增多，界面会向下产生滚动，导致界面布局调整不够灵活、影响界面布局的便捷性和效率。

发明内容

为克服相关技术中存在的问题，本公开提供一种界面布局方法、装置、车辆及非临时性计算机可读存储介质，能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

根据本公开实施例的第一方面，提供一种界面布局方法，包括：获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；根据所述目标界面元素和所述目标布局信息，生成目标界面。

根据本公开实施例的第二方面，提供一种界面布局装置，包括：获取单元，用于获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；生成单元，用于根据所述目标界面元素和所述目标布局信息，生成目标界面。

根据本公开实施例的第三方面，提供一种车辆，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：实现本公开实施例的第一方面提供的一种界面布局方法的步骤。

根据本公开实施例的第四方面，提供一种非临时性计算机可读存储介质，当所述存储介质中的指令由移动终端的处理器执行时，使得移动终端能够执行一种界面布局方法，所述方法包括：获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；根据所述目标界面元素和所述目标布局信息，生成目标界面。

本公开的实施例提供的技术方案可以包括以下有益效果：

由于目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据本公开的一些实施例示出的一种界面布局方法的流程图；

图2是本公开实施例中目标布局树和界面元素联动示意图；

图3是根据本公开的另一些实施例示出的一种界面布局方法的流程图；

图4是本公开实施例中节点分割示意图；

图5是本公开实施例中鼠标事件监听示意图；

图6是根据本公开的另一些实施例示出的一种界面布局方法的流程图；

图7是本公开一实施例中拖拽效果示意图；

图8是本公开另一实施例中拖拽效果示意图；

图9是本公开实施例中一种预览界面示意图；

图10是本公开另一实施例提供的界面布局流程示意图；

图11a是本公开一实施例中界面布局时序示意图；

图11b是本公开另一实施例中界面布局时序示意图；

图12是根据本公开的一些实施例示出的一种界面布局装置的结构图；

图13是一示例性实施例示出的一种车辆的功能框图示意图。

具体实施方式

这里将详细地对本公开一些实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。本文所描述的方法、装置和/或系统的各种改变、变型及等同物将在理解本公开之后变得显而易见。例如，本文所描述的操作的顺序仅仅为示例，且并非受限于本文中所阐述的那些顺序，而是除了必须以特定顺序进行的操作之外，如在理解本公开之后变得显而易见的那样可进行改变。另外，为提升清楚性和简洁性，对本领域中已知的特征的描述可被省略。

以下本公开的一些实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据本公开的一些实施例示出的一种界面布局方法的流程图，如图1所示，界面布局方法用于电子设备中，包括以下步骤:

在步骤S11中，获取目标布局树，其中，目标布局树包括：多个目标节点，目标节点与目标界面元素相关联，目标节点由目标界面元素的目标布局信息描述，不同目标界面元素由至少一个初始界面元素分割得到。

其中，用于存储布局内容的树形结构，可以被称为布局树，树形结构是计算机中数据结构的一种具体示例，树形结构可以例如二叉树，目标布局树，是已经过布局配置所得的布局树，对此不做限制。

一些实施例中，可以基于目标布局树控制界面布局过程，目标布局树包括：多个目标节点，目标节点与目标界面元素相关联，目标节点由目标界面元素的目标布局信息描述，不同目标界面元素由至少一个初始界面元素分割得到，对此不做限制。

也即是说，目标布局树中包括多个节点，该节点可以被称为目标节点，可以设置目标节点关联一个目标界面元素，目标界面元素是指界面中的一个窗口或面板，目标布局信息描述窗口或面板在界面中的位置和坐标情况，可以将目标布局信息与目标节点关联，比如可以基于目标布局信息来描述目标节点，使得目标布局树能够直观地呈现界面中窗口或面板的布局情况，对此不做限制。

一些实施例中，不同目标界面元素由至少一个初始界面元素分割得到，也即是说，相对于相关技术中绝对定位式拖拽布局方式，本公开实施例中的目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

一些实施例中，在布局控制之前，布局树中可能包含至少一个初始节点，该初始节点关联一个初始界面元素，如果确定待增加界面元素的数量，可以控制对布局树中初始节点进行控制，使该初始节点包含两个子节点（子节点即为目标节点的一个可选示例），一个子节点关联一个目标界面元素，相应的，在界面中，表示该两个目标界面元素是由初始界面元素分割得到，对此不做限制。

也即是说，本公开实施例中支持设计配置数据结构：用二叉树的结构来表达界面布局的父子分割关系，对此不做限制。

在本公开的一些实施例中，目标界面元素的目标布局信息，可以是目标界面元素的尺寸信息和目标界面元素在目标界面中的位置信息中至少一项，对此不做限制。

目标界面元素的尺寸信息，例如目标界面元素的长宽值，目标界面元素在目标界面中的位置信息，例如，目标界面元素在目标界面中的位置坐标，或者相对于界面边框的相对位置，对此不做限制。

在本公开的 一些实施例中，在执行获取目标布局树的过程中，可以是确定初始布局树，其中，初始布局树包括：初始子节点，初始子节点与初始界面元素相关联，初始子节点由初始界面元素的初始布局信息描述，并根据布局指示信息和初始布局树中的初始子节点，确定待描述节点，以及将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树。

其中，在进行布局控制之前的布局树，可以被称为初始布局树，初始布局树中尚未被配置的子节点，可以被称为初始子节点，与初始子节点关联的尚未被配置的界面元素，可以被称为初始界面元素，初始界面元素在界面中的布局信息，可以被称为初始布局信息，用于对界面进行布局调整控制的指示信息，可以被称为布局指示信息，基于初始子节点构建新的节点，用以关联对初始界面元素分割所得界面元素，该所构建新的节点，可以被称为待描述节点，待描述节点关联的分割所得界面元素，具有的布局信息，可以被称为初始布局信息，目标布局信息，可以是指由布局指示信息所指示的布局信息，即需求调整为的布局信息，对此不做限制。

一些实施例中，布局指示信息可以用于指示对一个初始界面元素进行分割，分割出若干个界面元素作为目标界面元素；另一些实施例中，布局指示信息还可以用于指示对初始界面元素进行删除；另一些实施例中，布局指示信息还可以用于指示对初始界面元素的初始布局信息进行优化调整，对此不做限制。

可以理解的是，如果若干个目标界面元素可以是由一个初始界面元素分割得到，则在初始分割的情况下，多个目标界面元素的尺寸共同占满目标界面元素的尺寸，而后，还可以支持基于配置需求，对每个目标界面元素的尺寸进行个性化调整设置，调整设置之后的尺寸，可以为目标布局信息的一个可选示例，而后，基于目标布局信息描述与该目标界面元素所关联的待描述节点，描述所得待描述节点为目标节点的一个可选示例，实现基于生成目标布局树，并使得目标布局树能够直观地呈现出若干个界面元素的布局情况，并支持通过拖拽、管理、配置目标布局树中各个节点的方式，实现对界面元素的联动调整，更为灵活便捷高效。

举例而言，如图2所示，图2是本公开实施例中目标布局树和界面元素联动示意图，在左部分视图中，包含目标节点view1、view2、view3，view2和view3是由父节点split分割得到，view1和父节点split是由另一个父节点split分割得到，顶端父节点split可以被视为view2和view3的祖父节点，view1关联右部分视图的目标界面元素view1，view2关联右部分视图的目标界面元素view2，view3关联右部分视图的目标界面元素view3，通过对左部分视图中各个节点进行联动控制，能够相应的调整控制右部分视图中若干个界面元素的布局信息，对此不做限制。

在步骤S12中，根据目标界面元素和目标布局信息，生成目标界面。

上述在确定目标布局树之中，可以根据目标布局树中目标节点所关联的目标界面元素，以及描述目标节点的目标布局信息，来生成一个界面，该界面即可以被称为目标界面。

一些实施例中，可以在初始界面中布局若干个目标界面元素，而后，基于目标布局信息调整相应目标界面元素在初始界面中的位置和尺寸等，调整后即可以生成目标界面，对此不做限制。

在本公开的一些实施例中，在执行根据目标界面元素和目标布局信息，生成目标界面的过程中，还可以确定初始界面，并根据目标界面元素和目标布局信息，确定布局数组，其中，布局数组包含不同目标界面元素之间的引用关系，以及根据引用关系在初始界面之中布置目标界面元素，并根据目标布局信息调整初始界面中已布置的目标界面元素，以得到目标界面，有效提升界面布局的准确性。

举例而言，上述在确定目标布局树之后，可以处理目标布局树包含的配置数据（为目标节点和目标布局信息的一种可选示例），可以通过对布局树进行递归，生成平铺的带有父子节点引用的布局数组，布局数组包含不同目标界面元素之间的引用关系，引用关系表示初始界面元素和目标界面元素之间的分割关系，而后，利用平铺的布局数组遍历渲染目标布局树中的各个节点，根据节点的类型（比如是父节点还是子节点）渲染对应文档对象模型（Document Object Model，DOM）结构，并进行拼装，形成整体目标界面，对此不做限制。

本实施例中，由于目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

图3是根据本公开的另一些实施例示出的一种界面布局方法的流程图，本实施例中提供了一种对初始界面元素进行分割以生成目标布局树的实施方式，如图3所示，界面布局方法用于电子设备中，包括以下步骤:

在步骤S31中，确定初始布局树，其中，初始布局树包括：初始子节点，初始子节点与初始界面元素相关联，初始子节点由初始界面元素的初始布局信息描述，初始子节点具有初始祖父节点。

针对S31的描述说明可以具体参见上述实施例，在此不再赘述。

在步骤S32中，如果布局指示信息指示对初始界面元素进行分割，则生成初始子节点的初始父节点，并连接初始祖父节点和初始父节点。

一些实施例中，由于初始界面元素和初始子节点相关联，二者可以被互相联动控制，则在布局指示信息指示对初始界面元素进行分割的情况下，对应于初始布局树中，即可以表示对相应初始子节点进行分割，对此不做限制。

一些实施例中，布局指示信息，可以是响应于开发人员在界面上点击初始界面元素，并作出示意对初始界面元素进行分割所生成的指示信息，或者布局指示信息，也可以直接是响应于开发人员对初始布局树中的初始子节点作出示意对其进行分割所生成的指示信息，本公开实施例中对布局指示信息的具体指示方式不作限制，支持采用任意可能的方式来确定布局指示信息，对此不做限制。

在步骤S33中，生成属于初始父节点的第一子节点，其中，初始父节点、和/或初始子节点，和/或第一子节点被作为待描述节点。

其中，第一子节点是指需要分割出的新节点。也即是说，当选择对布局中的某一个节点（初始子节点的一个可选示例）进行分割时，先对该节点（初始子节点的一个可选示例）进生成一个父节点（初始父节点的一个可选示例），并和其祖父节点（初始祖父节点的一个可选示例）进行连接，并将布局中原节点（初始子节点的一个可选示例）作为新生成的父节点（初始父节点的一个可选示例）的一个孩子节点，要分割出的新节点（第一子节点的一个可选示例）作为父节点（初始父节点的一个可选示例）的另一个孩子节点，对此不做限制。

如图4所示，图4是本公开实施例中节点分割示意图。图4中左半部分可以是一个初始布局树，在对初始布局树进行调整后，所得布局树可以是目标布局树，目标布局树如图4中右半部分所示，图4中示出了对初始布局树中的初始子节点进行分割处理，以得到目标布局树的过程，view1表示初始子节点，顶端的split为初始祖父节点，对初始子节点view1生成一个初始父节点split（从上至下数第三层的split），连接初始父节点split和初始祖父节点split，并生成属于初始父节点split的第一子节点view4，将初始子节点view1和第一子节点view4均作为初始父节点split（从上至下数第三层的split）的孩子节点，从而实现对初始子节点view1的高效、便捷地分割。

一些实施例中，在对初始子节点进行分割之后，可以还会具有对各个节点所关联界面元素的尺寸以及位置进行调整的需求，则本公开实施例中，还可以将上述初始父节点、和/或初始子节点，和/或第一子节点均作为待描述节点，并支持对待描述节点的初始布局信息进行个性化调整。

在步骤S34中，将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树。

一些实施例中，可以根据上述目标布局树生成一个预览界面，预览界面上包含若干个界面元素的初始布局信息，即，预览界面上的若干个界面元素，可以是分别基于其初始布局信息预布局得到，而后可以对鼠标事件进行监听，鼠标事件可以是开发人员基于布局需求对鼠标操作触发，比如开发人员可以基于布局需求控制鼠标操作预览界面中每个界面元素的宽边，左右拖动，以支持滑动调整大小，如果检测到鼠标动作暂停，可以利用浏览器getBoundingClientRect属性（getBoundingClientRect属性能够获取到浏览器界面的尺寸数据），并与鼠标事件中光标当前位置坐标（x、y）来计算分割比例，利用层叠样式表3（Cascading Style Sheets 3，CSS3）弹性盒子（是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式），来动态调整预览界面中若干个界面元素的初始布局信息，对此不做限制。

如图5所示，图5是本公开实施例中鼠标事件监听示意图，可以控制鼠标拖动分割条，以控制预览界面中不同界面元素的初始布局信息，并且不同界面元素之间的初始布局信息是相互联动的，多个界面元素共同占满整个预览界面。在图5中，getBoundingClientRect.left（获取绑定对象（例如是界面元素）的左侧位置），用于获得界面元素的左侧相对浏览器视窗的位置，getBoundingClientRect.width（获取绑定对象的宽度），用于获得界面元素的宽度数据，mouseEvent.x是表示鼠标事件mouseEvent对象的变量，mouseEvent.x例如是表示鼠标事件mouseEvent对象在x坐标轴上的坐标值，flex-basis（弹性伸缩基准）属性用于设置或检索弹性盒伸缩基准值，对此不作限制。

一些实施例中，上述在动态调整预览界面中若干个界面元素的初始布局信息之后，可以根据调整所得目标布局信息更新待描述节点的初始布局信息，其中，待描述节点的初始布局信息是指该待描述节点所关联界面元素的初始布局信息，待描述节点是上述初始父节点、和/或初始子节点，和/或第一子节点中的一个或多个，对此不做限制。

一些实施例中，如果对预览界面中若干个界面元素的初始布局信息进行优化调整，还可以联动地对目标布局树中用于描述相应节点的初始布局信息进行更新，如果对目标布局树中用于描述各个节点的初始布局信息进行更新，同样可以联动地对预览界面中若干个界面元素的初始布局信息进行优化调整，实现基于目标布局树控制若干个界面元素的布局信息，对此不做限制。

在步骤S35中，根据目标界面元素和目标布局信息，生成目标界面。

针对S35的描述说明可以具体参见上述实施例，在此不再赘述。

本实施例中，由于目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。通过确定初始布局树，其中，初始布局树包括：初始子节点，初始子节点与初始界面元素相关联，初始子节点由初始界面元素的初始布局信息描述，初始子节点具有初始祖父节点，在布局指示信息指示对初始界面元素进行分割的情况下，生成初始子节点的初始父节点，并连接初始祖父节点和初始父节点，生成属于初始父节点的第一子节点，其中，初始父节点、和/或初始子节点，和/或第一子节点被作为待描述节点，将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树，支持灵活地对初始界面元素进行分割，提升分割灵活性和分割效率，从而提升整体界面布局便捷性和效率。

图6是根据本公开的另一些实施例示出的一种界面布局方法的流程图，本实施例中提供了一种对初始界面元素进行删除以生成目标布局树的实施方式，如图6所示，界面布局方法用于电子设备中，包括以下步骤:

在步骤S61中，确定初始布局树，其中，初始布局树包括：多个初始子节点，初始子节点与初始界面元素相关联，初始子节点由初始界面元素的初始布局信息描述。

在步骤S62中，如果布局指示信息指示对初始界面元素进行删除，则删除与初始界面元素关联的初始子节点，并将多个初始子节点中的剩余初始子节点，和/或剩余初始子节点的初始父节点作为待描述节点。

一些实施例中，由于初始界面元素和初始子节点相关联，二者可以被互相联动控制，则在布局指示信息指示对初始界面元素进行删除的情况下，对应于初始布局树中，即可以表示对相应初始子节点进行删除，对此不做限制。

另一些实施例中，由于初始界面元素和初始子节点相关联，二者可以被互相联动控制，则在布局指示信息指示对相应初始子节点进行删除的情况下，则可以联动地对所删除初始子节点关联的初始界面元素进行删除，对此不做限制。

一些实施例中，布局指示信息，可以是响应于开发人员在界面上操作删除初始界面元素所生成的指示信息，或者布局指示信息，也可以直接是响应于开发人员对初始布局树中的初始子节点进行删除所生成的指示信息，本公开实施例中对布局指示信息的具体指示方式不作限制，支持采用任意可能的方式来确定布局指示信息，对此不做限制。

本公开实施例中，如果布局指示信息指示对初始界面元素进行删除，则删除与初始界面元素关联的初始子节点之后，则相应地，对剩余初始子节点，和/或剩余初始子节点的初始父节点的初始布局信息进行联动调整，对此不做限制。

本公开实施例中，可以将多个初始子节点中的剩余初始子节点，和/或剩余初始子节点的初始父节点作为待描述节点，而后调整待描述节点的初始布局信息，对此不做限制。

在步骤S63中，将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树。

一些实施例中，可以基于上述图5所示监听鼠标事件的方式实现将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树，对此不做限制。

在步骤S64中，根据目标界面元素和目标布局信息，生成目标界面。

本实施例中，由于目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。通过确定初始布局树，其中，初始布局树包括：多个初始子节点，初始子节点与初始界面元素相关联，初始子节点由初始界面元素的初始布局信息描述，如果布局指示信息指示对初始界面元素进行删除，则删除与初始界面元素关联的初始子节点，并将多个初始子节点中的剩余初始子节点，和/或剩余初始子节点的初始父节点作为待描述节点，将待描述节点的初始布局信息调整为目标布局信息，得到目标节点，其中，多个目标节点形成目标布局树，支持灵活地对初始界面元素进行删除，提升删除操作的灵活性和删除效率，从而提升整体界面布局便捷性和效率。

本公开实施例中提供了至少一种确定目标布局信息的确定方式，目标界面元素的目标布局信息，可以是目标界面元素的尺寸信息和目标界面元素在目标界面中的位置信息中至少一项，对此不做限制。

其中，尺寸信息和/或位置信息，可以是需求设置至的尺寸值和/或位置坐标，对此不做限制。

在本公开的一些实施例中，可以基于以下方式中至少之一确定目标布局信息：基于布局信息采集接口采集目标布局信息；根据布局指示信息，确定目标布局信息；根据元素控制信息，确定目标布局信息，其中，元素控制信息用于对预览界面中初始界面元素进行控制，预览界面由初始界面元素和初始布局信息布局得到，能够有效提升目标布局信息确定的灵活性，适用于个性化的界面布局场景。

一些实施例中，可以提供布局信息采集接口，基于布局信息采集接口采集开发人员输入的布局信息作为目标布局信息，对此不做限制。

另一些实施例中，可以监测是否接收到布局指示信息，如果接收到布局指示信息，则可以对布局指示信息进行解析，确定所指示的尺寸值和/或位置坐标，将所指示的尺寸值和/或位置坐标作为目标布局信息，或者，如果对布局指示信息进行解析，确定待对某个初始界面元素进行删除，可以确定初始界面元素所关联初始子节点的标识，作为目标布局信息，对此不做限制。

在本公开的一些实施例中，在执行根据布局指示信息，确定目标布局信息的过程中，如果布局指示信息指示对初始界面元素进行分割，则根据初始界面元素的初始布局信息，生成目标布局信息，有效支持对分割所得目标界面元素的目标布局信息进行联动控制。

举例而言，布局指示信息指示将初始界面元素A分割为目标界面元素1和目标界面元素2，则可以根据初始界面元素A的尺寸信息和/或位置信息，来确定目标界面元素1的尺寸信息和/或位置信息，作为与目标界面元素1对应的目标布局信息，或者根据初始界面元素A的尺寸信息和/或位置信息，来确定目标界面元素2的尺寸信息和/或位置信息，作为与目标界面元素2对应的目标布局信息，对此不做限制。

在本公开的一些实施例中，在执行根据布局指示信息，确定目标布局信息的过程中，如果布局指示信息指示对初始界面元素进行删除，则根据初始界面元素的初始布局信息以及剩余界面元素的初始布局信息，生成目标布局信息，其中，剩余界面元素是未被删除的初始界面元素，实现在对初始界面元素进行删除处理后，有效支持对剩余界面元素的目标布局信息进行联动控制。

举例而言，布局指示信息指示对初始界面元素A进行删除，则可以根据初始界面元素A的尺寸信息和/或位置信息，以及未被删除的初始界面元素B、初始界面元素C、初始界面元素D的初始布局信息，来确定整体界面中各个未被删除的初始界面元素的尺寸信息和/或位置信息，将各个未被删除的初始界面元素的尺寸信息和/或位置信息共同作为目标布局信息，对此不做限制。

另一些实施例中，还可以根据元素控制信息，确定目标布局信息，其中，元素控制信息用于对预览界面中初始界面元素进行控制，预览界面由初始界面元素和初始布局信息布局得到，有效提升目标布局信息确定的灵活性，支持基于对预览界面中初始界面元素进行控制，来自动化地解析得到目标布局信息。

一些实施例中，可以基于初始界面元素和其初始布局信息生成一个预览界面，基于该预览界面检测目标布局信息，对此不做限制。

一些实施例中，如果元素控制信息用于将预览界面中初始界面元素拖拽至目标布局区域，则根据目标布局区域和/或与目标布局区域相关的其他布局区域，确定目标布局信息，其中，其他布局区域是其他初始界面元素在预览界面中的布局区域，支持灵活地对初始界面元素进行调整控制，并基于调整控制的元素控制信息自动化地确定出目标布局信息。

举例而言，可以基于初始布局树生成一个预览界面，实现拖拽与布局重组，拖拽时先将拖拽的初始界面元素从初始布局树中剪切出来，并拷贝其DOM元素（初始界面元素的一个可选示例），利用拷贝的拖拽DOM元素，实现拖拽的预览效果，而后，在鼠标移动过程中进行碰撞检测，确认拖拽后DOM元素的新位置信息和/或新坐标信息，拖拽结束，根据碰撞检测计算的结果，将拖拽后DOM元素插入初始布局树中的相应位置，改变布局，所确认的拖拽后DOM元素的新位置信息和/或新坐标信息，可以是目标布局信息的一种可选示例，对此不做限制。

如图7所示，图7是本公开一实施例中拖拽效果示意图，比如，可以将初始界面元素view3拖拽至目标位置处，拖拽后位置区域可以被称为目标布局区域，与目标布局区域相关的其他布局区域，可以是初始界面元素view1的布局区域、初始界面元素view2的布局区域等，相应的，在对预览界面中初始界面元素view3进行拖拽后，可以对应自动化地修改初始布局树中的引用关系，拖拽后效果可以如图8所示，图8是本公开另一实施例中拖拽效果示意图，拖拽后初始界面元素view1的尺寸信息和/或位置信息、初始界面元素view2的尺寸信息和/或位置信息，以及初始界面元素view3的尺寸信息和/或位置信息，均可以为目标布局信息的一种可选示例，对此不做限制。

如图9所示，图9是本公开实施例中一种预览界面示意图，该预览界面中包括多个可拖拽区域，可拖拽区域即为初始界面元素的一个可选示例，每个可拖拽区域具有一个对应的布局信息调整接口，点击该布局信息调整接口，可以呈现出如图9中模块91所示的选择项，包括水平分割、垂直分割，以及删除，可以基于选择项选择进行分割或者删除，对此不做限制。

在本公开的一些实施例中，如果元素控制信息用于对预览界面中初始界面元素的初始布局信息进行调整，则获取元素控制信息所指示的布局信息，并根据所指示的布局信息和未被调整的初始界面元素的初始布局信息，确定目标布局信息，实现灵活地确定出目标布局信息。

举例而言，如果预览界面中包含初始界面元素A，如果元素控制信息用于对初始界面元素A的位置信息和/或尺寸信息进行调整，则可以根据调整后初始界面元素A的位置信息和/或尺寸信息，以及未被调整的初始界面元素B的位置信息和/或尺寸信息，来确定整体界面中各个初始界面元素的尺寸信息和/或位置信息，将所确定的各个初始界面元素的尺寸信息和/或位置信息共同作为目标布局信息，未被调整的初始界面元素B和已被调整的初始界面元素A可以是由同一个初始界面元素分割得到，或者由不同的初始界面元素分割得到，对此不做限制。

如图10所示，图10是本公开另一实施例提供的界面布局流程示意图，可以首先获取数据源，比如由开发人员选择数据源，以及获取数据源中的通道信息，通道可以是初始界面元素的一个可选示例，数据源包含相应初始界面元素的初始布局信息，而后配置界面，比如可以显示或隐藏某通道的渲染，切分出新布局块，实现位置拖拽，而后播放查看预览界面，比如可以以播放、暂停、倍速、跳帧的方式查看，对此不做限制。

如图11a和图11b所示，图11a是本公开一实施例中界面布局时序示意图，图11b是本公开另一实施例中界面布局时序示意图，在图11a中，可以获取用户输入的数据源，由socket数据处理模块拉取数据通道列表list（包含若干个数据通道，数据通道为初始界面元素的一个可选示例），可以返回数据通道list，对数据通道进行分类展示，比如包含行车、泊车、自定义，而后勾选部分通道，通道里过滤出所有的传感器数据（初始布局信息的一种可选示例），而后进行二维/三维可视化组件渲染，显示渲染所得预览界面，预览界面可以以首帧数据形式呈现，随着对预览界面中初始界面元素的动态调整，动态可视化呈现其他帧数据，对此不做限制。在图11b中，可以开始播放下一帧数据，开始对预览界面中的布局块（初始界面元素的一个可选示例）进行可视化绘制，输入绘制完成的布局块标识，监听绘制完成事件，所有布局块标识均绘制完毕，播放下一帧数据，还可以支持对布局块进行设置更改，获取新的位置信息和/或尺寸信息，而后进行二维/三维可视化组件渲染，显示渲染所得目标界面，对此不做限制。

图12是根据本公开的一些实施例示出的一种界面布局装置的结构图。

如图12所示，该界面布局装置120，包括：

获取单元1201，用于获取目标布局树，其中，目标布局树包括：多个目标节点，目标节点与目标界面元素相关联，目标节点由目标界面元素的目标布局信息描述，不同目标界面元素由至少一个初始界面元素分割得到。

生成单元1202，用于根据目标界面元素和目标布局信息，生成目标界面。

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

本实施例中，由于目标界面元素是由初始界面元素分割得到，而不是新增拖拽至界面中，不同目标界面元素由至少一个初始界面元素分割之后，不同目标界面元素的位置和坐标情况之间可以相应联动调整，随着目标界面元素数量的增多，并不会导致界面向下产生滚动，从而能够有效提升界面布局调整的灵活性、提升界面布局的便捷性和效率。

图13是一示例性实施例示出的一种车辆的功能框图示意图。例如，车辆1300可以是混合动力车辆，也可以是非混合动力车辆、电动车辆、燃料电池车辆或者其他类型的车辆。车辆1300可以是自动驾驶车辆、半自动驾驶车辆或者非自动驾驶车辆。

参照图13，车辆1300可包括各种子系统，例如，信息娱乐系统1310、感知系统1320、决策控制系统1330、驱动系统1340以及计算平台1350。其中，车辆1300还可以包括更多或更少的子系统，并且每个子系统都可包括多个部件。另外，车辆1300的每个子系统之间和每个部件之间可以通过有线或者无线的方式实现互连。

在一些实施例中，信息娱乐系统1310可以包括通信系统，娱乐系统以及导航系统等。

感知系统1320可以包括若干种传感器，用于感测车辆1300周边的环境的信息。例如，感知系统1320可包括全球定位系统（全球定位系统可以是GPS系统，也可以是北斗系统或者其他定位系统）、惯性测量单元（inertial measurement unit，IMU）、激光雷达、毫米波雷达、超声雷达以及摄像装置。

决策控制系统1330可以包括计算系统、整车控制器、转向系统、油门以及制动系统。

驱动系统1340可以包括为车辆1300提供动力运动的组件。在一个实施例中，驱动系统1340可以包括引擎、能量源、传动系统和车轮。引擎可以是内燃机、电动机、空气压缩引擎中的一种或者多种的组合。引擎能够将能量源提供的能量转换成机械能量。

车辆1300的部分或所有功能受计算平台1350控制。计算平台1350可包括至少一个处理器1351和存储器1352，处理器1351可以执行存储在存储器1352中的指令1353。

处理器1351可以是任何常规的处理器，诸如商业可获得的CPU。处理器还可以包括诸如图像处理器（Graphic Process Unit，GPU），现场可编程门阵列（Field ProgrammableGate Array，FPGA）、片上系统（System on Chip，SOC）、专用集成芯片（ApplicationSpecific Integrated Circuit，ASIC）或它们的组合。

存储器1352可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器（SRAM），电可擦除可编程只读存储器（EEPROM），可擦除可编程只读存储器（EPROM），可编程只读存储器（PROM），只读存储器（ROM），磁存储器，快闪存储器，磁盘或光盘。

除了指令1353以外，存储器1352还可存储数据，例如道路地图，路线信息，车辆的位置、方向、速度等数据。存储器1352存储的数据可以被计算平台1350使用。

在本公开实施例中，处理器1351可以执行指令1353，以完成上述的界面布局方法的全部或部分步骤。

本公开还提供一种计算机可读存储介质，其上存储有计算机程序指令，该程序指令被处理器执行时实现本公开提供的界面布局方法的步骤。

此外，在本文中使用词语“示例性的”以表示充当示例、实例、示图。在本文中被描述为“示例性的”任何方面或设计都不一定理解为与其他方面或设计相比是有利的。相反，使用词语示例性的旨在以具体的方式呈现概念。如在本文中所使用的，术语“或”旨在表示包括性的“或”而不是排他性的“或”。即，除非另外指定，或者从上下文中清楚，否则“X应用A或B”旨在表示自然的包括性排列中的任何一种排列。即，如果X应用A；X应用B；或者X应用A和B两者，则“X应用A或B”在前述实例中的任何一个实例下都满足。另外，除非另外指定或者从上下文中清楚指向单数形式，否则如在该申请和所附权利要求中所使用的冠词“一”和“一个”通常被理解为表示“一个或多个”。

同样，尽管已经关于一个或多个实现示出并描述了本公开，但是在阅读并理解了该说明书和附图之后，本领域技术人员将想到等同的变型和修改。本公开包括所有这样的修改和变型，并且仅由权利要求的范围来限制。特别关于由上文所描述的组件（例如，元件、资源等）执行的各种功能，除非另外指出，否则用于描述这样的组件的术语旨在对应于执行所描述的组件的具体功能的任何组件（功能上等价的），即使结构上不等价于所公开的结构。另外，尽管可以已经关于几个实现中的仅仅一个而公开了本公开的特定的特征，但是如可以是期望的并且有利于任何给定的或特定的应用的那样，这样的特征可以与其它实现的一个或多个其它特征相结合。此外，就在具体实施方式或者权利要求中所使用的“包括”、“拥有”、“具有”、“有”、或其变型而言，这样的术语旨在作为类似于术语“包含”的方式是包括性的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

应当理解，除非另外特别指出，否则本文描述的各种本公开的一些实施例的特征可以彼此组合。如在本文中使用的，术语“和/或”包括相关所列项中的任一者以及任何两者或更多者的任何组合；类似地，“.......中的至少一个”包括相关所列项中的任一者以及任何两者或更多者的任何组合。另外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本文描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

Claims (13)

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

获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；

根据所述目标界面元素和所述目标布局信息，生成目标界面。

2.根据权利要求1所述的方法，其特征在于，所述获取目标布局树，包括：

确定初始布局树，其中，所述初始布局树包括：初始子节点，所述初始子节点与所述初始界面元素相关联，所述初始子节点由所述初始界面元素的初始布局信息描述；

根据布局指示信息和所述初始布局树中的所述初始子节点，确定待描述节点；以及

将所述待描述节点的初始布局信息调整为目标布局信息，得到所述目标节点，其中，多个所述目标节点形成所述目标布局树。

3.根据权利要求2所述的方法，其特征在于，所述初始子节点具有初始祖父节点；所述根据布局指示信息和所述初始布局树中的所述初始子节点，确定待描述节点，包括：

如果所述布局指示信息指示对所述初始界面元素进行分割，则生成所述初始子节点的初始父节点，并连接所述初始祖父节点和所述初始父节点；

生成属于所述初始父节点的第一子节点，其中，所述初始父节点、和/或所述初始子节点，和/或所述第一子节点被作为所述待描述节点。

4.根据权利要求2所述的方法，其特征在于，所述初始子节点的数量是多个；所述根据布局指示信息和所述初始布局树中的所述初始子节点，确定待描述节点，包括：

如果所述布局指示信息指示对所述初始界面元素进行删除，则删除与所述初始界面元素关联的所述初始子节点，并将多个所述初始子节点中的剩余初始子节点，和/或所述剩余初始子节点的初始父节点作为所述待描述节点。

5.根据权利要求3或4所述的方法，其特征在于，所述目标布局信息是基于以下方式中至少之一确定：

基于布局信息采集接口采集目标布局信息；

根据所述布局指示信息，确定所述目标布局信息；

根据元素控制信息，确定所述目标布局信息，其中，所述元素控制信息用于对预览界面中初始界面元素进行控制，所述预览界面由所述初始界面元素和所述初始布局信息布局得到。

6.根据权利要求5所述的方法，其特征在于，所述根据所述布局指示信息，确定所述目标布局信息，包括：

如果所述布局指示信息指示对所述初始界面元素进行分割，则根据所述初始界面元素的初始布局信息，生成所述目标布局信息；

如果所述布局指示信息指示对所述初始界面元素进行删除，则根据所述初始界面元素的初始布局信息以及剩余界面元素的初始布局信息，生成所述目标布局信息，其中，所述剩余界面元素是未被删除的初始界面元素。

7.根据权利要求5所述的方法，其特征在于，所述根据元素控制信息，确定所述目标布局信息，包括：

如果所述元素控制信息用于将所述预览界面中所述初始界面元素拖拽至目标布局区域，则根据所述目标布局区域和/或与所述目标布局区域相关的其他布局区域，确定所述目标布局信息，其中，所述其他布局区域是其他初始界面元素在所述预览界面中的布局区域。

8.根据权利要求5所述的方法，其特征在于，所述根据元素控制信息，确定所述目标布局信息，包括：

如果所述元素控制信息用于对所述预览界面中所述初始界面元素的初始布局信息进行调整，则获取所述元素控制信息所指示的布局信息；

根据所述所指示的布局信息和未被调整的所述初始界面元素的初始布局信息，确定所述目标布局信息。

9.根据权利要求1所述的方法，其特征在于，所述根据所述目标界面元素和所述目标布局信息，生成目标界面，包括：

确定初始界面；

根据所述目标界面元素和所述目标布局信息，确定布局数组，其中，所述布局数组包含不同所述目标界面元素之间的引用关系；

根据所述引用关系在所述初始界面之中布置所述目标界面元素，并根据所述目标布局信息调整所述初始界面中已布置的所述目标界面元素，以得到所述目标界面。

10.根据权利要求1所述的方法，其特征在于，所述目标界面元素的目标布局信息，包括以下至少一项：

目标界面元素的尺寸信息；

目标界面元素在目标界面中的位置信息。

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

获取单元，用于获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；

生成单元，用于根据所述目标界面元素和所述目标布局信息，生成目标界面。

12.一种车辆，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

实现权利要求1~10中任一项所述方法的步骤。

13.一种非临时性计算机可读存储介质，当所述存储介质中的指令由移动终端的处理器执行时，使得移动终端能够执行一种界面布局方法，所述方法包括：

获取目标布局树，其中，所述目标布局树包括：多个目标节点，所述目标节点与目标界面元素相关联，所述目标节点由所述目标界面元素的目标布局信息描述，不同所述目标界面元素由至少一个初始界面元素分割得到；

根据所述目标界面元素和所述目标布局信息，生成目标界面。

Images