CN110221899A - 一种用户界面的调节方法、装置及系统 - Google Patents

Abstract

本发明公开了一种用户界面的调节方法、装置及系统，可以实时监测用户界面对应的界面描述文件中界面元素对应的布局样式信息的变化情况，若检测到第一界面元素的布局样式信息发生变化，对视图结构中第一界面元素的布局样式信息进行更新，并基于更新后的视图结构中第一界面元素的布局样式信息调整第一界面元素在用户界面的显示状态。在此过程中，无需重新调试布局样式信息未发生变更的界面元素的显示状态，也无需重新编译界面描述文件，无需重新生成视图结构，所以可以快速的观看到布局样式信息发生变更的第一界面元素对应的调整后的显示状态，提高了开发效率。

Description

一种用户界面的调节方法、装置及系统

技术领域

本申请涉及数据网络通信领域，更具体的说，是涉及一种用户界面的调节方法、装置及系统。

背景技术

目前基于XML(Extensible Markup Language，可扩展标记语言)文件对UI(UserInterface，用户界面)进行样式布局的具体过程如下：技术人员编写XML文件，XML文件为界面描述文件，界面描述文件用于描述用户界面中每个界面元素在用户界面中的布局样式信息，每个界面元素在用户界面中的布局样式信息即为每个界面元素在用户界面的显示状态。界面元素的类型有多种，例如，界面元素可以为窗口或对话框或菜单或滚动条或图片。

界面元素的布局样式信息包括布局信息以及样式信息，其中，布局信息包括但不限于：界面元素在用户界面中的位置；样式信息包括但不限于：界面元素的尺寸、界面元素的背景颜色、界面元素包含的内容(例如字体)、界面元素包含的内容的颜色以及界面元素包含的内容在界面元素中的位置等界面元素的显示属性。界面描述文件还可以用于描述每个界面元素对应的类名、界面元素的名称、界面元素的类型、事件监听类名、界面元素对应的响应事件；界面自动生成器根据界面描述文件对用户界面中的每个界面元素进行布局，并增加界面元素的事件监听功能。

在编写界面描述文件的过程中，可以采用CSS(Cascading Style Sheets，层叠样式表)属性编写界面元素的样式信息，采用Flex(Flexible，灵活)排版界面元素的布局信息。

目前在用户界面开发过程中，若需要对用户界面的布局样式进行变更，需要变更界面描述文件中的布局样式信息。若需要查看样式信息和/或布局信息更新后用户界面的布局样式的变化情况，需要界面自动生成器根据更新后的界面描述文件对界面中的每个界面元素重新进行布局，并增加界面元素的事件监听功能。

发明内容

有鉴于此，本申请提供了一种用户界面的调节方法、装置及系统，以克服现有技术中由于界面描述文件变更时需要重新编译界面描述文件且重新生成视图结构，导致开发用户界面的效率低下的问题。

为实现上述目的，本申请提供如下技术方案：

一种用户界面的调节方法，包括：

监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

一种用户界面的调节装置，包括：

监测模块，用于监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

确定模块，用于若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

更新模块，用于基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

调节模块，用于基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

一种电子设备，包括：

存储器，用于存储程序；

处理器，用于执行所述程序，所述程序具体用于：

监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

经由上述的技术方案可知，与现有技术相比，本申请公开了一种用户界面的调节方法，可以实时监测用户界面对应的界面描述文件中界面元素对应的布局样式信息的变化情况，若检测到第一界面元素的布局样式信息发生变化，对视图结构中第一界面元素的布局样式信息进行更新，并基于更新后的视图结构中第一界面元素的布局样式信息调整第一界面元素在用户界面的显示状态。在此过程中，无需重新调试布局样式信息未发生变更的界面元素的显示状态，也无需重新编译界面描述文件，无需重新生成视图结构，所以可以快速的观看到布局样式信息发生变更的第一界面元素对应的调整后的显示状态，提高了开发效率。

附图说明

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

图1为本申请实施例提供的一种用户界面的调节方法流程图；

图2a-2d示例了一种调节用户界面的过程示意图；

图3a-3b示例了新增界面元素导致其他已有界面元素的布局样式信息发生变化时，得到更新后的视图结构的过程示意图；

图4a-4b示例了第一界面元素为已有界面元素且位于视图结构中的原始位置未变更时，得到更新后的视图结构的过程示意图；

图5a-5b示例了第一界面元素为已有界面元素且位于视图结构中的原始位置变更时，得到更新后的视图结构的过程示意图；

图6a-6c示例了第一界面元素为待删除界面时，得到更新后的视图结构的过程示意图；

图7示例了通过句柄监测界面元素对应的布局样式信息的变化情况的过程示意图；

图8示例了通过电子设备的显示区域显示第一界面元素的布局样式信息及显示状态的示意图；

图9示例了一种电子设备的第二区域为第一区域的局部区域示意图；

图10a-10c示例了通过触按两个区域分别对应的按键，完成第一区域与第二区域的切换的过程示意图；

图11为本申请实施例提供的一种用户界面的调节装置结构示意图；

图12为本申请实施例提供的一种用户界面的调节设备硬件结构框图。

具体实施方式

为了引用和清楚起见，下文中使用的技术名词的说明、简写或缩写总结如下：

用户界面(User Interface，UI)：软件系统的重要组成部分，可以用来接收用户的输入信息并显示程序处理的结果。

界面描述(Extensible Markup Language，XML)文件：又称可扩展标记语言文件，可以用于描述用户界面中每个界面元素在用户界面中的布局样式信息，还可以用于描述每个界面元素对应的类名、界面元素的名称、界面元素的类型、事件监听类名、界面元素对应的响应事件。界面描述文件可以用XML编辑器来编写，也可以从其他数据源自动生成。

界面自动生成器：可以根据界面描述文件对用户界面中的每个界面元素进行样式布局，并可以增加界面元素的事件监听功能(监听并处理对应界面描述文件中界面元素的事件，如按钮点击事件等)，自动生成所需要的用户界面；该过程具体包括：在根据界面描述文件对用户界面中的每个界面元素进行样式布局的过程中，界面自动生成器可以根据界面描述文件中的界面元素的事件的属性值，把事件监听功能动态加载到用户界面中，并与对应的界面元素绑定，从而若某一界面元素的事件被触发，则会执行事件监听功能所定义的操作。界面自动生成器除了负责生成用户界面外，还负责保存用户界面中的所有界面元素的信息及一些用户界面中使用的全局变量，供事件监听功能中的方法使用。

CSS(Cascading Style Sheets，层叠样式表)：技术人员编写XML文件的过程中所使用的一种编程语言，可以采用标准CSS属性编写界面元素的样式信息。例如，可选的，在CSS中，可以使用6位十六进制数字来编写界面元素的字体颜色，其中每2位分别表示红色(R)、绿色(G)和蓝色(B)成分。

Flex(Flexible，灵活)：技术人员编写XML文件的过程中所使用的一种编程语言。可以采用Flex排版界面元素的布局信息，例如，可以使用Flex属性编写界面元素在用户界面中的位置。

Hot Reload(模块热重载)技术：本申请为一种支持模块热重载的布局样式的调节方法、装置及系统，其中，模块热重载技术的思想是客户端运行时动态注入更新后的界面描述文件，同时不中断客户端的应用程序的正常运行，客户端注入更新后的界面描述文件后，可以通过界面自动生成器自动重新构建视图结构，以便用户快速查看更新效果；此外，通过模块热重载技术可以在更新界面描述文件后自行刷新用户界面，而无需重启应用程序或者手动刷新用户界面。

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

目前的用户界面的调节方法：技术人员编写界面描述文件，在编写该界面描述文件的过程中，可选的，可以采用标准CSS属性编写界面元素的样式信息，采用Flex排版界面元素的布局信息。然后界面自动生成器基于界面描述文件生成视图结构，基于该视图结构可以对用户界面中的每个界面元素进行布局，以此绘制用户界面(可选的，可以根据视图结构，从父节点至子节点依次绘制用户界面)；若需要对用户界面中的某个界面元素的布局样式进行更新，则需要技术人员对界面描述文件中的CSS属性以及Flex参数进行更新，并重新编译更新后的界面描述文件，进而界面自动生成器基于更新后的界面描述文件再次生成视图结构，基于该视图结构再次绘制用户界面。

在上述方法中，使用标准CSS属性以及Flex参数对用户界面中各界面元素的布局样式进行调节，更加灵活且便利。但是，上述方法存在以下缺点：对于用户界面中各界面元素的布局样式，如界面元素的尺寸、背景信息、包含内容、包含内容的颜色、位置等，可能需要反复更新界面描述文件中样式信息和布局信息，例如，更新CSS属性以及Flex参数，每次更新后，界面自动生成器需要根据更新后的界面描述文件重新绘制视图结构，在基于视图结构重新对用户界面中的每个界面元素进行布局，以此绘制用户界面，耗费大量时间，开发效率低下。

针对于此，本申请提供了用户界面的调节方法、装置及电子设备。

上述装置可包括运行于终端中的装置和运行于后台服务器/平台中的装置。

上述终端可以是诸如台式机、移动终端(例如智能手机)、ipad等的电子设备。在一个示例中，运行于终端中的装置可为运行在终端中的客户端，该客户端可以是应用程序客户端，也可以是网页客户端。

下面对本申请提供的用户界面的调节方法进行说明，请参阅图1，为本申请实施例提供的用户界面的调节方法流程图，该方法包括：

步骤S100、监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况。

其中，一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态。

可选的，可以通过界面自动生成器为用户界面对应的界面描述文件中的每个界面元素增加事件监听功能，来监听并处理用户界面对应的界面描述文件中的每个界面元素的事件。其中，用户界面中的每一元素可以称为一个界面元素；界面元素的种类有多种，例如界面元素的种类可以包括用户界面中的窗口、对话框、菜单、滚动条、图片等。

例如：用户界面对应的界面描述文件中的一个界面元素为“按钮”元素，则可以通过界面自动生成器为该“按钮”元素增加按钮点击事件，从而可以监听并处理按钮点击事件，其中，用户每次点击按钮产生一次按钮点击事件。

界面元素的布局样式信息包括布局信息和样式信息。

可选的，界面元素的布局信息可以表征界面元素在用户界面的分布情况。可选的，界面元素的布局信息可以包括界面元素在用户界面中的位置。

可选的，界面元素的样式信息可以表征界面元素在用户界面中的展现形态。可选的，界面元素的样式信息可以包括界面元素的尺寸、界面元素的背景颜色、界面元素包含的内容(例如字体)、界面元素包含的内容的颜色以及界面元素包含的内容在界面元素中的位置等界面元素的显示属性。

步骤S110、若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置。

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息。

在一可选实施例中，视图结构还包括各节点之间的父子关系。

可选的，前述已经说明了，界面描述文件可以用于描述界面元素在用户界面中的布局样式信息，可选的，可以用标准CSS属性编写界面描述文件中界面元素的样式信息，用Flex排版界面元素的布局信息。则可选的，界面描述文件中第一界面元素的布局样式信息发生变更，表征界面描述文件的CSS属性或者Flex参数发生变更。其中，本申请实施例可以将用户界面的界面元素中发生变更的元素定义为第一界面元素，这里的“第一”并不表征界面元素间的顺序关系。

可选的，上述第一界面元素的种类包括但不限于以下几种：第一种，在原始用户界面(变更前的用户界面)中不存在的新增加界面元素；第二种，由于新增加界面元素导致在原始用户界面中已经存在的、布局样式发生变化的界面元素；第三种，在原始用户界面中存在的待删除界面元素；第四种，由于需要删除某个界面元素导致在原始用户界面中已经存在的、布局样式发生变更的界面元素。

可选的，前述已经说明了，界面自动生成器可以基于界面描述文件生成视图结构，基于该视图结构可以绘制用户界面。考虑到现有技术重新编译更新后的界面描述文件，并基于更新后的界面描述文件再次生成视图结构，基于该视图结构再次绘制用户界面，耗费时间且开发效率较低，因此本申请实施例可以首先确定界面描述文件的更新部分(也即，视图结构的更新部分)，并可以仅编译该更新部分并对视图结构的待更新部分进行更新，及基于更新部分的视图结构绘制更新部分的用户界面。基于此，可选的，本申请实施例中若检测到上述变更，可以基于生成的视图结构以及第一界面元素对应的变更后的第一布局样式信息，确定第一界面元素位于视图结构中的第一位置，该第一位置即为视图结构需要进行更新的位置，这里的“第一位置”并不表征界面元素所在视图结构的位置的顺序关系。

可选的，上述视图结构的每一节点对应用户界面中的一个界面元素，且父节点对应的界面元素至少在用户界面的展现面积大于等于子节点对应的界面元素在用户界面的展现面积。可选的，上述视图结构可以为“树状”结构，参见图2a-2b所示，可以基于图2a所示的用户界面所对应的界面描述文件，生成图2b所示的“树状”视图结构(加粗虚线圈除外)。

其中，界面元素a中包含界面元素a1以及界面元素a2两个子节点；界面元素a1包括界面元素a11一个子节点，界面元素a2包括界面元素a21、a22、a23、a24共四个子节点。同理界面元素b，这里不再赘述。

基于界面元素之间的父子关系可以得到图2b所示的视图结构。

可选的，在视图结构中，以界面元素的标识代表相应的界面元素，例如，以标识a代表界面元素a。

步骤S120、基于所述第一位置以及所述第一布局样式信息，更新所述视图结构。

可选的，上述变更后的第一布局样式信息可以为第一界面元素对应的局部布局样式信息，还可以为第一界面元素对应的全部布局样式信息。也即，上述更新视图结构的过程可以是仅更新视图结构中第一界面元素对应的部分布局样式信息，也可以对第一界面元素对应的全部布局样式信息进行更新。

参见图2b所示，假设上述步骤S110确定的第一位置位于图2b加粗虚线圈区域，则可以基于该第一位置以及第一布局样式信息，更新视图结构。例如，若第一布局样式信息为在第一位置增加一个界面元素a1的子节点“a12”，则更新后的视图结构可以如图2c所示。

步骤S130、基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

可选的，考虑到开发用户界面的过程中，可能涉及反复调节用户界面中布局样式信息发生变更的界面元素，在每次调节过程中，仅需要根据布局样式信息发生变更的界面元素，更新已有视图结构，再基于已有视图结构中发生变更的部分结构，调节用户界面中布局样式信息发生变更的界面元素的显示状态，大大提高开发用户界面的效率。

可选的，在每次调节过程中，仅需要根据布局样式信息发生变更的界面元素，更新已有视图结构，再基于已有视图结构，重新绘制用户界面包含的各界面元素的显示状态，相对于现有技术相比，大大提高开发用户界面的效率。

参见图2c-2d所示，可以基于图2c所示的更新后的视图结构，调节用户界面中第一界面元素的显示状态，最终得到图2d所示的用户界面。

本申请公开了一种用户界面的调节方法，可以实时监测用户界面对应的界面描述文件中界面元素对应的布局样式信息的变化情况，若检测到第一界面元素的布局样式信息发生变化，对视图结构中第一界面元素的布局样式信息进行更新，并基于更新后的视图结构中第一界面元素的布局样式信息调整第一界面元素在用户界面的显示状态。在此过程中，无需重新调试布局样式信息未发生变更的界面元素的显示状态，也无需重新编译界面描述文件，无需重新生成视图结构，所以可以快速的观看到布局样式信息发生变更的第一界面元素对应的调整后的显示状态，提高了开发效率。

上述第一界面元素的种类可以包括多种，其中基于每种第一界面元素所对应的第一位置及第一布局样式信息，更新视图结构的过程都不同。基于此，上述步骤S120，基于所述第一位置以及所述第一布局样式信息，更新所述视图结构的过程可以包括以下几种情况。

第一种：第一界面元素可以是新增加的界面元素，则上述更新视图结构的过程可以包括：

若所述第一界面元素为所述用户界面中新增界面元素，将所述第一界面元素添加至所述视图结构中所述第一位置处，以及增加所述视图结构中所述第一界面元素对应的第一布局样式信息，以得到更新后的视图结构。

可选的，视图结构可以包括界面元素的布局样式信息，则若第一界面元素为用户界面中新增加的界面元素，则可以根据第一界面元素在视图结构的第一位置添加该第一界面元素，并增加第一界面元素对应的第一布局样式信息；由该第一界面元素、第一界面元素对应的第一布局样式信息以及原始视图结构信息共同组成更新后的视图结构。

可以理解的是，新增界面元素增加至视图结构的第一位置不同，可能会对原始视图结构中已有界面元素的布局样式产生影响。可选的，上述影响包括但不限于以下三种情况。

情况一，第一界面元素为视图结构中新增加的叶子节点，增加第一界面元素未对其他界面元素的布局样式信息产生影响。

第一界面元素增加至视图结构中时，不会影响原始视图结构中已有界面元素的布局样式。该情况下，对于第一界面元素的增加，可以按照本实施例中介绍在原始视图结构中直接增加第一界面元素以及第一界面元素对应的第一布局样式信息，得到更新后的视图结构。

仍参见图2b-2c所示，当在图2b所示的原始视图结构中确定第一界面元素的第一位置后，可以在该第一位置添加第一界面元素“a12”以及第一界面元素的第一布局样式信息；由于该新增界面元素未对其他已有界面元素的布局样式产生影响，因此可以得到图2c所示的更新后的视图结构。

情况二，第一界面元素为视图结构中新增加的叶子节点，增加第一界面元素对其他界面元素的布局样式信息产生影响，但布局样式信息受到影响的其他界面元素在视图结构中的位置未发生变更。对于布局样式信息受到影响的其他界面元素可以按照第二种方式更新视图结构。

例如，图2d中增加了界面元素a12，界面元素a12为视图结构2b中新增加的叶子节点，但是为了使得界面元素a12不遮挡界面元素a11，可能会更改界面元素a11相对于界面元素a1的相对位置。但是界面元素a11在视图结构中的位置未发生变更。

情况三，第一界面元素为视图结构中新增加的非叶子节点，增加第一界面元素会对其他界面元素的布局样式信息产生影响。

第一界面元素增加至视图结构中时，会影响原始视图结构中已有界面元素的布局样式信息。该情况下，对于第一界面元素，可以按照本实施例中介绍情况一，得到更新后的视图结构；对于受到影响的已有界面元素，可以按照下述第三种方式更新。

参见图3a-3b所示，其示例了新增的第一界面元素导致其他已有界面元素的布局样式信息发生变化时，得到更新后的视图结构的过程示意图。图3a仅为一种情况的示例图，并不造成限定。其中，图3a为原始视图结构，假设新增的第一界面元素为“c”(图3b所示的虚线标识的界面元素)，显然其会影响已有界面元素“a1”和“a11”的布局样式信息，则对于第一界面元素“c”的增加，可以按照本实施例中介绍在图3a所示的原始视图结构中直接增加第一界面元素“c”以及第一界面元素对应的第一布局样式信息；对于受到影响的已有界面元素“a1”和“a11”，可以按照下述第二种或第三种方式更新，最终可以得到更新后的视图结构。

第二种：第一界面元素可以是原始用户界面中已有的界面元素，且布局样式信息变更前后其在视图结构的位置未变更。

可选的，用户界面中可能未增加界面元素且删除界面元素，只是针对已有的第一界面元素的布局样式信息进行变更，但是第一界面元素对应的父子关系未发生变更，可以采用以下方式得到更新后的视图结构。

可选的，用户界面中可能增加新的界面元素(例如，第一种方式中的情况二)或者删除已有的界面元素(例如，第四种方式中的情况二)，导致已有的第一界面元素的布局样式信息发生变更，但是第一界面元素对应的父子关系未发生变更，可以采用以下方式得到更新后的视图结构。

上述更新视图结构的过程可以包括：

若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的原始位置为第一位置(即原始位置未发生变更)，将所述视图结构中所述第一界面元素对应的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构。

可选的，若第一界面元素为用户界面中已有界面元素，则可以首先确定其在视图结构的位置是否发生变更，可选的，确定第一界面元素(已有界面元素)在视图结构的位置未发生变更方法可以包括：基于第一界面元素的标识，在原始视图结构中查找第一界面元素的原始位置；基于第一界面元素对应的第一布局样式信息，确定其在原始视图结构的第一位置；若第一位置与原始位置相同，则可以确定第一界面元素在视图结构中的第一位置未发生变更。

可选的，若通过上述方法确定的第一界面元素在变更前后在视图结构的位置未发生变更，则可以仅将原始视图结构中第一界面元素的原始布局样式信息更新为第一布局样式信息即可得到更新后的视图结构。

参见图4a-4b所示，其示例了第一界面元素为已有界面元素且位于视图结构中的第一位置未变更时，得到更新后的视图结构的过程示意图。其中，图4a为原始视图结构，假设第一界面元素为“a2”，可以通过该标识得到其在图4a中的原始位置，则若通过第一布局样式信息确定的第一位置与该原始位置相同，且第一布局样式信息为“位于第一位置的第一界面元素为黑底白字”，则可以仅将原始视图结构中第一界面元素的原始布局样式信息更新为第一布局样式信息，即可得到如图4b所示的更新后的视图结构。

图4b中为了体现第一界面元素为“a2”对应的显示状态发生变化，在表征第一界面元素的“○”用黑色背景涂黑，字体用白色字体表示。

第三种：第一界面元素可以是原始用户界面中已有的界面元素，且布局样式信息变更后其在视图结构的位置发生变更，则上述更新视图结构的过程可以包括：

若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的位置发生变更，将所述第一界面元素在所述视图结构中的原始位置变更为所述第一位置；将所述视图结构中所述第一界面元素对应的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构。

可选的，若第一界面元素为用户界面中已有界面元素，则可以首先确定其在视图结构的位置是否发生变更，可选的，确定第一界面元素(已有界面元素)在视图结构的位置发生变更方法可以包括：基于第一界面元素的标识，在原始视图结构中查找第一界面元素的原始位置；基于第一界面元素对应的第一布局样式信息，确定其在原始视图结构的第一位置；若第一位置与原始位置不相同，则可以确定第一界面元素在视图结构中的第一位置发生变更。

可选的，若通过上述方法确定的第一界面元素在视图结构的位置发生了变更，则可以在第一位置处添加第一界面元素，并增加第一界面元素对应的第一布局样式信息，并删除原始位置处的第一界面元素及原始布局样式信息，也即将原始位置变更为第一位置，并将原始视图结构中第一界面元素的原始布局样式信息更新为第一布局样式信息，即可得到更新后的视图结构。

参见图5a-5b所示，其示例了第一界面元素为已有界面元素且位于视图结构中的第一位置变更时，得到更新后的视图结构的过程示意图。其中，图5a为原始视图结构(加粗虚线圈除外)。假设第一界面元素为“a24”，其在原始视图结构的原始位置可以参见图5a。若通过第一布局样式信息确定的第一位置为图5a所示的加粗虚线圈区域，则可以确定第一界面元素位于视图结构中的位置发生了变更。进而可以在第一位置处添加第一界面元素，并增加第一界面元素对应的第一布局样式信息，并删除原始位置处的第一界面元素及原始布局样式信息，即可得到图5b所示的更新后的视图结构。

第四种：第一界面元素可以是待删除的界面元素，则上述更新视图结构的过程可以包括：

若所述第一界面元素为所述用户界面中待删除的界面元素，删除所述视图结构中所述第一位置的第一界面元素，以及删除所述第一界面元素对应的原始布局样式信息，以得到更新后的视图结构。

可选的，视图结构可以包括界面元素的布局样式信息，则若第一界面元素为用户界面中待删除的界面元素，则可以根据第一界面元素在视图结构的第一位置，将第一位置处的第一界面元素以及第一界面元素的原始布局样式信息删除，由删除后剩余的视图结构信息作为更新后的视图结构。

可以理解的是，待删除的界面元素所在视图结构的第一位置不同，则删除该待删除界面元素可能会对原始视图结构中已有界面元素的布局样式信息产生影响。可选的，上述影响包括但不限于以下三种情况。

情况一，若第一界面元素为视图结构中的叶子节点，可能不会影响原始视图结构中已有界面元素的布局样式信息。该情况下，对于第一界面元素(待删除界面元素)的删除，可以按照本实施例中介绍在原始视图结构中直接删除第一界面元素以及第一界面元素对应的原始布局样式信息，得到更新后的视图结构。

参见图6a-6b所示，若待删除的第一界面元素为“a11”，由于该待删除的第一界面元素未对其他已有界面元素的布局样式产生影响，则可以直接将其删除，并删除其对应的原始布局样式信息，从而得到图6b所示的更新后的视图结构。

情况二，若第一界面元素为视图结构中的叶子节点，可能会影响原始视图结构中已有界面元素的布局样式信息。例如，删除界面元素a21后，为了用户界面更加美观，可能会调整已有界面元素a22、a23、a24相对于界面元素a2的位置，即在视图结构中的位置未发生变更，但是布局样式信息发生变更。对于此中情况，可以参见第二种方式得到更新后的视图结构。

情况三，若第一界面元素为视图结构中的非叶子节点，在视图结构中删除待删除的界面元素时，会影响已有界面元素在原始视图结构中位置。该情况下，对于第一界面元素(待删除界面元素)的删除，可以按照本实施例中介绍在原始视图结构中直接删除第一界面元素以及第一界面元素对应的原始布局样式信息，得到更新后的视图结构；对于在原始视图结构中位置受到影响的已有界面元素，可以按照第三种方式，得到更新后的视图结构。

参见图6a以及6c所示，图6a为原始视图结构，若待删除的第一界面元素为“b2”，由于该待删除的第一界面元素会对其他已有界面元素“b21”和“b22”的布局样式产生影响，因此对于第一界面元素的删除，可以按照本实施例中介绍在图6a所示的原始视图结构中直接删除第一界面元素“b2”，以及第一界面元素对应的原始布局样式信息；对于受到影响的已有界面元素“b21”和“b22”，可以按照上述第二种或第三种方式(第一界面元素为用户界面中已有界面元素的方式)更新，最终可以得到图6c所示的更新后的视图结构。

可选的，若第一界面元素为父节点(例如第一界面元素为图6a所示的b2)，第一界面元素包括至少一个子节点(例如图6a所示的b21和b22)，那么删除第一界面元素，可以是指仅删除第一界面元素(例如，仅删除图6a中的b2)，但不删除第一界面元素包含的子节点(例如，不删除图6a所示的b21和b22)；可选的，删除第一界面元素，可以是指删除第一界面元素以及其包含的子节点(例如，即删除图6a所示的b2也删除图6a所示的b21和b22)，在这种情况下，一般删除第一界面元素不会影响其他界面元素在视图结构中的位置。

考虑到布局信息和样式信息表征的界面元素在用户界面的内容不同，则本申请实施例中可以将一个界面元素的布局样式信息分为两部分：布局信息以及样式信息；其中，一个界面元素的布局信息可以表征该界面元素在用户界面中的位置，一个界面元素的样式信息可以表征该界面元素在用户界面的显示属性。则第一界面元素对应的第一布局样式信息可以包括第一布局信息和第一样式信息。

可选的，不借助其他已有界面元素，直接确定第一界面元素位于视图结构中的第一位置可能比较困难；因此为了更准确地确定第一位置，本申请实施例可以借助其他已有界面元素。基于此，本申请的又一个实施例中对上述步骤S110，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置的过程进行介绍。

可选的，上述步骤S110，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置的过程具体可以包括：

S1、基于所述第一布局信息，获得所述第一界面元素与至少一个第二界面元素的父子关系；所述第二界面元素为所述用户界面中已有界面元素且该第二界面元素在所述视图结构中的位置未发生变更。

可选的，对于视图结构中具有父子关系的两个界面元素，子节点对应的界面元素的布局信息可以包括该子节点相对于父节点的相对位置。

例如仍参见图2b所示的视图结构，对于具有父子关系的两个界面元素“a”和“a1”，“a1”的布局信息通常用来描述图2a所示的用户界面中，“a1”位于“a”的相对位置。

在上述可选情况下，直接基于第一界面元素的第一布局信息可能不能确定第一位置。为了更准确地确定第一界面元素位于视图结构的第一位置，本步骤可以首先基于第一布局信息，确定视图结构中的至少一个第二界面元素与第一界面元素的父子关系。

其中，上述第二界面元素至少应该具备以下几点要求：其一，本申请实施例需要通过第二界面元素来确定第一界面元素的位置，因此第二界面元素至少应该为变更第一界面元素之前在原始视图结构中已经存在的界面元素；其二，若第一界面元素变更导致第二界面元素在视图结构中的第二位置发生变更，则无法基于第二界面元素在视图结构中的第二位置确定第一界面元素的第一位置，因此若第一界面元素变更，第二界面元素在视图结构中的第二位置不能发生变更；其三，若第一界面元素与第二界面元素不具有任何关系，则无法基于第二界面元素在视图结构中的第二位置确定第一界面元素的第一位置，因此第二界面元素为与第一界面元素具有父子关系的元素。

可选的，上述确定第一界面元素与至少一个第二界面元素的父子关系的过程可以通过遍历视图结构的方式确定；可选的，上述确定第一界面元素与至少一个第二界面元素的父子关系的过程还可以通过查找哈希表(Hash Table)的方式确定。

S2、基于所述第一界面元素与所述至少一个第二界面元素的父子关系，以及所述至少一个第二界面元素在所述视图结构中的第二位置，获得所述第一界面元素位于所述视图结构中的所述第一位置。

可选的，若第一界面元素与至少一个第二界面元素具有父子关系，则可以通过至少一个第二界面元素在视图结构中的第二位置来确定第一界面元素在视图结构中的第一位置。

可以理解的是，用户界面的框架通常可以包括两种模式：正常模式和调试模式。其中，用户在用户界面输入信息时通常使用正常模式；而技术人员开发用户界面时通常使用调试模式。本申请的又一个实施例可以适用于技术人员开发用户界面时的调试模式下，则在调试模式下，本申请实施例对上述步骤S100，监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况的过程进行说明。

可选的，在调试模式下，针对任一界面元素，可以基于该界面元素对应的句柄监测该界面元素对应的布局样式信息的变化情况。

可选的，界面元素对应的句柄可以是一个唯一的整数值，由于在应用程序的一次运行中，指向各界面元素的句柄的地址不变(句柄指向一个固定的位置，该固定位置可以用于存储界面元素对应的布局样式信息的地址)，因此可以通过该句柄来更方便、快捷地识别界面元素对应的布局样式信息的变化情况。

参见图7所示，其示例了通过句柄监测界面元素对应的布局样式信息的变化情况的过程示意图。可以参见图7左图。针对用户界面中的某个界面元素，假设监测该界面元素的句柄中的地址为“0X000000AC6”，则可以通过该地址找到内存中区域A，其中区域A中存储有表征存储界面元素对应的布局样式信息的地址“0X00100016”，进而可以基于该地址找到界面元素对应的布局样式信息。

可选的，可以通过句柄(例如目录句柄)监测界面元素对应的布局样式信息的变化情况。其中，目录句柄是一个长度为4字节(32位应用程序)或者8字节(64位应用程序)的唯一整数值，可以通过目录句柄来标识用户界面中的不同界面元素。

考虑到布局信息和样式信息表征的界面元素在用户界面的内容不同，则本申请实施例中可以将一个界面元素的布局样式信息分为两部分：布局信息以及样式信息；其中，一个界面元素的布局信息可以表征该界面元素在用户界面中的位置，一个界面元素的样式信息可以表征该界面元素在用户界面的显示属性。则第一界面元素对应的第一布局样式信息可以包括第一布局信息和第一样式信息。

可选的，一个界面元素的样式信息可以采用CSS属性来编写，而界面元素的样式信息例如界面元素的尺寸、界面元素的背景颜色等，通常需要用多个CSS属性参数来展现，例如可以用参数表示界面元素大小、界面元素的在用户界面中的位置、界面元素包含的内容(例如文字)、界面元素包含的内容的颜色、界面元素的背景颜色等等。则在更新视图结构的过程中不仅需要更新界面元素在视图结构的位置，还需要更新界面元素的布局信息和样式信息。基于此，本申请的又一个实施例中对上述步骤S120，基于所述第一位置以及所述第一布局样式信息，更新所述视图结构的过程进行介绍。

可选的，上述步骤S120，基于所述第一位置以及所述第一布局样式信息，更新所述视图结构的过程具体可以包括：

S1、基于所述第一位置，更新所述第一界面元素位于所述视图结构中的位置。

可选的，可以通过第一界面元素的标识确定第一界面元素在视图结构中的原始位置，并通过第一界面元素的第一布局信息确定其在视图结构中的第一位置，则若上述原始位置与第一位置不同，表征第一界面元素发生了变更，需要对视图结构进行更新。

可选的，在更新视图结构的过程中，需要更新第一界面元素的第一布局信息和第一样式信息；其中，更新第一布局信息的过程可以包括：可以首先将视图结构中第一界面元素从原始位置更新至第一位置。

S2、比较所述第一界面元素的原始布局样式信息以及所述第一布局样式信息，确定所述第一界面元素的原始布局样式信息中的至少一个第一参数变更为对应的至少一个第二参数。

可选的，第一界面元素的第一布局样式信息可以通过多个CSS属性参数和Flex参数来编写，则若更新视图结构中第一界面元素的第一布局样式信息，需要首先确定更新前的原始布局样式信息中至少一个第一参数与更新后的至少一个第二参数的对应关系。

例如，第一界面元素的原始布局样式信息中至少一个第一参数包括：第一参数1＝第一界面元素在用户界面中的位置为A，第一参数2＝第一界面元素包含的内容为123，第一参数3＝第一界面元素包含的内容的颜色为黑色；第一界面元素的第一布局样式信息包含的至少一个第二参数包括：第二参数1＝第一界面元素在用户界面的位置为B，第二参数2＝第一界面元素包含的内容为456，第二参数3＝第一界面元素包含的内容的颜色为绿色。

其中，第一参数1与第二参数1相对应，第一参数2与第二参数2相对应，第一参数3与第二参数3相对应。

可选的，上述比较第一界面元素的原始布局样式信息以及第一布局样式信息的过程可以通过遍历原始布局样式信息以及第一布局样式信息的方式实现，从而可以确定更新前的原始布局样式信息中至少一个第一参数与更新后的至少一个第二参数的对应关系。

S3、将所述视图结构中所述第一界面元素的原始布局样式信息中所述至少一个第一参数变更为对应的所述至少一个第二参数，以得到更新后的视图结构。

可选的，可以基于上述S2确定的第一参数与第二参数的对应关系，将第一界面元素的原始布局样式信息中至少一个第一参数变更为对应的至少一个第二参数，来实现第一界面元素的第一样式信息的更新。

可选的，基于上述第一界面元素的第一布局信息以及第一样式信息的更新，可以最终得到更新后的视图结构。

仍参见图2b-2c所示，假设图2b所示的视图结构中第一界面元素为“a24”，则基于图2b加粗虚线圈区域所示的第一位置，以及第一样式信息更新视图结构的过程可以为：首先将视图结构中第一界面元素“a12”从所述原始位置迁移至第一位置。然后确定第一界面元素“a12”的第一样式信息中，第一参数为“零”与第二参数为“白底黑字”的对应关系，进而将图2b所示的第一界面元素“a12”的第一样式信息中的第一参数变更为第二参数，最终得到图2c所示的更新后的视图结构。

在上述实施例的基础上，本申请的又一个实施例，对上述步骤S130，基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态的过程进行说明。

可选的，上述步骤S130，基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态的过程具体可以包括：

基于所述视图结构中所述第一界面元素的所述第一位置，以及，所述第一界面元素对应的所述至少一个第二参数，调节所述第一界面元素的显示状态。

可选的，在调节第一界面元素的显示状态的过程中，可以仅基于视图结构中第一界面元素的第一位置以及第一布局信息来对第一界面元素的布局进行调节；仅基于第一界面元素对应的至少一个第二参数，来对第一界面元素的样式信息进行调节，从而完成调节第一界面元素的显示状态的过程。

仍参见图2a-2d所示，在调节第一界面元素“a12”的显示状态的过程中，在图2a所示的原始用户界面中，可以确定第一界面元素“a12”在更新后的第一位置，并可以基于第一界面元素对应的至少一个第二参数，对第一界面元素“a12”的样式信息进行调节，从而可以得到图2d所示的用户界面。

例如，第一界面元素的原始布局样式信息中至少一个第一参数包括：第一参数1＝第一界面元素在用户界面中的位置为A，第一参数2＝第一界面元素包含的内容为123，第一参数3＝第一界面元素包含的内容的颜色为黑色；第一界面元素的第一布局样式信息包含的至少一个第二参数包括：第二参数1＝第一界面元素在用户界面的位置为B，第二参数2＝第一界面元素包含的内容为456，第二参数3＝第一界面元素包含的内容的颜色为绿色。

其中，第一参数1与第二参数1相对应，第一参数2与第二参数2相对应，第一参数3与第二参数3相对应。

在上述举例中，“基于第一界面元素对应的至少一个第二参数，对第一界面元素“a12”的样式信息进行调节”是指基于第一界面元素对应的第二参数2以及第二参数3对第一界面元素“a12”的样式信息进行调节。

可以理解的是，在上述实施例更新视图结构的过程中，需要首先确定第一界面元素的第一位置，进而对第一界面元素的第一布局样式信息进行调整。基于此，上述步骤S120，基于所述第一位置以及所述第一布局样式信息，更新所述视图结构的过程具体可以包括：

S1、基于更新后的视图结构中所述第一位置以及第一布局信息，调节所述第一界面元素位于所述用户界面的位置信息。

可选的，在更新视图结构的过程中，可以首先对第一界面元素的第一布局信息进行更新，该更新过程可以参见上述实施例，这里不再重复赘述。

S2、基于更新后的视图结构中所述第一样式信息，调节所述第一界面元素的显示属性。

可选的，在更新视图结构的过程中，可以在完成对第一界面元素的第一布局信息的更新后，再对第一界面元素的第一样式信息进行更新，该更新过程可以参见上述实施例，这里不再重复赘述。

本申请的又一个实施例中，可以将本申请用户界面的调节方法应用于电子设备，该电子设备至少可以包括显示区域，则本申请实施例可以通过电子设备的显示区域将上述实施例中的界面元素的布局样式信息及显示状态显示出来。可选的，上述显示区域可以包括至少两个区域，其中第一区域用于显示第一界面元素的第一布局样式信息，第二区域用于显示第一界面元素的显示状态。

可选的，上述第一布局样式信息以代码表示。

以第一布局样式信息为一段代码为例，可以参见图8所示，其示例了通过电子设备的显示区域显示第一界面元素的布局样式信息及显示状态的示意图。可以将图8所示的电子设备的显示区域分为两个区域，其中左边的显示区域用于显示第一界面元素的第一布局样式信息，右边的显示区域用于显示第一界面元素的显示状态。

可选的，上述电子设备的第一区域可以为第二区域的局部区域，或，电子设备的第二区域可以为第一区域的局部区域，或，电子设备的第一区域可以与第二区域独立。

参见图9所示，考虑到用于显示第一界面元素的第一布局样式信息的第一区域内容一般较多，则为了更方便地对其中包含的各种参数进行变更，可以将电子设备的第二区域设置为如图9所示的第一区域的局部区域。

可选的，第一区域和第二区域可以在电子设备的显示区域中同时显示，或，电子设备的显示区域每次仅显示一个区域。

可选的，若需要在电子设备的显示区域切换两个区域，可以通过切换指令完成第一区域与第二区域的切换。可选的，切换指令可以包括：第一种，用户可以触按两个区域分别对应的按键，完成第一区域与第二区域的切换；第二种，用户可以发出第一语音信息，完成第一区域与第二区域的切换；第三种，用户可以输出第一预设手势，电子设备捕捉到该第一预设手势后，可以完成第一区域与第二区域的切换。

参见图10a-10c所示，其示例了通过触按两个区域分别对应的按键，完成第一区域与第二区域的切换的过程示意图。图10a所示的界面仅显示了第一区域，则若用户需要切换第一区域和第二区域，可以通过点击图10a下方的“显示界面”按键，如图10b所示，那么界面可以从图10a切换至10c，从而完成第一区域与第二区域的切换。

需要说明的是，本申请实施例不对第一区域与第二区域的大小、位置以及第一区域与第二区域的切换方式进行限定。

上述本申请实施例中详细描述了方法，对于本申请实施例的方法可采用多种形式的装置实现，因此本申请还公开了一种装置，下面给出具体的实施例进行详细说明。

参见附图11，图11为本申请实施例公开的一种用户界面的调节装置的结构示意图。

如图11所示，该装置可以包括：

监测模块11，用于监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

确定模块12，用于若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

更新模块13，用于基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

调节模块14，用于基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

在一可选实施例中，上述更新模块，可以包括：

第一更新单元，用于若所述第一界面元素为所述用户界面中新增界面元素，将所述第一界面元素添加至所述视图结构中所述第一位置处，以及在所述视图结构中增加所述第一界面元素对应的第一布局样式信息，以得到更新后的视图结构；

第二更新单元，用于若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的原始位置为所述第一位置，将所述视图结构中所述第一界面元素的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构；

第三更新单元，用于若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的位置发生变更，将所述第一界面元素在所述视图结构中的原始位置变更为所述第一位置；将所述视图结构中所述第一界面元素的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构；

第四更新单元，用于若所述第一界面元素为所述用户界面中待删除的界面元素，删除所述视图结构中所述第一位置的所述第一界面元素，以及删除所述第一界面元素的原始布局样式信息，以得到更新后的视图结构。

在一可选实施例中，所述视图结构还包括各节点之间的父子关系。

在一可选实施例中，一个界面元素的布局样式信息包括布局信息以及样式信息；一个界面元素的布局信息表征该界面元素在所述用户界面中的位置，一个界面元素的样式信息用于表征该界面元素在所述用户界面的显示属性；所述第一布局样式信息包括第一布局信息以及第一样式信息；

上述确定模块，可以包括：

第一确定单元，用于基于所述第一布局信息，获得所述第一界面元素与至少一个第二界面元素的父子关系；所述第二界面元素为所述用户界面中已有界面元素且该第二界面元素在所述视图结构中的第二位置未发生变更；

第二确定单元，用于基于所述第一界面元素与所述至少一个第二界面元素的父子关系，以及所述至少一个第二界面元素在所述视图结构中的第二位置，获得所述第一界面元素位于所述视图结构中的所述第一位置。

在一可选实施例中，上述监测模块，可以包括：

第一监测单元，用于在调试模式下，针对任一界面元素，基于该界面元素对应的句柄监测该界面元素对应的布局样式信息的变化情况。

在一可选实施例中，一个界面元素的布局样式信息包括布局信息以及样式信息；一个界面元素的布局信息表征该界面元素在所述用户界面中的位置，一个界面元素的样式信息用于表征该界面元素在所述用户界面的显示属性；所述第一布局样式信息包括第一布局信息以及第一样式信息；

上述更新模块，可以包括：

第五更新单元，用于基于所述第一位置，更新所述第一界面元素位于所述视图结构中的位置；

第六更新单元，用于比较所述第一界面元素的原始布局样式信息以及所述第一布局样式信息，确定所述第一界面元素的原始布局样式信息中的至少一个第一参数变更为对应的至少一个第二参数；

第七更新单元，用于将所述视图结构中所述第一界面元素的原始布局样式信息中所述至少一个第一参数变更为对应的所述至少一个第二参数，以得到更新后的视图结构。

在一可选实施例中，上述调节模块，可以包括：

第一调节单元，用于基于所述视图结构中所述第一界面元素的所述第一位置，以及，所述第一界面元素对应的所述至少一个第二参数，调节所述第一界面元素的显示状态。

在一可选实施例中，上述更新模块，可以包括：

第八更新单元，用于基于更新后的视图结构中所述第一位置以及所述第一局部信息，调节所述第一界面元素位于所述用户界面的位置信息；

第九更新单元，用于基于更新后的视图结构中所述第一样式信息，调节所述第一界面元素的显示属性。

在一可选实施例中，本申请的用户界面的调节装置可以应用于电子设备，所述电子设备包括显示区域；上述电子设备的显示区域还可以包括：

所述显示区域的第一区域用于显示所述第一界面元素的所述第一布局样式信息；

所述显示区域的第二区域用于显示所述第一界面元素的显示状态。

本申请实施例提供的用户界面的调节装置可应用于用户界面的调节设备，如PC终端、云平台、服务器及服务器集群等。可选的，图12示出了用户界面的调节设备的硬件结构框图，参照图12，用户界面的调节设备的硬件结构可以包括：至少一个处理器1，至少一个通信接口2，至少一个存储器3和至少一个通信总线4；

在本申请实施例中，处理器1、通信接口2、存储器3、通信总线4的数量为至少一个，且处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；

处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC

(Application Specific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；

存储器3可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)等，例如至少一个磁盘存储器；

其中，存储器3存储有程序，处理器1可调用存储器3存储的程序，所述程序用于：

监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

可选的，所述程序的细化功能和扩展功能可参照上文描述。

本申请实施例还提供一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如上述用户界面的调节方法。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置或系统类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种用户界面的调节方法，其特征在于，包括：

监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

2.根据权利要求1所述用户界面的调节方法，其特征在于，所述基于所述第一位置以及所述第一布局样式信息，更新所述视图结构，包括：

若所述第一界面元素为所述用户界面中新增界面元素，将所述第一界面元素添加至所述视图结构中所述第一位置处，以及在所述视图结构中增加所述第一界面元素对应的第一布局样式信息，以得到更新后的视图结构；

若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的原始位置为所述第一位置，将所述第一界面元素对应的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构；

若所述第一界面元素为所述用户界面中已有界面元素，且所述第一界面元素位于所述视图结构中的位置发生变更，将所述第一界面元素在所述视图结构中的原始位置变更为所述第一位置；将所述第一界面元素对应的原始布局样式信息更新为所述第一布局样式信息，以得到更新后的视图结构；

若所述第一界面元素为所述用户界面中待删除的界面元素，删除所述视图结构中所述第一位置的所述第一界面元素，以及删除所述第一界面元素对应的原始布局样式信息，以得到更新后的视图结构。

3.根据权利要求1所述用户界面的调节方法，其特征在于，所述视图结构还包括各节点之间的父子关系。

4.根据权利要求3所述用户界面的调节方法，其特征在于，一个界面元素的布局样式信息包括布局信息以及样式信息；一个界面元素的布局信息表征该界面元素在所述用户界面中的位置，一个界面元素的样式信息表征该界面元素在所述用户界面的显示属性；所述第一布局样式信息包括第一布局信息以及第一样式信息；

所述基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于所述视图结构中的第一位置，包括：

基于所述第一布局信息，获得所述第一界面元素与至少一个第二界面元素的父子关系；所述第二界面元素为所述用户界面中已有界面元素且该第二界面元素在所述视图结构中的第二位置未发生变更；

基于所述第一界面元素与所述至少一个第二界面元素的父子关系，以及所述至少一个第二界面元素在所述视图结构中的第二位置，获得所述第一界面元素位于所述视图结构中的所述第一位置。

5.根据权利要求4所述用户界面的调节方法，其特征在于，所述基于所述第一位置以及所述第一布局样式信息，更新所述视图结构，包括：

基于更新后的视图结构中所述第一位置以及所述第一布局信息，调节所述第一界面元素位于所述用户界面的位置信息；

基于更新后的视图结构中所述第一样式信息，调节所述第一界面元素的显示属性。

6.根据权利要求1至5任一所述用户界面的调节方法，其特征在于，一个界面元素的布局样式信息包括布局信息以及样式信息；一个界面元素的布局信息表征该界面元素在所述用户界面中的位置，一个界面元素的样式信息用于表征该界面元素在所述用户界面的显示属性；所述第一布局样式信息包括第一布局信息以及第一样式信息；

所述基于所述第一位置以及所述第一布局样式信息，更新所述视图结构，包括：

基于所述第一位置，更新所述第一界面元素位于所述视图结构中的位置；

比较所述第一界面元素的原始布局样式信息以及所述第一布局样式信息，确定所述第一界面元素的原始布局样式信息中的至少一个第一参数变更为对应的至少一个第二参数；

将所述视图结构中所述第一界面元素的原始布局样式信息中所述至少一个第一参数变更为对应的所述至少一个第二参数，以得到更新后的视图结构。

7.根据权利要求6所述用户界面的调节方法，其特征在于，所述基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态，包括：

基于所述视图结构中所述第一界面元素的所述第一位置，以及，所述第一界面元素对应的所述至少一个第二参数，调节所述第一界面元素的显示状态。

8.根据权利要求1至5任一所述用户界面的调节方法，其特征在于，应用于电子设备，所述电子设备包括显示区域；还包括：

所述显示区域的第一区域用于显示所述第一界面元素的所述第一布局样式信息；

所述显示区域的第二区域用于显示所述第一界面元素的显示状态。

9.一种用户界面的调节装置，其特征在于，包括：

监测模块，用于监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

确定模块，用于若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

更新模块，用于基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

调节模块，用于基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。

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

存储器，用于存储程序；

处理器，用于执行所述程序，所述程序具体用于：

监测所述用户界面对应的界面描述文件中界面元素的布局样式信息的变化情况；一个用户界面包括至少一个界面元素，一个界面元素的布局样式信息用于表征该界面元素在所述用户界面的显示状态；

若检测到所述界面描述文件中第一界面元素的布局样式信息发生变更，基于所述第一界面元素对应的变更后的第一布局样式信息，确定所述第一界面元素位于视图结构中的第一位置；

其中，所述视图结构是基于所述界面描述文件得到的，所述视图结构包括多个节点，一个节点对应所述用户界面中一个界面元素，所述视图结构还包括各界面元素分别对应的原始布局样式信息；

基于所述第一位置以及所述第一布局样式信息，更新所述视图结构；

基于更新后的视图结构，调节所述用户界面中所述第一界面元素的显示状态。