CN112114912A - 一种用户界面布局方法及电子设备 - Google Patents

Abstract

本申请公开了一种用户界面布局方法，包括：电子设备接收用于启动第一应用程序的第一指令；电子设备检测电子设备的姿态；电子设备的姿态包括横屏姿态和竖屏姿态；当电子设备的姿态为横屏姿态时，电子设备将第一用户界面上的界面元素按照第二宽度、第二高度进行布局，然后缩小到第一宽度、第一高度后渲染到显示屏。横屏姿态时，用户界面的宽、高分别为第一宽度、第一高度。第一宽度小于显示屏的宽度，第一高度等于显示屏的高度。竖屏姿态时，显示屏的宽度为第二宽度。第二高度与第一高度的比例等于第二宽度与第一宽度的比例。这样，电子设备显示的第一用户界面，可以减少用户界面在横竖屏切换时出现布局错乱的问题，从而可以提高使用的便利性。

Description

一种用户界面布局方法及电子设备

技术领域

本申请涉及电子技术领域，尤其涉及一种用户界面布局方法及电子设备。

背景技术

目前，在智能手机、平板设备等电子设备上，某些应用程序可以支持用户界面横竖屏切换，例如视频播放应用程序、游戏应用程序等等。这样，这些应用程序的用户界面可以随着用户改变电子设备的姿态适应性地进行横竖屏切换。另外，在折叠屏设备在单屏显示状态和大屏显示状态之间切换时，用于进行显示的显示屏大小发生变化，这些应用程序的用户界面也能够适应显示屏大小的变化来进行显示。

但是，另一些应用程序的用户界面不支持上述横竖屏切换，也不能适应折叠屏设备上显示屏大小的变化进行显示。这些应用程序例如是社交类应用程序“微信(Wechat)”、购物类应用程序“淘宝”等等。这些应用程序无法为用户提供能够横竖屏切换的用户界面，也无法在折叠屏设备上显示屏大小发生变化时，适应显示屏大小的变化来显示用户界面，从而降低了使用便利性。

为解决上述问题，现有技术中，电子设备可在应用程序启动时获取显示屏的尺寸，例如显示屏的宽和高。当需要应用程序的用户界面进行横竖屏切换，或者折叠屏设备的显示屏显示区域大小发生变化时，显示屏的尺寸发生变化。电子设备可根据应用程序启动时获取到的显示屏的尺寸，来确定用户界面的尺寸并在尺寸变化的显示屏上布局用户界面的界面元素。

然而，当用户界面横竖屏切换时，或者折叠屏设备的显示屏显示区域大小发生变化时，显示屏的尺寸发生了变化。但是电子设备仍然根据应用程序启动时获取到的显示屏的尺寸布局用户界面的界面元素。这样，用户看到的用户界面会出现空白区域或者部分界面元素未被显示，从而降低了横竖屏切换使用的便利性。

发明内容

本申请实施例提供了一种用户界面布局方法，按照该方法布局得到的用户界面在横竖屏切换时可减少出现布局错乱的问题，从而可以提高使用的便利性。

第一方面，提供一种用于电子设备的用户界面布局方法，该方法可包括：接收用于启动第一应用程序的第一指令；检测所述电子设备的姿态；所述电子设备的姿态包括横屏姿态和竖屏姿态；当所述电子设备的姿态为所述横屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第三宽度，所述显示屏的高度为第三高度；当所述电子设备的姿态为所述竖屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度等于所述第三高度，所述显示屏的高度等于所述第三宽度；其中，所述第一用户界面的宽度为第一宽度，所述第一用户界面的高度为第一高度，所述第一用户界面是由所述第三用户界面缩小而得到，所述第一宽度小于所述第三宽度；所述第一高度等于所述第三高度；所述第三用户界面的宽度等于所述第三高度；所述第三用户界面的高度为第二高度；所述第二高度与第一高度的比例和第三高度与第一宽度的比例相等。这样，在电子设备由第一姿态切换为第二姿态时，由于用户界面上的界面元素是按照电子设备在第二姿态时显示屏的宽度进行布局的。电子设备绘制的第一用户界面，即可减少用户界面在横竖屏切换时出现布局错乱的问题，从而可以提高使用的便利性。

结合第一方面，在一种可能的实现方式中，该方法还包括：所述电子设备接收用户在所述第一用户界面的触摸操作；所述电子设备获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面的坐标点；所述电子设备根据所述第二坐标点对应的界面元素响应所述触摸操作。这样，电子设备可实现显示的界面元素的电触点与其实际应该响应的坐标之间对应，可以提高显示的界面元素响应用户操作的准确性。

结合第一方面，在一种可能的实现方式中，所述电子设备将所述第一用户界面放大到所述第三用户界面；所述电子设备将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；所述电子设备将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。这样，当电子设备的姿态发生改变时，显示的用户界面可以减少出现错乱。

结合第一方面，在一种可能的实现方式中，所述电子设备将根据宽度为所述第三高度、高度为所述第三宽度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；所述电子设备将绘制的所述第二用户界面渲染到所述显示屏。这样，布局得到的用户界面可以适应地填充显示屏。

结合第一方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第一用户界面之后，还包括：当检测到所述电子设备的姿态从所述横屏姿态切换到所述竖屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

结合第一方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第二用户界面之后，还包括：当检测到所述电子设备的姿态从所述竖屏姿态切换到所述横屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

第二方面，提供一种用户界面布局方法，该方法可包括：电子设备接收用于启动第一应用程序的第一指令；所述电子设备检测所述电子设备的姿态；所述电子设备的姿态包括单屏姿态和大屏姿态；当所述电子设备的姿态为单屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第一宽度，所述显示屏的高度为第一高度；当所述电子设备的姿态为所述大屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度为第二宽度，所述第二宽度大于所述第一宽度，所述显示屏的高度为所述第一高度；其中，所述第一用户界面的宽度等于所述第一宽度，所述第一用户界面的高度等于所述第一高度，所述第一用户界面是由所述第三用户界面缩小而得到，所述第三用户界面的宽度等于所述第二宽度；所述第三用户界面的高度为第二高度；所述第二高度与第一高度的比例和第二宽度与第一宽度的比例相等。这样，在电子设备由第一姿态切换为第二姿态时，由于用户界面上的界面元素是按照电子设备在第二姿态时显示屏的宽度进行布局的。电子设备绘制的第一用户界面，即可减少用户界面在横竖屏切换时出现布局错乱的问题，从而可以提高使用的便利性。

结合第二方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第一用户界面之后，包括：所述电子设备接收用户在所述第一用户界面的触摸操作；所述电子设备获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面坐标点；所述电子设备根据所述第二坐标点对应的界面元素响应所述触摸操作。这样，电子设备可实现显示的界面元素的电触点与其实际应该响应的坐标之间对应，可以提高显示的界面元素响应用户操作的准确性。

结合第二方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第一用户界面，包括：所述电子设备将所述第一用户界面放大到所述第三用户界面；所述电子设备将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；所述电子设备将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。这样，当电子设备的姿态发生改变时，显示的用户界面可以减少出现错乱。

结合第二方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第二用户界面，包括：所述电子设备将根据宽度为所述第二宽度、高度为所述第一高度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；所述电子设备将绘制的所述第二用户界面渲染到所述显示屏。这样，布局得到的用户界面可以适应地填充显示屏。

结合第二方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第一用户界面之后，还包括：当检测到所述电子设备的姿态从所述单屏姿态切换到所述大屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

结合第二方面，在一种可能的实现方式中，所述电子设备显示所述第一应用程序的第二用户界面之后，还包括：当检测到所述电子设备的姿态从所述大屏姿态切换到所述单屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

第三方面，提供一种电子设备，包括：通信接口、存储器和处理器；所述通信接口、所述存储器与所述处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述处理器从所述存储器中读取所述计算机指令，以使得所述电子设备执行如第一方面中任一种可能的实现方式或第二方面中任一种可能的实现方式。

第四方面，提供提供一种计算机可读存储介质，包括指令，其特征在于，当上述指令在电子设备上运行时，以使得电子涉笔执行如第一方面中任一种可能的实现方式或第二方面中任一种可能的实现方式。

第五方面，提供一种计算机产品当所述计算机程序产品在计算机上运行时，使得所述计算机执行如第一方面中任一种可能的实现方式或第二方面中任一种可能的实现方式。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例中所需要使用的附图进行说明。

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

图2为本申请实施例提供的电子设备的软件结构框图；

图3A-图3B为本申请实施例中提供的电子设备示意图；

图4A-图4B为现有技术中用户界面示意图；

图5A-图5B为现有技术中用户界面示意图；

图6A-图6B为本申请实施例中提供的折叠屏设备示意图；

图7为本申请实施例提供的用户界面布局方法的流程示意图；

图8为本申请实施例一提供的平板设备用户界面布局方法的流程示意图；

图9本申请实施例一提供的平板设备横屏显示用户界面示意图；

图10为本申请实施例二提供的折叠屏设备用户界面布局方法的流程示意图；

图11为本申请实施例二提供的折叠屏设备单凭姿态时显示用户界面示意图；

图12为本申请提供的电子设备的软硬件实现本申请的用户界面布局方法的示意图；

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

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

图15A-图15B为本申请实施例提供的电子设备横屏显示用户界面的界面示意图；

图16为本申请实施例提供的电子设备横屏显示时输入事件坐标映射示意图；

图17为本申请实施例提供的输入事件坐标映射步骤的流程示意图；

图18为本申请实施例提供的本申请提供的电子设备的软硬件实现本申请的输入事件坐标映射步骤的示意图。

具体实施方式

本申请以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括复数表达形式，除非其上下文中明确地有相反指示。还应当理解，本申请中使用的术语“和/或”是指并包含一个或多个所列出项目的任何或所有可能组合。

以下介绍了电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载

或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如具有触敏表面或触控面板的膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是具有触敏表面或触控面板的台式计算机。

本申请的说明书和权利要求书及附图中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。应用程序的用户界面是通过java、可扩展标记语言(extensible markup language，XML)等特定计算机语言编写的源代码，界面源代码在终端设备上经过解析，渲染，最终呈现为用户可以识别的内容，比如图片、文字、按钮等控件。控件(control)也称为部件(widget)，是用户界面的基本元素，典型的控件有工具栏(toolbar)、菜单栏(menu bar)、文本框(text box)、按钮(button)、滚动条(scrollbar)、图片和文本。界面中的控件的属性和内容是通过标签或者节点来定义的，比如XML通过<Textview>、<ImgView>、<VideoView>等节点来规定界面所包含的控件。一个节点对应界面中一个控件或属性，节点经过解析和渲染之后呈现为用户可视的内容。此外，很多应用程序，比如混合应用(hybrid application)的界面中通常还包含有网页。网页，也称为页面，可以理解为内嵌在应用程序界面中的一个特殊的控件，网页是通过特定计算机语言编写的源代码，例如超文本标记语言(hyper text markup language，GTML)，层叠样式表(cascading style sheets，CSS)，java脚本(JavaScript，JS)等，网页源代码可以由浏览器或与浏览器功能类似的网页显示组件加载和显示为用户可识别的内容。网页所包含的具体内容也是通过网页源代码中的标签或者节点来定义的，比如GTML通过<p>、<img>、<video>、<canvas>来定义网页的元素和属性。

用户界面常用的表现形式是图形用户界面(graphic user interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

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

下面以电子设备100为例对实施例进行具体说明。应该理解的是，电子设备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)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器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总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。

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

PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。

UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如：处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。

MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(displayserial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。

GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193，显示屏194，无线通信模块160，音频模块170，传感器模块180等。GPIO接口还可以被配置为I2C接口，I2S接口，UART接口，MIPI接口等。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

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

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。

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

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

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

无线通信模块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可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备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反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

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

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

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industryassociation of the USA，CTIA)标准接口。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。

气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。

磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。本申请中，电子设备100可以根据加速度传感器180E检测到加速度大小、重力大小的变化来进行横竖屏切换以及折叠屏的单屏显示与大屏显示切换。

距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。

环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。

按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。

马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。

指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。

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

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

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

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

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

如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器、视图管理器、绘图表面管理器等。关于视图管理器、绘图表面管理器的具体描述可参考图12的具体描述。

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

视图管理器用于将获取到的应用程序的XML文件经过布局、绘制成用户界面的界面元素。

绘图表面管理器用于将界面元素绘制到待显示的用户界面中。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下面结合应用程序(如淘宝)从启动到显示的场景，示例性说明电子设备100软件以及硬件的工作流程。

当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为淘宝应用图标的控件为例，淘宝应用调用应用框架层的接口，启动淘宝应用，应用程序框架层对淘宝应用主页的视图进行测量、布局、绘制后发送到内核层进行渲染。内核层中的显示驱动将淘宝应用的主页渲染到显示屏194上。

下面先介绍应用程序的用户界面布局，以及电子设备如何显示应用程序的用户界面。

1.应用程序的用户界面布局

一个应用程序可具有一个或多个用户界面。一个用户界面可具有一个或多个界面元素，如按钮、图标等控件。用户界面布局可以是指某个用户界面的宽度、高度等，以及该用户界面中的各个界面元素的大小和位置等。应用程序的源代码文件中可以包含用于定义用户界面布局的文件，例如Android中的XML文件。为了适应具有不同大小的显示屏的电子设备，应用程序在被开发时，其用户界面布局可以是自适应的。具体的，用户界面的宽度可以根据显示屏的宽度确定，用户界面的高度可以根据显示屏的高度确定。例如，用户界面的宽度可以和显示屏的宽度相同，用户界面的高度可以和显示屏的高度相同，以便用户界面能够填充整个显示屏。

下面结合附图介绍以下概念：用户界面的宽度、高度，显示屏的宽度、高度。

在本申请中，当用户手持电子设备时，显示屏中与空间坐标系XYZ中XOY平面的第一夹角小于第一阈值的边的长度为显示屏的宽度，本申请中该边被称为显示屏的宽边。显示屏中垂直于宽边的边被称为显示屏的高边，显示屏的高边的长度为显示屏的高度。空间坐标系XYZ中XOY平面与地面平行。电子设备可以通过陀螺仪传感器来获取第一夹角。第一阈值由电子设备系统配置。第一阈值可以是10°、20°、30°等等，此处不作限定。如图3A-3B示出的电子设备示意图。在图3A中，边AB为显示屏的宽边，宽边对应的长度X1为显示屏的宽度。边AC为显示屏的高边，高边对应的长度Z1为显示屏的高度。在图3B中，边DE为显示屏的宽边，宽边对应的长度X2为显示屏的宽度。边DF为显示屏的高边，高边对应的长度Z2为显示屏的高度。高度和宽度的单位可以是长度单位，如厘米、分米、米等等。高度和宽度的单位也可以是像素点。

在本申请中，用户界面平行于显示屏的宽边的边被称为用户界面的宽边。用户界面宽边的长度为用户界面的宽度。用户界面平行于显示屏的高边的边被称为用户界面的高边。用户界面的高边的长度为用户界面的高度。如图4A-4B示出的电子设备显示用户界面的示意图。在图4A中，边A1C1为用户界面401的宽边，边A1CI的长度a为用户界面401的宽度。边A1B1为用户界面401的高度，边A1B1的长度b为用户界面401的高度。a，b为大于0的实数。在图4B中，用户界面401的宽度度与显示屏403的宽度相同，用户界面401的高度与显示屏403高度相同。边D1E1为用户界面401的宽边，边D1E1的长度c为用户界面401的宽度。边D1F1为用户界面401的高边，边D1F1的长度d为用户界面401的高度。c，d为大于0的实数。

2.电子设备如何显示应用程序的用户界面

在电子设备启动应用程序时，电子设备可以先获取显示屏的宽度、高度等尺寸，根据显示屏的宽度、高度等尺寸，确定待显示的用户界面的宽度、高度。然后，电子设备可以确定该用户界面中各个界面元素的大小、位置等。至此，待显示的用户界面的布局被确定出。最后，电子设备可以对该待显示的用户界面进行渲染，以在显示屏中显示出该待显示的用户界面。

下面结合附图介绍以下几个概念：横屏显示、竖屏显示、横竖屏切换、竖屏姿态、横屏姿态、单屏姿态、大屏姿态、单屏显示、大屏显示、支持横竖屏切换、不支持横竖屏切换、支持横竖屏切换功能和不支持横竖屏切换功能。

如图4A所示，横屏显示，即显示屏402的长边A2C2与用户界面401的宽边A1C1平行，显示用户界面401的显示状态。

如图4B所示，竖屏显示，即显示屏402的短边D2E2与用户界面401的宽边D1E1平行(包括重合)的情况，显示用户界面的显示状态。

如图4A-4B所示，横竖屏切换，即用户界面401的显示状态从图4A中的横屏显示切换到图4B中的竖屏显示的情况。或者，如图5A-5B所示，横竖屏切换，即用户界面500的显示状态从图5A中的竖屏显示切换到图5B中的横屏显示的情况。简单地说，横竖屏切换，即用户界面的显示状态从横屏显示切换到竖屏显示。或者，用户界面的显示状态从竖屏显示切换到横屏显示。

竖屏姿态，即电子设备在竖屏显示时对应的电子设备的姿态。如图3A所示的电子设备的姿态为竖屏姿态。

横屏姿态，即电子设备在横屏显示时对应的电子设备的姿态。如图3B所示的电子设备的姿态为横屏姿态。

如图6A所示，单屏姿态，即电子设备的显示屏601与显示屏602的夹角α小于第二阈值时电子设备的姿态。电子设备可以通过陀螺仪传感器获取夹角α。第二阈值由电子设备的系统配置。第二阈值可以是90°、100°、150°等等，此处不作限定。

如图6A所示，单屏显示，即电子设备的姿态为单屏姿态时对应的显示状态。单屏显示时，电子设备显示的用户界面603的宽度和显示屏601的宽度相等，电子设备显示的用户界面603的高度与显示屏601的高度相等。

如图6B所示，大屏姿态，即电子设备的显示屏601与显示屏602的夹角α大于或等于第二阈值时电子设备的姿态。

如图6B所示，大屏显示，即对应电子设备的姿态为大屏姿态时对应的显示状态。

在本申请中，电子设备的姿态可以为第一姿态和第二姿态。第一姿态可以是横屏姿态、单屏姿态。第二姿态可以是竖屏姿态、大屏姿态。

平板设备可开启横竖屏切换功能，开启横竖屏切换功能后某些应用程序的应用界面支持横竖屏切换功能。例如对于“视频播放”应用程序，支持横竖屏切换。平板设备在横屏姿态下横屏显示该应用程序的应用界面。当切换到竖屏姿态时，平板设备由横屏显示该应用程序的应用界面切换到竖屏显示该应用程序的应用界面。

另一些应用程序的应用界面不支持横竖屏切换功能。例如对于“微信”应用程序，不支持横竖屏切换。平板设备在竖屏姿态下竖屏显示该应用程序的应用界面。当切换到横屏姿态时，平板设备仍然竖屏显示该应用程序的应用界面。

折叠屏设备可开启适应显示屏大小的变化的功能，开启适应显示屏大小的变化功能后，某些应用程序的应用界面支持适应显示屏大小的变化功能。例如对于“视频播放”应用程序，支持适应显示屏大小的变化功能。折叠屏设备在单屏姿态下只通过单屏(例如只通过显示屏601)显示该应用程序的应用界面。当切换到大屏姿态时，折叠屏设备由单屏显示该应用程序的应用界面切换到大屏显示(即通过显示屏601和显示屏602组成的大屏显示)该应用程序的应用界面。

另一些应用程序的应用界面不支持适应显示屏大小的变化的功能。例如对于“微信”应用程序，不支持适应显示屏大小的变化的功能。折叠屏设备在单屏姿态下单屏显示该应用程序的应用界面。当切换到大屏姿态时，折叠屏设备仍然单屏显示该应用程序的应用界面。

但是，现有技术中某些应用程序的用户界面不支持上述横竖屏切换，只能进行竖屏显示。例如，“微信(Wechat)”、“淘宝”等等应用程序在陀螺仪和加速度传感器检测到电子设备的姿态为横屏姿态时仍然进行竖屏显示，为用户观看显示内容带来不便。

为解决上述问题，现有技术中，电子设备可在应用程序启动时获取显示屏的尺寸，例如显示屏的宽和高。当需要应用程序的用户界面进行横竖屏切换，或者折叠屏设备的显示屏显示区域大小发生变化时，显示屏的尺寸发生变化。电子设备可根据应用程序启动时获取到的显示屏的尺寸，来确定用户界面的尺寸并在尺寸变化的显示屏上布局用户界面的界面元素。然而，当用户界面横竖屏切换时，或者折叠屏设备的显示屏显示区域大小发生变化时，显示屏的尺寸发生了变化。但是电子设备仍然根据应用程序启动时获取到的显示屏的尺寸布局用户界面的界面元素。如图4A-4B示出的用户界面示意图。用户界面401的显示状态从图4A中的横屏显示切换到图4B的竖屏显示。用户界面401中出现如图4B中椭圆框402所示的空白区域。又如图5A-5B示出的用户界面示意图。用户界面500的显示状态从图5A中的竖屏显示切换到图5B中的横屏显示。用户界面500中出现如图5B中椭圆框500所示的部分界面元素(例如界面元素501和界面元素502)未显示。另一方面，当用户界面出现上述问题时，用户可以重启应用程序。但是，用户需要操作多次显示屏上才会显示应用程序重启前的用户界面。这样，用户操作繁琐。

针对现有技术中用户界面横竖屏切换时，会出现布局错乱的情况，本申请实施例提供了一种用户界面布局方法。在用户界面横竖屏切换时，该方法可以减少用户界面出现布局错乱的问题。

下面概述本申请提出的用户界面布局方法。电子设备响应于用户的操作启动应用程序。电子设备会检测当前所处的姿态，并获取显示屏的宽度、高度等尺寸。电子设备根据显示屏的宽度、高度等尺寸，确定待显示的用户界面(后文称为第一用户界面)的宽度、高度。如果该应用程序的用户界面不支持横竖屏切换，且当前电子设备所处的姿态为第一姿态，则电子设备放大第一用户界面的宽度和高度到第三用户界面的尺寸。电子设备按照第三用户界面的宽度和高度来布局第一用户界面的界面元素并将完成布局的界面元素绘制在第三用户界面上。电子设备再将第三用户界面的宽度和高度缩小至第一用户界面的宽度和高度后渲染到显示屏上。

其中，电子设备在第一姿态时，按照显示屏的尺寸确定的用户界面可以称为第一用户界面。第一用户界面的宽度和高度放大后的用户界面称为第三用户界面。第三用户界面的宽度为电子设备所处的姿态为第二姿态时显示屏的宽度。第三用户界面的高度为第一用户界面的高度乘以第一用户界面的宽度的放大比例得到。

这样，当电子设备的姿态发生改变时，用户界面的显示状态也会适应性的改变。并且，用户界面的界面元素发生布局错乱的请况会减少。

下面结合图7展开描述本申请提供的用户界面布局方法。如图7所示，本申请实施例提供的用户界面布局方法可以包括：

S701、电子设备启动第一应用程序。

第一应用程序可以是响应于用户对该第一应用程序的icon的点击操作启动的。可选的，第一应用程序也可以由语音控制命令启动(例如，siri)。第一应用程序也可以在其他应用程序启动(例如在微信中点击淘宝链接打开淘宝)，等等。此处不作限定。第一应用程序可以是社交类应用程序“微信(Wechat)”、购物类应用程序“淘宝”等等。电子设备只在第一应用程序启动时感知电子设备显示屏的宽度和高度，并按照显示屏的高度和宽度布局用户界面的界面元素。在第一应用程序启动后，电子设备不感知显示屏宽度和高度的变化。

第一应用程序的应用界面不支持横竖屏切换。电子设备只在第一应用程序启动时获取显示屏的宽、高。当电子设备的姿态发生改变时，显示屏的宽和高也发生了变化。但是，第一应用程序不感知显示屏宽和高的变化。

S702、电子设备检测第一应用程序被启动时电子设备的姿态。

结合图1示出的电子设备结构图，电子设备可以通过图1中示出的加速度传感器180E获取电子设备的重力大小及方向来确定电子设备的姿态。电子设备的姿态可以第一姿态或者第二姿态。第一姿态可以是横屏姿态、单屏姿态等等。在一种实现方式中，第一姿态是横屏姿态，第二姿态是竖屏姿态；在另一种实现方式中，第一姿态是单屏姿态，第二姿态是大屏姿态。在电子设备在第一应用程序启动检测电子设备的姿态时，电子设备还可以获取显示屏的尺寸。电子设备检测电子设备的姿态和获取显示屏的尺寸可以不分先后顺序进行。

S703、在电子设备的姿态为第一姿态的情况下，电子设备根据显示屏的宽度和高度确定第一用户界面的第一宽度和第一高度。

在电子设备的姿态为第一姿态时，电子设备可以将显示屏宽度的1/f作为第一宽度。这里，f是大于1的实数。电子设备可以获取显示屏的高度作为第一高度。f可以是系统配置的。

S704、电子设备将第一宽度放大到第二宽度，电子设备按照第一宽度的放大比例将第一高度放大到第二高度。其中，第二宽度为电子设备的姿态为第二姿态时的显示屏的宽度。

电子设备还可以获取在电子设备的姿态为第二姿态时的显示屏宽度作为第二宽度。其中，当第一姿态为横屏姿态时，第二宽度为电子设备的姿态为竖屏姿态时的显示屏宽度。当第一姿态为单屏姿态时，第二宽度为电子设备的姿态为大屏姿态时的显示屏宽度。第一宽度与第二宽度之间的放大比例为S。S＝第二宽度/第一宽度，“/”表示除号。第二高度＝第一高度*S，“*”表示乘号。

示例性的，如图4A所示，电子设备的姿态为横屏。电子设备显示淘宝应用的主界面401。该用户界面401中边A1C1的长度为第一宽度。该用户界面401中边A1B1的长度为第一高度。如图4B所示，电子设备的姿态为竖屏。用户界面401的宽和高与显示屏的宽和高相同。边D1E1的长度即为第二宽度。

S705、电子设备将按照第二宽度和第二高度布局的第一应用程序用户界面的界面元素绘制到放大后的用户界面上。

这里，第一用户界面的第一宽度和第一高度放大到第二宽度和第二高度后的用户界面可以称为第三用户界面。第三用户界面即为放大后的用户界面。电子设备根据第三用户界面的宽和高布局应用程序用户界面的界面元素。根据第二宽度和第二高度布局得到的第一应用程序用户界面的界面元素，并得到第三用户界面的布局。电子设备将布局好的界面元素绘制到第三用户界面上。第二用户界面被渲染后得到的用户界面时电子设备为第二姿态时对应的用户界面。

S706、电子设备将完成绘制的用户界面缩小到第一宽度，第一高度的尺寸后渲染到显示屏。

下面介绍本申请实施例提供的将用户界面渲染在显示屏上的过程。电子设备将布局完成的用户界面的宽高尺寸从第二宽度缩小到第一宽度，第二高度缩小到第一高度。电子设备的CPU将缩小后的用户界面处理为多维图形，并将图形纹理化。然后电子设备调用GPU将图形光栅化。最后，电子设备将光栅化的图形投射到显示屏上。这样，就可以得到用户可以看到的用户界面。最终显示屏上显示的用户界面可以是如图4A和图4B中所示的用户界面401。

本申请提出的用户界面布局方法中，电子设备在第一姿态启动第一应用程序时，就将第一用户界面上的界面元素按照电子设备在第二姿态的情况进行布局，即按照第二用户界面的尺寸进行界面元素布局。这样，在电子设备由第一姿态切换为第二姿态时，由于用户界面上的界面元素是按照电子设备在第二姿态的情况进行布局的。电子设备绘制的第一用户界面，即可减少用户界面在横竖屏切换时出现布局错乱的问题，从而可以提高使用的便利性。

下面结合实施例一至实施例二来详细介绍本申请提供的用户界面布局方法。

在本申请实施例中，第一用户界面的尺寸为第一尺寸时被称为第一用户界面。第一用户界面的尺寸为第二尺寸时被称为第三用户界面。第一尺寸即对应宽度为第一宽度、高度为第一高度。第二尺寸即对应宽度为第二宽度、高度为第二高度。

实施例一：针对平板设备的用户界面布局

如图8所示为实施例一提供的针对平板设备的用户界面布局方法，包括：

S801、在应用程序启动时，判断平板设备的姿态是否为横屏姿态；若是，则执行S802-S808；若否，则执行S809-S813。

具体地，平板设备中的加速度传感器180E可以根据平板设备的重力加速度变化，以及重心来判断平板设备的姿态。

S802、判断启动的应用程序是否在该平板设备预设的白名单中；若是，则执行S803-S808；若否，则执行S809-S813。

关于应用程序的启动方式，具体可参考图7所述示例中步骤S701的描述。在用户界面横竖屏切换时，这一类应用程序不获取显示屏宽度和高度的变化，而只是在应用程序启动时才获取显示屏宽度和高度。

平板设备在开启应用程序之前判断该应用程序对应的名称是否在平板设备系统预设的白名单中。白名单由系统配置。白名单中的名称或者标识等对应的应用程序只在启动时获取电子设备显示屏的宽度和高度，并按照显示屏的高度和宽度布局用户界面的界面元素。在用户界面横竖屏切换时，这一类应用程序不获取显示屏宽度和高度的变化。该应用程序的标识或者名称等在白名单就可以按照步骤S803-S805布局应用界面。否则，该应用程序就按照步骤S806-S807来布局用户界面。

S803-S805:平板设备启动应用程序时的姿态为横屏姿态，应用程序用户界面的显示过程

S803、平板设备将平板设备的姿态为横屏姿态时的第一用户界面放大到第三用户界面。其中，第三用户界面的第二宽度为平板设备的姿态为竖屏姿态时显示屏的宽度。第三用户界面的第二高度为第一用户界面的第一高度按照第一用户界面的第一宽度放大到第二宽度的放大比例放大得到。

图9示出了平板设备横屏显示用户界面的示意图。图9中用户界面901即为第一用户界面。用户界面901的宽度即为第一宽度，第一宽度为X2。用户界面901的高度即为第一高度，第一高度为Y2。图9所示的平板设备的姿态为竖屏时显示屏903的宽度为X1，高度为Y1。平板设备的姿态为竖屏时，用户界面的宽度和高度就等于显示屏的宽度和高度。用户界面901的宽度X2放大到平板设备的姿态为竖屏时显示屏903的宽度X1，用户界面901的高度Y2按照宽度X1的放大比例放大到Y1。用户界面902为用户界面901的宽度和高度放大后的用户界面。用户界面902即为第三用户界面。用户界面902的宽度即为第二宽度，第二宽度为X1。用户界面902的高度即为第二高度，第二高度为Y1。

图9中X1等于Y2,Y1可以等于Y3,也可以小于Y3，也可以大于Y3。Y1与Y3的大小取决于平板设备竖屏时窗口的尺寸和横屏时窗口的尺寸。举例来说，假设X1＝16cm，X2＝8cm，Y3＝32cm，Y2＝X1＝16cm。那么Y1＝Y2*(X1/X2)＝32cm，“*”表示称号，“/”表示除号。假设X1＝15cm，X2＝10cm，Y3＝25cm，Y2＝X1＝15cm。那么Y1＝Y2*(X1/X2)＝22.5cm。假设X1＝16cm，X2＝8cm，Y3＝28cm，Y2＝X1＝16cm。那么Y1＝Y2*(X1/X2)＝32cm。

S804、平板设备按照第三用户界面的宽度和高度来布局用户界面的界面元素。

平板设备根据第三用户界面，即用户界面902的尺寸来确定界面元素的尺寸，并对界面元素进行布局，绘制。具体地，平板设备确定用户界面中的每一个界面元素在该用户界面中的大小和位置。然后，平板设备按照界面元素被布局的大小和位置绘制在用户界面上。

S805、平板设备将完成布局的第三用户界面的宽、高缩小到第一用户界面的宽、高后渲染到显示屏。

平板设备按照用户界面902的宽度和高度来布局用户界面的界面元素。布局完成后，平板设备将用户界面902的尺寸缩小到用户界面901的尺寸后渲染到屏幕上。具体地，平板设备的CPU将缩小后的用户界面处理为多维图形，并将图形纹理化。然后平板设备调用GPU将图形光栅化。最后，平板设备将光栅化的图形投射到显示屏上。这样，就可以得到用户可以看到的用户界面。

S806-S808：横屏姿态切换到竖屏姿态时，用户界面的显示过程

S806、平板设备检测到平板设备的姿态从横屏姿态切换到竖屏姿态。

具体地，平板设备可以通过加速度传感器和陀螺仪传感器检测到平板设备的姿态变化。例如，当电子设备通过加速度传感器和陀螺仪传感器检测到重力加速度g的值从第一加速度值变换为第二加速度值，平板设备可判断平板设备的姿态从横屏姿态切换到竖屏姿态。第一加速度值和第二加速度值由平板设备的系统配置。第一加速度值可以为一个既有方向又有大小的值。第二加速度可以为一个既有方向又有大小的值。

S807、平板设备将横屏姿态时布局的界面元素绘制到第二用户界面中，第二用户界面的宽度等于竖屏姿态时显示屏的宽度，第二用户界面的宽度等于竖屏姿态时显示屏的高度。

平板设备获取的竖屏姿态时显示屏的宽度和高度。但是，平板设备不会将获取到的显示屏的宽度和高度上报到应用程序层。平板设备不用按照获取到的显示屏的宽度和高度重新对用户界面的界面元素布局。平板设备将将横屏姿态时布局的界面元素绘制到第三用户界面中。第三用户界面的宽度等于竖屏姿态时显示屏的宽度，第三用户界面的宽度等于竖屏姿态时显示屏的高度。

S808、平板设备将完成绘制的第二用户界面渲染到显示屏上。

平板设备将完成绘制的第三用户界面渲染到显示屏的具体过程可参考步骤S805中对平板设备将用户界面渲染到显示屏上的描述。

S809-S810：平板设备启动应程序时，平板设备的姿态为竖屏姿态，应用程序用户界面的显示过程

S809、平板设备检测到平板设备的姿态为竖屏姿态时，平板设备根据第二用户界面的宽度和高度对用户界面的界面元素布局。其中，第二用户界面的宽、高尺寸与显示屏的宽、高尺寸相同。

平板设备首先获取显示屏的宽度和高度，然后根据显示屏的宽度和高度来布局用户界面的界面元素在用户界面中的大小和位置。然后，平板设备将布局好的界面元素绘制到待显示用户界面中，待显示用户界面的宽度等于显示屏的宽度，待显示用户界面的高度等于显示屏的高度。

如图9中示出的平板设备，平板设备的姿态为竖屏姿态时，显示屏的宽度可以是X1，高度可以是Y3。

S810、将完成绘制的第二用户界面渲染到平板设备的显示屏上。

具体地，平板设备的CPU将完成绘制的待显示用户界面处理为多维图形，并将图形纹理化。然后平板设备调用GPU将图形光栅化。最后，平板设备将光栅化的图形投射到显示屏上。这样，就可以得到用户可以看到的用户界面。

S811-S813：竖屏姿态切换到横屏姿态时，用户界面的显示过程

S811、平板设备检测平板设备的姿态从竖屏姿态切换到横屏姿态，平板设备根据显示屏的宽、高确定第一用户界面的宽度和高度。

步骤S811可参考步骤S703中电子设备根据根据显示屏的宽、高尺寸确定用户界面的宽度和高度的描述。

S812、平板设备将平板设备的姿态为竖屏姿态时布局的用户界面的界面元素绘制到第三用户界面上。第三用户界面的宽度为竖屏姿态时显示屏的宽度，第三用户界面的高度按照第一用户界面的宽度的放大比例放大得到。

步骤S812中的界面元素绘制过程可参考步骤S804中对界面元素绘制到用户界面上的描述。

S813、平板设备将绘制完成的第三用户界面的宽、高尺寸缩小到第一用户界面的宽、高尺寸后渲染到显示屏上。

此步骤可参考步骤S706中完成绘制后的用户界面的渲染过程的描述。

本申请实施例提供的平板设备的用户界面布局方法中，平板设备在横屏姿态时启动应用程序时，就将第一用户界面上的界面元素按照平板设备在竖屏姿态的情况进行布局，即按照第二用户界面的宽、高尺寸进行界面元素布局。这样，在平板设备由横屏姿态切换为竖屏姿态时，由于用户界面上的界面元素按照平板设备在竖屏姿态的情况进行布局的，平板设备绘制的第一用户界面，即可减少用户界面在横竖屏切换时出现布局错乱的问题，从而提高使用的便利性。

实施例二：针对折叠屏设备的用户界面布局

如图10所示为实施例二提供的针对折叠屏设备的用户界面布局方法，包括：

S1001、折叠屏设备在启动应用程序时判断折叠屏设备的姿态是否为单屏姿态，若是，执行S1002-S1007；若否，执行步骤S1008-S1012。

具体地，折叠屏设备在启动程序时可以通过加速度传感器和陀螺仪传感器传感器判断折叠屏设备的姿态。

S1002-S1004:折叠屏设备启动应用程序时，折叠屏设备的姿态为单屏姿态，应用程序用户界面的显示过程

S1002、折叠屏设备在启动应用程序时将折叠屏设备的姿态为单屏姿态时的第一用户界面放大到第三用户界面。其中第三用户界面的第二宽度为折叠屏设备的姿态为大屏姿态时的显示屏的宽度。第三用户界面的第二高度为第一用户界面的第一高度按照第一用户界面的第一宽度放大到第二宽度的放大比例放大得到。

具体地，折叠屏设备可以获取折叠屏设备的姿态为单屏姿态时的显示屏的宽度作为第一用户界面的宽度，即为第一宽度。折叠屏设备可以获取折叠屏设备的姿态为单屏姿态时的显示屏的高度作为用户界面的高度，即为第一高度。折叠屏设备可以获取折叠屏设备的姿态为大屏姿态时的显示屏的宽度作为第三用户界面的宽度，即为第二宽度。

如图11所示的折叠屏设备单凭姿态时显示用户界面示意图。在图11中，折叠屏设备的姿态为单屏姿态时的显示屏1101的宽度为X2，高度为Y2。图11中，折叠屏设备的姿态为大屏姿态时的用户界面1102的宽度为(X2+X3)，高度为Y2。图9，用户界面1103为用户界面1101宽度放大到用户界面1102的宽度，高度也等比放大后得到的用户界面，即为第三用户界面。用户界面1103的宽度为X1，X1＝(X2+X3)，高度为Y1，Y1＝Y2*(X1/X2)。“*”表示乘号，“/”表示除号。

这里，折叠屏设备的显示屏在单屏显示状态和大屏显示状态之间切换时，折叠屏设备启动的应用程序的用户界面不支持适应显示屏大小的变化来进行显示。

S1003、折叠屏设备按照第三用户界面的宽度和高度来布局用户界面的界面元素并将布局的界面元素绘制到第三用户界面中。

折叠屏设备按照用户界面1103的宽度和高度来确定用户界面的界面元素在用户界面中的位置和大小。然后，折叠屏设备按照确定的大小和位置将界面元素绘制到用户界面中。

S1004、折叠屏设备完成绘制的第三用户界面的宽、高尺寸缩小到第一用户界面的宽、高尺寸后渲染到折叠屏设备的显示屏上。

完成布局的用户界面的宽和高跟用户界面1103的宽和高相同。此时，折叠屏设备将完成布局的用户界面的宽和高缩小到用户界面1101的宽度和高度。然后，折叠屏设备将缩小后的用户界面渲染到显示屏上。具体地，折叠屏设备的CPU将缩小后的用户界面处理为多维图形，并将图形纹理化。然后折叠屏设备调用GPU将图形光栅化。最后，折叠屏设备将光栅化的图形投射到显示屏上。这样，就可以得到用户可以看到的用户界面。

S1005-S1007：单屏姿态切换大屏姿态时，用户界面的显示过程

S1005、折叠屏设备检测到折叠屏设备的姿态从单屏姿态切换到大屏姿态。

折叠屏设备检测折叠屏设备的姿态切换的过程可类比步骤S806中平板设备检测平板设备的姿态切换的描述。

S1006、折叠屏设备将单屏姿态时布局的界面元素绘制到第二用户界面中，第二用户界面的第三宽度为大屏姿态时显示屏的宽度，第二用户界面的第三高度为大屏姿态时显示屏的高度。

布局的界面元素的绘制过程可参考步骤S1003对布局的界面元素的绘制过程的描述。

S1007、折叠屏设备将完成绘制的第二用户界面渲染到显示屏上。

步骤S1007可参考步骤S1004，此处不再赘述。

S1008-S1009:折叠屏设备启动应用程序时，折叠屏设备的姿态为大屏姿态，应用程序用户界面的显示过程

S1008、折叠屏设备启动应用程序时检测到折叠屏设备的姿态为大屏姿态，折叠屏设备根据第二用户界面的宽、高尺寸布局界面元素，第二用户界面的第三宽度为大屏姿态时显示屏的宽度，第二用户界面的第三高度为大屏姿态时显示屏的高度。

折叠屏设备通过加速度传感器和陀螺仪传感器检测启动应用程序时折叠屏设备的姿态。折叠屏设备确定折叠屏设备的姿态为大屏姿态后，获取显示屏的宽度和高度。折叠屏设备根据显示屏的宽度和高度来布局用户界面的界面元素在用户界面中的大小和位置。

折叠屏设备的姿态为大屏姿态时，用户界面的宽度和高度与显示屏的宽度和高度相同。图11中示出的用户界面902是折叠屏设备的姿态为大屏姿态时显示的用户界面。用户界面902的宽度为(X2+X3)，高度为Y2。也就是说，显示屏的宽度为(X2+X3)，高度为Y2。

S1009、折叠屏设备将绘制完成的第二用户界面渲染到折叠屏设备的显示屏上。

具体地，折叠屏设备的CPU将布局的用户界面处理为多维图形，并将图形纹理化。然后折叠屏设备调用GPU将图形光栅化。最后，折叠屏设备将光栅化的图形投射到显示屏上。这样，就可以得到用户可以看到的用户界面。

S1010-S1012：大屏姿态切换到单屏姿态时，用户界面的显示过程

S1010、折叠屏设备检测到折叠屏设备的姿态从大屏姿态切换到单屏姿态，平板设备根据单屏姿态时显示屏的宽、高确定第一用户界面的宽度和高度。

步骤S1010可参考步骤S703中电子设备根据根据显示屏的宽、高尺寸确定用户界面的宽度和高度的描述。

S1011、折叠屏设备将折叠屏设备的姿态为大屏姿态时布局的用户界面的界面元素绘制到第三用户界面上。第三用户界面的宽度为大屏姿态时显示屏的宽度。第三用户界面的高度按照第一用户界面的宽度的放大比例放大得到。

步骤S1011可参考步骤S1003，此处不再赘述。

S1012、折叠屏设备将完成绘制的第三用户界面的宽、高尺寸缩小到第一用户界面的宽、高尺寸后渲染到显示屏上。

步骤S1012可参考步骤S1004中用户界面渲染过程的描述。此处不再赘述。

本申请实施例提供的折叠屏设备的用户界面布局方法，折叠屏设备在单屏姿态启动应用程序时，就将第一用户界面上的界面元素按照折叠屏设备在大屏姿态的情况进行布局，即按照第二用户界面的宽、高尺寸进行布局。这样，在折叠屏设备由单屏姿态切换为大屏姿态时，由于用户界面上的界面元素是按照电子设备在大屏姿态的情况进行布局的，折叠屏设备绘制的第一用户界面，即可以减少用户界面在单屏姿态显示和大屏姿态显示之间切换时出现布局错乱的问题，从而可以提高使用的便利性。

结合本申请的用户界面布局的方法，示例性说明电子设备100的软件和硬件的工作流程。

参见图12，图12中的内核层、框架层、应用层分别对应图2中的内核层、应用程序框架层、应用程序层。

窗口管理器负责应用的用户界面宽高尺寸的管理。窗口管理模块将用户界面的尺寸发给给视图管理模块和绘图表面管理模块，当电子设备的姿态为第一姿态时显示用户界面(如平板设备的姿态为横屏姿态时显示用户界面、折叠屏设备的姿态为单屏姿态时显示用户界面)，窗口管理模块会先将用户界面放大后的尺寸发送给视图管理模块和绘图表面管理模块。

视图管理器将用户界面尺寸发送到应用层，应用程序根据用户界面的尺寸来确定应用程序用户界面要显示多少界面元素并将用户界面的界面元素发送给视图管理模块。视图管理模块根据用户界面的尺寸布局界面元素。用户界面的XML文件绘制成界面元素。视图管理模块将布局后的界面元素(在绘图表面中的位置)发送给绘图表面管理模块。

绘图表面管理器将视图管理模块布局的界面元素绘制到用户界面上。然后绘图表面管理模块将绘制完成的用户界面的尺寸缩小到待显示的用户界面尺寸后发送给显示模块。

显示驱动用来渲染待显示的用户界面。

本申请提出的用户界面布局方法中，电子设备在第一姿态启动第一应用程序时，就将用户界面上的界面元素按照电子设备在第二姿态的情况进行布局，即按照第二用户界面的宽度进行界面元素布局。这样，在电子设备由第一姿态切换为第二姿态时，由于用户界面上的界面元素是按照电子设备在第二姿态时显示屏的宽度进行布局的。电子设备绘制的第一用户界面，即可减少用户界面在横竖屏切换时出现布局错乱的问题，从而可以提高使用的便利性。

电子设备利用本申请提出的用户界面布局方法布局用户界面。电子设备的姿态从横屏变换为竖屏，用户界面不会出现如图4B中的空白框402。如图13A-13B所示，图13A中电子设备的姿态为横屏姿态时的淘宝用户界面切换到图13B中电子设备的姿态为竖屏姿态时的淘宝用户界面。电子设备的姿态从竖屏姿态变换为横屏姿态，用户界面不会出现如图5B中椭圆框504处界面元素502和界面元素503未显示全。如图14A-14B所示，图14A中电子设备的姿态为竖屏姿态时的淘宝用户界面切换到图14B中电子设备的姿态为横屏姿态时的淘宝用户界面。

本申请的电子设备的姿态为横屏姿态时，由于电子设备设置的横屏显示时用户界面的宽度小于显示屏的宽度。用户界面的宽度还小于电子设备姿态为竖屏姿态时显示屏的宽度。这样，电子设备可以在显示屏上并排显示两个用户界面。这两个用户界面可以是上一级用户界面和下一级用户界面，如微信主页用户界面和微信聊天用户界面。示例性的，如图15A示出的电子设备的姿态为横屏时显示的微信主页用户界面，即上一级用户界面。当用户点击某个联系人(如“Cindy”)，电子设备响应于用户的触摸操作刷新显示屏的显示内容。刷新后的显示屏显示内容如图15B所示，图15B示出的显示屏同时显示了微信的主页用户界面1501和与联系人“Cindy”聊天用户界面1503。这样，用户可以显示屏上看到应用程序的上一级用户界面(如微信主页用户界面)和下一级用户界面(如微信聊天用户界面)。用户不需要在下一级用户界面中触摸返回上一级用户界面就可以看到上一级用户界面，提高使用的便利性。

本申请实施例中，电子设备的显示屏可以是触摸屏，下面介绍电子设备通过触控屏识别用户的触摸操作的过程。

电子设备会把用户触摸显示屏的电触点坐标生成输入事件。具体地，当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。电子设备根据输入事件的坐标在渲染前的用户界面中寻找与该坐标对应的界面元素。

本申请实施例中，当电子设备的姿态为横屏姿态或者折叠屏的单屏姿态等等时，电子设备获取到用户界面的宽度为第一宽度、高度为第一高度。电子设备将用户界面从第一宽度、第一高度放大到第二宽度、第二高度后布局，然后用户界面缩小到第一宽度、第一高度进行渲染。由于渲染前后的用户界面大小不一样，用户界面中的界面元素的坐标不一样。为了保证在显示屏上显示的界面元素对应的坐标的准确性，本申请实施例提供的用户界面布局方法包括以下输入事件映射步骤。

如图16所示的电子设备用户界面示意图。如图16所示，用户可以在用户界面1600中触摸界面元素按钮1603。用户界面1600为待渲染的用户界面，用户界面1602为绘制后的用户界面。用户界面元素按钮1603的准确坐标应该是用户界面按钮1604对应的坐标。为了解决上述问题，本申请提出的用户界面布局方法还包括输入事件的映射步骤。

如图17示出的输入事件映射步骤，具体如下：

S1701、判断电子设备的姿态为第一姿态时应用程序的用户界面的宽度是否小于电子设备的姿态为第二姿态时显示屏的宽度，若是，则执行步骤S1702-S1703。

首先，电子设备如何判断出电子设备的姿态可参考步骤S702中电子设备判断电子设备的姿态过程的描述，此处不再赘述。电子设备获取电子设备的姿态为第一姿态时显示屏的宽度和高度。电子设备根据显示屏的高度和宽度来确定用户界面的宽度和高度。电子设备还会获取电子设备的姿态为第二姿态时显示屏的宽度。最后，电子设备判断电子设备的姿态为第一姿态时应用程序的用户界面的宽度是否小于电子设备的姿态为第二姿态时显示屏的宽度。若是，则执行步骤S1702-S1703。这里，电子设备的姿态可以第一姿态或者第二姿态。第一姿态可以是横屏姿态、单屏姿态等等。在一种实现方式中，第一姿态是横屏姿态，第二姿态是竖屏姿态。在另一种实现方式中，第一姿态是单屏姿态，则第二姿态是大屏姿态。

当电子设备显示屏显示的用户界面是按照步骤S803-S805布局、渲染的用户界面，或者按照步骤S1002-S1004布局、渲染的用户界面时，就执行步骤S1702-S1703。

S1702、电子设备对输入事件进行坐标映射。

下面以界面元素为按钮的情况下，对本申请实施例的坐标映射进行举例。可以理解的，其他类型的界面元素例如链接、文本框与按钮类似。

参见图16示出电子设备的姿态为横屏时的用户界面示意图。用户界面1600是显示屏1601显示的用户界面。电子设备的姿态为横屏姿态，显示屏1601的宽度为X2，高度为Y2。电子设备的姿态为竖屏时，显示屏1601的宽度为X1，高度为Y3。用户界面1602是用户界面1600放大后的用户界面。用户界面1602的宽度为X1，高度为Y1。用户触摸用户界面1600中的按钮1603。电子设备将按钮1603处的电触点坐标生成输入事件。按钮1603对应的实际位置是用户界面1602中按钮1604所在的位置。

假设用户界面1600的m点的坐标为(x0，y0)，按钮1603中的n点相对于用户界面1600中m点的相对坐标为(dx1，dy1)。按钮1603的n点相对显示屏1601的h点的相对坐标为(x，y)，则：x＝x0+dx1；y＝y0+dy1。电子设备可以将按钮1603中n点坐标与按钮1604中n1点的坐标建立映射关系。按钮1604相对于显示屏1601的左上角坐标为(x0+dx2，y0+dy2)。假设已知用户界面1600与用户界面1602之间的放大比例为S，则dx2/dx1＝S，那么按钮1603中n点映射后的坐标，即按钮1604中n1点的坐标为(x0+(x-x0)*S，x0+(y-y0)*S)。

S1703、基于映射后的坐标识别该输入事件对应的界面元素。

电子设备得到输入事件映射后的坐标后，识别该坐标处对应的按钮。然后电子设备根据该按钮作出响应。具体地，用户在用户界面上触摸了界面元素按钮1603。根据输入事件坐标映射关系，电子设备以按钮1604的坐标对应的界面元素响应用户的触摸操作。

通过上述输入事件映射过程，可实现显示的界面元素的电触点与其实际应该响应的坐标之间对应。从而触摸屏中显示的用户界面在经过图7、图8或图10的布局方法后，可以提高显示的界面元素响应用户操作的准确性。

下面结合本申请提出的用户界面布局方法中包括的输入事件映射步骤，示例性说明电子设备100软件以及硬件的工作流程。

参见图18，图18中的内核层、框架层、应用层分别对应图2中的内核层、应用程序框架层、应用程序层。

电子设备的内核层将用户的触摸操作加工成输入事件(包括触摸坐标，触摸操作的时间戳等信息)。输入事件被存储在驱动层。驱动层将输入事件的触摸坐标(x0，y0)发送给输入管理模块。

输入管理器对输入事件的触摸坐标(x0，y0)进行映射得到映射后的坐标(x1，y1)，并将映射后的坐标(x1，y1)发送给窗口管理模块。

框架层中的窗口管理器获取到映射后的输入事件触摸坐标(x1，y1)后识别该输入事件对应的控件。

本申请提出的用户界面布局方法中，电子设备可以判断电子设备的姿态为第一姿态时应用程序的用户界面的宽度是否小于电子设备的姿态为第二姿态时显示屏的宽度，若是，对输入事件进行坐标映射。基于映射后的坐标识别该输入事件对应的控件。这样，应用程序不感知的情况下，电子设备就可以完成输入事件的坐标映射，让电子设备可以正确的响应用户的操作。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请实施例各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：快闪存储器、移动硬盘、只读存储器、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何在本申请揭露的技术范围内的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (26)

1.一种用于电子设备的用户界面布局方法，所述电子设备包括显示屏，其特征在于，包括：

接收用于启动第一应用程序的第一指令；

检测所述电子设备的姿态；所述电子设备的姿态包括横屏姿态和竖屏姿态；

当所述电子设备的姿态为所述横屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第三宽度，所述显示屏的高度为第三高度；

当所述电子设备的姿态为所述竖屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度等于所述第三高度，所述显示屏的高度等于所述第三宽度；

其中，所述第一用户界面的宽度为第一宽度，所述第一用户界面的高度为第一高度，所述第一用户界面是由第三用户界面缩小而得到，所述第一宽度小于所述第三宽度；所述第一高度等于所述第三高度；所述第三用户界面的宽度等于所述第三高度；所述第三用户界面的高度为第二高度；所述第二高度与所述第一高度的比例和所述第三高度与所述第一宽度的比例相等。

2.根据权利要求1所述的方法，所述电子设备显示所述第一应用程序的第一用户界面之后，包括：

所述电子设备接收用户在所述第一用户界面的触摸操作；

所述电子设备获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面的坐标点；

所述电子设备根据所述第二坐标点对应的界面元素响应所述触摸操作。

3.根据权利要求1所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面，包括：

所述电子设备将所述第一用户界面放大到所述第三用户界面；

所述电子设备将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；

所述电子设备将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。

4.根据权利要求1所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第二用户界面，包括：

所述电子设备将根据宽度为所述第三高度、高度为所述第三宽度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；

所述电子设备将绘制的所述第二用户界面渲染到所述显示屏。

5.根据权利要求1所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面之后，还包括：

当检测到所述电子设备的姿态从所述横屏姿态切换到所述竖屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

6.根据权利要求1所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第二用户界面之后，还包括：

当检测到所述电子设备的姿态从所述竖屏姿态切换到所述横屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

7.一种用于电子设备的用户界面布局方法，所述电子设备包括显示屏，其特征在于，包括：

电子设备接收用于启动第一应用程序的第一指令；

所述电子设备检测所述电子设备的姿态；所述电子设备的姿态包括单屏姿态和大屏姿态；

当所述电子设备的姿态为单屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第一宽度，所述显示屏的高度为第一高度；

当所述电子设备的姿态为所述大屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度为第二宽度，所述第二宽度大于所述第一宽度，所述显示屏的高度为所述第一高度；

其中，所述第一用户界面的宽度等于所述第一宽度，所述第一用户界面的高度等于所述第一高度，所述第一用户界面是由第三用户界面缩小而得到，所述第三用户界面的宽度等于所述第二宽度；所述第三用户界面的高度为第二高度；所述第二高度与第一高度的比例和第二宽度与第一宽度的比例相等。

8.根据权利要求7所述的方法，所述电子设备显示所述第一应用程序的第一用户界面之后，包括：

所述电子设备接收用户在所述第一用户界面的触摸操作；

所述电子设备获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面坐标点；

所述电子设备根据所述第二坐标点对应的界面元素响应所述触摸操作。

9.根据权利要求7所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面，包括：

所述电子设备将所述第一用户界面放大到所述第三用户界面；

所述电子设备将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；

所述电子设备将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。

10.根据权利要求7所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第二用户界面，包括：

所述电子设备将根据宽度为所述第二宽度、高度为所述第一高度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；

所述电子设备将绘制的所述第二用户界面渲染到所述显示屏。

11.根据权利要求7所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面之后，还包括：

当检测到所述电子设备的姿态从所述单屏姿态切换到所述大屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

12.根据权利要求7所述的方法，其特征在于，所述电子设备显示所述第一应用程序的第二用户界面之后，还包括：

当检测到所述电子设备的姿态从所述大屏姿态切换到所述单屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

13.一种电子设备，其特征在于，包括：通信接口、存储器和处理器；所述通信接口、所述存储器与所述处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述处理器从所述存储器中读取所述计算机指令，以使得所述电子设备执行：

接收用于启动第一应用程序的第一指令；

检测所述电子设备的姿态；所述电子设备的姿态包括横屏姿态和竖屏姿态；

当所述电子设备的姿态为所述横屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第三宽度，所述显示屏的高度为第三高度；

当所述电子设备的姿态为所述竖屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度等于所述第三高度，所述显示屏的高度等于所述第三宽度；

其中，所述第一用户界面的宽度为第一宽度，所述第一用户界面的高度为第一高度，所述第一用户界面是由第三用户界面缩小而得到，所述第一宽度小于所述第三宽度；所述第一高度等于所述第三高度；所述第三用户界面的宽度等于所述第三高度；所述第三用户界面的高度为第二高度；所述第二高度与所述第一高度的比例和所述第三高度与所述第一宽度的比例相等。

14.根据权利要求13所述的电子设备，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面之后，所述处理器还用于：

接收用户在所述第一用户界面的触摸操作；

获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面的坐标点；

根据所述第二坐标点对应的界面元素响应所述触摸操作。

15.根据权利要求13所述的电子设备，其特征在于，所述处理器还用于：

将所述第一用户界面放大到所述第三用户界面；

将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；

将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。

16.根据权利要求13所述的电子设备，其特征在于，所述处理器还用于：

将根据宽度为所述第三高度、高度为所述第三宽度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；

将绘制的所述第二用户界面渲染到所述显示屏。

17.根据权利要求13所述的电子设备，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面之后，所述处理器用于：

当检测到所述电子设备的姿态从所述横屏姿态切换到所述竖屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

18.根据权利要求13所述的电子设备，其特征在于，所述电子设备显示所述第一应用程序的第二用户界面之后，所述处理器用于：

当检测到所述电子设备的姿态从所述竖屏姿态切换到所述横屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

19.一种电子设备，其特征在于，包括：通信接口、存储器和处理器；所述通信接口、所述存储器与所述处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述处理器从所述存储器中读取所述计算机指令，以使得所述电子设备执行：

接收用于启动第一应用程序的第一指令；

检测所述电子设备的姿态；所述电子设备的姿态包括单屏姿态和大屏姿态；

当所述电子设备的姿态为单屏姿态时，所述电子设备显示所述第一应用程序的第一用户界面，所述显示屏的宽度为第一宽度，所述显示屏的高度为第一高度；

当所述电子设备的姿态为所述大屏姿态时，所述电子设备显示所述第一应用程序的第二用户界面，所述显示屏的宽度为第二宽度，所述第二宽度大于所述第一宽度，所述显示屏的高度为所述第一高度；

其中，所述第一用户界面的宽度等于所述第一宽度，所述第一用户界面的高度等于所述第一高度，所述第一用户界面是由第三用户界面缩小而得到，所述第三用户界面的宽度等于所述第二宽度；所述第三用户界面的高度为第二高度；所述第二高度与第一高度的比例和第二宽度与第一宽度的比例相等。

20.根据权利要求19所述的电子设备，其特征在于，所述电子设备显示所述第一应用程序的第一用户界面之后，所述处理器还用于：

接收用户在所述第一用户界面的触摸操作；

获取与所述触摸操作对应第一坐标点建立了映射关系的第二坐标点的坐标；所述第二坐标点为所述第一用户界面放大到所述第三用户界面时的坐标点；所述第一坐标点为所述第一用户界面的坐标点；

根据所述第二坐标点对应的界面元素响应所述触摸操作。

21.根据权利要求19所述的电子设备，其特征在于，所述处理器还用于：

将所述第一用户界面放大到所述第三用户界面；

将根据所述第三用户界面布局的所述第一用户界面的界面元素绘制到所述第三用户界面上；

将绘制的所述第三用户界面缩小到所述第一用户界面后渲染到所述显示屏。

22.根据权利要求19所述的电子设备，其特征在于，所述处理器还用于：

将根据宽度为所述第二宽度、高度为所述第一高度布局的所述第二用户界面的界面元素绘制到所述第二用户界面上；

将绘制的所述第二用户界面渲染到所述显示屏。

23.根据权利要求19所述的电子设备，其特征在于，所述处理器还用于：

当检测到所述电子设备的姿态从所述单屏姿态切换到所述大屏姿态，所述电子设备显示的用户界面从所述第一用户界面切换到所述第二用户界面。

24.根据权利要求19所述的电子设备，其特征在于，所述处理器还用于：

当检测到所述电子设备的姿态从所述大屏姿态切换到所述单屏姿态，所述电子设备显示的用户界面从所述第二用户界面切换到所述第一用户界面。

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

26.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1至12任一项所述的方法。

Images