CN114253640A

CN114253640A - 一种用户界面的控制方法、装置及存储介质

Info

Publication number: CN114253640A
Application number: CN202011016274.1A
Authority: CN
Inventors: 景梦如
Original assignee: Beijing Xiaomi Mobile Software Co Ltd
Current assignee: Beijing Xiaomi Mobile Software Co Ltd
Priority date: 2020-09-24
Filing date: 2020-09-24
Publication date: 2022-03-29

Abstract

本公开实施例公开了一种用户界面的控制方法、装置、电子设备及存储介质；所述方法包括：获取待显示区域的第一用户界面UI；基于主显示区域和边缘显示区域的尺寸，生成第二UI，其中，第二UI包括：透明的圆角矩形区域及位于圆角矩形区域外的黑色区域；圆角矩形区域覆盖主显示区域且从主显示区域延伸到边缘显示区域远离主显示区域的边缘；基于第二UI的圆角矩形区域，内缩第一UI；其中，内缩后的第一UI的显示尺寸与圆角矩形区域的显示尺寸一致；层叠内缩后的第一UI和第二UI的圆角矩形区域，生成第三UI；显示第三UI；所述方法在显示第三UI时具有圆角效果，且第三UI的两侧并非黑色，能提升用户使用感受。

Description

一种用户界面的控制方法、装置及存储介质

技术领域

本公开涉及电子技术领域，尤其涉及一种用户界面的控制方法、装置及存储介质。

背景技术

相关技术中，电子设备，例如手机等有刘海屏、曲面屏、瀑布屏等不同曲率的显示屏。随着曲率的增大，会使得用户界面(UI)的显示超过了人的视野范围。例如，瀑布屏的曲率高达80°至90°，当用户正对着显示屏时，显示屏两侧中显示的内容无法看到；如此会导致一些重要信息遗漏等而影响用户的体验。

而目前一些厂商，虽然可以基于应用程序做相应处理，但是在电子设备中显示该些应用程序对应的用户界面时，显示效果并不是很好。

发明内容

本公开提供一种用户界面的控制方法、装置、终端及存储介质。

根据本公开的第一方面，提供一种用户界面的控制方法，应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；所述方法包括：

获取待显示区域的第一UI；

基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI；其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域的第一边缘；所述第一边缘为所述边缘显示区域中远离所述主显示区域的边缘；

基于所述第二UI的圆角矩形区域，内缩所述第一UI；其中，内缩后的第一UI的显示尺寸与所述圆角矩形区域的显示尺寸一致；

层叠所述内缩后的所述第一UI和所述第二UI的所述圆角矩形区域，生成第三UI；

显示所述第三UI。

上述方案中，所述方法还包括：

根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI。

上述方案中，所述根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI，包括以下至少之一：

若基于预设配置的所述第一UI需要进行内缩，确定需要生成包含内缩后的所述第一UI的所述第三UI；

若基于预设配置的所述第一UI不需要进行内缩，确定不需要生成包含内缩后的所述第一UI的所述第三UI；

若基于所述第一UI的历史显示数据中进行内缩次数大于或等于预定次数，确定需要生成包含内缩的所述第一UI的所述第三UI；

若基于所述第一UI的历史显示数据中进行内缩次数小于所述预定次数，确定不需要生成包含内缩后的所述第一UI的所述第三UI；

若在预定时间范围内检测到内缩触发操作，确定需要生成包含内缩后的所述第一UI的所述第三UI；

若在预定时间范围内未检测到所述内缩触发操作，确定不需要生成包含内缩后的所述第一UI的所述第三UI。

上述方案中，所述基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI，包括：

基于所述主显示区域和所述边缘显示区域的尺寸，生成N个所述第二UI；其中，第n-1个所述第二UI的所述圆角矩形区域的面积，小于第n个所述第二UI的所述圆角矩形区域的面积，其中，所述n为大于等于1、且小于或等于N的整数；

所述基于所述第二UI的圆角矩形区域，内缩所述第一UI，包括：

基于第m个所述第二UI，内缩所述第一UI得到内缩后的第m个第一UI；其中，m为小于或等于N的正整数；

所述层叠内缩后的所述第一UI上和所述第二UI的所述圆角矩形区域，生成第三UI，包括；

将内缩后的第m个第一UI层叠在所述第m个所述第二UI上，生成第m个所述第三UI；

所述显示所述第三UI，包括：

按照N个所述第三UI的生成顺序，依次显示N个所述第三UI。

基于所述主显示区域的顶角的相邻两边的各边长度，确定第一弧线；

基于所述第一弧线与所述相邻两边围成的区域，生成所述第二UI的所述黑色区域；

基于所述主显示区域中除黑色区域以外的区域以及所述边缘显示区域，生成所述第二UI的所述圆角矩形区域。

上述方案中，所述基于所述第一弧线与所述相邻两边所围成的区域，生成所述第二UI的所述黑色区域，包括：

将所述第一弧线与所述相邻两边围成的区域的像素参数值进行修改，生成所述第二UI的所述黑色区域。

上述方案中，所述方法还包括：

若根据所述确定策略不需要进行内缩调整，基于所述显示屏的全屏显示所述第一UI。

根据本公开的第二方面，提供一种用户界面的控制装置，应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；所述装置包括：

获取模块，用于获取待显示区域的第一UI；

生成模块，用于基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI；其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域的第一边缘；所述第一边缘为所述边缘显示区域中远离所述主显示区域的边缘；

内缩模块，用于基于所述第二UI的圆角矩形区域，内缩所述第一UI；其中，内缩后的第一UI的显示尺寸与所述圆角矩形区域的显示尺寸一致；

层叠模块，用于层叠内缩后的所述第一UI和所述第二UI的所述圆角矩形区域，生成第三UI；

显示模块，用于显示所述第三UI。

上述方案中，所述装置还包括：

确定模块，用于根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI。

上述方案中，所述确定模块，用于以下至少之一：

若基于预设配置的所述第一UI所对应界面需要进行内缩，确定需要生成包含内缩后的所述第一UI的所述第三UI；

若基于预设配置的所述第一UI所对应界面不需要进行内缩，确定不需要生成包含内缩后的所述第一UI的所述第三UI；

若基于所述第一UI所对应界面的历史显示数据中进行内缩次数大于或等于预定次数，确定需要生成包含内缩的所述第一UI的所述第三UI；

若基于所述第一UI所对应界面的历史显示数据中进行内缩次数小于所述预定次数，确定不需要生成包含内缩后的所述第一UI的所述第三UI；

上述方案中，所述生成模块，用于基于所述主显示区域和所述边缘显示区域的尺寸，生成N个所述第二UI；其中，第n-1个所述第二UI的所述圆角矩形区域的面积，小于第n个所述第二UI的所述圆角矩形区域的面积，其中，所述n为大于等于1、且小于或等于N的整数；

所述内缩模块，用于基于第m个所述第二UI，内缩所述第一UI得到内缩后的第m个第一UI；其中，m为小于或等于N的正整数；

所述层叠模块，用于将内缩后的第m个第一UI层叠在所述第m个所述第二UI上，生成第m个所述第三UI；

所述显示模块，用于按照N个所述第三UI的生成顺序，依次显示N个所述第三UI。

上述方案中，所述生成模块，用于基于所述主显示区域的顶角的相邻两边的各边长度，确定第一弧线；基于所述第一弧线与所述相邻两边围成的区域，生成所述第二UI的所述黑色区域；

所述生成模块，还用于基于所述主显示区域中除黑色区域以外的区域以及所述边缘显示区域，生成所述第二UI的所述圆角矩形区域。

上述方案中，所述生成模块，用于将所述第一弧线与所述相邻两边围成的区域的像素参数值进行修改，生成所述第二UI的所述黑色区域。

上述方案中，所述显示模块，用于若根据所述确定策略不需要进行内缩调整，基于所述显示屏的全屏显示所述第一UI。

根据本公开的第三方面，提供一种电子设备，包括：

处理器；

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

其中，所述处理器被配置为：用于运行所述可执行指令时，实现本公开任意实施例所述的用户界面的控制方法。

根据本公开的第四方面，提供一种计算机可读存储介质，所述可读存储介质存储有可执行程序，其中，所述可执行程序被处理器执行时实现本公开任意实施例所述的用户界面的控制方法。

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

在本公开实施例中，基于显示屏的主显示区域和边缘显示区域的尺寸，生成第二UI，其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域远离所述主显示区域的边缘；并将获取的待显示区域的第一UI，基于所述第二UI的圆角矩形区域内缩所述第一UI；并将内缩后的所述第一UI和所述第二UI的进行层叠，生成并显示所述第三UI。

如此，本公开实施例可以在显示屏中显示内缩后的第三UI时，该第三UI具有圆角效果；且，在显示所述第三UI时，所述第三UI的两侧并非黑色，提升用户使用感受。

且，由于所述第一UI进行内缩显示，即至少一部分不显示在所述边缘显示区域，还可以降低用户握持所述电子设备时接触到所述边缘显示区域而造成的对所述第一UI中控件的误触等。

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

附图说明

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

图1是根据一示例性实施例示出的一种用户界面的控制方法的流程图。

图2是根据一示例性实施例示出的一种用户界面的示意图。

图3是根据一示例性实施例示出的一种用户界面的示意图。

图4是根据一示例性实施例示出的一种用户界面的示意图。

图5是根据一示例性实施例示出的一种用户界面的示意图。

图6是根据一示例性实施例示出的一种用户界面的控制方法的流程图。

图7是根据一示例性实施例示出的一种用户界面的控制方法的流程图。

图8是根据一示例性实施例示出的一种用户界面的控制装置的框图。

图9是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

本公开实施例提供一种用户界面的控制方法，所述方法应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示屏区域及位于所述主显示区边缘的边缘显示区域；如图1所示，所述方法包括以下步骤：

步骤S11：获取待显示区域的第一UI；

步骤S12：基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI；

其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域的第一边缘；所述第一边缘为所述边缘显示区域中远离所述主显示区域的边缘；

步骤S13：基于所述第二UI的圆角矩形区域，内缩所述第一UI；

其中，内缩后的第一UI的显示尺寸与所述圆角矩形区域的显示尺寸一致；

步骤S14：层叠所述内缩后的所述第一UI和所述第二UI的所述圆角矩形区域，生成第三UI；

步骤S15：显示所述第三UI。

在本公开实施例中，所述电子设备可以为手机、计算机、平板电脑。所述电子设备的显示屏包括但不限于以下至少之一：瀑布屏、曲面屏、外折屏及刘海屏。曲率和曲率半径可以用于标识所述显示屏的弯曲程度；其中，所述曲率的大小与所述显示屏的弯曲程度成正相关，所述曲率的大小与所述显示屏的弯曲程度成反相关。

例如，在一个实施例中，所述主显示区域具有第一曲率，所述边缘显示区域具有第二曲率，所述第一曲率小于所述第二曲率。

又如，在另一个实施例中，所述主显示区域具有第一曲率半径，所述边缘显示区域具有第二曲率半径，所述第一曲率半径大于所述第二曲率半径。

在本公开实施例中，所述主显示区域可以是一个平面区域，而边缘显示区域是一个曲面显示区域；所述主显示区域相对的两侧分别有一个边缘显示区域。

例如，若所述显示屏为瀑布显示屏，所述主显示区域为第一表面的平面区域，所述边缘显示区域为第二表面及第三表面的瀑布显示区域；其中，所述第二表面与所述第三表面相对设置，分别与所述第一表面的两侧相接。

此处的第一UI为各种应用程序(APP)的应用界面；例如，如图2所示，可以是电邮件、智能出现、手机淘宝、米家、支付宝等应用界面。

在本公开实施例中，所述待显示区域包括：主显示区域及边缘显示区域。在本示例中，若所述待显示区域包括主显示区域及边缘显示区域时，所述第一UI在内缩前是预备显示在整个显示屏中的。

在其它的实施例中，所述待显示区域也可以包括：主显示区域。在本示例中，若所述待显示区域包括主显示区域，所述第一UI在内缩前是预备显示在显示屏的主显示区域的。

在一个实施例中，在所述步骤S12之前，所述方法还包括：获取所述主显示区域和所述边缘显示区域的尺寸。

此处的所述主显示区域的尺寸包括：所述主显示区域的第一边长和第二边长，所述第一边长和所述第二边长相互垂直。此处的所述边缘显示区域的尺寸包括：所述边缘显示区域的第三边长，所述边缘显示区域的第四边长，所述第三边长和所述第四边长相互垂直。若第一边长为所述主显示区域的横边缘，所述第二边长为所述主显示区域的竖边缘，所述第三边长为所述边缘显示区域的横边缘，所述第四边长为所述边缘显示区域的竖边缘，则所述第二边长与所述第四边长相同。

在上述示例中，所述第一边缘可以为竖边缘，且该第一边缘为边缘显示区域中远离所主显示区域的边缘。

在本公开实施例中，所述圆角矩形区域在覆盖所述边缘显示区域的部分或全部。

在一些实施例中，所述步骤S13，包括：基于所述圆角矩形区域的尺寸，按照比例缩小所述第一UI。例如，所述第一UI为4×4cm²的窗口，所述第二UI的圆角矩形区域为：3×3cm²的窗口，将所述第一UI按照

的比例缩小到3×3cm²的窗口。

在其它实施例中，所述第一UI的显示尺寸与所述圆角区域中覆盖所述主显示区域的尺寸一致。如此，在本示例中，所述第一UI仅显示在所述主显示区域内。

此处的第三UI可以包括：内缩后的所述第一UI。这里，在所述步骤S14时，用于层叠的所述第一UI的尺寸与所述圆角矩形区域的尺寸相同。

此处的第三UI也可以包括：内缩后的所述第一UI和透明区域。这里，在所述步骤S14时，用于层叠的所述第一UI的尺寸与所述主显示区域的尺寸相同；所述透明区域为圆角矩形区域的覆盖边缘显示区域的部分所述圆角矩形区域。

在本公开实施例中，基于显示屏的主显示区域和边缘显示区域的尺寸，生成第二UI，其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域远离所述主显示区域的边缘；并将获取的待显示区域的第一UI，基于所述第二UI的圆角矩形区域内缩所述第一UI；并将内缩后的所述第一UI和所述第二UI的进行层叠，生成并显示所述第三UI。如此，可以在显示屏中显示内缩后的第三UI时，具有圆角效果；且，在显示所述第三UI时，所述第三UI的两侧并非黑色，提升用户使用感受。

在一些应用场景中，若所述电子设备处于竖屏状态，则所述边缘显示区域在所述电子设备的左右两侧，所述第三UI的两侧不留黑为所述电子设备的左右两侧。在另一些应用场景中，若所述电子设备处于横屏，则所述边缘显示区域在所述电子设备的上下两侧，所述第三UI的两侧不留黑为所述电子设备的上下两侧不留黑。

在本公开实施例中，由于所述第一UI进行内缩显示，即至少一部分不显示在所述边缘显示区域，还可以降低用户握持所述电子设备时接触到所述边缘显示区域而造成的对所述第一UI中控件的误触等。

在一些实施例中，所述方法还包括：根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI。

其中，所述根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI，包括以下之一：

此处的基于预先配置的一种实现方式可以为：预先将电子设备的所有应用程序对应的第一UI分为需要进行内缩的第一UI，以及不需要进行内缩的第一UI；当电子设备获取到所述第一UI，可以基于所述预先配置，确定所述第一UI是否需要生成包含内缩后的所述第一UI的所述第三UI。

例如，如图2所示中，可以将电子邮件、智能出行、手机淘宝、米家、哔哩哔哩及支付宝对应的用户界面设置为需要进行内缩的第一UI，以及将WPS Office对应的用户界面设置为不需要进行内缩的第一UI。

此处的基于预设配置的另一种实现方式可以为：基于电子设备中预先设置的白名单实现。例如，在一个实施例中，所述方法包括：预先设置白名单，其中，所述白名单包括至少一个备选应用；所述备选应用为需要进行内缩的第一UI所对应的应用程序；

所述根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI，包括：

若待显示区域的所述第一UI对应的当前应用为所述备选应用，确定需要生成包含内缩后的第一UI的所述第三UI；

若待显示区域的所述第一UI对应的当前应用不是所述备选应用，确定不需要生成包含内缩后的第一UI的所述第三UI。

如此，在本实施例中，可以基于每个第一UI所对应的应用程序的属性，确定出是否显示包含所述第一UI的第三UI。

此处的历史显示数据包括：历史内缩次数；其中，所述历史内缩次数为所述第一UI的历史显示时进行内缩次数。在其它的实施例中，所述历史显示数据也可以包括所述第一UI的历史显示时不进行内缩次数等。

此处的第一UI的历史内缩次数可以为至少一个所述电子设备的历史内缩次数，也可以为与所述第一UI所对应的同类型的界面的历史内缩次数。此处的历史内缩次数可以为电子设备中存储的，也可以从云端服务器中获取。

例如，可以在电子设备中预先设置预定次数，若所述第一UI在历史显示时进行内缩的次数大于预定次数，确定需要生成包含内缩的所述第一UI的所述第三UI；若所述第一UI在历史显示时进行内缩的次数小于预定次数，确定不需要生成包含内缩的所述第一UI的所述第三UI。

如此，在本实施例中，可以基于第一UI的历史配置，从而确定出当前是否显示包含内缩后第一UI的第三UI。

此处的内缩触发操作，至少包括：启动内缩所述第一UI的第一操作，及不启动内所述第一UI的第二操作。

例如，在一个应用场景中，所述第一操作包括关闭扩展显示快捷键，所述第二操作包括打开扩展显示快捷键。这里，所述扩展显示快捷键为用于基于显示屏全屏的显示的快捷键。

又如，在另一个应用场景中，所述第一操作包括打开内缩显示快捷键，所述第二操作包括关闭内缩显示快捷键。这里，所述内缩显示快捷键为用于基于主显示区域内缩显示的快捷键。

在一个实施例中，所述预定时间小于或等于5秒。

如此，在本公开实施例中，可以在预定时间范围内，基于是否检测到触发操作，确定需要是否生成包含内缩后的第三UI；如此，可以基于用户的选择来确定是否需要生成触发操作。

当然，在其它的实施例中，所述根据所述确定策略及内缩触发操作，确定是否生成包含内缩后的所述第一UI的所述第三UI，也可以是：

响应于检测到作用于所述第一UI的第一操作，确定生成包含内缩后的所述第一UI的所述第三UI；或者，

响应于检测到作用于所述第一UI的第二操作，确定不生成包含内缩后的所述第一UI的所述第三UI。

在本公开实施例中，可以根据不同的确定策略来确定出是否显示包含内缩后的所述第一UI的所述第三UI，从而可以基于多种方式确定出当前的第一UI的比较合适的显示方式。

当然，在其它的实施例中，所述根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI，包括以下至少之一：

根据基于预设配置得到的所述确定策略，确定是否生成包含内缩后的所述第一UI的所述第三UI；

根据所述确定策略及所述第一UI所对应界面的历史显示数据，确定是否生成包含内缩后的所述第一UI的所述第三UI；

根据所述确定策略及内缩触发操作，确定是否生成包含内缩后的所述第一UI的所述第三UI。

在一个实施例中，所述根据基于预设配置得到的所述确定策略，确定是否生成包含内缩后的所述第一UI的所述第三UI，包括以下之一：

若基于预设配置的所述第一UI不需要进行内缩，确定不需要生成包含内缩后的所述第一UI的所述第三UI。

在一个实施例中，所述根据所述确定策略及所述第一UI所对应界面的历史显示数据，确定是否生成包含内缩后的所述第一UI的所述第三UI，包括以下之一：

若基于所述第一UI的历史显示数据中进行内缩次数小于所述预定次数，确定不需要生成包含内缩后的所述第一UI的所述第三UI。

在一个实施例中，所述根据所述确定策略及内缩触发操作，确定是否生成包含内缩后的所述第一UI的所述第三UI，包括以下之一：

在一些实施例中，所述方法包括：

在本公开实施例中，若确定所述第一UI不需要进行内缩显示时，可以直接基于所述显示屏全屏显示所述第一UI；如此，可以增加显示内容的显示区域。

在一些实施例中，所述步骤S12，包括：

所述步骤13，包括：

所述步骤14，包括；

所述步骤15，包括：

按照N个所述第三UI的生成顺序，依次显示N个所述第三UI。

此处的第N个所述第二UI的所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域远离所述主显示区域的边缘。

在一个实施例中，N个所述第三UI的生成顺序包括：依次生成第1个所述第三UI、第2个所述第三UI、……、第N-1个所述第三UI及第N个所述第三UI。如此，在本示例实例中，依次显示N个所述第三UI时，为动画扩大显示所述第三UI。

在另一个实施例中，N个所述第三UI的生成顺序包括：依次生成第N个所述第三UI、第N-1个所述第三UI、……第2个所述第三UI及第1个所述第三UI。如此，在本示例中，依次显示N个所述第三UI时，为动画缩小显示所述第三UI。

在本公开实施例中，可以在启动所述第一UI及退出所述第一UI时，可以动画放大或者缩小包含内缩后的所述第一UI的所述第三UI，从而可以实现窗口动画时具有圆角效果；且在动画的过程中第三UI的两侧不留黑。例如，如图3所示，为动画缩小所述第三UI的过程，示意图中所述第三UI具有圆角效果，且所述第三UI的两侧是将原本具有两侧黑边的地方已裁剪、呈现两侧不留黑的效果。

在一些实施例中，所述基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI，包括：

在一个实施例中，所述主显示区域的顶角为4个。所述顶角的相邻两边为所述主显示区域的两边的部分边长。

例如，如图4所示，主显示区域的两边为第一边长和第二边长，所述顶角的相邻两边为第一部分第一边长和第一部分第二边长。此处的第一弧线为连接第一部分第一边长的第一端点和第一部分第二边长的第一端点的弧线，其中，所述第一部分第一边长的第一端点为所述第一部分第一边长中远离与第一部分第二边长相交的一端，所述第一部分第二边长的第一端为所述第一部分第二边长中远离与所述第一部分第二边长相交的一端。所述第一弧线、所述第一部分第一边长及所述第一部分第二边长围成的区域为黑色区域；在图4中可用区域A指示所述黑色区域。

在上述示例中，所述第一弧线、第二部分第一边长及第二部分第二边长所围成的区域为所述圆角矩形区域；在图4中可用区域B指示所述圆角矩形区域。这里，所述第二部第一边长为所述第一边长中除所述第一部分第一边长外的边长，所述第二部分第二边长为所述第二边长中除所述第一部分第二边长外的边长。

当然在其他实施例中，请参见图4及5，若所述第二UI中圆角矩形区域还覆盖从所述主显示区域延伸到所述边缘显示区域远离所述主显示区域的边缘，则所述圆角矩形区域包括所述第一弧线、所述第一部分第一边长及所述第一部分第二边长所围成的区域B及区域C；其中，所述区域C为所述边缘显示区域的部分或全部区域。

在一个实施例中，基于所述主显示区域的顶角的相邻两边的各边长度，确定第一弧线，包括：基于所述相邻两边的各边的立方和，确定所述第一弧线的半径的立方。

例如，所述第一弧线为：X³+Y³＝R³；其中，所述X为所述第一部分第一边长，所述Y为所述第一部分第二边长，所述R为所述第一弧线的半径。如此，在本示例中，可以基于的一部分第一边长及第一部分第二边长，确定出所述第一弧线的半径，从而确定出所述第一弧线。

在本公开实施例中，可以通过主显示区域顶角的相邻两边的各边长度，确定第一弧线，从而确定出第二UI显示的圆角效果比较平滑，提升用户使用感受。

在一些实施例中，所述基于所述第一弧线与所述相邻两边所围成的区域，生成所述第二UI的所述黑色区域，包括：

在一个实施例中，所述像素参数值，用于表示颜色的透明度或者不透明度。

在一个应用场景中，所述像素参数值可以为Alpha通道。此处的像素参数值可以设置为[0，1]区间；例如，当一个区域的像素参数值设置为0，该区域为全透明的黑色；又如，当一个区域的像素参数值设置为1时，该区域不透明的白色。

在本公开实施例中，可以将第一弧线与主显示区域顶角的相邻两边所围成的区域的像素点进行透明度的设置，从而使得该区域呈现能够显示颜色，进而呈现圆角效果；且该种方式简单易实现。

在其它的一个实施例中，所述基于所述第一弧线与所述相邻两边所围成的区域，生成所述第二UI的所述黑色区域，包括：

将所述第一弧线与所述相邻两边围成的区域的颜色参数值进行修改，生成所述第二UI的所述黑色区域。

此处的颜色参数值包括：第一颜色参数值、第二颜色参数值及第三颜色参数值。所述第一颜色参数值、所述第二颜色参数值及所述第三颜色参数值均可以设置为[0，255]。

在一个应用场景中，所述第一颜色参数值为红色、所述第二颜色参数值为绿色及所述第三颜色参数值为蓝色；其中所述第一颜色参数值、所述第二颜色参数值及所述第三颜色参数值的均可以设置为0，则所述第一弧线与主显示区域顶角的相邻两边所围成的区域为黑色。

如此，在本开实施例中，也可以通过对所述第一弧线与主显示区域顶角的相邻两边所围成的区域的像素点进行颜色设置，从而使得该区域能够显示黑色，进而呈现圆角效果。

以下结合上述任意实施例提供一个具体示例：

如图6所示，本公开实施例提供了一种用户界面的控制方法，应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；所述方法包括以下步骤：

步骤S61：初始化电子设备；

步骤S62：获取所述边缘显示区域的尺寸并存储；

在一个可选实施例中，所述电子设备从资源文件中加载所述边缘显示区域的尺寸，并将所述边缘显示区域的尺寸存储在全局显示帧信息中。

此处的全局显示帧中包括所述显示屏的尺寸。

步骤S63：获取待显示的第一UI；

在一个可选实施例中，所述电子设备获取在所述显示屏的待显示的所述第一UI。

步骤S64：根据确定策略，确定是否生成包含内缩后的所述第一UI的第三UI；若是，执行步骤S65；若否，执行步骤S66；

在一个可选实施例中，所述电子设备根据所述第一UI所对应界面的历史显示数据，确定是否生成包含内缩后的当所述第一UI的第三UI。

在另一个可选实施例中，所述电子设备根据对所述第一UI的内缩触发操作，确定是否生成包含内缩后的所述第一UI的第三UI。

例如，在一个实际应用场景中，还提供了一种第一UI是否内缩的可实现方式：

通过设置PackageSettingBase中的appUseSideMode属性来控制是否对第一UI进行内缩显示；

appUseSideMode＝1；//扩展；

appUseSideMode＝0；//内缩；

对PackageSettingBase进行以下设置：

PackageManagerEx.setAppUseSideMode("com.miui.settings",0；

此处的PackageManagerEx还定义以下：

public static int getAppUseSideMode(String packageName)；

public static boolean isAllAppsUseSideMode(List<String>packageNameList)；

public static boolean restoreAllAppsUseSideMode()；

public static boolean setAllAppsUseSideMode(boolean isUse)。

步骤S65：生成包含内缩后的所述第三UI；

在一个可选实施例中，所述电子设备根据从全局显示帧中读取除去所述边缘显示区域的区域作为第二UI；并基于所述第二UI，内缩所述第一UI；并在所述第二UI上内嵌内缩后的所述第一UI，以生成包含内缩后的所述第一UI的所述第三UI。

例如，如图7所示，在一个实际应用场景中，还提供了一种生成内缩第一UI的可实现方式：

步骤S6501：在所述显示裁剪(DisplayCutout)类保存边缘显示区域的尺寸；

此处的边缘显示区域的尺寸包括所述边缘显示区域的长和宽。

步骤S6502：在显示内容(DisplayContent)类启动开始布局；

步骤S6503：在显示内容类中根据转向计算边缘显示区域的裁剪区域；

步骤S6504：在显示裁剪类中设置显示矩形的长和宽；

此处设置显示矩形的长和宽根据边缘显示区域的裁剪区域确定。此处的显示矩形的长和宽为上述实施例的第二UI。

步骤S6505：在显示策略(MiuiDisplay Policy)类中设置显示矩形的长和宽；

步骤S6506：在显示帧(DisplayFrames)类中调用显示矩形的长和宽；

步骤S6507：在窗口状态(WindowState)类中调用显示矩形的长和宽。

此处显示帧类可为上述实施例中的全局显示帧。

在本示例中，在显示内容类进行窗口布局前，将内缩宽度(即边缘显示区域的尺寸)保存到显示裁剪类中，然后开始布局(layout)；显示帧类根据第一UI所对应的内缩属性，调用显示内容类中布局中根据内缩宽度计算出除去内缩宽度之后的显示矩形(mDisplayExceptSide)；最后显示帧类中保存所述显示矩形，且窗口状态类将内嵌显示矩形的第三UI传输应用端，以布局绘制工作。

步骤S66：确定不对所述第一UI进行内缩；

在一个可选实施例中，所述电子设备不对全局显示帧做调整。

步骤S67：根据配置的圆角信息，对所述第三UI进行修改，以生成具有圆角的所述第三UI；

在一个可选实施例中，所述电子设备基于所述第三UI顶角的相邻两边生成第二弧线；将所述第二弧线与所述相邻两边所围成的区域设置为黑色区域，以生成具有圆角的所述第三UI。

步骤S68：在所述第三UI中添加对应的显示内容。

在本公开实施例中，可以在动画显示包含内缩后的第一UI的第三UI时两侧不留黑，并且在显示所述第三UI时呈现圆角效果，从而提升用户使用感受。

并且，在本公开实施例中，可以根据策略确定第一UI是否内缩显示，从而针对每个应用所对应的第一UI选择合适的显示方式；且当第一UI进行内缩显示时，还可以降低用户握持所述电子设备时接触到所述边缘显示区域而造成的对所述第一UI中控件的误触等。

图8是根据一示例性实施例示出的一种用户界面的控制装置的框图，所述用户界面的控制装置应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；如图8所示，所述装置包括：

获取模块71，用于获取待显示区域的第一UI；

生成模块72，用于基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI，其中，所述第二UI包括：透明的圆角矩形区域及位于所述圆角矩形区域外的黑色区域；所述圆角矩形区域覆盖所述主显示区域且从所述主显示区域延伸到所述边缘显示区域的第一边缘；所述第一边缘为所述边缘显示区域中远离所述主显示区域的边缘；

内缩模块73，用于基于所述第二UI的圆角矩形区域，内缩所述第一UI；其中，内缩后的第一UI的显示尺寸与所述圆角矩形区域的显示尺寸一致；

层叠模块74，用于层叠所述内缩后的所述第一UI和所述第二UI的所述圆角矩形区域，生成第三UI；

显示模块75，用于显示所述第三UI。

在一些实施例中，所述装置还包括：

确定模块76，用于根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI。

在一些实施例中，所述确定模块76，用于以下至少之一：

在一些实施例中，所述生成模块72，用于基于所述主显示区域和所述边缘显示区域的尺寸，生成N个所述第二UI；其中，第n-1个所述第二UI的所述圆角矩形区域的面积，小于第n个所述第二UI的所述圆角矩形区域的面积，其中，所述n为大于等于1、且小于或等于N的整数；

所述内缩模块73，用于基于第m个所述第二UI，内缩所述第一UI得到内缩后的第m个第一UI；其中，m为小于或等于N的正整数；

所述层叠模块74，用于将内缩后的第m个第一UI层叠在所述第m个所述第二UI上，生成第m个所述第三UI；

所述显示模块75，用于按照N个所述第三UI的生成顺序，依次显示N个所述第三UI。

在一些实施例中，所述生成模块72，用于基于所述主显示区域的顶角的相邻两边的各边长度，确定第一弧线；基于所述第一弧线与所述相邻两边围成的区域，生成所述第二UI的所述黑色区域；

所述生成模块72，还用于基于所述主显示区域中除黑色区域以外的区域以及所述边缘显示区域，生成所述第二UI的所述圆角矩形区域。

在一些实施例中，所述生成模块72，用于将所述第一弧线与所述相邻两边围成的区域的像素参数值进行修改，生成所述第二UI的所述黑色区域。

在一些实施例中，所述显示模块75，用于若根据所述确定策略不需要进行内缩调整，基于所述显示屏的全屏显示所述第一UI。

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

本公开的实施例还提供了一种电子设备，包括：

处理器；

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

所述存储器可包括各种类型的存储介质，该存储介质为非临时性计算机存储介质，在通信设备掉电之后能够继续记忆存储其上的信息。

所述处理器可以通过总线等与存储器连接，用于读取存储器上存储的可执行程序，例如，实现如图1、图6所示的方法的至少其中之一。

本公开的实施例还提供了一种计算机可读存储介质，所述可读存储介质存储有可执行程序，其中，所述可执行程序被处理器执行时实现本公开任意实施例所述的用户界面的控制方法。例如，实现如图1、图6所示的方法的至少其中之一。

图9是根据一示例性实施例示出的一种用于电子设备800的框图。例如，电子设备800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图9，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由电子设备800的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

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

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

Claims

1.一种用户界面的控制方法，其特征在于，应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；所述方法包括：

获取待显示区域的第一用户界面UI；

基于所述第二UI的圆角矩形区域，内缩所述第一UI；其中，所述内缩后的第一UI的显示尺寸与所述圆角矩形区域的显示尺寸一致；

显示所述第三UI。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

3.根据权利要求2所述的方法，其特征在于，所述根据确定策略，确定是否需要生成包含内缩后的所述第一UI的所述第三UI，包括以下至少之一：

4.根据权利要求1所述的方法，其特征在于，所述基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI，包括：

基于所述主显示区域和所述边缘显示区域的尺寸，生成N个第二UI；其中，第n-1个所述第二UI的所述圆角矩形区域的面积，小于第n个所述第二UI的所述圆角矩形区域的面积，其中，所述n为大于等于1、且小于或等于N的整数；

所述层叠所述内缩后的所述第一UI上和所述第二UI的所述圆角矩形区域，生成第三UI，包括；

将内缩后的第m个第一UI层叠在所述第m个所述第二UI上，生成第m个第三UI；

所述显示所述第三UI，包括：

按照N个所述第三UI的生成顺序，依次显示N个所述第三UI。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述基于所述主显示区域和所述边缘显示区域的尺寸，生成第二UI，包括：

6.根据权利要求5所述的方法，其特征在于，所述基于所述第一弧线与所述相邻两边所围成的区域，生成所述第二UI的所述黑色区域，包括：

7.一种用户界面的控制装置，其特征在于，应用于电子设备，所述电子设备包括显示屏，所述显示屏包括：主显示区域及位于所述主显示区边缘的边缘显示区域；所述装置包括：

获取模块，用于获取待显示区域的第一用户界面UI；

显示模块，用于显示所述第三UI。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

9.根据权利要求8所述的装置，其特征在于，所述确定模块，用于以下至少之一：

10.根据权利要求7所述的装置，其特征在于，

所述生成模块，用于基于所述主显示区域和所述边缘显示区域的尺寸，生成N个所述第二UI；其中，第n-1个所述第二UI的所述圆角矩形区域的面积，小于第n个所述第二UI的所述圆角矩形区域的面积，其中，所述n为大于等于1、且小于或等于N的整数；

11.根据权利要求7至10任一项所述的装置，其特征在于，

所述生成模块，用于基于所述主显示区域的顶角的相邻两边的各边长度，确定第一弧线；基于所述第一弧线与所述相邻两边围成的区域，生成所述第二UI的所述黑色区域；

12.根据权利要求11所述的装置，其特征在于，

所述生成模块，用于将所述第一弧线与所述相邻两边围成的区域的像素参数值进行修改，生成所述第二UI的所述黑色区域。

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

处理器；

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

其中，所述处理器被配置为：用于运行所述可执行指令时，实现权利要求1-6任一项所述的用户界面的控制方法。

14.一种计算机可读存储介质，其特征在于，所述可读存储介质存储有可执行程序，其中，所述可执行程序被处理器执行时实现权利要求1-6任一项所述的用户界面的控制方法。