CN117492881A - 可折叠电子设备、用于折叠屏的显示方法 - Google Patents

Abstract

本申请一种可折叠电子设备、用于折叠屏的显示方法。该方法包括电子设备在展开态时获取所设置的界面元素的第一高度与第一宽度，判断第一高度是否合格即判断第一高度与屏幕高度的比值是否不大于阈值。当第一高度合格时，则显示具有第一高度的界面元素；当第一高度不合格，电子设备对第一高度进行调整得到第二高度，并显示具有第二高度的界面元素。本申请技术方案对展开态下的界面元素的高度进行调整判断，可以避免出现大字体大图像的现象，还可以有效的减少当电子设备处于展开态时，导致页面信息量相对于折叠态时缺失的现象，使得用户体验感好。

Description

可折叠电子设备、用于折叠屏的显示方法

技术领域

本申请实施例涉及终端技术领域，尤其涉及可折叠电子设备、用于折叠屏的显示方法。

背景技术

电子设备的折叠屏既能在展开态时满足用户的大屏需求，又能在折叠态时缩小体积兼顾便携需求，因此应用非常广。但是，电子设备的折叠屏在发生形态变化时(例如从展开态切换到折叠态或从折叠态切换到展开态时)，如何更好的实现电子设备的屏幕内容的适应性显示是本领域技术人员一直在研究的问题。

发明内容

本申请提供了一种可折叠电子设备、用于折叠屏的显示方法，实现了可以避免出现大字体大图像的现象，还可以有效的减少当电子设备处于展开态时，导致页面信息量相对于折叠态时缺失的现象，使得用户体验感好。

第一方面，本申请提供了一种用于折叠屏的显示方法，该方法包括：电子设备可以获取展开态下所设置的第一界面中的界面元素的第一高度和第一宽度，该第一高度和该第一宽度是基于该电子设备处于折叠态时的该界面元素的高度和宽度所确定的。该电子设备判断该第一高度与屏幕高度的比值是否大于第一阈值。若该比值大于该第一阈值，则调整该界面元素的高度为第二高度，该第二高度与屏幕高度的比值不大于该第一阈值。该电子设备根据该第二高度获取到第二宽度。该电子设备在展开态下显示第一界面，上述显示的该第一界面中包括具有该第二高度与该第二宽度的该界面元素。

由上述方法可知，电子设备可以基于用户的使用感受，计算出高度与屏幕高度的比值的阈值，并设计界面元素的第二高度与屏幕高度的比值小于上述阈值。这样能够有效减少电子设备在展开态下出现大图像大字号的现象，并且，能够符合用户的使用习惯，提升用户的体验感。并且，还可以减少电子设备在展开态下出现内容信息量缺失的现象，进一步的提升用户的使用感受。上述方法还可以自适应的设计界面元素的第二高度，无需开发人员在应用程序开发阶段进行人工对在展开态下的界面元素的大小与布局的设计，减轻开发人员的工作量。

结合第一方面，在一些实施方式中，该第一宽度与该第一高度的比值等于该第二宽度与该第二高度的比值，或者该第一宽度与该第一高度的比值和该第二宽度与该第二高度的比值之差小于第一差值。这样，电子设备可以保证所显示的界面元素的宽高比保持不变，更加美观。

结合第一方面，在一些实施方式中，该第一界面的控件布局类型为内容宫格类型，上述显示的该第一界面在一行中所容纳的图片，多于或等于该所设置的该第一界面在一行所容纳的图片。上述显示的该第一界面在一列所容纳的图片，多于或等于上述显示的该第一界面在一列所容纳的图片。

结合第一方面，在一些实施方式中，该第一界面中的界面元素包括图片或卡片，该图片或卡片的排布方式是宫格型。

结合第一方面，在一些实施方式中，该所设置的该第一界面中该图片或卡片的宽度大于该电子设备处于折叠态时该图片或卡片显示的宽度。

其中，电子设备可以根据下述宫格布局参数关系来对多个内容宫格的界面元素进行布局设计：

W＝2A+n*B1’+(n-1)*C

其中，W表示的是电子设备在展开态下的屏幕宽度，即展开宽度W；A表示的是电子设备中显示在最靠近屏幕边缘的界面元素距离屏幕边缘的宽度，即边距A；n表示的是电子设备100中显示的内容宫格类型的界面元素的列；B1’表示的是电子设备根据上述公式(1)计算得到的第二宽度；C表示的是电子设备中显示的每两列界面元素之间的间距宽度，即间距C。

这样，电子设备可以针对于内容宫格类型的界面元素进行进一步调整，使得在展开态下所显示的界面元素更加美观。

结合第一方面，在一些实施方式中，该第一界面的控件布局类型为大图类型，该大图类型是指：该所设置的该第一界面中包括有一张照片，该照片的宽度等于屏幕宽度，或者该照片的宽度与屏幕宽度的差值小于第一差值。

该所设置的该第一界面中该照片的宽度，小于，该显示的该第一界面中该照片的宽度。该显示的该第一界面在纵向空间所容纳的该照片的内容多于该所设置的该第一界面在纵向空间所容纳的该照片的内容。

结合第一方面，在一些实施方式中，该所设置的该第一界面中该照片的宽度大于该电子设备处于折叠态时该照片显示的宽度。

电子设备在显示大图类型的界面元素时，可以通过背景模糊或者裁剪处理的方式显示。

这样，电子设备可以针对于大图类型的界面元素进行进一步调整，使得在展开态下所显示的界面元素更加美观。

结合第一方面，在一些实施方式中，该第一界面的控件布局类型为社交列表类型，该社交列表类型是指：该所设置的该第一界面中显示有至少一个社交动态。

结合第一方面，在一些实施方式中，该社交动态的结构为该社交动态上半部分为文字，下半部分为照片，或者，该社交动态上半部分为照片，下半部分为文字。

结合第一方面，在一些实施方式中，当该社交动态中仅包含一张照片时，该显示的该第一界面中该照片的宽度，小于，该所设置的该第一界面中该照片的宽度。该显示的该第一界面在纵向空间所容纳的该照片的内容多于该所设置的该第一界面在纵向空间所容纳的该照片的内容。

结合第一方面，在一些实施方式中，当该社交动态中包含多张照片时，该显示的该第一界面在一行中所容纳的照片，多于该所设置的该第一界面在一行所容纳的照片。该显示的该第一界面在一列所容纳的照片，多于该所设置的该第一界面在一列所容纳的照片。

结合第一方面，在一些实施方式中，该所设置的该第一界面中该照片的宽度大于该电子设备处于折叠态时该照片显示的宽度。

这样，电子设备可以针对于社交列表类型的界面元素进行进一步调整，使得在展开态下所显示的界面元素更加美观。

结合第一方面，在一些实施方式中，该第一界面的控件布局类型为文本列表类型，该文本列表类型是指：该所设置的该第一界面中显示有文本，该显示的该第一界面的文本字体小于该所设置的该第一界面的文本字体。

结合第一方面，在一些实施方式中，该所设置的该第一界面的文本字体大于该电子设备处于折叠态时该文本显示的字体。

这样，电子设备可以针对于文本列表类型的界面元素进行进一步调整，使得在展开态下所显示的界面元素更加美观。

结合第一方面，在一些实施方式中，该第一界面的控件布局类型为应用入口类型，该第一界面的界面元素为功能入口图标；该显示的该第一界面的该功能入口图标小于该所设置的该第一界面的该功能入口图标。

结合第一方面，在一些实施方式中，该显示的该第一界面在一行中所容纳的功能入口图标，等于该所设置的该第一界面在一行所容纳的功能入口图标。该显示的该第一界面在一行中所容纳的每两个功能入口图标之间的间隙大于该所设置的该第一界面在一行所容纳的每两个功能入口图标之间的间隙。

结合第一方面，在一些实施方式中，该所设置的该第一界面的该功能入口图标大于该电子设备处于折叠态时显示的该功能入口图标。

这样，电子设备可以针对于应用入口类型的界面元素进行进一步调整，使得在展开态下所显示的界面元素更加美观。

结合第一方面，在一些实施方式中，该第一高度和该第一宽度是基于该电子设备处于折叠态时的该界面元素的高度和宽度所确定的；具体包括：

基于该电子设备的屏幕在展开态以及折叠态下的宽度变化得到该第一宽度，该界面元素在折叠态下的宽度与该第一宽度的变化量与在展开态以及折叠态下屏幕的宽度变化量正相关，该界面元素在折叠态下的宽高比与在展开态下所设置的宽高比一致，或者该界面元素在折叠态下的宽高比与在展开态下所设置的宽高比之差小于第二差值。

结合第一方面，在一些实施方式中，电子设备获取展开态下所设置的第一界面中的界面元素的第一高度和第一宽度之前，该方法还包括：该电子设备检测到该电子设备从折叠态切换至展开态。

结合第一方面，在一些实施方式中，该折叠屏包括设置于该电子设备同一侧的第一屏和第二屏，该电子设备在展开态下显示该第一界面具体包括：该电子设备在展开态下通过该第一屏和该第二屏中共同显示该第一界面。

该第一高度和该第一宽度是基于该电子设备处于折叠态时的该界面元素的高度和宽度所确定的具体包括：该第一高度、该第一宽度是基于该电子设备处于折叠态下该第一屏显示的该第一界面元素的高度与宽度确定的。

结合第一方面，在一些实施方式中，该折叠屏包括设置于该电子设备一侧的第一屏，以及另一侧的第二屏和第三屏，该电子设备在展开态下显示第一界面具体包括：该电子设备在展开态下通过该第二屏和该第三屏中共同显示该第一界面。该第一高度和该第一宽度是基于该电子设备处于折叠态时的该界面元素的高度和宽度所确定的具体包括：该第一高度、该第一宽度是基于该电子设备处于折叠态下该第一屏显示的该第一界面元素的高度与宽度确定的。

第二方面，本申请实施例提供了一种电子设备，包括：存储器、一个或多个处理器；存储器与一个或多个处理器耦合，存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，一个或多个处理器调用计算机指令以使得电子设备执行如第一方面或第一方面任意一种实施方式的方法。

第三方面，本申请实施例提供了一种计算机可读存储介质，包括指令，当指令在电子设备上运行时，使得电子设备执行如第一方面或第一方面任意一种实施方式的方法。

可以理解地，上述第二方面提供的电子设备和第三方面提供的计算机存储介质均用于执行本申请实施例所提供的方法。因此，其所能达到的有益效果可参考对应方法中的有益效果，此处不再赘述。

附图说明

图1为本申请实施例提供的一种电子设备100的结构示意图。

图2A为本申请实施例提供的电子设备的展开态示意图。

图2B为本申请实施例提供的电子设备的折叠态示意图。

图3A-图6B为本申请实施例提供的用户界面示意图。

图7A、图7B为本申请实施例提供的内容宫格类型的用户示意图。

图8A、图8B为本申请实施例提供的沉浸式大图类型的用户示意图。

图9A、图9B为本申请实施例提供的社交列表类型的用户示意图。

图10A、图10B为本申请实施例提供的文本列表类型的用户示意图。

图11A、图11B为本申请实施例提供的应用入口类型的用户示意图。

图12为本申请实施例提供的一种用于折叠屏的显示方法的流程示意图。

图13为本申请实施例提供的一种内容宫格类型的布局示意图。

图14A、图14B为本申请实施例提供的一种沉浸式大图类型的布局示意图。

图15A-图15B为本申请实施例提供的多种控件布局类型综合的用户示意图。

图16A-图16B为本申请实施例提供的另多种控件布局类型综合的用户示意图。

图17为本申请实施例提供的一种电子设备100的软件结构示意框图。

具体实施方式

下面将结合附图对本申请实施例中的技术方案进行清楚、详尽地描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；文本中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，另外，在本申请实施例的描述中，“多个”是指两个或多于两个。

以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。

本申请以下实施例中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面是通过java、可扩展标记语言(extensible markuplanguage，XML)等特定计算机语言编写的源代码，界面源代码在电子设备上经过解析，渲染，最终呈现为用户可以识别的内容。用户界面常用的表现形式是图形用户界面(graphicuser interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的文本、图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

为了更加清楚地介绍本申请实施例提供的方法，下面介绍本申请实施例中提供的示例性电子设备100。

图1示出了电子设备100的结构示意图。

电子设备100可以是手机、平板电脑、桌面型计算机、膝上型计算机、手持计算机、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本，以及蜂窝电话、个人数字助理(personal digital assistant，PDA)、增强现实(augmentedreality，AR)设备、虚拟现实(virtual reality，VR)设备、人工智能(artificialintelligence,AI)设备、可穿戴式设备、车载设备、智能家居设备和/或智慧城市设备，本申请实施例对该电子设备100的具体类型不作特殊限制。

电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

可以理解的是，本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以根据界面元素属于文字控件还是图像控件以及控件大小判断出控件所属的控件布局类型。处理器110还可以根据所得到的不同种类的控件布局类型的阈值大小，设置控件的第二高度，并进一步的计算出控件的第二宽度。处理器110还可以基于上述不同种类的控件布局类型的处理方式，对控件的布局进行一定程度上的改变。

在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。

I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。

PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。

UART接口是一种通用串行数据总线，用于异步通信。

MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。

GPIO接口可以通过软件配置。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。

可以理解的是，本发明实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。

电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。

无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(codedivision multiple access，CDMA)，宽带码分多址(wideband code division multipleaccess，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidounavigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellitesystem，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

ISP用于处理摄像头193反馈的数据。摄像头193用于捕获静态图像或视频。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。

视频编解码器用于对数字视频压缩或解压缩。

NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

内部存储器121可以包括一个或多个随机存取存储器(random access memory，RAM)和一个或多个非易失性存储器(non-volatile memory，NVM)。

随机存取存储器可以包括静态随机存储器(static random-access memory，SRAM)、动态随机存储器(dynamic random access memory，DRAM)、同步动态随机存储器(synchronous dynamic random access memory,SDRAM)、双倍资料率同步动态随机存取存储器(double data rate synchronous dynamic random access memory,DDR SDRAM，例如第五代DDR SDRAM一般称为DDR5 SDRAM)等；非易失性存储器可以包括磁盘存储器件、快闪存储器(flash memory)。

快闪存储器按照运作原理划分可以包括NOR FLASH、NAND FLASH、3D NAND FLASH等，按照存储单元电位阶数划分可以包括单阶存储单元(single-level cell,SLC)、多阶存储单元(multi-level cell,MLC)、三阶储存单元(triple-level cell,TLC)、四阶储存单元(quad-level cell,QLC)等，按照存储规范划分可以包括通用闪存存储(英文：universalflash storage，UFS)、嵌入式多媒体存储卡(embedded multi media Card，eMMC)等。

外部存储器接口120可以用于连接外部的非易失性存储器，实现扩展电子设备100的存储能力。外部的非易失性存储器通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部的非易失性存储器中。

可折叠电子设备100(以下也简称“折叠屏设备”或“电子设备100”)具体可以是指显示屏可以进行折叠的电子设备100。电子设备100的显示屏194可以是指采用一个一体成型的柔性显示屏，可以是指采用多个柔性显示屏以及位于没量过柔性显示屏之间的铰链组成的拼接显示屏，可以是指采用多个刚性屏以及位于每两个刚性屏之间的一个柔性屏组成的拼接显示屏，还可以是指采用多个刚性屏以及位于每两个刚性屏之间的铰链组成的拼接显示屏等等，在本申请实施例中，对此不作限定。

显示屏194也可以是由多个子屏幕拼接构成的，子屏幕之间可通过铰链连接。其中，子屏幕可以是柔性屏，也可以不是柔性屏。显示屏194可以是一整块柔性显示屏。其中，上述多个子屏幕可以是指一整块柔性显示屏的多个部分。

当电子设备100处于展开态时，电子设备100同一侧的多个子屏幕可以作为一个屏幕显示，可以参考图2A所示的电子设备100展开态示意图。

当电子设备100处于折叠态时，可以参考如图2B所示的电子设备100折叠态示意图。在一种可能的实现方式中，显示屏194的其中一个子屏幕可以显示有界面元素，其他子屏幕不显示界面元素，电子设备100可以响应作用于其中一个子屏幕上的用户操作，其他子屏幕此时不响应用户作用于其上的操作。在另一种可能的实现方式中，多个子屏幕均可以显示有界面信息，电子设备100可以响应作用于多个子屏幕上的用户操作，对此不作限定。

电子设备100处于展开态可以是指电子设备100同一侧的多个子屏幕构成同一平面或构成近似平面，传感器模块180可以检测到电子设备100同一侧的多个子屏幕之间的夹角为180度(实际角度可能无法达到180度，以实际检测角度为准)或者传感器模块180可以检测到电子设备100同一侧的多个子屏幕之间的夹角大于阈值，如图2A所示。此时，显示屏194的电子设备100同一侧的多个子屏幕共同显示界面元素。

为了方便描述可折叠电子设备的折叠态、展开态以及介于二者之间的动态切换，如图2A所示，可以将可折叠电子设备分为四个面：A面、B面、C面和D面。其中，其中，A面为主屏的外壳所在面，B面为主屏的触控面板所在面，C面为副屏的外壳所在面，D面为副屏的触控面板所在面。

可折叠电子设备可以通过向内折主屏和副屏而处于一种完全或近完全折叠态。此时，A面和C面暴露在外，B面和D面可发生部分或完全接触。此时，主屏和副屏因内折不能被用户所见而可以设置为熄屏状态。这里，向内折可以如图2A所示，主屏和副屏沿第一方向100A发生折叠。

可折叠电子设备也可以通过向外折主屏和副屏而处于另一种完全或近完全折叠态。此时，B面和D面暴露在外，A面和C面可发生部分或完全接触。这里，向外折可以如图2A所示，主屏和副屏沿第二方向100B发生折叠。一种实现是，主屏可以显示内容，而副屏可以不显示内容而处于熄屏状态。另一种实现是，主屏和副屏都可以显示内容。

在另一种可能的实现方式中，A面也可以为主屏的触控面板所在面，B面和D面为副屏的触控面板所在面，电子设备100可以沿着第一方向100A发生折叠之前(即处于展开态时)，可以由B面和D面显示内容，电子设备100可以沿着第一方向100A发生折叠之后(即处于折叠态时)，可以由A面显示内容。

可折叠电子设备也可以通过向外折或向内折主屏和副屏而处于打开态。打开态可以是指可折叠电子设备的B面和C面之间的夹角大于特定角度，该特定角度可例如110°等，此时B面和C面的输入/输出面板能够充分暴露于用户而使得人机交互有条件实施。打开态可以包括多个打开位置，该打开位置可以用B面和C面之间的夹角来定义，例如110°、120°、150°、180°等。当B面和C面之间的夹角等于或接近于180°时，可折叠电子设备处于完全或近完全打开态。上述主屏与副屏都是属于多个子屏幕。

电子设备100处于折叠态可以是指电子设备100同一侧的多个子屏幕平行或者趋近于平行，传感器模块180可以检测到电子设备100同一侧的多个子屏幕之间的夹角为0度或者180度(实际角度可能无法达到0度或者180度，以实际检测角度为准)或者传感器模块180可以检测到电子设备100同一侧的多个子屏幕之间的夹角小于阈值，如图2B所示。值得说明的是，折叠态可以分为外折和内折两种姿态。其中，外折可以是指显示屏194在折叠态下露于外侧，壳体被折叠隐藏于内部的情况(可以称为外折姿态或背离姿态)，此时，可以由显示屏194的其中一个子屏幕显示界面信息；内折可以是指显示屏194被折叠隐藏于内部，而壳体露于外侧的情况(可以被称为内折姿态)。此时，可以不显示有界面元素，也可以存在其他显示界面元素的方式。在本申请实施例中，对此不作限定。

电子设备100可以支持其从折叠态转变为展开态。电子设备100由折叠态转换为展开态可以是指电子设备100同一侧的多个子屏幕由平行或者趋近于平行转变为构成同一平面或构成近似平面，传感器模块180可以检测到电子设备100同一侧的多个子屏幕之间的夹角由小于阈值转变为大于阈值。在折叠态的情况下，电子设备100上所显示的界面元素(例如文字控件或者图像控件)是根据折叠态下的电子设备100的屏幕宽度来布局的。也就是说，电子设备100所显示的界面元素的布局与大小是与折叠态下的电子设备100的屏幕宽度相适应的。当电子设备100由折叠态转换为展开态时，电子设备100的屏幕宽度可能会发生变化。若电子设备100所显示的界面元素的布局与大小依旧如折叠态下的控件一样，那么可能会出现界面元素的布局与大小与展开态下的电子设备100的屏幕宽度不匹配的现象，导致屏幕出现留白，这样，可能影响用户体验。因此，在电子设备100处于展开态时，可以对界面元素的大小进行一定程度上的改变。

基于用户使用电子设备100的使用距离的研究显示，用户在电子设备100为展开态时的使用距离大约为折叠态时的1.1倍。因此，从理论上来说，电子设备100所显示的控件界面元素(例如文字控件以及图像控件)可以适当的增大。但是，当电子设备100所显示界面元素变的过大时，出现大字体、大图像的现象时，会导致屏幕显示的信息丢失，用户体验感不好。

以下将结合附图和应用场景，对本申请实施例提供的用于折叠屏的显示方法进行详细介绍。

可以理解的是，本申请以下实施例中所描述的各个用户界面仅为示例界面，并不对本申请其他实施例构成限制。在其他实施例中，用户界面中可以采用不同的界面布局，可以包括更多或更少的控件，可以增加或减少其他功能选项，以下示例界面也可以迁移用于其他类型设备上，只要基于本申请提供的同一发明思想的技术方案，都在本申请保护范围内。

图3A-图3B示例性示出了本申请实施例提供的用于折叠屏的一种显示方法。

如图3A所示，当电子设备100处于折叠态时，其中一个子屏幕上可以显示有用户界面100。用户界面100可以是一款音频类应用程序的用户界面。用户界面100可以包括页面选择栏1001、互动功能栏1002、正在演唱栏1003、直播栏1004以及音乐播放显示栏1005。

其中，页面选择栏1001可以显示有一个或多个页面选择选项。页面选择选项可以包括：热门选项、精选选项、音乐选项、情感选项以及附近选项。当检测到作用于页面选择选项上的用户操作，电子设备100可以显示不同的页面信息。例如，图3A所示的用户界面100为电子设备100响应于用户作用于精选选项所显示的页面。不限于图3A所示，页面选择栏1001中还可以包含更多或更少的页面选择选项。用户可以通过在页面选择栏1001中向左/右滑动来浏览其他页面选择选项。

互动功能栏1002可用于监听触发其他互动功能的用户操作。互动功能栏1002可以显示一个或多个互动功能选项。互动功能选项可以包括：心动热线功能选项、玩家团功能选项以及热歌点唱功能。不限于图3A所示，互动功能栏1002中还可以包含更多或更少的互动功能选项。用户可以通过在互动功能栏1002中向左/右滑动来浏览其他互动功能选项。值得说明的是，如图3A所示的互动功能栏1002中的各个互动功能选项可以以图像控件的形式显示。

正在演唱栏1003可以用于监听触发播放其他用户正在演唱的歌曲的用户操作。正在演唱栏1003可以显示一个或多个正在演唱的歌曲信息。该正在演唱的歌曲信息可以包括歌曲名称以及正在演唱的用户名称。

直播栏1004可以用于监听触发进入直播的用户操作。直播栏1004可以显示一个或多个直播选项。值得说明的是，如图3A所示的直播栏1004中的各个直播选项可以以图像控件的形式显示。

音乐播放显示栏1005用于显示正在播放的歌曲信息。音乐播放显示栏1005可以包括暂停控件、下一首控件以及更多控件。电子设备100响应用户作用于除音乐播放显示栏1005中所显示控件的其他区域的操作，可以显示播放歌曲的全屏界面。

如图3B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面110。其中，页面选择栏1101、正在演唱栏1103以及音乐播放显示栏1105相对于用户界面100的页面选择栏1001、正在演唱栏1003以及音乐播放显示栏1005的高度基本没有变化，宽度适应性的调整。此时，在用户界面110中，由于互动功能栏1102的各个功能选项是以图像控件的形式显示的，互动功能栏1102的高度与宽度明显变大，而展开态下屏幕高度不变，屏幕的纵向空间明显不够显示图3A所示的原来的全部界面元素，因而导致直播栏1104无法完整的显示在用户界面110中。

可以看出，图3A-图3B示出的显示方法可能导致电子设备100所显示的信息量变少。为了避免图像不变形以及更好的适应展开态下的屏幕比例，电子设备100在展开态下可能会改变界面元素的大小(例如图标字体等元素变得太大)，而电子设备100在展开态下的屏幕高度没有发生改变，这样可能导致电子设备100所显示的界面内容变少。电子设备100需要通过其他方式来显示所减少的内容，例如，电子设备100响应用户作用于屏幕的向上/下滑动操作来显示所减少的内容。这样，电子设备100出现在展开态下控件变化过大而导致屏幕所显示的内容减少的现象，不仅可能影响布局美观，还可能会影响用户体验。

图4A-图4B示例性示出了本申请实施例提供的用于折叠屏的又一种显示方法。

如图4A所示，当折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面200。用户界面200可以是一款视频类应用程序的用户界面。用户界面200可以包括视频播放区域2001以及视频简介区域2002。

其中，视频播放区域2001可以用于显示所播放的视频。当检测到作用于视频播放区域2001的用户操作，电子设备100可以有不同的反馈信息。例如，电子设备100响应用户作用于视频播放区域2001的双击操作，可以全屏显示视频。电子设备100响应用户作用于视频播放区域2001的单击操作，可以暂停播放视频。值得说明的是，如图4A所示的视频播放区域2001可以以图像控件的形式显示。

视频简介区域2002可以用于介绍视频的相关信息。该相关信息包括视频名称、播放次数、综合评分以及视频简介。电子设备100响应用户作用于视频简介区域2002的操作，可以显示视频详细介绍界面。值得说明的是，如图4A所示的视频简介区域2002可以以文字控件的形式显示。

如图4B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面210。此时，在用户界面210中，视频播放区域2101相比于图4A所示的视频播放区域2001明显变大。由于屏幕高度不变，屏幕纵向控件明显不足以显示变化之后的全部界面元素，这样就会导致视频简介区域2102无法完整的显示在用户界面210中。

可以看出，图3A-图3B示出的显示方法也可能导致电子设备100所显示的信息量变少。电子设备100在展开态下显示的界面元素过大，而屏幕高度没有变化，从而导致显示的内容变少，这样不仅可能影响布局美观，还可能会影响用户体验。

图5A-图5B示例性示出了本申请实施例提供的用于折叠屏的再一种显示方法。

如图5A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面300。用户界面300可以是一款记事本应用程序的用户界面。用户界面300可以包括标题栏3001、待办事项栏3002以及添加控件3003。

其中，标题栏3001可以包括当前页面标题，如“全部待办事项3条待办事项”。

待办事项栏3002可以包括一个或多个待办事项。电子设备100响应用户作用于待办事项的操作，可以显示该待办事项的具体内容。

添加控件3003可以用于添加新的待办事项。电子设备100响应用户作用于该添加控件3003的操作，可以显示添加待办事项页面，并添加新的待办事项。

如图5B所示，在折叠屏由折叠态切换为展开态时，其中一个子屏幕仍可以显示用户界面300，其界面布局基本没有发生变化，仍然包括有标题栏3101、待办事项栏3102以及添加控件3103，并且各个界面元素的大小大致保持不变。而折叠屏的副屏可以显示用户界面300的关联界面310。例如，当用户界面300显示如图5A所示的已创建待办事项，且未选中任一个具体的已创建待办事项时，关联界面310可以显示待办事项显示区域3104“未选中待办事项”。

可以看出，图5A-图5B示出的显示方法虽然能够保持界面中内容信息不减少，但是需要额外为应用程序开发出用户界面300的关联界面310。在应用程序种类数量繁多以及每一个应用程序通常具有多个用户界面的情况下，开发人员需要获知各种各样的电子设备不同的屏幕尺寸，再开发出用户界面的关联界面。上述的显示方法显著地增加了开发工作量，且实现难度大。

图6A-图6B示例性示出了本申请实施例提供的用于折叠屏的再一种显示方法。

如图6A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面400。用户界面400可以是一款时钟类应用程序的用户界面。用户界面400可以包括时间选择栏4001以及计时事项栏4002。

其中，时间选择栏4001用于监听触发选择计时的时间大小的用户操作。时间选择栏4001从左至右的三列时间分别可以表示时间大小的时钟、分钟以及秒钟。用户可以通过在时间选择栏4001的三列时间中向上/向下滑动来改变时间大小。时间选择栏4001中灰色区域所覆盖的时间为用户所选择进行计时的时间大小，如“20分钟01秒”。

计时事项栏4002可以包括一个或多个计时事项，以及标题“计时器”。该计时事项可以包括事项名称以及所需计时的时间大小。如图6A所示，计时事项栏4002为纵向布局，即一行显示一个计时事项。其中，计时事项栏4002可以包括刷牙事项、面膜事项以及蒸蛋事项等等。计时事项栏4002中的计时事项可以是电子设备100自带的，也可以是用户自行添加的。

如图6B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面410。此时，在用户界面410中，时间选择栏4101相对于图6A所示的时间选择栏4001明显变大。计时事项栏4102中的各个计时事项的宽度与高度相对于图6A所示的计时事项栏4002基本上没有进行改变，但是计时事项栏4102从纵向布局改为横向布局，即一行可以显示两个计时事项。

可以看出，图6A-图6B示出的显示方法虽然可以使得用户界面410中的内容信息不减少，但是开发人员需要根据控件的不同形式去适应性的设计出控件的合适的布局形式。这样开发人员需要获知各种各样的电子设备不同的屏幕尺寸，然后对各种各样的控件进行布局设计。上述的显示方法明显增加了开发工作量。

为了改善上述几种显示方法所产生的问题，本申请实施例提供了一种用于折叠屏的显示方法，该方法可以避免电子设备100在从折叠态切换到展开态时，折叠态下显示在其中一个子屏幕部分中的界面元素(如图标、文本等)为适应展开态下屏幕变大而变大的问题，例如大字体、大图标。

本申请各个实施例中，当电子设备从折叠态切换到展开态时，界面元素的尺寸调整可以分为两步走。首先，可以基于屏幕的宽度变化(即折叠态与展开态的屏幕宽度变化)来调整界面元素的宽度，然后基于界面元素调整后的宽度调整其高度，使得界面元素的宽高比在调整前后不变或者近乎不变，这里可以获取展开态下界面元素的第一高度与第一宽度，在本申请实施例中，对获取第一高度与第一宽度的方式不作限定。界面元素的宽度可随着屏幕的宽度增大而增大。例如，界面元素的宽度增大比例可以同于屏幕宽度的增大比例。其次，为了避免出现大图标大字体等界面元素过大而存在界面不美观等问题，可以进一步微调界面元素的尺寸，以控制界面元素的高度与屏幕的高度相适应，这里可以得到界面元素的第二高度与第二宽度。这里，“相适应”可以是指，界面元素的第二高度与第二屏幕的高度处于一定比值范围内。例如，电子设备100处于展开态下，当浏览照片原图时，需要控制照片所显示的高度与屏幕高度比例不超过1/2。

下面结合图7A-图7B、图8A-图8B、图9A-图9B、图10A-图10B以及图11A-图11B示出的多个应用场景详细说明本申请实施例提供的用于折叠屏的显示方法。

图7A-图7B示例性示出了照片预览场景下本申请实施例提供的用于折叠屏的显示方法。

如图7A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面500。用户界面500可以是一款照片预览类的应用程序的用户界面。在一些实施例中，用户界面500所示的控件布局类型可以被称为内容宫格类型。

用户界面500可以包括预览照片控件5001、预览照片控件5002以及预览照片控件5003。

其中，预览照片控件5001与预览照片控件5002排列在同一行，预览照片控件5001与预览照片控件5003排列在同一列。即，折叠态下的电子设备100的屏幕宽度可能会限制同一行下仅能显示两个预览照片控件。由于各个预览照片控件可以作为图像控件，电子设备100响应用户针对于各个预览照片控件的操作，可以显示各个预览照片控件所对应的原始照片。

如图7B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面510。此时，在用户界面510中，预览照片控件5101、预览照片控件5102以及预览照片控件5103相对于图7A中所示的有变大。电子设备100采用本申请实施例所提供的折叠态展开态布局自适应的适用于内容宫格类型的方法，可以使得预览照片控件5101、预览照片控件5102以及预览照片控件5103排列在同一行。根据计算得到的内容宫格类型的阈值范围，电子设备100可以调整各个预览照片控件的大小。也就是说，电子设备100判断各个预览照片控件的第一高度与屏幕高度之比是否在上述阈值范围内。若在上述阈值范围内，则各个预览照片控件的第二高度为第一高度；若在上述阈值范围外，则调整各个预览照片控件的大小，使得各个预览照片控件的第二高度与屏幕高度之比在上述阈值范围内。并且同时还可以调整各个预览照片控件之间的间隙，使得更加美观。

这样，图7B所示的用户界面510相对于图7A所示的用户界面500而言，既没有缺失内容信息，也没有出现大图大字号现象，能够符合用户的使用要求。

图8A-图8B示例性示出了全屏图片查看场景下本申请实施例提供的用于折叠屏的显示方法。

如图8A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面600。用户界面600可以是一款全屏图片类应用程序的用户界面。在一些实施例中，用户界面600所示的控件布局类型可以被称为沉浸式大图类型。

在一些实现方式中，沉浸式大图类型可以被称为大图类型。

用户界面600可以包括图片显示区域6001。其中，图片显示区域6001居于屏幕中央，其宽度可以为屏幕宽度，其高度可以小于屏幕高度。电子设备100响应用户作用于图片显示区域6001的操作，可以隐藏除图片显示区域6001的其他信息，仅显示图片显示区域6001。

如图8B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面610。此时，图片显示区域6101仍然显示于屏幕中央。根据计算得到的沉浸式大图类型的阈值范围，电子设备100可以调整图片显示区域6101的大小。也就是说，电子设备判断图片显示区域6101的第一高度与屏幕高度之比是否在上述阈值范围内。若在上述阈值范围内，则图片显示区域6101的第二高度为第一高度；若在上述阈值范围外，则调整图片显示区域6101的大小，使得图片显示区域6101的第二高度与屏幕高度之比在上述阈值范围内。并且同时可以对背景模糊区域6102进行模糊处理，使得图片显示区域6101不留白，更加美观。

这样，图8B所示的用户界面610相对于图8A所示的用户界面600而言，图片显示区域6102适应性的增大，但没有如图4B所示的视频播放区域2101扩大至原来的两倍，避免出现图像控件过大的现象。

图9A-图9B示例性示出了浏览动态场景下本申请实施例提供的用于折叠屏的显示方法。

如图9A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面700。用户界面700可以是一款浏览动态信息类的应用程序的用户界面。在一些实施例中，用户界面700所示的控件布局类型可以被称为社交列表类型。

用户界面700可以包括文字控件7001、图像控件7002、图像控件7003以及文字控件7004。

其中，文字控件7001与文字控件7004以文字的形式显示在屏幕中，其控件的宽度、高度与文字数量相关。如图9A所示，文字控件7001与文字控件7004的宽度均为屏幕宽度，文字控件7001的高度为可以四行文字的高度，而文字控件7004的高度可以为两行文字的高度。电子设备响应用户针对于文字控件7001或文字控件7004的点击操作，可以显示文字控件7001或文字控件7004所对应的纯文字信息的界面。

图像控件7002与图像控件7003显示在文字控件7001的下方。图像控件7002与图像控件7003排列在同一行。电子设备100响应用户针对于图像控件7002或图像控件7003的点击操作，可以显示图像控件7002或图像控件7003所对应的原始照片或者全屏照片。

如图9B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面710。此时，在用户界面710中，电子设备100采用本申请实施例所提供的折叠态展开态布局自适应的适用于社交列表类型的方法，使得文字控件7101、图像控件7102以及图像控件7103如图9B所示。根据计算得到的社交列表类型的阈值范围，电子设备100可以调整文字控件7101、图像控件7102以及图像控件7103的大小。

具体的，电子设备100对文字控件7101进行适配屏幕宽度处理，使得文字控件7101的宽度可以为屏幕宽度，文字控件7101的高度由文字控件7101中所包含的文字数量决定，即如图9B所示，文字控件7101的高度为两行文字的高度。电子设备100对文字控件7104的处理如文字控件7104类似，在此不做赘述。文字控件7104的高度为一行文字高度。

电子设备100判断图像控件7102的第一高度与屏幕高度之比是否在上述阈值范围内。若在上述阈值范围内，则图像控件7102的第二高度为第一高度；若在上述阈值范围外，则调整图像控件7102的大小，使得图像控件7102的第二高度与屏幕高度之比在上述阈值范围内。电子设备100对图像控件7103的处理与图像控件7102类似，在此不做赘述。图像控件7102与图像控件7103仍排列在同一行。

图10A-图10B示例性示出了浏览邮箱场景下本申请实施例提供的用于折叠屏的显示方法。

如图10A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面800。用户界面800可以是一款浏览邮箱类的应用程序的用户界面。在一些实施例中，用户界面800所示的控件布局类型可以被称为文本列表类型。

用户界面800可以包括内容预览8001。其中，内容预览8001以文字的形式显示用户界面800中。其宽度与高度固定如图10A所示。电子设备100响应用户作用于内容预览8001的操作，可以显示内容预览8001所对应的邮件的详细内容。

图10A示例性示出了5个邮件框，上述介绍了其中第一个邮件框的内容预览8001，其余的邮件框所包含的内容预览的部分如上述内容预览8001类似，在此不做赘述。

如图10B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面810。此时，由于用户界面810不能缺少信息，内容预览8101的高度与内容预览8001的高度一样，内容预览8101的宽度适应展开态下的屏幕宽度。但是，可选的，电子设备100可以对内容预览8101中所显示的文字的字号进行一定程度的改变。

这样，图10B所示的用户界面810相对于图10A所示的用户界面800而言并未缺失邮件列表信息，依旧显示有5个邮件框，可能还可以显示更多邮件框。

图11A-图11B示例性示出了主屏幕(Home Screen)场景下本申请实施例提供的用于折叠屏的显示方法。

如图11A所示，在折叠屏处于折叠态时，其中一个子屏幕上可以显示有用户界面900。用户界面900可以是主屏幕的用户界面。在一些实施例中，用户界面900所示的控件布局类型可以被称为应用入口类型。

用户界面900可以包括天气控件、华为商店控件、智慧家庭控件、运动健康控件、备忘录控件、日历控件、生活服务控件、线上会议控件、邮件控件以及音乐控件等等。

其中，用户界面900中一行最多可以排列4个控件，第一行排列4个控件，第二行排列4个控件，第三行排列2控件。电子设备100响应用户针对于各个应用控件的点击操作，可以显示各个应用控件所对应的应用程序第一界面。

如图11B所示，在折叠屏由折叠态切换为展开态时，电子设备100同一侧的多个子屏幕可以共同显示用户界面910。此时，用户界面910一行最多可以排列5个控件，第一行排列5个控件，第二行排列5个控件，并且该控件相比于用户界面900中的控件更大，而其中控件之间的间隔也适应性的进行调整。

这样，图11B所示的用户界面910相对于图11A所示的用户界面900而言，既没有缺失内容信息，也没有出现大图大字号现象，能够符合用户的使用要求。

下面结合图12具体介绍折叠屏展开态布局自适应的方法的流程示意图。

S1201、电子设备100处于折叠态时，显示有用户界面(例如图9A所示的用户界面700)，用户界面中包括多个界面元素。

电子设备100需要判断该多个界面元素所属于的控件布局类型以便于后续分类对界面元素的大小进行调整。

电子设备100通过操作系统获取到的用户界面中的界面元素的类型(即文字控件或图像控件等)以及界面元素的大小，可以判断电子设备100的控件布局类型。

在本申请实施例中，根据目前电子设备100所具有的控件布局类型，可以将电子设备100的控件布局类型分为内容宫格、沉浸式大图、社交列表、文本列表以及应用入口五种。

其中，电子设备100判断控件布局为内容宫格类型的依据可以是：界面元素主要是以宫格型图像的形式分布。例如，如图3A所示的互动功能栏1002以及如图7A所示的各个预览照片控件均可以属于内容宫格。

电子设备100判断控件布局为沉浸式大图类型的依据可以是：界面元素是以图像的形式显示的，且界面元素的宽度与屏幕宽度大致相同。例如，如图4A所示的视频播放区域2001以及如图8A所示的图片显示区域6001均可以属于沉浸式大图。

电子设备100判断控件布局为社交列表类型的依据可以为以下的一项或多项：(1)界面元素是以上半部分为文字，下半部分为图像的形式显示的。(2)界面元素是以上半部分为图像，下半部分为文字的形式显示的。例如，如图9A所示的文字控件7001、图像控件7002以及图像控件7003均可以属于社交列表。

电子设备100判断控件布局为文本列表类型的依据可以为以下的一项或多项：(1)界面元素是以文字的形式显示的。(2)界面元素是以左半部分为图像，右半部分为文字的形式显示的，且该图像的大小小于40dp。(3)界面元素是以左半部分为文字，右半部分为图像的形式显示的，且该图像的大小小于40dp。例如，如图10A所示的邮件框可以属于文本列表。

电子设备100判断控件布局为应用入口类型的依据可以为以下的一项或多项：(1)界面元素是以上半部分为图像，下半部分为文字的形式显示的，并且图像的大小小于40dp。(2)界面元素是以图像的形式显示的，并且图像的大小小于40dp。例如，如图11A所示的各个控件可以属于应用入口。

在本申请实施例中，对上述判断控件布局类型的依据条件不作限定，还可以包括更多或者更少的依据条件。

S1202、电子设备100由折叠态切换为展开态，并将界面元素在展开态下的高度设置第一高度h，在展开态下的宽度设置第一宽度B。电子设备100判断第一高度h是否合格，即判断第一高度h与展开高度H的比值a是否不大于阈值b。

在判断第一高度h是否合格之前，电子设备100需要获取到展开态下的第一高度h。当电子设备100所显示的界面属于电子设备100自带的应用程序中的界面时，电子设备100中的操作系统可以根据界面元素在折叠态下的高度直接计算得到界面元素在展开态下的第一高度h。当电子设备100所显示的界面属于电子设备100所下载的第三方应用程序中的界面时，电子设备100中的操作系统可以根据第三方应用程序所携带的信息得到界面元素在展开态下的第一高度h。

示例性的，电子设备100中父视图根据屏幕目前所处的状态(折叠态或者展开态)询问子视图所需的空间大小，子视图根据屏幕状态调用onMeasue来测量当前视图的数据来得到屏幕的宽高，然后子视图通过调用MeasureSpec来确定模式和大小，以此来获得在折叠态下以及在展开态下所设置出的界面元素的高度与宽度。在本申请实施例中，对电子设备100系统层面设置界面元素的高度与宽度的方式不作限定，

在一些实施例中，电子设备100可以获取到折叠态下的各个界面元素的高度。那么，当电子设备100转换为展开态时，电子设备100会对各个界面元素的控件进行设置，从而可以得到第一高度h。值得说明的是，该第一高度h并不是显示在展开态下电子设备100屏幕上的界面元素的高度，而是电子设备100基于屏幕宽度发生变化而对各个界面元素的高度进行初步调整得到的，后续还会对初步调整之后的第一高度h进行再进一步的调整，即判断第一高度h与展开高度H的比值a是否不大于阈值b。

而上述阈值b是通过大量实验数据获取到的。该实验可以是指：在满足展开态下电子设备100所显示的内容信息相比于折叠态下没有发生丢失的前提下，用户对所设计五种控件布局类型中的高度进行评价。例如，针对文本类型的控件布局，当界面元素的高度与屏幕高度之比为1/6时，进行实验的75％的用户均认为目前的界面元素的高度最合适。那么，可以设置文本类型的阈值b即为1/6。也就是说，当界面元素的高度与屏幕高度之比大于1/6时，进行实验的75％的用户认为该界面元素为大文字或者大图像。在本申请实施例中，对获取到阈值b的具体方式不作限定，还可以存在其他方式的用户评价，上述仅做示例性说明。

电子设备100可以获取到展开态下五种控件布局类型的第一高度h、电子设备100的展开高度H以及在五种控件布局类型的阈值b，计算第一高度h与展开高度H的比值a，判断该比值a是否不大于与之对应的控件布局类型下的阈值b。

当上述比值a不大于阈值b时，说明第一高度h符合用户要求即第一高度h合格，在这种情况下，电子设备100执行步骤S1203。

当上述比值a大于阈值b时，说明第一高度h不符合用户要求即第一高度h不合格，在这种情况下，电子设备100执行步骤S1204。

S1203、电子设备100在展开态下显示具有第一高度h以及第一宽度B的界面元素。

在一些实施例中，在确定第一高度h与电子设备100的展开高度H的比值a不大于阈值b之后，电子设备100可以将在展开态下所显示的界面元素的高度确定为第一高度h。值得说明的是，由于上述比值a不大于阈值b，因此，电子设备100所显示具有第一高度h的控件可以是符合用户要求的，且不属于大图像大文字的现象。可选的，电子设备100所显示的各个具有第一高度h的控件的布局可以根据屏幕宽度的扩大比例进行布局。在本申请实施例中，对各个控件的排列布局在此不作限定，还可以存在其他方式的排列布局。

S1204、电子设备100在展开态下显示具有第二高度h’以及第二宽度B’的界面元素。

在一些实施例中，在确定第一高度h与电子设备100的展开高度H的比值a大于阈值b之后，电子设备100可以确定第二高度h’大小，使得第二高度h’与展开高度H的比值a’不大于阈值b。值得说明的是，由于上述比值a大于阈值b，若电子设备100不进行调整，而是显示具有第一高度h的界面元素，该界面元素是不符合用户要求的，且属于大图像大文字的现象。因此需要将调整得到所显示的第二高度h’。

下面以控件布局类型为沉浸式大图为例(参考图8A、图8B)来具体说明如何调整第一高度h得到控件的第二高度h’。例如，电子设备100的折叠宽度为750dpx，折叠高度为1600dpx。电子设备100的展开宽度为1500dpx，展开高度H为1600dpx。经过实验电子设备100可以得到沉浸式大图的阈值b为1/2。电子设备100可以获取到在展开态下的第一宽度B大致与展开宽度一致，均为1400dpx以及在展开态下的第一高度h为1000dpx。此时，第一高度h与展开高度H的比值a为5/8，比值a大于阈值b，不在阈值b范围内。电子设备100需要通过第一高度h调整得到第二高度h’，使得比值a’小于或者等于阈值b。当第二高度h’为800dpx时，第二高度h’与展开高度H的比值a’为1/2，比值a’等于阈值b。因此，电子设备100可以将第二高度h’调整为800dpx。

进一步的，电子设备100在调整得到所显示的界面元素的第二高度h’时，也需要调整来得到界面元素的第二宽度B’，使得界面元素显示更加美观。在一些实施方式中，第二宽度B’可以根据第二高度h’与第一高度h的变化比例，对第一宽度B进行同一变化比例的调整。可选的，第二宽度B’还可以依据屏幕宽度的变化比例，针对于第一宽度B进行同一比例的改变。即第二宽度B’可以适应屏幕宽度进行改变。这里对调整控件的第二宽度B’不做详细描述，可以参考下述针对五种控件布局的详细介绍。

下面具体分别介绍在内容宫格、沉浸式大图、社交列表、文本列表以及应用入口五种控件布局下如何调整控件大小。

(1)内容宫格

当电子设备100所显示的控件布局为内容宫格时，电子设备100获取到各个界面元素的第一高度h1、第一宽度B1以及阈值b1。电子设备100计算得到第一高度h1与展开高度H的比值a1，比值a1大于阈值b1。然后，电子设备100对第二高度h1’进行调整，使得第二高度h1’与展开高度H的比值a1’小于或者等于阈值b1。

在一些实施例中，电子设备100可以根据用户体验使用控件的大量实验计算得到阈值b1。具体的，当内容宫格类型的界面元素属于宽形图片或者方形卡片，即第一宽度小于或者等于第一高度的1.2倍时，电子设备100计算得到的阈值b1可以为1/4。当内容宫格类型的界面元素属于长形控件，即第一宽度大于第一高度的1.2倍时，电子设备100计算得到的阈值b1可以为1/2.5。

电子设备100根据阈值b1调整第二高度h1’之后，也需要对第二宽度B1’进行调整。

在一些实施例中，由于内容宫格类型中的界面元素以图像的形式显示，第二宽度B1’可以根据下述公式计算得到：

B1’＝B1*(h1’/h1) (1)

其中，公式(1)表示宽度是基于高度的变化比例，进行等比例变化。即，第二高度h1’相对于第一高度h1缩小了h1’/h1，第二宽度B1’也相对于第一宽度B1缩小了h1’/h1。由于电子设备100可以得到第一宽度B1、第一高度h1以及第二高度h1’，因此可以根据公式(1)计算出第二宽度B1’。

由于电子设备100在展开态下可以显示多个内容宫格类型的界面元素，因此，需要考虑到各个界面元素的布局情况。

示例性的，参考图13所示的宫格布局示意图。电子设备100可以根据下述宫格布局参数关系来对多个内容宫格的控件进行布局设计：

W＝2A+n*B1’+(n-1)*C (2)

其中，如图13所示，W表示的是电子设备100在展开态下的屏幕宽度，即展开宽度W；A表示的是电子设备100中显示在最靠近屏幕边缘的界面元素距离屏幕边缘的宽度，即边距A；n表示的是电子设备100中显示的内容宫格类型的界面元素的列数，例如，图13所示的列数n为4；B1’表示的是电子设备100根据上述公式(1)计算得到的第二宽度；C表示的是电子设备100中显示的每两列界面元素之间的间距宽度，即间距C。电子设备100根据公式(2)可以实现如图13的控件布局。

进一步的，上述展开宽度W为已知固定值，电子设备100通常情况下设置的边距A也为已知固定值。由上述参数介绍可知，公式(2)中的展开宽度W、边距A以及第二宽度B1’为已知量，列数n以及间距C为未知量，且列数n需为整数。具体的，将W-2A之差除以B1’取整即可以得到列数n，再将W-2A之差除以B1’得到的余数分成n-1份即可以得到间距C。在本申请实施例中，当电子设备100中界面元素总间距(n-1)*C的大于第二宽度B1’的情况下，还可以采取其他的方式进行设计布局，在此不作限定。

示例性的，如图13所示，已知展开宽度W为1500dpx，边距A为50dpx，第二宽度B1’为320dpx。电子设备100可以根据上述通过取整方式得到列数n为4以及上述取余方式得到间距C为40dpx。

进一步的，若电子设备100通过公式(2)计算处理的可放置的内容宫格类型的界面元素的个数大于在折叠态下所显示的内容宫格类型的界面元素个数，并且检测到电子设备100在折叠态下可以响应用户操作，显示出其余的不同的内容宫格类型的界面元素。那么可以对可放置的内容宫格类型的界面元素的位置进行界面元素的补充。例如，如图13所示，电子设备100在折叠态下可以显示有6个界面元素。电子设备100响应用户针对屏幕的滑动操作，可以显示补充7与补充8。因此，电子设备100通过公式(2)计算之后可以在展开态下可以将界面元素7补充至第2列第3行，将界面元素8补充至第2列第3行。

(2)沉浸式大图

当电子设备100所显示的控件布局为沉浸式大图时，电子设备100获取界面元素的第一高度h2、第一宽度B2以及阈值b2。在一些实施例中，电子设备100根据用户体验使用控件的大量实验可以计算得到阈值b2为1/2。在本申请实施例中，对阈值b2的取值不作限定。

电子设备100计算第一高度h2与展开高度H的比值a2大于阈值b2。电子设备100对第二高度h2’进行调整，使得第二高度h2’与展开高度H的比值a2’小于或者等于阈值b2。

在一些实施例中，电子设备100针对沉浸式大图类型的界面元素所显示大小以及在屏幕中的位置可以包括以下两种方式：

方式A：背景模糊

参考图8B所示的用户界面610，图8B示例性的示出了电子设备100对沉浸式大图类型的图片显示区域6101进行背景模糊处理的场景效果图。下面详细介绍如何具体实现背景模糊的方法。

图14A示例性示出了对沉浸式大图类型的界面元素进行背景模糊的方法示意图。如图14A所示，长方形虚线框1401(即浅灰色长方形区域)表示电子设备100调整之后的具有第一宽度以及第一高度的界面元素所显示的区域。值得说明的是，电子设备100不会在展开态的屏幕上显示出长方形虚线框1401，这里在图14A中示意出来仅为更好的说明如何进行背景模糊处理。长方形实线框1402表示电子设备100进一步调整之后的具有第二宽度以及第二高度的界面元素所显示的区域。电子设备100已知展开宽度W、第一高度h2以及第一宽度B2。

在一些实施例中，由于第一高度h2与展开高度H的比值大于阈值b2，电子设备100调整第二高度h2’，使得第二高度h2’与展开高度H的比值小于或者等于阈值b2。示例性的，当阈值b2为1/2时，第二高度h2’可以为展开高度H的0.5倍。

电子设备100根据阈值b2调整第二高度h2’之后，也需要对第二宽度B2’进行调整。示例性的，第二宽度B2’可以根据下述公式计算得到：

B2’＝B2*(h2’/h2) (3)

其中，公式(3)表示宽度是可以基于高度的变化比例，进行等比例变化。可以参考上述针对于公式(1)的详细描述，在此不做赘述。在一些实施例中，在界面元素为沉浸式大图类型的情况下，第一宽度B2与展开宽度W在数值上可以相等。

电子设备100计算得到第二高度h2’以及第二宽度B2’之后，如图14A所示，可以将该界面元素居中显示，并对虚线框1403以及虚线框1404进行背景模糊处理。在一些实施例中，电子设备100可以获取界面元素的背景图像，对界面元素左右侧边缘到屏幕左右侧边缘的区域进行背景模糊处理。

这样，电子设备100进行背景模糊处理，有利于提高用户的视觉感受，可以防止出现留白现象，影响用户体验。

方式B：裁剪处理

图14B示例性示出了对沉浸式大图类型的控件进行剪裁处理的方法示意图。如图14B所示，长方形虚线框1405表示电子设备100调整之后的具有第一宽度以及第一高度的界面元素所显示的区域。长方形虚线框1405表示电子设备100进一步调整之后的具有第二宽度以及第二高度的界面元素所显示的区域。电子设备100已知展开宽度W、第一高度h2以及第一宽度B2。

在一种可能的实施例中，电子设备100将第二宽度B2’调整为与第一宽度B2一致。并且，调整第二高度h2’，使得第二高度h2’与展开高度H的比值a2’小于或者等于阈值b2。

方式B显示界面元素与方式A方式不同，电子设备100将长方形虚线框1405进行裁剪处理得到长方形虚线框1405。具体的，电子设备100针对于长方形虚线框1405的上部分裁减掉一个裁剪高度为y，裁剪宽度为B2’的裁剪区域1407，电子设备100针对于长方形虚线框1405的下部分裁减掉一个裁剪高度为y，裁剪宽度为B2’的裁剪区域1408，电子设备100能够显示如图14B所示的具有第二宽度以及第二高度的界面元素所显示的区域(即长方形实线框1406)。其中，裁剪高度y可以为第一高度h2与第二高度h2’之差的0/5倍。电子设备100可以将长方形实线框1406居于长方形虚线框1405的中央显示如图14B所示，也可以将长方形实线框1406居于电子设备100的屏幕中央显示。对此不作限定。

在本申请实施例中，对针对沉浸式大图类型的控件的显示方式不限于上述方式A与方式B，还可以有其他的显示方式，对此不作限定。

(3)社交列表

在一种可能的实现方式中，当电子设备100所显示的控件布局类型为社交列表时，电子设备100需要将各个界面元素分为图像控件和文字控件分别进行处理。

当电子设备100对图像控件进行调整时，电子设备100获取图像控件的第一高度h3、第一宽度B3以及阈值b3。电子设备100计算得到第一高度h3与展开高度H的比值a3，比值a3大于阈值b3。然后，电子设备100对第二高度h3’进行调整，使得第二高度h3’与展开高度H的比值a3’小于或者等于阈值b3。在一些实施例中，电子设备100根据用户体验使用控件的大量实验，可以计算得到阈值b3为1/4。在本申请实施例中，对阈值b3的取值不作限定。

电子设备100根据阈值b3调整图像控件的第二高度h3’之后，也需要对第二宽度B3’进行调整。示例性的，第二宽度B3’可以根据下述公式计算得到：

B3’＝B3*(h3’/h3) (4)

其中，公式(4)表示宽度是可以基于高度的变化比例，进行等比例变化。可以参考上述针对于公式(1)的详细描述，在此不做赘述。

在一种可能的实现方式中，当社交列表类型中的图像控件满足上述对内容宫格类型的界面元素进行补充的条件时，也可以对社交列表类型中的图像控件进行补充，在此不作限定。

当电子设备100对文字控件进行调整时，电子设备100可以对文字控件中的文字字号进行调整，或者，仅适应性的对文字字号做调整，例如调大一个字号。在本申请实施例中，对文字字号的调整不作限定。当电子设备100获取到的文字控件在折叠态下的宽度小于折叠宽度时，即文字控件中的文字数量较少，未能填满一行时，电子设备100调整文字控件的第二宽度仍为在折叠态下的宽度。当电子设备100获取到的文字控件在折叠态下的宽度等于折叠宽度时，即文字控件中的文字数量较多，能够填满一行甚至能够填满多行时，电子设备100根据文字控件中的文字数量来调整文字控件的第二宽度。若文字控件中的文字数量足够多，能够填满展开态下屏幕的一行，则文字控件的第二宽度可以为展开宽度。若文字控件中的文字数量不够多，不能够填满展开态下屏幕的一行，则文字控件的第二宽度可以为文字控件中文字数量所占的宽度。

电子设备100在展开态下可以按照在折叠态下的布局方式来显示图像控件以及文字控件。具体的，若在折叠态下的社交列表类型的控件布局为文字控件在图像控件的上方，则在展开态下的社交列表类型的控件布局也为文字控件在图像控件的上方。若在折叠态下的社交列表类型的控件布局为文字控件在图像控件的下方，则在展开态下的社交列表类型的控件布局也为文字控件在图像控件的下方。示例性的，电子设备100在展开态下的布局可以参考图9B所示的用户界面710。

(4)文本列表

在一种可能的实现方式中，当电子设备100所显示的控件布局类型为文本列表时，电子设备100需要将有关联的图像控件与文字控件当成一个文本列表类型的界面元素进行大小的调整。示例性的，如图10B所示电子设备100将一个邮件框当做一个界面元素进行处理。

当电子设备100所显示的控件布局类型为文本列表时，电子设备100获取到所显示的各个界面元素的第一高度h4、第一宽度B4以及阈值b4。电子设备100计算得到第一高度h4与展开高度H的比值a4，比值a4大于阈值b4。然后，电子设备100对第二高度h4’进行调整，使得第二高度h4’与展开高度H的比值a4’小于或者等于阈值b4。在一些实施例中，电子设备100根据实验可以计算得到阈值b4为1/6。在本申请实施例中，对阈值b4的取值不作限定。

电子设备100根据阈值b4调整界面元素的第二高度h4’之后，也需要对第二宽度B4’进行调整。示例性的，第二宽度B4’可以根据下述公式计算得到：

B4’＝B4*(h4’/h4) (5)

其中，公式(5)表示宽度是可以基于高度的变化比例，进行等比例变化。可以参考上述针对于公式(1)的详细描述，在此不做赘述。

在一些实施例中，电子设备100在展开态相比于在折叠态下可以显示更多的文本列表类型的界面元素。示例性的，电子设备100在折叠态下仅能显示5个界面元素，但是在展开态下，由于文本控件的拉伸，屏幕中能够显示6个界面元素。

进一步的，文本列表类型的界面元素中所包含的图像控件也可以根据上述方法以及公式(5)调整图像控件的第二高度和第二宽度。电子设备100对文本列表类型的界面元素中所包含的文字控件的调整方式可以参考上述社交列表类型中针对文字控件的调整方式，在此不做赘述。

(5)应用入口

当电子设备100所显示的控件布局类型为应用入口时，电子设备100获取到界面元素的第一高度h5、第一宽度B5以及阈值b5。在一些实施例中，电子设备100根据用户体验使用控件的大量实验可以计算得到阈值b5为1/6。在本申请实施例中，对阈值b6的取值不作限定。

电子设备100计算第一高度h6与展开高度H的比值a6大于阈值b6。电子设备100对第二高度h6’进行调整，使得第二高度h6’与展开高度H的比值a6’小于或者等于阈值b6。

电子设备100根据阈值b5调整图像控件的第二高度h5’之后，也需要对第二宽度B5’进行调整。示例性的，第二宽度B5’可以根据下述公式计算得到：

B5’＝B5*(h5’/h5) (6)

其中，公式(6)表示宽度是可以基于高度的变化比例，进行等比例变化。可以参考上述针对于公式(1)的详细描述，在此不做赘述。

电子设备100确定应用入口类型的界面元素的第二高度h5’以及第二宽度B5’之后，可以对界面元素进行相应的布局。示例性的，电子设备100可以适当的增大界面元素之间的间距，使得屏幕中所显示的每一行的界面元素之间的间距一致，并且使得界面元素显示对称、均匀且美观。具体的，可以参考图11B所示的用户界面910。

值得说明的是，本申请实施例所涉及的应用场景不限于上述电子设备100从折叠态切换至展开态的应用场景，还可以是电子设备100启动即处于展开态下的应用场景，本申请实施例还可以包括更多或更少可以应用本申请实施例所涉及的应用场景。也就是说在图12所示的折叠屏展开态布局自适应的方法流程图中S1201以及电子设备100由折叠态切换至展开态的步骤为可选步骤。

通过上述方法，电子设备100可以基于用户的使用感受，计算出高度与屏幕高度的比值的阈值，并设计界面元素的第二高度与屏幕高度的比值小于上述阈值。这样能够有效减少电子设备100在展开态下出现大图像大字号的现象，并且，能够符合用户的使用习惯，提升用户的体验感。并且，还可以减少电子设备100在展开态下出现内容信息量缺失的现象，进一步的提升用户的使用感受。上述方法还可以自适应的设计界面元素的第二高度，无需开发人员在应用程序开发阶段进行人工对在展开态下的界面元素的大小与布局的设计，减轻开发人员的工作量。

以上图7A-图7B、图8A-图8B、图9A-图9B、图10A-图10B以及图11A-图11B实施例涉及的用户界面的控件布局类型都比较单一，而实际应用中，更多的情况是，一个用户界面会覆盖多种控件布局类型。下面通过两个例子来说明这种情况下如何调整界面元素的大小。

示例一：

图3A示出了电子设备在折叠态时显示的用户界面500。图15B示出了电子设备在展开时显示的用户界面1000。

如图3A所示，用户界面500包括页面选择栏1001、互动功能栏1002、正在演唱栏1003、直播栏1004以及音乐播放显示栏1005。其中，互动功能栏1002以及直播栏1004的控件布局类型可以属于内容宫格，正在演唱栏1003以及音乐播放显示栏1005的控件布局类型可以属于文本类型。在电子设备从折叠态切换到展开态时，可以对上述不同控件布局类型的各个部分中的界面元素大小分别进行调整。

该调整可以分为两步走。

首先，对于一个界面区域(例如页面选择栏1101)中的界面元素，可以先基于屏幕的宽度变化来调整界面元素的宽度，然后基于界面元素调整后的宽度调整其高度，使得界面元素的宽高比在调整前后不变或者近乎不变。界面元素的宽度可随着屏幕的宽度增大而增大。例如，界面元素的宽度增大比例可以同于屏幕宽度的增大比例。

举例说明，折叠态下屏幕宽度为W，高度表示为S；展开态下屏幕宽度表示为2*W，高度表示为S。如图15A所示，页面选择栏1101中的界面元素的宽度就会从w1变成2*w1，高度就会从s1变成2*s1。同样的，互动功能栏1102中的界面元素的宽度就会从w2变成2*w2，高度就会从s2变成2*s2。正在演唱栏1103中的界面元素的宽度就会从w3变成2*w3，高度就会从s3变成2*s3。直播栏1104中的界面元素的宽度就会从w4变成2*w4，高度就会从s4变成2*s4。音乐播放显示栏1105中的界面元素的宽度就会从w5变成2*w5，高度就会从s5变成2*s5。这样，在初步调整之后，用户界面510中页面选择栏1101、互动功能栏1102、正在演唱栏1103、直播栏1104以及音乐播放显示栏1105全部界面元素总共需要的纵向展示空间就高达S10，超出了屏幕高度，从而导致用户界面510中某些界面元素得不到显示。例如，如图3B所示，直播栏1104就因纵向显示空间不足而没有再显示在展开的屏幕中。

进一步的，为了避免出现大图标大字体等界面元素过大而存在界面不美观等问题，可以进一步微调界面元素的尺寸，以控制界面元素的高度与屏幕的高度相适应。这里，“相适应”可以是指，界面元素的高度与屏幕的高度处于一定比值范围内。例如，展开态下，浏览照片原图时，控制照片的高度与屏幕的高度比例不超过1/2。

举例说明，若判断出展开态时页面选择栏1101中的界面元素的高度2*s1与屏幕的高度S之比高于阈值范围，则可将该界面元素的高度进一步调成如图15B所示的页面选择栏10001，进一步调完之后使得该界面元素的高度与屏幕的高度S之比不高于阈值范围。这样，展开态时页面选择栏10001中的界面元素不会过大。同样的，展开态时互动功能栏10002、正在演唱栏10003、直播栏10004以及音乐播放显示栏10005等等中的界面元素也可以同样进行进一步调整，以控制各个区域中的界面元素不会出现过大的问题。

同时，因控制界面元素的高度与屏幕的高度相适应，不会存在界面元素过大的问题，还可以确保图3A所示的用户界面500中的界面元素依然都能显示在展开态下的屏幕中。

示例二：

图4A示出了电子设备在折叠态时显示的用户界面600。图16B示出了电子设备在展开时显示的用户界面1100。

如图3A所示，用户界面500包括视频播放区域2001以及视频简介区域2002。其中，视频播放区域2001的控件布局类型可以属于沉浸式大图。视频简介区域2002的控件布局类型可以属于文本类型。在电子设备从折叠态切换到展开态时，可以对上述不同控件布局类型的各个部分中的界面元素大小分别进行调整。

该调整可以分为两步走。

首先，对于一个界面区域(例如视频播放区域2001)中的界面元素，可以先基于屏幕的宽度变化来调整界面元素的宽度，然后基于界面元素调整后的宽度调整其高度，使得界面元素的宽高比在调整前后不变或者近乎不变。界面元素的宽度可随着屏幕的宽度增大而增大。例如，界面元素的宽度增大比例可以同于屏幕宽度的增大比例。

举例说明，折叠态下屏幕宽度表示为W，高度表示为S；展开态下屏幕宽度表示为2*W，高度表示为S。如图16A所示，视频播放区域2101中的界面元素的宽度就会从w6变成2*w6，高度就会从s6变成2*s6。同样的，视频简介区域2102中的界面元素的宽度就会从w7变成2*w7，高度就会从s7变成2*s7。这样，在初步调整之后，用户界面610中视频播放区域2101以及视频简介区域2102全部界面元素总共需要的纵向展示空间就高达S11，超出了屏幕高度，从而导致用户界面610中某些界面元素得不到显示。例如，如图4B所示，视频简介区域2102就因纵向显示空间不足而仅显示部分内容在展开的屏幕中。

进一步的，为了避免出现大图标大字体等界面元素过大而存在界面不美观等问题，可以进一步微调界面元素的尺寸，以控制界面元素的高度与屏幕的高度相适应。这里，“相适应”可以是指，界面元素的高度与屏幕的高度处于一定比值范围内。例如，展开态下，浏览照片原图时，控制照片的高度与屏幕的高度比例不超过1/2。

举例说明，若判断出展开态时视频播放区域2101中的界面元素的高度2*s6与屏幕的高度S之比高于阈值范围，则可将该界面元素的高度进一步调成如图16B所示的视频播放区域11001，进一步调完之后使得该界面元素的高度与屏幕的高度S之比不高于阈值范围。这样，展开态时视频播放区域11001中的界面元素不会过大。同样的，视频简介区域11002等中的界面元素也可以同样进行进一步调整，以控制各个区域中的界面元素不会出现过大的问题。

同时，因控制界面元素的高度与屏幕的高度相适应，不会存在界面元素过大的问题，还可以确保图4A所示的用户界面600中的界面元素依然都能显示在展开态下的屏幕中。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

图17是本发明实施例的电子设备100的软件结构框图。

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。

如图17所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图17所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备100振动，指示灯闪烁等。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

本申请的各实施方式可以任意进行组合，以实现不同的技术效果。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘(solidstate disk，SSD))等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：ROM或随机存储记忆体RAM、磁碟或者光盘等各种可存储程序代码的介质。

总之，以上所述仅为本发明技术方案的实施例而已，并非用于限定本发明的保护范围。凡根据本发明的揭露，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (23)

1.一种用于折叠屏的显示方法，其特征在于，所述方法包括：

电子设备获取展开态下所设置的第一界面中的界面元素的第一高度和第一宽度，所述第一高度和所述第一宽度是基于所述电子设备处于折叠态时的所述界面元素的高度和宽度所确定的；

所述电子设备判断所述第一高度与屏幕高度的比值是否大于第一阈值；

若所述比值大于所述第一阈值，则调整所述界面元素的高度为第二高度，所述第二高度与屏幕高度的比值不大于所述第一阈值；

所述电子设备根据所述第二高度获取到第二宽度；

所述电子设备在展开态下显示第一界面，所述显示的所述第一界面中包括具有所述第二高度与所述第二宽度的所述界面元素。

2.根据权利要求1所述的方法，其特征在于，所述第一宽度与所述第一高度的比值等于所述第二宽度与所述第二高度的比值，或者所述第一宽度与所述第一高度的比值和所述第二宽度与所述第二高度的比值之差小于第一差值。

3.根据权利要求2所述的方法，其特征在于，所述第一界面的控件布局类型为内容宫格类型，所述显示的所述第一界面在一行中所容纳的图片，多于或等于所述所设置的所述第一界面在一行所容纳的图片；所述显示的所述第一界面在一列所容纳的图片，多于或等于所述显示的所述第一界面在一列所容纳的图片。

4.根据权利要求3所述的方法，其特征在于，所述第一界面中的界面元素包括图片或卡片，所述图片或卡片的排布方式是宫格型。

5.根据权利要求4所述的方法，其特征在于，所述所设置的所述第一界面中所述图片或卡片的宽度大于所述电子设备处于折叠态时所述图片或卡片显示的宽度。

6.根据权利要求2所述的方法，其特征在于，所述第一界面的控件布局类型为大图类型，所述大图类型是指：所述所设置的所述第一界面中包括有一张照片，所述照片的宽度等于屏幕宽度，或者所述照片的宽度与屏幕宽度的差值小于第一差值；

所述所设置的所述第一界面中所述照片的宽度，小于，所述显示的所述第一界面中所述照片的宽度；所述显示的所述第一界面在纵向空间所容纳的所述照片的内容多于所述所设置的所述第一界面在纵向空间所容纳的所述照片的内容。

7.根据权利要求2所述的方法，其特征在于，所述所设置的所述第一界面中所述照片的宽度大于所述电子设备处于折叠态时所述照片显示的宽度。

8.根据权利要求2所述的方法，其特征在于，所述第一界面的控件布局类型为社交列表类型，所述社交列表类型是指：所述所设置的所述第一界面中显示有至少一个社交动态。

9.根据权利要求8所述的方法，其特征在于，所述社交动态的结构为所述社交动态上半部分为文字，下半部分为照片，或者，所述社交动态上半部分为照片，下半部分为文字。

10.根据权利要求9所述的方法，其特征在于，当所述社交动态中仅包含一张照片时，所述显示的所述第一界面中所述照片的宽度，小于，所述所设置的所述第一界面中所述照片的宽度；所述显示的所述第一界面在纵向空间所容纳的所述照片的内容多于所述所设置的所述第一界面在纵向空间所容纳的所述照片的内容。

11.根据权利要求9所述的方法，其特征在于，当所述社交动态中包含多张照片时，所述显示的所述第一界面在一行中所容纳的照片，多于所述所设置的所述第一界面在一行所容纳的照片；所述显示的所述第一界面在一列所容纳的照片，多于所述所设置的所述第一界面在一列所容纳的照片。

12.根据权利要求9所述的方法，其特征在于，所述所设置的所述第一界面中所述照片的宽度大于所述电子设备处于折叠态时所述照片显示的宽度。

13.根据权利要求2所述的方法，其特征在于，所述第一界面的控件布局类型为文本列表类型，所述文本列表类型是指：所述所设置的所述第一界面中显示有文本，所述显示的所述第一界面的文本字体小于所述所设置的所述第一界面的文本字体。

14.根据权利要求13所述的方法，其特征在于，所述所设置的所述第一界面的文本字体大于所述电子设备处于折叠态时所述文本显示的字体。

15.根据权利要求2所述的方法，其特征在于，所述第一界面的控件布局类型为应用入口类型，所述第一界面的界面元素为功能入口图标；所述显示的所述第一界面的所述功能入口图标小于所述所设置的所述第一界面的所述功能入口图标。

16.根据权利要求15所述的方法，其特征在于，所述显示的所述第一界面在一行中所容纳的功能入口图标，等于所述所设置的所述第一界面在一行所容纳的功能入口图标；所述显示的所述第一界面在一行中所容纳的每两个功能入口图标之间的间隙大于所述所设置的所述第一界面在一行所容纳的每两个功能入口图标之间的间隙。

17.根据权利要求16所述的方法，其特征在于，所述所设置的所述第一界面的所述功能入口图标大于所述电子设备处于折叠态时显示的所述功能入口图标。

18.根据权利要求2所述的方法，其特征在于，所述第一高度和所述第一宽度是基于所述电子设备处于折叠态时的所述界面元素的高度和宽度所确定的；具体包括：

基于所述电子设备的屏幕在展开态以及折叠态下的宽度变化得到所述第一宽度，所述界面元素在折叠态下的宽度与所述第一宽度的变化量与在展开态以及折叠态下屏幕的宽度变化量正相关，所述界面元素在折叠态下的宽高比与在展开态下所设置的宽高比一致，或者所述界面元素在折叠态下的宽高比与在展开态下所设置的宽高比之差小于第二差值。

19.根据权利要求2所述的方法，其特征在于，电子设备获取展开态下所设置的第一界面中的界面元素的第一高度和第一宽度之前，所述方法还包括：

所述电子设备检测到所述电子设备从折叠态切换至展开态。

20.根据权利要求2所述的方法，其特征在于，所述折叠屏包括设置于所述电子设备同一侧的第一屏和第二屏，所述电子设备在展开态下显示所述第一界面具体包括：所述电子设备在展开态下通过所述第一屏和所述第二屏中共同显示所述第一界面；

所述第一高度和所述第一宽度是基于所述电子设备处于折叠态时的所述界面元素的高度和宽度所确定的具体包括：所述第一高度、所述第一宽度是基于所述电子设备处于折叠态下所述第一屏显示的所述第一界面元素的高度与宽度确定的。

21.根据权利要求2所述的方法，其特征在于，所述折叠屏包括设置于所述电子设备一侧的第一屏，以及另一侧的第二屏和第三屏，所述电子设备在展开态下显示第一界面具体包括：所述电子设备在展开态下通过所述第二屏和所述第三屏中共同显示所述第一界面；

所述第一高度和所述第一宽度是基于所述电子设备处于折叠态时的所述界面元素的高度和宽度所确定的具体包括：所述第一高度、所述第一宽度是基于所述电子设备处于折叠态下所述第一屏显示的所述第一界面元素的高度与宽度确定的。

22.一种电子设备，其特征在于，所述电子设备包括存储器、一个或多个处理器，所述存储器用于存储计算机程序，所述处理器用于调用计算机程序，使得所述电子设备执行如权利要求1至21任一项所述的方法。

23.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在电子设备上运行时，使得所述电子设备执行如权利要求1至21中任一项所述的方法。