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

本申请实施例公开一种应用程序的用户界面的处理方法以及相关设备，该方法可用于计算机技术领域中，方法包括：若当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件，获取用户界面在当前显示区域展示时所对应的第一布局信息；第一布局信息基于用户界面在目标显示区域展示时采用的目标布局信息得到，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，第一组成元素和第二组成元素的尺寸变化比例不同。开发者只需要设计用户界面在一种尺寸的显示区域上的布局信息，降低了技术人员的开发负担；不是对用户界面中的所有组成元素进行统一的放大/缩小，有利于提高目标布局信息与目标显示区域的适配度。显示区域的适配度。显示区域的适配度。

【技术实现步骤摘要】
一种应用程序的用户界面的处理方法以及相关设备


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

技术介绍

[0002]随着计算机技术的发展，各种电子设备都趋于智能化，越来越多类型的电子设备上能够运行应用程序，当这些电子设备需要接收用户的控制指令或者输出信息给用户时，往往需要通过电子设备的屏幕作为媒介。而这些电子设备的尺寸并不统一。
[0003]为了确保良好的用户体验，对于同一个应用程序，技术人员为每种规格的屏幕单独开发一个版本，也即针对同一个应用程序，技术人员需要开发多个不同布局信息的应用程序，以适应不同规格的屏幕。
[0004]随着电子设备的形态越来越多，一种降低技术人员的开发负担的方案亟待推出。

技术实现思路

[0005]本申请实施例提供了一种应用程序的用户界面的处理方法以及相关设备，开发者只需要设计用户界面在一种尺寸的显示区域(也即目标显示区域)上的布局信息，降低了技术人员的开发负担；此外，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，不是对用户界面中的所有组成元素进行统一的放大/缩小，有利于提高目标布局信息与目标显示区域的适配度。
[0006]为解决上述技术问题，本申请实施例提供以下技术方案：
[0007]第一方面，本申请实施例提供一种应用程序的目标用户界面的处理方法，可用于计算机
中。方法可以包括：电子设备获取目标用户界面所对应的当前显示区域的尺寸；其中，目标用户界面指的是应用程序在终端设备的屏幕上显示出来的人机交互界面。一个目标用户界面可以为网络(Web)类的目标用户界面或原生的目标用户界面；Web类的目标用户界面的信息由前述应用程序所对应的服务器发送给终端设备，原生的目标用户界面的信息由终端设备直接生成。目标用户界面所对应的当前显示区域也可以称为目标用户界面的当前视窗(View)，由于可以为终端设备的整个屏幕中的部分区域用于显示该目标用户界面，也可以为终端设备的整个屏幕都用于显示该目标用户界面，则“目标用户界面所对应的当前显示区域”指的是终端设备的屏幕中用于显示目标用户界面的区域。
[0008]在当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件的情况下，电子设备获取目标用户界面在当前显示区域展示时所对应的第一布局信息；其中，第一布局信息用于指示目标用户界面的组成元素在当前显示区域中的布局方式，第一布局信息基于目标用户界面在目标显示区域展示时采用的目标布局信息得到，目标用户界面中存在第一组成元素和第二组成元素，当目标用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，第一组成元素的尺寸变化比例和第二组成元素的尺寸变化比例不同。
[0009]本实现方式中，当需要在任意的其他尺寸的显示区域上显示某个用户界面时，可以对该用户界面在目标显示区域上的布局信息进行变化得到，也即开发者只需要设计用户界面在一种尺寸的显示区域(也即目标显示区域)上的布局信息，大大降低了技术人员的开发负担；此外，当用户界面由目标布局信息所指示的布局方式变化为第一布局信息所指示的布局方式时，用户界面中的第一组成元素的尺寸变化比例和第二组成元素的尺寸变化比例可以不同，也即不是对用户界面中的所有组成元素进行统一的放大/缩小，有利于提高目标布局信息与目标显示区域的适配度。
[0010]在第一方面的一种可能实现方式中，第一布局信息和目标布局信息均为与目标用户界面对应的布局信息。若本申请实施例提供的应用程序的目标用户界面的处理方法应用于电子设备对目标用户界面执行渲染操作之前，则“第一布局信息和目标布局信息”均包括用于对目标用户界面执行渲染操作时所需要的信息；作为示例，若目标用户界面为Web类的用户界面时，“与目标用户界面对应的布局信息”可以包括超文本标记语言(HTML)文件和层叠样式表(CSS)样式；作为另一示例，例如目标用户界面为原生的用户界面，“与目标用户界面对应的布局信息”可以为可扩展标记语言(XML)文件和CSS样式等，此处不做穷举。
[0011]若本申请实施例提供的应用程序的目标用户界面的处理方法应用于电子设备对目标用户界面执行渲染操作的过程中，则“目标布局信息”可以包括目标用户界面中的每个组成元素在目标显示区域的位置信息，“第一布局信息”可以包括目标用户界面中的每个组成元素在当前显示区域的位置信息。
[0012]进一步地，上述执行渲染(Render)操作的过程指的是根据描述用户界面的数据生成可视化的用户界面的过程，前述描述用户界面的数据是用严格定义的数据结构或语言对用户界面中的元素进行描述，它包括用户界面中的元素的几何形状、纹理、位置或其他信息等。
[0013]在第一方面的一种可能实现方式中，目标显示区域的宽边的长度小于当前显示区域的宽边的长度，其中，目标显示区域和当前显示区域均包括宽边和高边，目标显示区域的宽边和前显示区域的高边为互相不平行的两个边，目标显示区域的宽边的长度小于所述目标显示区域的高边的长度。一般情况下，当目标用户界面展示在目标显示区域上时，目标显示区域的宽边上不存在滑动功能，目标显示区域的高边上有滑动功能；对应的，当前显示区域的宽边和前显示区域的高边为互相不平行的两个边，当目标用户界面展示在当前显示区域上时，当前显示区域的宽边上不存在滑动功能，当前显示区域的高边上有滑动功能。
[0014]本实现方式中，由于技术人员在设计中发现，用户界面由在窄屏上显示变化至在宽屏上显示的难度较低，用户界面由在宽屏上显示变化至在窄屏上显示的难度较大，则目标显示区域的宽边的长度小于当前显示区域的宽边的长度，用户界面在目标显示区域的宽上不存在滑动功能，也即由目标显示区域变化为当前显示区域是由窄屏变换至宽屏的过程，有利于降低用户界面的处理过程的难度。
[0015]在第一方面的一种可能实现方式中，若方法应用于对目标用户界面执行渲染操作之前，则方法还包括：电子设备获取目标用户界面在当前显示区域展示时所对应的第二布局信息，其中，当目标用户界面由目标布局信息所指示的布局方式变化为第二布局信息所指示的布局方式时，目标用户界面中不同的组成元素的尺寸变化比例相同；电子设备获取目标用户界面在当前显示区域展示时所对应的第一布局信息，包括：电子设备根据第二布
局信息，生成第一布局信息。
[0016]本实现方式中，先获取目标用户界面在当前显示区域展示时所对应的第二布局信息，当用户界面由目标布局信息所指示的布局方式变化为第二布局信息所指示的布局方式时，用户界面中不同的组成元素的尺寸变化比例相同；再根据第二布局信息生成该第一布局信息，有利于降低第一布局信息的获取过程中的难度；此外，当采用前述方式获取第一布局信息时，不需要对浏览器内核的处理流程进行更新，有利于进一步降低第一布局信息的获取过程中的难度。
[0017]在第一方面的一种可能实现方式中，电子设备上可以配置有尺寸变化规则，该尺寸变化规则包括当目标用户界面由第二布局信息所指示的布局方式变化为第一布局信息本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种应用程序的用户界面的处理方法，其特征在于，所述方法包括：获取所述用户界面所对应的当前显示区域的尺寸；在所述当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件的情况下，获取所述用户界面在所述当前显示区域展示时所对应的第一布局信息；其中，所述第一布局信息用于指示所述用户界面的组成元素在所述当前显示区域中的布局方式，所述第一布局信息基于所述用户界面在所述目标显示区域展示时采用的目标布局信息得到，所述用户界面中存在第一组成元素和第二组成元素，当所述用户界面由所述目标布局信息所指示的布局方式变化为所述第一布局信息所指示的布局方式时，所述第一组成元素的尺寸变化比例和所述第二组成元素的尺寸变化比例不同。2.根据权利要求1所述的方法，其特征在于，所述目标显示区域的宽边的长度小于所述当前显示区域的宽边的长度，其中，所述目标显示区域的宽边和所述目标显示区域的高边为互相不平行的两个边，所述目标显示区域的宽边的长度小于所述目标显示区域的高边的长度。3.根据权利要求1或2所述的方法，其特征在于，若所述方法应用于对所述用户界面执行渲染操作之前，则所述方法还包括：获取所述用户界面在所述当前显示区域展示时所对应的第二布局信息，其中，当所述用户界面由所述目标布局信息所指示的布局方式变化为所述第二布局信息所指示的布局方式时，所述用户界面中不同的组成元素的尺寸变化比例相同；所述获取所述用户界面在所述当前显示区域展示时所对应的第一布局信息，包括：根据所述第二布局信息，生成所述第一布局信息。4.根据权利要求1或2所述的方法，其特征在于，所述方法应用于通过浏览器内核对所述用户界面执行渲染操作的过程中。5.根据权利要求1或2所述的方法，其特征在于，所述目标条件包括如下任一种或多种条件的组合：所述当前显示区域的面积和所述目标显示区域的面积之间的差别大于或等于第一阈值、所述当前显示区域的宽高比和所述目标显示区域的宽高比的差别大于或等于第二阈值，或者所述当前显示区域的宽高比的取值大于或等于第三阈值。6.根据权利要求1或2所述的方法，其特征在于，所述方法的执行主体为部署有所述应用程序的终端设备，或者，所述方法的执行主体为与所述应用程序对应的服务器。7.一种应用程序的用户界面的处理装置，其特征在于，所述装置包括：获取模块，用于获取所述用户界面所对应的当前显示区域的尺寸；处理模块，用于在所述当前显示区域的尺寸与目标显示区域的尺寸之间的差别满足目标条件的情况下，获取所述用...

【专利技术属性】
技术研发人员：李大伟，杨世淼，许哲楚，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：