一种应用程序的用户界面的处理方法以及相关设备与流程

本技术涉及计算机，尤其涉及一种应用程序的用户界面的处理方法以及相关设备。

背景技术：

1、随着计算机技术的发展，各种电子设备都趋于智能化，越来越多类型的电子设备上能够运行应用程序，当这些电子设备需要接收用户的控制指令或者输出信息给用户时，往往需要通过电子设备的屏幕作为媒介。而这些电子设备的尺寸并不统一。

2、为了确保良好的用户体验，对于同一个应用程序，技术人员为每种规格的屏幕单独开发一个版本，也即针对同一个应用程序，技术人员需要开发多个不同布局信息的应用程序，以适应不同规格的屏幕。

3、随着电子设备的形态越来越多，一种降低技术人员的开发负担的方案亟待推出。

技术实现思路

1、本技术实施例提供了一种应用程序的用户界面的处理方法以及相关设备，开发者只需要设计用户界面在一种尺寸的显示区域(也即目标显示区域)上的布局信息，降低了技术人员的开发负担；此外，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，不是对用户界面中的所有组成元素进行统一的放大/缩小，有利于提高目标布局信息与目标显示区域的适配度。

2、为解决上述技术问题，本技术实施例提供以下技术方案：

3、第一方面，本技术实施例提供一种应用程序的目标用户界面的处理方法，可用于计算机技术领域中。方法可以包括：电子设备获取目标用户界面所对应的当前显示区域的尺寸；其中，目标用户界面指的是应用程序在终端设备的屏幕上显示出来的人机交互界面。一个目标用户界面可以为网络(web)类的目标用户界面或原生的目标用户界面；web类的目标用户界面的信息由前述应用程序所对应的服务器发送给终端设备，原生的目标用户界面的信息由终端设备直接生成。目标用户界面所对应的当前显示区域也可以称为目标用户界面的当前视窗(view)，由于可以为终端设备的整个屏幕中的部分区域用于显示该目标用户界面，也可以为终端设备的整个屏幕都用于显示该目标用户界面，则“目标用户界面所对应的当前显示区域”指的是终端设备的屏幕中用于显示目标用户界面的区域。

4、在当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件的情况下，电子设备获取目标用户界面在当前显示区域展示时所对应的第一布局信息；其中，第一布局信息用于指示目标用户界面的组成元素在当前显示区域中的布局方式，第一布局信息基于目标用户界面在目标显示区域展示时采用的目标布局信息得到，目标用户界面中存在第一组成元素和第二组成元素，当目标用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，第一组成元素的尺寸变化比例和第二组成元素的尺寸变化比例不同。

5、本实现方式中，当需要在任意的其他尺寸的显示区域上显示某个用户界面时，可以对该用户界面在目标显示区域上的布局信息进行变化得到，也即开发者只需要设计用户界面在一种尺寸的显示区域(也即目标显示区域)上的布局信息，大大降低了技术人员的开发负担；此外，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，用户界面中的第一组成元素的尺寸变化比例和第二组成元素的尺寸变化比例可以不同，也即不是对用户界面中的所有组成元素进行统一的放大/缩小，有利于提高目标布局信息与目标显示区域的适配度。

6、在第一方面的一种可能实现方式中，第一布局信息和目标布局信息均为与目标用户界面对应的布局信息。若本技术实施例提供的应用程序的目标用户界面的处理方法应用于电子设备对目标用户界面执行渲染操作之前，则“第一布局信息和目标布局信息”均包括用于对目标用户界面执行渲染操作时所需要的信息；作为示例，若目标用户界面为web类的用户界面时，“与目标用户界面对应的布局信息”可以包括超文本标记语言(html)文件和层叠样式表(css)样式；作为另一示例，例如目标用户界面为原生的用户界面，“与目标用户界面对应的布局信息”可以为可扩展标记语言(xml)文件和css样式等，此处不做穷举。

7、若本技术实施例提供的应用程序的目标用户界面的处理方法应用于电子设备对目标用户界面执行渲染操作的过程中，则“目标布局信息”可以包括目标用户界面中的每个组成元素在目标显示区域的位置信息，“第一布局信息”可以包括目标用户界面中的每个组成元素在当前显示区域的位置信息。

8、进一步地，上述执行渲染(render)操作的过程指的是根据描述用户界面的数据生成可视化的用户界面的过程，前述描述用户界面的数据是用严格定义的数据结构或语言对用户界面中的元素进行描述，它包括用户界面中的元素的几何形状、纹理、位置或其他信息等。

9、在第一方面的一种可能实现方式中，目标显示区域的宽边的长度小于当前显示区域的宽边的长度，其中，目标显示区域和当前显示区域均包括宽边和高边，目标显示区域的宽边和前显示区域的高边为互相不平行的两个边，目标显示区域的宽边的长度小于所述目标显示区域的高边的长度。一般情况下，当目标用户界面展示在目标显示区域上时，目标显示区域的宽边上不存在滑动功能，目标显示区域的高边上有滑动功能；对应的，当前显示区域的宽边和前显示区域的高边为互相不平行的两个边，当目标用户界面展示在当前显示区域上时，当前显示区域的宽边上不存在滑动功能，当前显示区域的高边上有滑动功能。

10、本实现方式中，由于技术人员在设计中发现，用户界面由在窄屏上显示变化至在宽屏上显示的难度较低，用户界面由在宽屏上显示变化至在窄屏上显示的难度较大，则目标显示区域的宽边的长度小于当前显示区域的宽边的长度，用户界面在目标显示区域的宽上不存在滑动功能，也即由目标显示区域变化为当前显示区域是由窄屏变换至宽屏的过程，有利于降低用户界面的处理过程的难度。

11、在第一方面的一种可能实现方式中，若方法应用于对目标用户界面执行渲染操作之前，则方法还包括：电子设备获取目标用户界面在当前显示区域展示时所对应的第二布局信息，其中，当目标用户界面由目标布局信息所指示的布局方式变化为第二布局信息所指示的布局方式时，目标用户界面中不同的组成元素的尺寸变化比例相同；电子设备获取目标用户界面在当前显示区域展示时所对应的第一布局信息，包括：电子设备根据第二布局信息，生成第一布局信息。

12、本实现方式中，先获取目标用户界面在当前显示区域展示时所对应的第二布局信息，当用户界面由目标布局信息所指示的布局方式变化为第二布局信息所指示的布局方式时，用户界面中不同的组成元素的尺寸变化比例相同；再根据第二布局信息生成该第一布局信息，有利于降低第一布局信息的获取过程中的难度；此外，当采用前述方式获取第一布局信息时，不需要对浏览器内核的处理流程进行更新，有利于进一步降低第一布局信息的获取过程中的难度。

13、在第一方面的一种可能实现方式中，电子设备上可以配置有尺寸变化规则，该尺寸变化规则包括当目标用户界面由第二布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，目标用户界面中不同类型的组成元素的尺寸变化规则。则电子设备根据第二布局信息，生成第一布局信息，包括：电子设备识别目标用户界面中不同类型的组成元素，根据该尺寸变化规则确定目标用户界面在当前显示区域展示时所对应的第一布局信息。

14、在第一方面的一种可能实现方式中，电子设备上可以预先配置有目标神经网络，在目标神经网络的推理阶段，目标神经网络用于供终端设备通过目标神经网络根据第二布局信息生成第一布局信息；其中，目标神经网络的输入可以包括第二布局信息，目标神经网络的输出可以包括第一布局信息。

15、在第一方面的一种可能实现方式中，方法应用于通过浏览器内核对目标用户界面执行渲染操作的过程中。其中，在对目标用户界面执行渲染操作的过程中，电子设备可以先确定目标用户界面的组成元素的样式(style)，确定目标用户界面的组成元素在目标显示区域所采用的目标布局信息(layout)，确定目标用户界面的组成元素在当前显示区域展示时所对应的第一布局信息，再执行合成更新(compositing update)、预涂(prepaint)、绘画(paint)或其他后续步骤。也即本技术实施例提供的应用程序的用户界面的处理方法可以位于该渲染过程中的布局(layout)和合成更新(compositing update)之间。

16、本实现方式中，提供了本方案的另一种具体实现方式，扩展了本方案的应用场景，提高了本方案的实现灵活性。

17、在第一方面的一种可能实现方式中，目标条件包括如下任一种或多种条件的组合：当前显示区域的面积和目标显示区域的面积之间的差别大于或等于第一阈值，或者，当前显示区域的宽高比和目标显示区域的宽高比的差别大于或等于第二阈值。进一步地，“当前显示区域的宽高比”指的是当前显示区域的宽边的长度和高边的长度之间的比值，“目标显示区域的宽高比”指的是目标显示区域的宽边的长度和高边的长度之间的比值。可选地，若目标显示区域的宽边的长度小于当前显示区域的宽边的长度，则目标条件还可以具体表现为当前显示区域的宽高比的取值大于或等于第三阈值。本实现方式中，提供了目标条件的多种具体实现方式，提高了本方案的实现灵活性。

18、在第一方面的一种可能实现方式中，若本技术实施例提供的应用程序的用户界面的处理方法应用于执行渲染操作之前，则在一些实现方式中，前述方法的执行主体可以为部署有该应用程序的终端设备，在另一些实现方式中，前述方法的执行主体可以为该应用程序所对应的服务器。若本技术实施例提供的应用程序的用户界面的处理方法应用于执行渲染操作的过程中，则方法的执行主体为部署有应用程序的终端设备。本实现方式中，本方案中的应用程序的用户界面的处理方法的执行主体可以为终端设备也可以为服务器，扩展了本方案的应用场景，提高了本方案的实现灵活性。

19、第二方面，本技术实施例提供了一种应用程序的用户界面的处理装置，可用于计算机技术领域中。应用程序的用户界面的处理装置包括：获取模块，用于获取用户界面所对应的当前显示区域的尺寸；处理模块，用于在当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件的情况下，获取用户界面在当前显示区域展示时所对应的第一布局信息；其中，第一布局信息用于指示用户界面的组成元素在当前显示区域中的布局方式，第一布局信息基于用户界面在目标显示区域展示时采用的目标布局信息得到，用户界面中存在第一组成元素和第二组成元素，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，第一组成元素的尺寸变化比例和第二组成元素的尺寸变化比例不同。

20、本技术实施例的第二方面提供的应用程序的用户界面的处理装置还可以执行第一方面的各个可能实现方式中电子设备执行的步骤，对于本技术实施例第二方面以及第二方面的各种可能实现方式的具体实现步骤，以及每种可能实现方式所带来的有益效果，均可以参考第一方面中各种可能的实现方式中的描述，此处不再一一赘述。

21、第三方面，本技术实施例提供了一种计算机程序产品，算机程序产品包括程序，当该程序在计算机上运行时，使得计算机执行上述第一方面所述的应用程序的用户界面的处理方法。

22、第四方面，本技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，当所述程序在计算机上运行时，使得计算机执行上述第一方面所述的应用程序的用户界面的处理方法。

23、第五方面，本技术实施例提供了一种终端设备，可以包括处理器，处理器和存储器耦合，存储器存储有程序指令，当存储器存储的程序指令被处理器执行时实现上述第一方面所述的应用程序的用户界面的处理方法。

24、第六方面，本技术实施例提供了一种服务器，可以包括处理器，处理器和存储器耦合，存储器存储有程序指令，当存储器存储的程序指令被处理器执行时实现上述第一方面所述的应用程序的用户界面的处理方法。

25、第七方面，本技术实施例提供了一种电路系统，所述电路系统包括处理电路，所述处理电路配置为执行上述第一方面所述的应用程序的用户界面的处理方法。

26、第八面，本技术实施例提供了一种芯片系统，该芯片系统包括处理器，用于实现上述各个方面中所涉及的功能，例如，发送或处理上述方法中所涉及的数据和/或信息。在一种可能的设计中，所述芯片系统还包括存储器，所述存储器，用于保存服务器或通信设备必要的程序指令和数据。该芯片系统，可以由芯片构成，也可以包括芯片和其他分立器件。