CN110597510B - 一种界面的动态布局方法及设备 - Google Patents

Abstract

本申请实施例提供一种界面的动态布局方法及设备，涉及电子技术领域，能够根据预设的布局规则和当前显示形态，自动对界面上的元素进行动态布局，使得具有一套界面布局的应用程序，能够自适应不同的显示形态进行元素和界面的动态布局。具体方案为：电子设备屏幕的宽度划分为多个栅格，电子设备显示第一界面，在检测到界面刷新信号后，获取刷新后待显示的第二界面的宽度对应的第一栅格数量，第一栅格数量为第二界面的宽度包括的栅格数量；根据第二界面上的第一元素对应的布局规则，确定第二栅格数量；第二栅格数量为第一元素的宽度包括的栅格数量；电子设备显示第二界面。本申请实施例用于界面的动态布局。

Description

一种界面的动态布局方法及设备

技术领域

本申请实施例涉及电子技术领域，尤其涉及一种界面的动态布局方法及设备。

背景技术

随着电子技术的发展，电子设备的显示形态越来越多样化。电子设备的显示形态涉及显示屏幕的尺寸、比例或分辨率等因素。例如，手机、平板电脑、电视和手表等不同电子设备的屏幕尺寸不同，显示形态也不同。再例如，手机可以有16:9，17:9，18:9，19:9以及25:9等多种屏幕比例，从而可以有多种显示形态。折叠屏也可以使得同一个电子设备上具有多种不同的显示形态。

一个应用程序的界面开发和设计，面临不同电子设备或同一电子设备对应的多种显示形态的复杂情况。为适应不同的显示形态，应用程序的开发者需要为每一种显示形态分别开发一套界面布局。应用程序的开发成本较大，应用程序的打包文件也较大。

发明内容

本申请实施例提供一种界面的动态布局方法及设备，能够使得电子设备根据预设的布局规则和当前显示形态，自动对应用程序界面上的元素进行动态布局，使得具有一套界面布局的应用程序，能够自适应不同的显示形态进行元素和界面的动态布局。

为达到上述目的，本申请实施例采用如下技术方案：

一方面，本申请技术方案提供了一种界面的动态布局方法，应用于电子设备，电子设备包括屏幕，屏幕用于界面显示，屏幕的宽度划分为多个栅格，该方法包括：电子设备显示第一界面。电子设备检测到界面刷新信号后，获取刷新后待显示的第二界面的宽度对应的第一栅格数量，第一栅格数量为第二界面的宽度包括的栅格数量。电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量；第二栅格数量为第一元素的宽度包括的栅格数量，布局规则包括第二栅格数量与第一栅格数量之间的对应关系。电子设备显示第二界面。

这样，电子设备可以根据不同显示形态下，应用程序待显示的第二界面的宽度，确定第二界面上元素的宽度，从而动态布局第二界面上的元素即第二界面。因而，对于具有一套界面布局的应用程序，可以自适应不同电子设备或同一电子设备的不同显示形态进行界面动态布局，用户使用体验较高。

在一种可能的设计中，屏幕的宽度还包括至少一个间隔和两个空边，间隔为相邻两个栅格之间的距离，空边为屏幕左/右侧的边界与最近的栅格之间的距离。

也就是说，本申请实施例中划分的栅格系统可以包括栅格，栅格之间的间隔，以及栅格两边的空边。

在另一种可能的设计中，布局规则还包括间隔的尺寸和空边的尺寸，电子设备显示第二界面，包括：电子设备根据第二界面的宽度，间隔的尺寸，空边的尺寸，以及第一栅格数量，确定栅格的宽度。电子设备根据第二栅格数量，栅格的宽度和间隔的尺寸，确定第一元素的宽度。电子设备显示第二界面。

也就是说，电子设备可以根据第二栅格数量计算第一元素的宽度尺寸，例如第一元素的宽度的dp值或像素点的数量等，以便在屏幕上进行显示。

在另一种可能的设计中，电子设备检测到界面刷新信号，包括：电子设备检测到打开应用程序的操作。或者，电子设备检测到界面的宽度发生变化。

可以理解的是，在用户打开新的应用程序，或者将程序从后台切换到前台后，电子设备需要进行界面刷新。或者，当电子设备检测到需要显示的界面的宽度发生变化时，电子设备需要进行界面刷新。

在另一种可能的设计中，电子设备检测到界面的宽度发生变化，包括：电子设备检测到显示状态发生切换，显示状态包括横屏显示状态或竖屏显示状态。或者，屏幕为折叠屏，电子设备检测到折叠屏的折叠状态发生变化。或者，电子设备检测到显示模式发生切换，显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。

可以理解的是，在横/竖屏切换，显示模式切换，或折叠屏折叠状态发生变化时，界面的显示的宽度也会相应变化，电子设备需要进行界面刷新。

在另一种可能的设计中，第一参数用于表征第二界面的宽度，第一参数所在的不同区间对应不同的第一栅格数量。

例如，该第一参数可以是dp值，电子设备根据dp值来确定栅格数量，可以使得不同显示形态下，根据栅格数量动态布局后的元素和界面的显示效果更为一致。

在另一种可能的设计中，屏幕的尺寸、比例、显示状态或显示模式不同，第二界面的宽度也不同。

可以理解的是，影响第二界面的宽度的因素可以有多种，例如屏幕的尺寸、比例、显示状态或显示模式等。

在另一种可能的设计中，电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量，包括：应用程序控制第一元素调用应用程序编程接口API，并根据第一元素对应的布局规则，确定第二栅格数量。或者，应用程序调用应用程序编程接口API，并根据第一元素对应的布局规则，确定第二栅格数量。

也就是说，应用程序可以控制第一元素来确定第一元素的宽度占用的栅格数量，应用程序自身也可以直接来确定第一元素的宽度占用的栅格数量。

在另一种可能的设计中，第一元素为栅格气泡，栅格气泡对应的布局规则包括：空边的尺寸＝第一预设值；间隔的尺寸＝第二预设值；若第一栅格数量为第三预设值，则第二栅格数量为第四预设值；若第一栅格数量为第五预设值，则第二栅格数量为第六预设值，第五预设值大于第三预设值，第六预设值大于第四预设值。

这样，布局规则包括第二栅格数量和第一栅格数量的对应关系，电子设备可以根据该布局规则确定第二栅格数量，并获取间隔的尺寸和空边的尺寸。

在另一种可能的设计中，若第一栅格数量为第三预设值，则第二栅格数量为第四预设值，包括：若第一栅格数量为第三预设值，且第二界面的宽度和高度的比值大于第一预设比例，则第二栅格数量为第四预设值。若第一栅格数量为第五预设值，且第二界面的宽度和高度的比值小于或者等于第一预设比例，则第二栅格数量为第六预设值，第六预设值大于第四预设值。

在该方案中，布局规则包括第二栅格数量，与第一栅格数量，以及第二界面的宽度和高度的比值之间对应关系。

在另一种可能的设计中，第一元素为复合控件，复合控件包括第一子元素和第二子元素；复合控件对应的布局规则还包括第一子元素和第二子元素的相对位置，与第二界面的宽度之间的对应关系。

这样，电子设备还可以根据复合控件的布局规则，确定第一子元素和第二子元素的相对位置，从而动态布局第一子元素和第二子元素。

在另一种可能的设计中，布局规则具体包括，第一子元素和第二子元素的相对位置，与第一子元素和第二子元素的高度和宽度，以及第二界面的宽度和高度之间的对应关系。

在该方案中，布局规则规定了第一子元素和第二子元素的相对位置，还与第二界面的宽度和高度相关联。

在另一种可能的设计中，复合控件包括子元素A和子元素B布局规则包括：在子元素A和子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则子元素A和子元素B切换为沿第二方向排列；其中，W表示第二界面的宽度，Width(A)表示子元素A的宽度，Width(B)表示子元素B的宽度。在子元素A和子元素B沿第二方向排列时，若W＜Width(A)+Width(B)+Margin，则子元素A和子元素B切换为沿第一方向排列。并且，在子元素A和子元素B沿第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，滚动条用于滚动显示子元素A和子元素B；其中，H表示第二界面的高度，Height(A)表示子元素A的高度，Height(B)表示子元素B的高度，vertialMargin表示屏幕在第一方向上的空边的尺寸。

该布局规则提供了一种具体的复合控件的动态布局方式。电子设备可以根据该布局规则，调整第一子元素和第二子元素的排列方式及相对位置。

在另一种可能的设计中，从权：布局规则写在描述文件中，或者，布局规则封装在函数中。

这样，电子设备可以通过运行描述文件，或者调用函数来使用该布局规则。

在另一种可能的设计中，布局规则预设在电子设备的应用程序框架层。

这样，各应用程序均可以使用该应用程序框架层中配置的布局规则，进行自适应动态布局。

在另一种可能的设计中，布局规则集成在应用程序中。

这样，应用程序在任一电子设备或任一显示形态下，均可以根据集成的布局规则进行自适应动态布局。

另一方面，本申请实施例提供了一种响应装置，该装置包含在第一电子设备、第二电子设备或第三电子设备中。该装置具有实现上述方面及可能的设计中任一方法中第一电子设备、第二电子设备或第三电子设备行为的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括至少一个与上述功能相对应的模块或单元。例如，应用程序模块或单元、控件模块或单元、栅格管理接口模块或单元、栅格资源计算或单元以及栅格系统配置模块或单元等。

另一方面，本申请实施例提供了一种电子设备，包括：屏幕，该屏幕的宽度划分为多个栅格；一个或多个处理器；以及存储器，存储器中存储有代码。当代码被一个或多个处理器执行时，使得电子设备执行上述方面任一项可能的设计中的界面的动态布局方法。

另一方面，本申请实施例提供了一种计算机存储介质，包括计算机指令，当计算机指令在移动终端上运行时，使得移动终端执行上述方面任一项可能的设计中的界面的动态布局方法。

又一方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述方面任一项可能的设计中的界面的动态布局方法。

附图说明

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

图2A为本申请实施例提供的一种栅格系统的划分示意图；

图2B为本申请实施例提供的一种栅格数量与屏幕尺寸的对应关系示意图；

图3为本申请实施例提供的一种软件系统的模块示意图；

图4为本申请实施例提供的一种界面动态布局的方法流程图；

图5为本申请实施例提供的一组界面动态布局的效果示意图；

图6为本申请实施例提供的另一组界面动态布局的效果示意图；

图7为本申请实施例提供的另一组界面动态布局的效果示意图；

图8为本申请实施例提供的另一组界面动态布局的效果示意图；

图9为本申请实施例提供的另一组界面动态布局的效果示意图；

图10为本申请实施例提供的另一组界面动态布局的效果示意图；

图11为本申请实施例提供的另一组界面动态布局的效果示意图；

图12为本申请实施例提供的另一组界面动态布局的效果示意图；

图13为本申请实施例提供的另一种界面动态布局的方法流程图；

图14为本申请实施例提供的另一组界面动态布局的效果示意图；

图15为本申请实施例提供的另一组界面动态布局的效果示意图；

图16为本申请实施例提供的另一组界面动态布局的效果示意图；

图17为本申请实施例提供的另一种软件系统的模块示意图；

图18为本申请实施例提供的另一种界面动态布局的方法流程图。

具体实施方式

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

现有技术中，面对电子设备具有的多种显示形态的复杂情况，应用程序通常需要为每一种显示形态分别开发一套界面布局。以安卓系统为例，安卓系统可以采用XML文件来表示应用程序的用户界面(user interface，UI)构成。同一应用程序的XML文件，可以包括手机对应的XML文件，平板电脑对应的XML文件，手表对应的XML文件以及电视对应的XML文件等，以分别实现在手机，平板电脑，手表和电视上的不同界面布局效果。因而，应用程序的开发成本较大，应用程序的打包文件也较大。

本申请实施例提供了一种界面的动态布局方法，可以应用于电子设备。电子设备在需要进行界面刷新时，可以根据预设的布局规则和当前的显示形态，自动对应用程序界面上的元素进行动态布局。其中，由于界面是由元素构成的，对界面上的元素进行动态布局，也就可以对界面进行动态布局。因此，本申请实施例提供的方法可以达到，针对不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。应用程序只配置有一套界面布局，因而应用程序的开发成本和打包文件都较小。

例如，该电子设备可以是手机、平板电脑、电视、台式计算机、可穿戴设备(例如手表)、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或个人数字助理(personal digital assistant，PDA)等具有显示功能的设备。本申请实施例对电子设备的具体类型不作任何限制。

示例性的，图1示出了电子设备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等。

处理器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的正整数。

在本申请的实施例中，显示屏194可以用于根据电子设备100的显示形态，显示动态布局后的应用程序的元素和界面。

其中，电子设备100的显示形态是指电子设备100显示用户界面时的状态。显示屏194的尺寸，显示屏194的比例，显示屏194的分辨率，显示状态或显示模式等因素不同，电子设备100的显示形态也不同。显示屏194的尺寸，显示屏194的比例，显示屏194的分辨率，显示状态或显示模式不同，电子设备100的显示形态也不同。通常，显示形态不同，显示屏194的宽度也不同，显示屏194上界面的宽度也不同。

其中，显示模式可以包括全屏显示模式，分屏显示模式，画中画显示模式或悬浮窗显示模式等。显示状态可以包括横屏显示状态或竖屏显示状态。例如，在横屏显示状态下，电子设备100可以对应任一种显示形态；在竖屏显示状态下，电子设备100可以对应另一种显示形态。

该元素是指界面所包含的满足用户浏览或交互需求的一系列的控件。例如，该元素可以包括气泡，弹窗，按钮，卡片，页签，底部导航栏(或称底部tab)等控件，或者控件的组合。

显示屏194的宽度可以划分为多个栅格(column)。栅格与栅格之间的距离可以称为间隔(gutter)。显示屏194的左/右边界与最近的栅格之间的距离可以称为空边(margin)。栅格、间隔和空边的划分形成了栅格系统。其中，每个栅格的大小相同，每个间隔的大小相同，且每个空边的大小也相同。示例性的，参见图2A，电子设备100的显示屏194的宽度可以划分为两个空边，若干个栅格以及若干个间隔。

其中，显示屏194的宽度划分的栅格数量，可以根据显示屏194的宽度来确定。显示屏194的宽度不同，划分的栅格数量也可能不同。例如，在横/竖屏不同显示状态下，显示屏194的宽度不同，因而显示屏194的宽度划分的栅格数量也不同。

显示屏194的宽度包括的栅格数量的具体确定方式可以有多种。在一些实施例中，显示屏194的宽度通过物理尺寸或像素点的数量来表征。显示屏194的宽度包括的栅格数量可以根据显示屏194的宽度的物理尺寸或像素点数量来确定。显示屏194的宽度的物理尺寸或像素点的数量越大，则显示屏194的宽度包括的栅格数量越多；显示屏194的宽度的物理尺寸或像素点的数量越小，则显示屏194的宽度包括的栅格数量越少。

需要说明的是，本申请以下实施例中以图2A所示姿态的电子设备为例进行说明。这样，显示屏194的宽度即为显示屏194在水平方向的长度，显示屏194的高度即为显示屏194在竖直方向的长度。

在另一些实施例中，显示屏194的宽度通过dp值来表征。其中，dp值＝显示屏194的宽度对应的像素点的数量/像素密度(pixels per inch，PPI)。栅格数量根据显示屏194的宽度的dp值来确定。其中，示例性的，若电子设备100显示屏194的分辨率为1280P*720P，在竖屏显示状态下，显示屏194的宽度对应的像素点的数量为720，像素密度为2，则dp值＝720/2＝360dp。

其中，PPI越高，画面的细节就越丰富。而不同显示屏194的像素密度通常不同，因此即便显示屏194的物理尺寸或像素点数量相同，显示屏194的显示效果也不同。但是，若不同显示屏194的宽度的dp值相同，则可以表明不同显示屏194在宽度方向的显示效果相同。因此，根据显示屏194的宽度的dp值来确定栅格数量，可以使得不同显示形态下，根据栅格数量动态布局后的元素和界面的显示效果更为一致。

可以理解的是，同一显示形态对应的显示屏194宽度的物理尺寸，像素点的数量，分辨率，横/竖屏显示状态和显示模式等因素相同，因而同一显示形态对应的显示屏194宽度的dp值相同，同一显示形态对应的待显示界面的宽度包括的栅格数量也相同。不同显示形态可以对应不同的栅格数量。

需要说明的是，电子设备100上的栅格数量，可以是出厂时预设在电子设备100上的，也可以是电子设备100启动后根据显示屏194的分辨率以及像素密度计算获得的。

本申请以下实施例主要以根据显示屏194宽度的dp值，来确定栅格数量为例进行说明。

示例性的，dp值的不同区间可以对应不同的栅格数量。参见表1，显示屏194宽度的尺寸在(0,320dp)范围内时，显示屏194的栅格数量为2；显示屏194宽度的尺寸在[320dp,600dp)范围内时，显示屏194的栅格数量为4。显示屏194宽度的尺寸在[600dp,840dp)范围内时，待显示界面的宽度包括的栅格数量为8。显示屏194宽度的尺寸大于或者等于840dp时，显示屏194的栅格数量为12。

表1

显示屏宽度的尺寸	(0,320dp)	[320dp,600dp)	[600dp,840dp)	[840dp,+∞)
					栅格数量	2	4	6	8

示例性的，参见图2B，手表的显示屏194宽度的物理尺寸可以为1-2寸，在(0,320dp)范围内，包括2个栅格。手机显示屏194宽度的物理尺寸可以为5-7寸，在竖屏显示状态下，显示屏194宽度的尺寸在[320dp,600dp)范围内，包括4个栅格；在横屏显示状态下，显示屏194宽度的尺寸在[600dp,840dp)范围内，包括8个栅格。折叠屏设备的显示屏194宽度的物理尺寸可以为7-8寸，在折叠屏展开的状态下，折叠屏宽度的尺寸在[600dp,840dp)范围内，包括8个栅格。平板电脑的显示屏194宽度的物理尺寸可以为8-11寸，在竖屏显示状态下，显示屏194宽度的尺寸在[600dp,840dp)范围内，包括8个栅格；在横屏显示状态下，显示屏194宽度的尺寸在[840dp,+∞)范围内，包括12个栅格。电视的显示屏194宽度的物理尺寸可以为55寸，在[840dp,+∞)范围内，包括12个栅格。

电子设备100的栅格系统可以包括多种类型，例如基础类栅格系统，宫格类栅格系统，弹窗类栅格系统或卡片类栅格系统等。其中，宫格类栅格系统可以用于辅助关于宫格类布局的动态布局。例如，该宫格类布局可以为桌面图标的布局或图片缩略图的布局等。宫格类布局中各元素之间的横向间距可以等于间隔。弹窗类栅格系统可以用于辅助关于弹窗的动态布局。卡片类栅格系统可以用于辅助关于卡片的动态布局。基础类栅格系统可以作为通用的栅格系统，用于辅助关于界面各类元素的动态布局。

不同类型的栅格系统对应的间隔大小或空边大小不同。示例性的，不同类型的栅格系统对应的间隔或空边的大小可以参见表2。

表2

栅格系统类型	margin	gutter
			基础类栅格系统	24dp	24dp
宫格类栅格系统	24dp	12dp
			弹窗类栅格系统	16dp	16dp
卡片类栅格系统	8dp	8dp
			…

需要说明的是，本申请实施例给出的gutter和margin的大小仅是举例说明，也可以为其他的数值，本申请实施例不予限定。并且，即便是同种类型的栅格系统，不同显示形态或不同电子设备100对应的gutter和margin的大小也可能不同。

电子设备100可以根据栅格数量，以及间隔和空边的大小(或根据栅格系统类型)，计算栅格的宽度。从而，电子设备100可以根据栅格数量，栅格的宽度，间隔大小和空边大小，对电子设备100的显示屏194进行栅格划分。

电子设备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)等。

在本申请的实施例中，内部存储器121可以存储有布局规则。该布局规则可以预设在电子设备100的操作系统中，也可以集成在所存储的应用程序中。处理器110可以在应用程序进行界面刷新时，根据预设的布局规则和显示屏194当前的显示形态，对应用程序界面上的元素进行动态布局，从而自适应不同的显示形态实现界面的动态布局。

其中，布局规则可以用于描述，界面上元素的宽度信息与待显示界面的宽度信息之间的对应关系。由于显示屏194的宽度进行了栅格划分，因而显示屏194上显示的界面或待显示的界面的宽度，也可以通过占用的栅格数量的多少来表示。例如，布局规则用于描述，界面上的元素的宽度信息与待显示界面的宽度包括的栅格数量之间的对应关系。处理器110可以在应用程序进行界面刷新时，根据当前显示形态下待显示界面的宽度包括的栅格数量以及该对应关系，确定待显示界面上的元素的宽度信息，从而对该元素进行动态布局，自适应不同显示形态实现界面的动态布局。

示例性的，界面上元素的宽度信息可以通过元素的宽度包括的栅格数量来表示。布局规则具体用于描述，界面上的宽度包括的栅格数量与待显示界面的宽度包括的栅格数量之间的对应关系。

由于显示形态与屏幕的尺寸、显示状态、显示模式或分辨率等因素相关，而待显示界面的宽度与屏幕的尺寸、显示状态或显示模式等因素相关；因而，电子设备的显示形态不同，显示屏194的宽度通常也不同，显示屏194上待显示界面的宽度通常也不同，待显示界面的宽度包括的栅格数量也不同。进而，根据本申请实施例提供的布局规则，界面上的元素的宽度包括的栅格数量也不同，界面上的元素的宽度信息也不同。

处理器110在确定需要界面刷新时，可以根据刷新后待显示的界面的宽度包括的栅格数量以及预设的布局规则，确定界面上的元素的宽度信息，从而动态调整元素的宽度。并且，结合界面上元素的显示位置(例如居中显示，居左显示或居右显示)，动态调整元素和界面的显示效果。

具体的，处理器110检测到界面刷新的信号后，可以确定需要进行界面刷新。例如，电子设备检测到打开应用程序的操作。示例性的，该操作可以为用户指示新打开一个应用程序的操作，或者用户指示将应用程序从后台切换到前台的操作等。再例如，电子设备检测到界面的宽度发生变化。示例性的，屏幕为折叠屏，电子设备检测到折叠屏的折叠状态发生变化。再示例性的，电子设备检测到显示状态发生切换。再示例性的，电子设备检测到显示模式发生切换。

也就是说，界面刷新场景可以包括例如，新打开一个应用程序的场景(即应用程序初始化的场景)，应用从后台切到前台的场景，横/竖屏显示状态切换的场景，折叠屏的折叠状态变化的场景，全屏/分屏显示模式切换场景，画中画显示模式与其他显示模式之间进行切换的场景，或悬浮窗显示模式与其他显示模式之间进行切换的场景等。界面刷新场景是指需要进行元素和界面动态布局的场景。

可以理解的是，当电子设备的显示形态发生变化时，电子设备的横/竖屏显示状态或显示模式等通常也发生了变化。而显示状态或显示模式发生切换的场景，也是界面刷新场景。因而，电子设备的显示形态发生变化的场景，通常也是界面刷新场景。

还需要说明的是，本申请以下实施例中主要以图2A所示姿态的电子设备为例进行说明。这样，界面的宽度即为界面在水平方向的长度，界面的高度即为界面在竖直方向的长度。并且，元素的宽度即为元素在水平方向的长度，元素的高度即为元素在竖直方向的长度。

在一些实施例中，布局规则可以包括间隔大小和空边大小，以及调整规则。

其中，间隔大小和空边大小可以与电子设备100的显示形态相对应。显示形态不同，布局规则中的间隔大小和空边大小也可能不同。

调整规则可以用于描述，界面上元素的宽度信息与待显示界面的宽度之间的对应关系。应用程序可以针对不同元素，分别指定相应的布局规则。在界面刷新时，电子设备100可以根据调整规则，确定元素的宽度包括的栅格数量等宽度信息。电子设备100还可以根据布局规则中的间隔大小和空边大小，确定待显示元素的宽度包括的栅格数量所对应的dp值或对应的像素点的数量，从而动态调整待显示元素的宽度大小。

示例性的，一种布局规则可以为：

margin＝16dp；//表示空边的大小为16dp；

gutter＝16dp；//表示间隔的大小为16dp；

若待显示界面的宽度包括的栅格数量为4，则元素宽度占用4个栅格；//表示调整规则的内容；

若待显示界面的宽度包括的栅格数量为8，则元素宽度占用4个栅格；//表示调整规则的内容；

若待显示界面的宽度包括的栅格数量为12，则元素宽度占用5个栅格；//表示调整规则的内容。

在一些技术方案中，电子设备100上可以存储有各个类型的栅格系统的定义信息。例如，电子设备100上设置有各类型的栅格系统的配置表。示例性的，该配置表可以为：

config；

(

竖屏显示状态下，column＝4；

横屏显示状态下，column＝8；

基础类栅格系统：

margin＝24dp；

gutter＝24dp；

宫格类栅格系统；

margin＝24dp；

gutter＝12dp；

弹窗类栅格系统；

margin＝16dp；

gutter＝16dp；

卡片类栅格系统：

margin＝8dp；

gutter＝8dp；

…

)

其中，本申请实施例中的参数column表示栅格数量，并不表示栅格的宽度。例如，column＝4表示栅格数量为4。

基于该配置表，布局规则中间隔和空边的大小，可以通过栅格系统的类型来表示。例如，上述布局规则可以为：

弹窗类栅格系统；//弹窗类栅格系统对应的margin＝16dp，gutter＝16dp；

若待显示界面的宽度包括的栅格数量为4，则元素宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，则元素宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为12，则元素宽度占用5个栅格。

在另一些实施例中，布局规则可以包括调整规则，而不包括间隔大小和空边大小。针对不同元素，应用程序可以指定相应的布局规则。电子设备100可以根据该布局规则，动态调整元素的宽度。应用程序还可以指定间隔大小和空边大小。例如，不同元素可以采用不同的间隔大小或空边大小。或者，不同类型的元素可以采用不同的间隔大小或空边大小；同一类型的元素可以采用相同的间隔大小和空边大小(即采用相同类型的栅格系统)。或者，不同界面可以采用不同的间隔大小或空边大小，同一界面可以采用相同的间隔大小和空边大小。或者，同一应用程序的各界面可以采用相同的间隔大小和空边大小。

布局规则在电子设备100上的存在形式可以有多种。例如，布局规则可以写在描述文件中，电子设备100启动后可以解析该描述文件中的布局规则。

再例如，布局规则也可以封装在函数中。每组布局规则可以预先定义一个对应的静态变量，以方便函数调用。例如，可以对布局规则对应的静态变量进行宏定义：

TYPE_TOAST＝0；//宏定义一组应用于弹窗的布局规则；

TYPE_BUBBLE＝1；//宏定义一组应用于气泡的布局规则；

TYPE_xxxx＝2；

…

示例性的，用于封装布局规则的封装函数可以为：

getLayoutSize(int type){//表示获取元素的宽度大小

If(type＝＝TYPE_TOAST){//表示调用TYPE_TOAST对应的布局规则；

If(Column＝＝4)result＝4；//表示若待显示界面包括4个栅格，则元素宽度占4个栅格；

Else If(Column＝＝8)result＝4；//表示若待显示界面包括8个栅格，则元素宽度占4个栅格；

Else If(Column＝＝12)result＝5；//表示若待显示界面包括12个栅格，则元素宽度占5个栅格；

}

If(type＝＝TYPE_BUBBLE){//表示调用TYPE_BUBBLE对应的布局规则；

…

}

If(type＝＝TYPE_xxxx){//表示调用TYPE_xxxx对应的布局规则；

…

}

Return Column2Dp(result)

}

在该封装函数中，Column表示待显示界面的宽度包括的栅格数量。Result表示元素宽度包括的栅格数量。Return Column2Dp(result)表示将获得的弹窗宽度包括的栅格数量转化为dp值，以便在显示屏194上进行绘制和显示。

元素的宽度信息还可以通过其他参数来表示，例如还可以通过元素的宽度的dp值来表示。在该封装函数的举例中，布局规则用于描述界面上的元素的宽度的dp值，与待显示界面的宽度包括的栅格数量之间的对应关系。

需要说明的是，上述封装函数中的布局规则是以包含调整规则，未包含margin和gutter的大小为例进行说明的。可以理解的是，封装函数中的布局规则，也可以包括margin和gutter的大小，此处不予赘述。例如，封装函数还包括getMargin{}函数，用于获取margin的大小；还包括getGutter{}函数，用于获取gutter的大小。

基于上述布局规则，电子设备100可以通过多种方式实现元素的动态布局。

此外，电子设备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 industry association 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还可以用于导航，体感游戏场景。

在一些实施例中，陀螺仪传感器180B可以用于检测电子设备100的转动，从而检测是否发生电子设备100的横/竖屏显示状态切换等需要界面刷新的场景。以便，电子设备100在界面刷新场景下对元素和界面进行动态布局。

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

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

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。

距离传感器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所处的位置不同。

在一些实施例中，触摸传感器180K可以检测到用户点击应用图标的操作，以便电子设备100确定当前为打开应用程序的场景，从而确定当前为界面刷新场景。以便，电子设备100在界面刷新场景下对元素和界面进行动态布局。

骨传导传感器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分离。

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

在本申请的实施例中，显示屏194可以进行栅格系统划分。内部存储器121可以存储有布局规则。该布局规则可以用于描述，待显示界面上的元素的宽度信息与当前显示形态下待显示界面的宽度包括的栅格数量之间的对应关系。电子设备100中的检测部件(例如陀螺仪传感器180B或触摸传感器180K等)可以辅助电子设备100检测当前是否需要界面刷新。处理器110可以在应用程序进行界面刷新时，根据当前显示形态下待显示界面的宽度包括的栅格数量以及该对应关系，确定待显示界面上的元素的宽度信息，进而对元素进行动态布局。从而，可以使得应用程序能够自适应不同的显示形态，实现不同的界面布局效果。

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

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将电子设备的软件系统分为四层模块，从上至下分别为应用程序，控件模块，栅格管理接口模块，栅格资源计算模块，以及栅格系统配置模块。

其中，应用程序可以包括一系列的应用程序包。如图3所示，应用程序包可以包括时钟，设置，蓝牙，音乐，相机，图库，日历，通话，地图，导航，WLAN，视频，短信息或微信等应用。

控件模块，可以用于提供栅格控件，通用模板和复合控件等元素。在需要界面刷新时，控件模块可以通过栅格系统管理接口获取元素的宽度，空边的尺寸等信息。而后，控件模块可以重新布局元素的大小，或复合控件内多个元素之间的相对位置等。

栅格管理接口模块，可以用于获取当前显示形态对应的屏幕参数信息，例如屏幕分辨率，显示模式，或屏幕宽度的尺寸等，并将屏幕参数信息设置到栅格资源计算模块中。当电子设备处于分屏等非全屏显示模式时，栅格管理接口模块可以根据当前显示形态对应的屏幕参数信息，获取当前子屏幕的参数信息，并设置到栅格资源计算模块中。

其中，该屏幕可以是图1所示的显示屏194，也可以是图1所示的显示屏194与触摸传感器180K组成的触控屏。

栅格管理接口模块还可以为控件模块提供API接口和布局规则的调用，向控件模块返回元素的宽度，例如元素的宽度对应的dp值或元素的宽度对应的像素点的数量。

栅格资源计算模块，可以用于接受栅格管理系统接口的调度，根据当前显示形态对应的屏幕参数信息和布局规则，获取栅格系统配置模块中的相关配置信息，并计算栅格的宽度和元素的宽度。

栅格系统配置模块，用于提供栅格系统的相关配置信息，例如第一栅格数量，第二栅格数量，间隔的尺寸和空边的尺寸等。其中，第一栅格数量为待显示界面的宽度包括的栅格数量。第二栅格数量为待显示界面上元素的宽度包括的栅格数量。

图3所示的软件模块与图1所示的硬件模块可以相互配合，以实现本申请实施例提供的电子设备的界面的动态布局方法。

可以理解的是，电子设备的软件系统可以有不同的模块划分方式，也可以包括不同的软件模块。电子设备执行的操作具体是电子设备的不同软件模块执行的操作；电子设备的软件模块执行的操作，也就是电子设备本身执行的操作。

以下主要从图3所示的软件模块的角度，对本申请实施例提供的电子设备的界面的动态布局方法进行阐述。参见图4，该方法可以包括：

401、应用程序显示第一界面。

其中，该应用程序可以是系统应用，也可以是第三方应用。例如，系统应用可以包括桌面应用、设置应用、短信应用或时钟应用等；第三方应用可以包括微信应用，浏览器应用，微博应用或导航应用等。

402、应用程序检测到界面刷新信号，并通知控件模块。

关于界面刷新的说明，可以参见以上实施例中的相关描述。

403、控件模块调用栅格管理接口模块，以获取元素的宽度。

例如，元素的宽度可以是元素的宽度对应的像素点的数量，或者元素的宽度对应的dp值等大小信息。

404、栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息，通知给栅格资源计算模块。

其中，屏幕参数信息可以包括屏幕分辨率，显示模式，或屏幕宽度的尺寸等信息。

405、栅格资源计算模块从栅格系统配置模块中，获取与当前显示形态下待显示的第二界面的宽度对应的第一栅格数量。

由于显示形态与屏幕的尺寸、显示状态、显示模式或分辨率等因素相关，而待显示界面的宽度也通常与屏幕的尺寸、显示状态或显示模式等因素相关，因而显示形态不同，待显示界面的宽度通常也不同，第一栅格数量也不同。第一栅格数量配置在栅格系统配置模块中，栅格资源计算模块可以从栅格系统配置模块中，实时获取与当前显示形态下待显示的第二界面的宽度对应的第一栅格数量。

406、栅格资源计算模块根据待显示的第二界面上的元素对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量。

第二栅格数量配置在栅格系统配置模块中，栅格资源计算模块根据元素对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量。

407、栅格资源计算模块根据待显示的第二界面上的元素对应的布局规则，从栅格系统配置模块中获取元素对应的空边的尺寸和间隔的尺寸。

其中，元素对应的布局规则中规定了空边的尺寸和间隔的尺寸的大小，空边的尺寸和间隔的尺寸配置在栅格系统配置模块中。

408、栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量，空边的尺寸和间隔的尺寸，计算栅格的宽度。

栅格资源计算模块可以根据当前显示形态对应的屏幕参数信息，栅格系统中第一栅格数量，空边的尺寸和间隔的尺寸，计算栅格系统中栅格的宽度。栅格的宽度具体可以是栅格的宽度对应的dp值，或栅格的宽度对应的像素点的数量。

409、栅格资源计算模块根据栅格的宽度和第二栅格数量，计算元素的宽度，并将元素的宽度返回给栅格管理接口模块。

其中，元素的宽度与第二栅格数量相匹配。元素的宽度具体包括第二栅格数量的栅格的宽度之和，以及第二栅格数量的栅格对应的间隔的尺寸之和。

410、栅格管理接口模块将元素的宽度，返回给控件模块。

411、控件模块根据获取的元素的宽度，设置元素的宽度。

其中，控件模块设置的元素的宽度大小，与控件模块根据获取的元素的宽度相一致。

412、应用程序显示第二界面，第二界面上元素的宽度为控件模块设置的元素的宽度。

这样，应用程序可以动态设置元素的宽度，从而动态布局元素和元素所在的界面。

以下通过举例的方式，对图4所示的界面的动态布局方法进行具体阐述。

在一些实施例中，控件模块可以提供一些栅格控件。每种类型的栅格控件可以对应有相应的布局规则。例如，该栅格控件可以包括栅格弹窗、栅格气泡、栅格按钮或栅格卡片等。

应用程序在界面设计时可以指定使用这些栅格控件。在应用程序确定发生界面刷新时(即在界面刷新场景下)，若刷新后的待界面包括栅格控件，则控件模块中的栅格控件可以根据当前显示形态和栅格控件对应的布局规则，动态布局栅格控件的宽度。而栅格控件的高度，则可以根据栅格控件待显示内容的多少(即待显示内容信息量的大小)来确定，以使得栅格控件足以容纳应用程序指定的待显示内容。

具体的，在界面刷新场景下，操作系统可以通知应用程序，应用程序可以通知栅格控件。栅格控件可以根据当前显示形态对应的待显示界面的宽度，以及栅格控件对应的布局规则，确定栅格控件的宽度信息，从而动态设置栅格控件的宽度，实现栅格控件和界面的动态布局。

其中，栅格控件的宽度信息可以包括栅格控件的宽度包括的栅格数量，栅格控件的宽度对应的dp值，以及栅格控件的宽度对应的像素点的数量等信息。栅格控件根据当前显示形态对应的待显示界面的宽度包括的栅格数量，以及栅格控件对应的布局规则，可以确定栅格控件的宽度包括的栅格数量。栅格控件还可以根据布局规则中间隔和空边的大小，确定栅格的宽度，从而确定栅格控件的宽度对应的dp值或像素点的数量等信息。栅格控件的宽度对应的dp值或像素点的数量可以用于表示实际的栅格控件的宽度，以便应用程序在屏幕上对该栅格控件进行显示。

并且，栅格控件在界面上的位置由应用程序指定。结合应用程序指定的栅格控件在界面上的显示位置，以及动态确定的栅格控件的宽度信息，应用程序可以动态控制栅格控件的显示效果。例如，应用程序可以指定栅格控件在界面上的位置为居左显示，居右显示，居中显示，栅格控件左边界与屏幕左边界的距离，或栅格控件上边界与屏幕上边界的距离等。

例如，栅格控件为栅格弹窗。示例性的，栅格弹窗对应的布局规则可以为：

margin＝16dp；

gutter＝16dp；

若待显示界面的宽度包括的栅格数量为4，则栅格弹窗的宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，且待显示界面的宽度与高度的比＞4:3，则栅格弹窗的宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，且待显示界面的宽度与高度的比≤4:3，则栅格弹窗的宽度占用5个栅格；

若待显示界面的宽度包括的栅格数量为12，则栅格弹窗的宽度占用5个栅格。

示例性的，应用程序为应用商店，电子设备为手机，手机处于竖屏显示状态。手机检测到用户点击如图5中的(a)所示的应用商店的图标后，打开应用商店。操作系统通知应用商店开始运行。应用商店需要提示用户发现新版本。应用商店指定使用栅格弹窗来提示用户发现新版本。

应用商店开始运行后进行初始化，并通知栅格弹窗进行界面刷新(即当前为界面刷新场景)。其中，这里的界面刷新场景是指，初始化时从不显示应用商店的界面，到显示应用商店的界面的场景。

而后，栅格弹窗可以采用步骤403-步骤411描述的方法，获取栅格弹窗的宽度。应用程序根据栅格弹窗的宽度信息以及弹窗的位置，显示该栅格弹窗。该栅格弹窗中的待显示内容由应用商店指定。

示例性的，在竖屏显示状态下，采用步骤403-步骤411描述的方法，栅格弹窗可以调用栅格管理接口模块，栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息通知给栅格资源计算模块。而后，栅格资源计算模块可以从栅格系统配置模块中，获取与当前显示形态下待显示界面的宽度对应的第一栅格数量，该第一栅格数量为4。栅格资源计算模块根据待显示的第二界面上的栅格弹窗对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量，该第二栅格数量为4。栅格资源计算模块待显示的第二界面上的栅格弹窗对应的布局规则，从栅格系统配置模块中获取栅格弹窗对应的空边的尺寸和间隔的尺寸。该空边的尺寸为16dp，该间隔的尺寸为16dp。栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量、空边的尺寸和间隔的尺寸，计算栅格的宽度。栅格资源计算模块根据栅格的宽度和第二栅格数量，计算栅格弹窗的宽度，并将栅格弹窗的宽度返回给栅格管理接口模块。栅格管理接口模块将栅格弹窗的宽度，返回给控件模块。控件模块根据获取的栅格弹窗的宽度，设置栅格弹窗的宽度。

另外，栅格弹窗中的显示内容，用于提示用户发现新版本的相关信息。栅格弹窗的高度根据栅格弹窗中显示内容的多少来确定，以使得栅格弹窗足以容纳应用商店指定的显示内容。若应用商店指定栅格弹窗的显示位置为居中，则栅格弹窗的显示效果可以参见图5中的(b)。如图5中的(b)所示，栅格弹窗的宽度占用4个栅格。栅格弹窗的宽度包括相邻的4个栅格的宽度，以及该4个栅格之间的3个间隔的尺寸。

其中，上述图5中的(a)所示的界面可以为第一界面，图5中的(b)所示的界面可以为对第一界面刷新后显示的第二界面。

在一些实施例中，栅格控件可以包括可缩放resizable属性。应用程序可以指定栅格控件的resizable属性为真(true)或者为假(false)。若应用程序指定在界面刷新时栅格控件的resizable属性为true，则栅格控件根据布局规则获取栅格控件的宽度，并重新设定栅格控件的宽度。例如，在上述应用商店场景中，在界面刷新时，若栅格弹窗的resizable属性为true，则栅格弹窗根据相应的布局规则确定栅格弹窗的宽度。

在上述应用商店的场景中，在手机显示图5中的(b)所示的界面之后，若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则栅格管理接口模块可以获取当前显示形态对应的屏幕参数信息，并更新给栅格资源计算模块，以便栅格资源计算模块根据当前显示形态进行相关计算。例如，栅格管理接口模块可以获取显示形态发生变化后的待显示界面的宽度对应的像素点的数量、dp值或栅格数量等显示配置信息。操作系统通知应用商店显示形态发生变化。应用商店通知栅格弹窗进行界面刷新。栅格弹窗采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和布局规则，确定栅格弹窗的宽度信息。例如，在横屏显示状态下，手机上待显示界面的高度和宽度与屏幕的高度和宽度一致，待显示界面的宽度包括8个栅格，且待显示界面宽度与高度的比值大于4:3，因而根据栅格弹窗的布局规则，如图5中的(c)所示，栅格弹窗的宽度占用4个栅格。上述图5中的(b)所示的界面可以为第一界面，图5中的(c)所示的界面可以为第二界面。

需要说明的是，在全屏显示模式下，待显示界面的宽度等于屏幕的宽度，待显示界面的高度等于屏幕的高度。因而，在全屏显示模式下，布局规则描述的界面上元素的宽度包括的栅格数量与待显示界面的宽度包括的栅格数量之间的对应关系，也可以说是界面上元素的宽度包括的栅格数量与屏幕的宽度包括的栅格数量之间的对应关系。

再示例性的，该电子设备为平板电脑，平板电脑的显示形态与手机的显示形态不同。平板电脑检测到用户点击应用商店的图标后，开始运行并打开应用商店。若平板电脑当前为竖屏显示状态，在当前显示形态下，平板电脑的屏幕和界面的宽度占用8个栅格，且屏幕和界面的宽度与高度的比值小于或者等于4:3，则根据栅格弹窗的布局规则，如图6中的(a)所示，由于第二栅格数量为奇数，且栅格弹窗的位置为居中，因而栅格弹窗的左、右两边分别占用了一半栅格，栅格弹窗与6个栅格有重叠，但栅格弹窗包括的栅格数量为5，即栅格弹窗占用了5个完整的栅格宽度。栅格弹窗的宽度包括5个栅格的宽度之和，以及有重叠的6个栅格之间的5个间隔的尺寸之和。

需要说明的是，应用程序可以指定栅格弹窗的显示位置，还可以将栅格弹窗的显示位置通知给栅格资源计算模块。栅格资源计算模块可以根据该显示位置，以及第二栅格数量、栅格的宽度和间隔的尺寸，计算栅格弹窗的宽度。

例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居左，则栅格弹窗从屏幕左边的第一个栅格开始，向右占用5个栅格。栅格弹窗的宽度为5个栅格的宽度，与这5个栅格之间的4个间隔的尺寸之和。

再例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居右，则栅格弹窗从屏幕右边的第一个栅格开始，向左占用5个栅格。栅格弹窗的宽度为5个栅格的宽度，与这5个栅格之间的4个间隔的尺寸之和。

再例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居中，则栅格弹窗显示在屏幕的中间位置。栅格弹窗的左、右两边分别占用了半个栅格，栅格弹窗与6个栅格有重叠，这6个栅格之间包括5个间隔；但栅格弹窗包括的栅格数量为5，即栅格弹窗占用了5个完整的栅格宽度。栅格弹窗的宽度为5个栅格的宽度，与5个间隔的尺寸之和。

若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则显示形态发生变化。在横屏显示状态下，平板电脑的屏幕宽度和待显示界面的宽度占用12个栅格，因而根据栅格弹窗的布局规则，如图6中的(b)所示，栅格弹窗的宽度占用5个栅格。

以上是以栅格弹窗用于提示发现新版本的场景为例进行说明的，栅格弹窗也可以用于其他场景。例如，栅格弹窗还可以用于提示用户电量低的场景，或者提示用户是否连接网络的场景等。

再例如，栅格控件为栅格气泡。示例性的，栅格气泡对应的布局规则可以为：

margin＝24dp；

gutter＝24dp；

若待显示界面的宽度包括的栅格数量为4，则栅格气泡的宽度最大可占用4个栅格；

若待显示界面的宽度包括的栅格数量为6，则栅格气泡的宽度最大可占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，则栅格气泡的宽度最大可占用6个栅格；

若待显示界面的宽度包括的栅格数量为12，则栅格气泡的宽度最大可占用6个栅格；

栅格气泡的宽度最小占用2个栅格。

示例性的，应用程序为微信，电子设备为平板电脑，平板电脑处于竖屏显示状态。平板电脑显示微信聊天界面。微信聊天界面包括消息气泡，微信指定该消息气泡采用栅格气泡。在竖屏显示状态下，平板电脑屏幕和界面的宽度包括8个栅格，根据栅格气泡的布局规则，栅格气泡的第二栅格数量为6。需要注意的是，栅格气泡的第二栅格数量为栅格气泡的宽度最大可包括的栅格数量。为了美观，栅格气泡的宽度最小占用2个栅格。栅格气泡的实际宽度，可以在最小宽度和最大宽度之间，根据消息内容的多少而自适地调整。若微信指定栅格气泡的显示位置为居右，则栅格气泡的显示效果可以参见图7中的(a)。

若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则操作系统通知微信显示形态发生变化，微信通知栅格气泡进行界面刷新。栅格气泡采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和栅格气泡的布局规则，确定栅格气泡的宽度信息。在横屏显示状态下，平板电脑的屏幕和待显示界面的宽度包括12个栅格，根据栅格气泡的布局规则，栅格气泡的宽度最大占用6个栅格。栅格气泡的显示效果可以参见图7中的(b)。

而后，若平板电脑检测到用户指示进入分屏显示模式的操作，则操作系统通知微信显示形态发生变化，微信通知栅格气泡进行界面刷新。在分屏显示模式下，平板电脑包括两个子屏幕，分别用于显示两个不同的界面。例如一个子屏幕用于显示微信的界面，另一个子屏幕显示其他应用程序的界面或者微信的其他界面。栅格气泡通过栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，获取微信所在子屏幕1和子屏幕1的待显示界面的宽度对应的第一栅格数量，即子屏幕1的待显示界面的宽度包括的栅格数量。

举例来说，在横屏显示状态下，平板电脑的屏幕和界面的宽度的dp值为720dp。在分屏显示模式下，两个子屏幕的宽度的像素点的数量均为360dp，则根据图2B所示的划分方式，子屏幕1的宽度包括4个栅格，子屏幕1中待显示界面的宽度的第一栅格数量为4。若当前显示形态下第一栅格数量为4，则结合栅格气泡的布局规则，子屏幕1中待显示界面上栅格气泡的宽度最大占用4个栅格，栅格气泡的显示效果可以参见图8。

需要说明的是，在本申请的实施例中，在分屏显示模式下，第一栅格数量是指子屏幕中的待显示界面的宽度包括的栅格数量。在画中画显示模式或悬浮窗显示模式下，对于小窗口中的元素，第一栅格数量为小窗口中的待显示界面的宽度包括的栅格数量；对于大窗口中的元素，第一栅格数量为大窗口中的待显示界面的宽度包括的栅格数量。在全屏显示模式下，第一栅格数量指整个屏幕中的待显示界面的宽度包括的栅格数量。在本申请的实施例中，若未特别说明，则屏幕的显示模式均为全屏显示模式。

再例如，栅格控件为栅格按钮，栅格按钮包括栅格单按钮或栅格双按钮。

示例性的，栅格单按钮对应的布局规则为：

margin＝24dp；

gutter＝24dp；

若待显示界面的宽度包括的栅格数量为4，则栅格单按钮的宽度占用2个栅格；

若待显示界面的宽度包括的栅格数量为8，则栅格单按钮的宽度占用3个栅格；

若待显示界面的宽度包括的栅格数量为12，则栅格单按钮的宽度占用4个栅格。

再示例性的，栅格双按钮对应的布局规则为：

margin＝24dp；

gutter＝24dp；

若待显示界面的宽度包括的栅格数量为4，则栅格双按钮的宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，则栅格双按钮的宽度占用6个栅格；

若待显示界面的宽度包括的栅格数量为12，则栅格双按钮的宽度占用8个栅格。

以上述应用商店的场景为例进行说明。应用程序为应用商店，电子设备为手机，手机处于竖屏显示状态。手机检测到用户点击应用商店的图标后，打开应用商店。操作系统通知应用商店开始运行。应用商店需要提示用户发现新版本。应用商店指定使用栅格弹窗和栅格双按钮来提示用户发现新版本。关于栅格弹窗的动态布局可以参考以上实施例中的描述。这里主要对栅格双按钮的动态布局进行说明。

应用商店进行初始化，并通知栅格双按钮进行界面刷新。栅格双按钮通过栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，获取当前显示形态对应的第一栅格数量。栅格双按钮采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据第一栅格数量和栅格双按钮的布局规则，确定栅格双按钮的宽度信息。

示例性的，在竖屏显示状态下，手机屏幕和界面的宽度包括4个栅格，根据栅格双按钮的布局规则，栅格双按钮的宽度占用4个栅格，栅格双按钮的显示效果可以参见图9中的(a)。若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则在横屏显示状态下，手机屏幕和待显示界面的宽度包括8个栅格，则根据栅格双按钮的布局规则，如图9中的(b)所示，栅格双按钮的宽度占用6个栅格。

再例如，栅格控件为栅格卡片。示例性的，栅格卡片对应的布局规则为：

margin＝8dp；

gutter＝8dp；

若待显示界面的宽度包括的栅格数量为4，则栅格卡片的宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，则栅格卡片的宽度占用6个栅格；

若待显示界面的宽度包括的栅格数量为12，则栅格卡片的宽度占用8个栅格。

示例性的，电子设备为手机，应用程序为状态栏，手机当前处于竖屏显示状态。手机检测到用户下拉状态栏的操作后，打开并显示状态栏。状态栏指定采用栅格卡片进行显示。操作系统通知状态栏显示界面。状态栏通知栅格卡片进行界面刷新。栅格卡片采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和栅格卡片的布局规则，确定栅格卡片的宽度信息。若手机的待显示界面的宽度包括4个栅格，则根据栅格卡片的布局规则，状态栏采用的栅格卡片的宽度占用4个栅格。若状态栏指定的栅格卡片的位置为居上且左右居中，则状态栏的显示效果可以参见图10中的(a)。

若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则操作系统通知状态栏显示形态发生变化。状态栏通知栅格卡片进行界面刷新。在横屏显示状态下，手机待显示界面的宽度占用8个栅格，根据栅格卡片的布局规则，如图10中的(b)所示，状态栏采用的栅格卡片的宽度占用6个栅格。

以上分别对栅格弹窗、栅格气泡、栅格按钮和栅格卡片进行了举例说明。栅格控件还可以包括其他多种控件。例如，如图11中的(a)所示的今日头条的顶部页签，也可以为栅格控件。再例如，如图11中的(b)所示的微信的底部tab，也可以为栅格控件。本申请实施例对其他栅格控件不再详细说明。

可见，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度尺寸，自动计算栅格控件的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。

在其他一些实施例中，电子设备可以提供一些通用模板。通用模板的实体可以是一个空的控件容器或空的布局(layout)容器。应用程序在开发时可以使用这些通用模板，并在通用模板内填充内容，而不需要关心通用模板的尺寸。应用程序可以通过通用模板实现各种元素，尤其是内部布局复杂的元素，或者不能采用栅格控件的一些元素。

例如，开机向导界面的布局不适合采用栅格控件进行设计，开机向导界面可以作为一个元素，该元素可以采用通用模板进行布局。再例如，时钟界面包括表盘和表盘下方的文字信息等内容，布局复杂。该时钟界面可以作为一个元素，该元素可以采用通用模板进行布局。

通用模板对应有相应的布局规则。通用模板的宽度信息可以根据系统设置的布局规则动态确定。在界面刷新时，若界面包括通用模板，则通用模板可以根据对应的布局规则，动态确定通用模板的宽度信息，从而动态布局采用通用模板的元素。

具体的，在界面刷新场景下，操作系统可以通知应用程序，应用程序可以通知通用模板。通用模板可以采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的待显示界面的宽度，以及通用模板对应的布局规则，确定通用模板的宽度信息，从而动态设置通用模板的宽度，实现元素和界面的动态布局。

此外，通用模板的高度可以根据应用程序指定的待显示内容的多少来确定，以使得通用模板足以容纳应用程序指定的待显示内容。

示例性的，一种通用模板对应的布局规则可以为：

margin＝24dp；

gutter＝24dp；

若待显示界面的宽度包括的栅格数量为4，则通用模板的宽度占用4个栅格；

若待显示界面的宽度包括的栅格数量为8，则通用模板的宽度占用6个栅格；

若待显示界面的宽度包括的栅格数量为12，则通用模板的宽度占用8个栅格。

示例性的，电子设备为平板电脑，应用程序为开机向导应用，平板电脑当前处于竖屏显示状态。平板电脑检测到用户的开机操作后，运行开机向导应用。开机向导应用指定采用通用模板进行界面显示。操作系统通知开机向导应用初始化。开机向导应用通知通用模板进行界面刷新。通用模板采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和通用模板的布局规则，确定通用模板的宽度信息。若平板电脑的屏幕和界面的宽度包括8个栅格，则根据通用模板的布局规则，开机向导界面采用的通用模板的宽度占用6个栅格。若开机向导应用指定的通用模板的位置为居中，则开机向导界面的显示效果可以参见图12中的(a)。

若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则操作系统通知状态栏显示形态发生变化。开机向导应用通知通用模板进行界面刷新。在横屏显示状态下，平板电脑的屏幕和待显示界面的宽度占用12个栅格，根据通用模板的布局规则，如图12中的(b)所示，开机向导界面采用的通用模板的宽度占用8个栅格。

这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度尺寸，自动计算采用通用模板的元素的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。

在本申请的另一些实施例中，电子设备可以提供一些API接口，应用程序可以指定界面上不同元素分别对应的布局规则。在电子设备的显示形态发生变化等界面刷新场景下，操作系统可以通知应用程序。应用程序可以通过这些API接口，调用不同元素分别对应的布局规则，获取根据布局规则确定的元素的宽度信息，从而对元素和界面进行动态布局。元素的高度可以根据应用程序指定的待显示内容的多少来确定，以使得元素足以容纳应用程序指定的待显示内容。

作为图4所示方法的一种替换方案，参见图13，应用程序确定当前为界面刷新场景时，可以直接调用API接口，从而根据当前显示形态和预设的布局规则，确定元素的宽度。

即，上述图4中的步骤402可以替换为：

1301、应用程序检测到界面刷新信号。

上述图4中的步骤403可以替换为：

1302、应用程序调用栅格管理接口模块，以获取元素的宽度。

上述图4中的步骤410可以替换为：

1303、栅格管理接口模块将元素的宽度，返回给应用程序。

在步骤1303之后，步骤411之前，该方法还可以包括步骤1304：

1304、应用程序将元素的宽度通知给控件模块。

例如，在界面刷新时，对于待显示界面上的弹窗，应用程序可以指定采用上述栅格弹窗的布局规则。对于待显示界面上的气泡，应用程序可以指定采用上述栅格弹窗的布局规则。对于待显示界面上的按钮，应用程序可以指定采用上述栅格按钮的布局规则。对于待显示界面上的卡片，应用程序可以指定采用上述栅格卡片的布局规则。对于具有复杂布局的其他元素，应用程序可以指定采用上述通用模板的布局规则。

示例性的，应用程序通过API接口调用相应的布局规则的伪代码可以为：

public void onConfigurationChanged(Configuration newConfig){//操作系统调应用程序的函数，以通知显示配置信息(例如屏幕和待显示界面宽度的dp值或栅格数量等)发生了变化，即显示形态发生了变化；

super.onConfigurationChanged(newConfig)；

Int newsize＝(type，布局规则布局规则)//应用程序调用API接口中元素对应的布局规则，获取元素的宽度；

AA.setsize(newsize)//应用程序将界面上的元素AA设置为newsize表示的宽度。

示例性的，该应用程序为购物APP，电子设备为手机，手机为竖屏显示状态，手机屏幕和界面的宽度包括4个栅格。手机显示如图14中的(a)和图14中的(b)所示的购物APP的地址管理界面。该地址管理界面包括栅格卡片和栅格单按钮。如图14中的(a)所示，卡片的宽度占用4个栅格。如图14中的(c)所示，栅格单按钮的宽度占用2个栅格。对比图14中的(a)和图14中的(b)可知，栅格卡片和栅格单按钮可以采用不同类型的栅格系统。

手机检测到用户点击home键(或称主键)的操作后显示桌面，购物APP切换到后台。而后，用户旋转手机，手机由竖屏显示状态切换为横屏显示状态，待显示界面的宽度包括8个栅格。手机检测到用户再次打开购物APP的操作后，购物APP从后台切到前台。电子设备的显示形态发生了变化。操作系统通知购物APP进行界面刷新。

采用图13所示的方法，购物APP可以调用栅格管理接口模块，栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息通知给栅格资源计算模块。而后，栅格资源计算模块可以从栅格系统配置模块中，获取与当前显示形态下待显示界面的宽度对应的第一栅格数量，该第一栅格数量为8。栅格资源计算模块根据待显示的第二界面上的栅格卡片对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量，该第二栅格数量为6。栅格资源计算模块待显示的第二界面上的栅格卡片对应的布局规则，从栅格系统配置模块中获取栅格卡片对应的空边的尺寸和间隔的尺寸。该空边的尺寸为8dp，该间隔的尺寸为8dp。栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量、空边的尺寸和间隔的尺寸，计算栅格的宽度。栅格资源计算模块根据栅格的宽度和第二栅格数量，计算栅格卡片的宽度，并将栅格卡片的宽度返回给栅格管理接口模块。栅格管理接口模块将栅格卡片的宽度，返回给应用程序。应用程序将栅格卡片的宽度通知给控件模块。控件模块根据获取的栅格卡片的宽度，设置栅格卡片的宽度。示例性的，购物APP的地址管理界面上，栅格卡片的示意图可以参见图14中的(c)。

同样地，采用图13所示的方法，购物APP可以获取栅格单按钮的第二栅格数量，间隔的尺寸，空边的尺寸以及栅格单按钮的宽度等信息。例如，栅格单按钮的第二栅格数量为3，间隔的尺寸为24dp，空边的尺寸为24dp。示例性的，购物APP的地址管理界面上，栅格单按钮的示意图可以参见图14中的(d)。

在其他一些实施例中，应用程序可以通过API接口获取margin和gutter的大小，而不用获取元素的宽度信息，从而根据margin和gutter对界面上元素的位置进行调整。例如，电子设备根据栅格系统的定义，可以获取margin大小，从而根据margin大小调整界面上待显示元素距离屏幕边界的位置等。

这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态下待显示界面的宽度尺寸，通过API接口调用各元素分别对应的布局规则，自动计算各元素的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。

在其他一些实施例中，电子设备可以提供一些复合控件。该复合控件可以包括多个元素(也称子元素)，即该复合控件为多个元素组合后的控件。该多个元素中的每个元素还可以包括至少一个子元素。即，复合控件中的每个元素也可能是多个元素的组合。该复合控件整体也可以认为是界面上的一种元素。

复合控件具有相应的布局规则。复合控件对应的布局规则可以用于描述，复合控件内部多个元素之间的相对位置，与当前显示形态下待显示界面的宽度之间的对应关系，即复合控件内部多个元素之间的相对位置的变化规则。复合控件对应的布局规则还可以包括复合控件内部各元素的大小变化规则。应用程序可以使用这些复合控件进行界面设计。在界面刷新时，电子设备可以根据复合控件对应的布局规则，动态布局复合控件中元素的相对位置和大小。

例如，复合控件对应的布局规则包括所述第一元素和所述第二元素的相对位置，与所述第一元素和所述第二元素的高度和宽度，以及当前显示形态下待显示界面的宽度和高度之间的对应关系。示例性的，复合控件1包括元素A和元素B。元素A和元素B设置有宽度和高度。元素A和元素B可以呈水平排列和竖直排列两种排列形态，这两种排列形态之间可以切换，复合控件1也可以称为挪移布局。

示例性的，复合控件1对应的用于设置元素A和元素B排列方式的布局规则可以为：

在元素A和元素B呈竖直排列的情况下，若待显示界面的宽度W能够容纳元素A和元素B的水平排列，即满足W>＝Width(A)+Width(B)+Margin，则切换为水平排列；其中，Width(A)表示元素A的宽度，Width(B)表示元素B的宽度；

在元素A和元素B呈水平排列的情况下，若待显示界面的宽度W减小，不足以容纳元素A和元素B水平排列，则切换为竖直排列；

在元素A和元素B呈竖直排列的情况下，若满足待显示界面在竖直方向的高度H<Height(A)+Height(B)+vertialMargin,则复合控件容器中可以嵌入滚动条，元素A和元素B可以滚动显示。

其中，Height(A)表示元素A在竖直方向的高度，Height(B)表示元素B在竖直方向的高度，vertialMargin表示竖直方向的空边，为竖直方向上屏幕的内容显示区域与屏幕边界之间的最小距离。

其中，W，Width(A)，Width(B)，Margin，H，Height(A)，Height(B)，以及vertialMargin的单位可以为dp。

例如，时钟应用可以采用复合控件1，元素A可以为表盘，元素B可以为表盘下边的相关文字信息。再例如，天气应用可以采用复合控件1，元素A可以为天气状况的图片，元素B可以为天气状况的文字描述。再例如，手机管家可以采用复合控件1，元素A可以为优化检测表盘，元素B可以为控件列表。

示例性的，应用程序为手机管家，电子设备为手机，手机为竖屏显示状态。如图15中的(a)所示，优化检测表盘(即元素A)和控件列表(即元素B)竖直排列。若手机切换为横屏显示状态，待显示界面的宽度能够容纳元素A和元素B水平排列，即满足W>＝Width(A)+Width(B)+Margin，则如图15中的(b)所示，优化检测表盘和控件列表切换为水平排列。

在一些实施例中，上述用于设置复合控件1的元素A和元素B排列方式的布局规则中，元素A的宽度和高度，分别可以替换为元素A的最小宽度和最小高度；元素B的宽度和高度，分别可以替换为元素B的最小宽度和最小高度。复合控件1对应的布局规则还可以包括，用于动态设置元素A和元素B实际的宽度信息的规则。元素A和元素B的实际宽度分别大于各自的最小宽度。电子设备可以根据复合控件1的布局规则，动态确定元素A和元素B的排列方式，以及元素A和元素B的实际大小。

再例如，复合控件2包括A、B、C、D等多个元素，复合控件2对应的布局规则可以为：

若待显示界面的宽度的dp值小于预设值1，则复合控件2中的A、B、C、D等多个元素按照1列进行显示；

若待显示界面的宽度的dp值大于或者等于预设值1，则复合控件2中的A、B、C、D等多个元素按照2列进行显示。

示例性的，应用程序为联系人应用。在手表上，待显示界面的宽度的dp值小于预设值1，如图16中的(a)所示，联系人列表按照1列进行显示。在平板的横屏显示状态下，待显示界面的宽度的dp值大于或者等于预设值1，如图16中的(b)所示，联系人列表按照2列进行显示。

可以理解的是，复合控件还可以应用在分栏等其他场景中，本申请实施例不再详细举例。

这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度的尺寸，自动计算复合控件的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。

基于本申请实施例提供的界面的动态布局方法，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度的尺寸，自动计算界面上的栅格控件、采用通用模板的元素和复合控件的宽度，从而能够自适应各种显示形态进行元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。

需要说明的是，本申请实施例给出的布局规则，可动态布局的元素类型，或应用场景等仅是举例说明。可以理解的是，基于本申请实施例提供的界面的动态布局方法，还可以有其他的布局规则，还可以适用于其他以上实施例中未提到的元素类型和应用场景，本申请实施例不予限定。

可以理解的是，为了实现上述功能，电子设备包含了执行各个功能不同的软件模块。本领域技术人员可以结合实施例，对每个特定的应用来使用不同的软件模块来实现所描述的功能，但是这种实现不应认为超出本申请的范围。例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块可以采用硬件的形式实现。需要说明的是，本实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

示例性的，在另一种划分方式中，参见图17，该电子设备可以包括：动态布局规则模块、动态布局动效模块、控件封装和API获取模块和应用程序。

其中，动态布局规则模块，可以用于针对电子设备定义相应的栅格系统，包括栅格数量和margin和gutter的大小等参数。该模块还可以用于定义布局规则，例如定义栅格控件、通用模板和复合控件等对应的布局规则。在界面刷新场景下，该模块可以根据当前显示形态下的待显示界面的宽度和布局规则，确定元素的宽度信息(例如元素的宽度包括的栅格数量)。该模块还可以确定当前显示形态应使用的margin、gutter和栅格的宽度等参数信息，以便确定元素的宽度对应的dp值或像素点的数量等其他宽度信息，以及元素的显示位置(例如元素与屏幕边界之间的距离)等。此外，在界面刷新场景下，该模块还可以确定复合控件中元素的相对位置是否发生变化。

动态布局动效模块，可以用于进行动效处理，提供缩放或移动等常见的动效切换。例如，在界面刷新时，元素和界面的布局发生了变化，动态布局动态模块可以针对该变化进行动效显示。

示例性的，对于复合控件1中的元素A和元素B，当由图15中的(a)所示的竖直排列状态切换为图15中的(b)所示的水平排列状态时，画面并不是直接进行跳变的，而是一个平滑过渡的过程。例如，图15中的(a)所示的元素A逐渐向左旋转90°，呈现如图15中的(b)所示的状态。图15中的(a)所示的元素B平滑地移动到右侧，呈现如图15中的(b)所示的状态。

控件封装和API获取模块，可以用于封装布局规则，提供一组函数API供应用程序调用，比如提供用于获取margin的函数getMargin()，用于获取gutter的函数getGutter()，用于获取栅格的宽度的函数getColumnWidth()，以及用于获取元素宽度的函数getLayoutSize()等。

此外，为了简化应用程序的调用，该模块还可以直接提供一些控件组，比如HwLinearLayout，HwRelativeLayout，HwFrameLayout等，用于封装getMargin()，getgutter()，getColumnWidth()和getLayoutSize()等函数。这样，应用程序可以直接调用这些控件组，而不需要分别调用调用getMargin()，getGutter()等API后，再进行进一步的逻辑处理。

应用程序可以包括时钟，相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息或微信等多种应用。

上述布局规则可以设置在操作系统中，也可以集成在应用程序中。在布局规则设置在操作系统的情况下，动态布局规则模块、动态布局动效模块、控件封装和API获取模块可以位于操作系统的应用程序框架层。

在本申请的实施例中，动态布局规则模块可以为控件封装和API获取模块中封装的布局规则提供定义和规则支持。应用在程序进行界面刷新时，可以调用控件封装和API获取模块提供的布局规则，动态获取界面上元素的宽度信息。动态布局动效模块可以根据动态获取的元素的宽度信息，进行界面动效显示。

以上主要从软件模块的角度，对本申请实施例提供的界面的动态布局方法进行了说明。从电子设备的角度来说，在本申请的实施例提供的界面的动态布局方法中，电子设备可以根据预设的布局规则和当前的显示形态，自动对应用程序界面上的元素进行动态布局。

例如，当布局规则表示元素的宽度包括的栅格数量(即第二栅格数量)，与当前显示形态下待显示界面的宽度包括的栅格数量(即第一栅格数量)之间的对应关系时，本申请实施例提供的界面的动态布局方法，可以参见图18：

1801、电子设备显示第一界面。

其中，第一界面可以为刷新前的界面。示例性的，第一界面可以为图5中的(a)所示的界面。

1802、电子设备检测到界面刷新信号。

示例性的，电子设备检测到界面刷新信号时所对应的界面刷新场景，可以为图5中的(a)-图5中的(b)所示的打开应用程序的场景。再示例性的，该界面刷新场景可以为图5中的(b)-图5中的(c)所示的横/竖屏显示状态切换场景。再示例性的，该界面刷新场景可以为图8所示的分屏显示模式切换场景等。

1803、电子设备获取刷新后待显示的第二界面的宽度对应的第一栅格数量。

示例性的，在图5中的(a)-图5中的(b)所示的情况下，第一栅格数量可以为4。

1804、电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量。

其中，第二界面为待显示的刷新后的界面，布局规则包括第二栅格数量与第一栅格数量之间的对应关系。示例性的，在图5中的(b)所示的情况下，第一元素为栅格弹窗，栅格弹窗的第二栅格数量为4。

1805、电子设备显示第二界面。

其中，第二界面上包括第一元素，第一元素的宽度与第二栅格数量相匹配。

示例性的，当第一界面为图5中的(a)所示的界面，第二界面可以为图5中的(b)所示的界面，第一元素可以为栅格弹窗。

再示例性的，该第一界面可以为图7中的(a)所示的界面，第二界面可以为图7中的(b)所示的界面，第一元素可以为栅格气泡。

其中，布局规则还包括间隔的尺寸和空边的尺寸，上述步骤1805具体可以包括：

1805a、电子设备根据第二界面的宽度，间隔的尺寸，空边的尺寸，以及第一栅格数量，确定栅格的宽度。

其中，第二界面的宽度具体可以为第二界面的宽度对应的dp值，或者第二界面的宽度对应的像素点的数量。

1805b、电子设备根据第二栅格数量、栅格的宽度和间隔的尺寸，确定第一元素的宽度。

例如，第一元素的宽度具体可以为第一元素的宽度对应的dp值，或者第一元素的宽度对应的像素点的数量。其中，第一元素的宽度可以包括相邻的第二栅格数量的栅格的宽度之和，以及相邻的第二栅格数量的栅格对应的间隔的尺寸之和。

1805c、电子设备显示第二界面。

其中，第二界面上包括第一元素，电子设备可以根据步骤1805b中确定的第一元素的宽度显示第二界面上的第一元素。

示例性的，参见图5中的(b)，栅格弹窗的宽度包括4个栅格的宽度，以及该4个栅格之间的3个间隔的尺寸之和。

再示例性的，参见图6中的(a)，栅格弹窗与6个栅格有重叠，栅格弹窗的宽度包括5个完整的栅格的宽度以及5个间隔的尺寸之和。其中，该5个间隔为该5个完整的栅格的宽度对应的6个栅格之间的间隔。

在步骤1801-步骤1805描述的方案中，电子设备可以根据当前显示形态，自动对应用程序界面上的元素和界面进行动态布局。因而，针对不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。

其中，同一电子设备可以根据预设的布局规则和当前的显示形态，对应用程序界面上的元素进行动态布局。从而可以达到，针对同一电子设备的不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。不同电子设备可以根据预设的布局规则和电子设备的显示形态，对应用程序界面上的元素进行动态布局。从而可以达到，针对不同电子设备的不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。

在以上实施例中，元素的宽度信息可以根据元素的宽度对应的布局规则动态确定，元素的高度可以根据应用程序指定的元素待显示内容的多少来确定。在其他一些实施例中，与元素的宽度信息类似，元素的高度信息也可以根据竖直方向对应的布局规则动态确定。

上述针对屏幕的宽度划分的column可以称为horizoncolumn。上述针对屏幕的宽度划分的gutter可以称为horizongutter。上述针对屏幕的宽度划分的margin可以称为horizonmargin。

同一元素的高度采用的栅格系统的类型，与该元素的宽度采用的栅格系统的类型，可以相同也可以不同。针对屏幕的高度划分的column可以称为vertialcolumn。针对屏幕的高度划分的gutter可以称为vertialgutter。针对屏幕的高度划分的margin可以称为vertialmargin。

电子设备的屏幕在竖直方向上可以包括两个vertialmargin，若干个vertialcolumn以及若干个vertialgutter。其中，vertialmargin是屏幕边界与最近的vertialcolumn之间的距离。vertialgutter是指vertialcolumn和vertialcolumn之间的距离。

以上实施例中主要是以屏幕在宽度上划分栅格，电子设备预设有元素的宽度对应的布局规则，且电子设备根据元素的宽度对应的布局规则，动态确定元素的宽度信息为例进行说明的。与元素的宽度对应的布局规则类似，屏幕在高度也可以划分栅格。电子设备也可以预设有元素的高度对应的布局规则(例如栅格控件、通用模板和复合控件等元素对应的布局规则)，并根据元素的高度对应的布局规则动态确定元素的高度信息。

元素的高度对应的布局规则可以与元素的宽度对应的布局规则设置在一起，也可以与元素的宽度对应的布局规则分开设置。元素的高度对应的布局规则，同样可以设置在描述文件中或封装在函数中。

在其他一些实施例中，在界面刷新时，应用程序待显示界面上元素的高度信息可以根据元素的高度对应的布局规则动态确定，元素的宽度信息可以根据应用程序指定的元素待显示内容的多少来确定。

在一些实施例中，电子设备提供的布局规则可以设置在操作系统中，为各应用程序所公用。各应用程序可以仅设置一套界面布局。各应用程序均可以指定元素采用栅格控件、通用模板或复合控件等，从而针对不同的显示形态，根据操作系统提供的栅格控件、通用模板或复合控件对应的布局规则确定元素的大小，实现元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。

在另一些实施例中，电子设备提供的布局规则可以集成在应用程序中。应用程序可以仅设置一套界面布局。应用程序可以指定元素采用栅格控件、通用模板或复合控件等，从而针对不同的显示形态，根据应用程序自身提供的栅格控件、通用模板或复合控件对应的布局规则确定元素的大小，实现元素和界面的动态布局。其中，布局规则的信息量较小，占用的数据空间也较小。因而，与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。

本申请实施例还提供了一种电子设备，包括屏幕，该屏幕的宽度划分为多个栅格；一个或多个处理器；存储器；以及一个或多个计算机程序。一个或多个计算机程序被存储在存储器中，一个或多个计算机程序包括指令。当指令被一个或多个处理器执行时，使得电子设备执行上述实施例中的各个步骤，以实现上述界面的动态布局方法。

本申请实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的界面的动态布局方法。

本申请实施例还提供一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面的动态布局方法。

另外，本申请的实施例还提供一种装置，该装置具体可以是芯片系统。该芯片系统应用于电子设备。该芯片系统包括一个或多个接口电路和一个或多个处理器；该接口电路和处理器通过线路互联；该接口电路用于从电子设备的存储器接收信号，并向处理器发送信号，信号包括存储器中存储的计算机指令；当处理器执行计算机指令时，电子设备执行上述相关步骤，以实现上述实施例中的界面的动态布局方法。

另外，本申请的实施例还提供一种装置，该装置具体可以是组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的界面的动态布局方法。

其中，本申请实施例提供的电子设备、芯片，计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。

通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

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

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

Claims (25)

1.一种界面的动态布局方法，应用于电子设备，所述电子设备包括屏幕，所述屏幕用于界面显示，其特征在于，所述屏幕的宽度划分为多个栅格，所述方法包括：

所述电子设备显示第一界面；

所述电子设备检测到界面刷新信号；

所述电子设备获取刷新后待显示的第二界面的宽度对应的第一栅格数量，所述第一栅格数量为所述第二界面的宽度包括的栅格数量；

所述电子设备根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量；所述第二栅格数量为所述第一元素的宽度包括的栅格数量，所述布局规则包括所述第二栅格数量与所述第一栅格数量之间的对应关系；

所述电子设备显示所述第二界面；

所述电子设备检测到界面刷新信号，包括：

所述电子设备检测到打开应用程序的操作；

或者，所述电子设备检测到界面的宽度发生变化；

所述第一元素对应的布局规则包括：

空边的尺寸＝第一预设值；

间隔的尺寸＝第二预设值；

若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值；

若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，所述第五预设值大于所述第三预设值，所述第六预设值大于所述第四预设值；

所述第一元素是指界面所包含的满足用户浏览或交互需求的一系列的控件。

2.根据权利要求1所述的方法，其特征在于，所述屏幕的宽度还包括至少一个间隔和两个空边，所述间隔为相邻两个所述栅格之间的距离，所述空边为所述屏幕左/右侧的边界与最近的所述栅格之间的距离。

3.根据权利要求2所述的方法，其特征在于，所述布局规则还包括所述间隔的尺寸和所述空边的尺寸，所述电子设备显示所述第二界面，包括：

所述电子设备根据所述第二界面的宽度，所述间隔的尺寸，所述空边的尺寸，以及所述第一栅格数量，确定所述栅格的宽度；

所述电子设备根据所述第二栅格数量、所述栅格的宽度和所述间隔的尺寸，确定所述第一元素的宽度；

所述电子设备显示所述第二界面。

4.根据权利要求1所述的方法，其特征在于，所述电子设备检测到界面的宽度发生变化，包括：

所述电子设备检测到显示状态发生切换，所述显示状态包括横屏显示状态或竖屏显示状态；

或者，所述屏幕为折叠屏，所述电子设备检测到所述折叠屏的折叠状态发生变化；

或者，所述电子设备检测到显示模式发生切换，所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。

5.根据权利要求1-4任一项所述的方法，其特征在于，第一参数用于表征所述第二界面的宽度，所述第一参数所在的不同区间对应不同的所述第一栅格数量，所述区间具体指栅格数量。

6.根据权利要求1-4任一项所述的方法，其特征在于，所述屏幕的尺寸、比例、显示状态或显示模式不同，所述第二界面的宽度也不同；

其中，所述显示状态包括横屏显示状态或竖屏显示状态；所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。

7.根据权利要求1-4任一项所述的方法，其特征在于，所述电子设备根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量，包括：

应用程序控制所述第一元素调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量；

或者，所述应用程序调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量。

8.根据权利要求1所述的方法，其特征在于，若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值，包括：

若所述第一栅格数量为第三预设值，且所述第二界面的宽度和高度的比值大于第一预设比例，则所述第二栅格数量为第四预设值；

若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，包括：

若所述第一栅格数量为第五预设值，且所述第二界面的宽度和高度的比值小于或者等于所述第一预设比例，则所述第二栅格数量为第六预设值，所述第六预设值大于所述第四预设值。

9.根据权利要求1-4任一项所述的方法，其特征在于，所述第一元素为复合控件，所述复合控件包括第一子元素和第二子元素；所述复合控件对应的布局规则还包括所述第一子元素和所述第二子元素的相对位置，与所述第二界面的宽度之间的对应关系。

10.根据权利要求9所述的方法，其特征在于，所述布局规则具体包括，所述第一子元素和所述第二子元素的相对位置，与所述第一子元素和所述第二子元素的高度和宽度，以及所述第二界面的宽度和高度之间的对应关系。

11.根据权利要求10所述的方法，其特征在于，所述复合控件包括子元素A和子元素B所述布局规则包括：

在所述子元素A和所述子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿第二方向排列；其中，W表示所述第二界面的宽度，Width(A)表示所述子元素A的宽度，Width(B)表示所述子元素B的宽度；

在所述子元素A和所述子元素B沿所述第二方向排列时，若W＜Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿所述第一方向排列；

并且，在所述子元素A和所述子元素B沿所述第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，所述滚动条用于滚动显示所述子元素A和所述子元素B；其中，H表示所述第二界面的高度，Height(A)表示所述子元素A的高度，Height(B)表示所述子元素B的高度，vertialMargin表示所述屏幕在所述第一方向上的空边的尺寸。

12.一种电子设备，其特征在于，包括：一个或多个处理器；

屏幕，用于显示界面，所述屏幕的宽度划分为多个栅格；

以及存储器，所述存储器中存储有代码；

当所述代码被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

显示第一界面；

检测到界面刷新信号；

获取刷新后待显示的第二界面的宽度对应的第一栅格数量，所述第一栅格数量为所述第二界面的宽度包括的栅格数量；

根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量；所述第二栅格数量为所述第一元素的宽度包括的栅格数量，所述布局规则包括所述第二栅格数量与所述第一栅格数量之间的对应关系；

所述电子设备显示所述第二界面；

所述检测到界面刷新信号，具体包括：

检测到打开应用程序的操作；

或者，检测到界面的宽度发生变化；

所述第一元素对应的布局规则包括：

空边的尺寸＝第一预设值；

间隔的尺寸＝第二预设值；

若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值；

若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，所述第五预设值大于所述第三预设值，所述第六预设值大于所述第四预设值；

所述第一元素是指界面所包含的满足用户浏览或交互需求的一系列的控件。

13.根据权利要求12所述的电子设备，其特征在于，所述屏幕的宽度还包括至少一个间隔和两个空边，所述间隔为相邻两个所述栅格之间的距离，所述空边为所述屏幕左/右侧的边界与最近的所述栅格之间的距离。

14.根据权利要求13所述的电子设备，其特征在于，所述布局规则还包括所述间隔的尺寸和所述空边的尺寸，所述显示所述第二界面，具体包括：

根据所述第二界面的宽度，所述间隔的尺寸，所述空边的尺寸，以及所述第一栅格数量，确定所述栅格的宽度；

根据所述第二栅格数量，所述栅格的宽度和所述间隔的尺寸，确定所述第一元素的宽度；

显示所述第二界面。

15.根据权利要求12所述的电子设备，其特征在于，所述检测到界面的宽度发生变化，具体包括：

检测到显示状态发生切换，所述显示状态包括横屏显示状态或竖屏显示状态；

或者，所述屏幕为折叠屏，检测到所述折叠屏的折叠状态发生变化；

或者，检测到显示模式发生切换，所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。

16.根据权利要求12-15任一项所述的电子设备，其特征在于，第一参数用于表征所述第二界面的宽度，所述第一参数所在的不同区间对应不同的所述第一栅格数量，所述区间具体为栅格数量。

17.根据权利要求12-15任一项所述的电子设备，其特征在于，所述屏幕的尺寸、比例、显示状态或显示模式不同，所述第二界面的宽度也不同；

其中，所述显示状态包括横屏显示状态或竖屏显示状态；所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。

18.根据权利要求12-15任一项所述的电子设备，其特征在于，所述根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量，具体包括：

通过应用程序控制所述第一元素调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量；

或者，通过所述应用程序调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量。

19.根据权利要求12所述的电子设备，其特征在于，若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值，具体包括：

若所述第一栅格数量为第三预设值，且所述第二界面的宽度和高度的比值大于第一预设比例，则所述第二栅格数量为第四预设值；

若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，包括：

若所述第一栅格数量为第五预设值，且所述第二界面的宽度和高度的比值小于或者等于所述第一预设比例，则所述第二栅格数量为第六预设值，所述第六预设值大于所述第四预设值。

20.根据权利要求12-15任一项所述的电子设备，其特征在于，所述第一元素为复合控件，所述复合控件包括第一子元素和第二子元素；所述复合控件对应的布局规则还包括所述第一子元素和所述第二子元素的相对位置，与所述第二界面的宽度之间的对应关系。

21.根据权利要求20所述的电子设备，其特征在于，所述布局规则具体包括，所述第一子元素和所述第二子元素的相对位置，与所述第一子元素和所述第二子元素的高度和宽度，以及所述第二界面的宽度和高度之间的对应关系。

22.根据权利要求21所述的电子设备，其特征在于，所述复合控件包括子元素A和子元素B所述布局规则包括：

在所述子元素A和所述子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿第二方向排列；其中，W表示所述第二界面的宽度，Width(A)表示所述子元素A的宽度，Width(B)表示所述子元素B的宽度；

在所述子元素A和所述子元素B沿所述第二方向排列时，若W＜Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿所述第一方向排列；

并且，在所述子元素A和所述子元素B沿所述第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，所述滚动条用于滚动显示所述子元素A和所述子元素B；其中，H表示所述第二界面的高度，Height(A)表示所述子元素A的高度，Height(B)表示所述子元素B的高度，vertialMargin表示所述屏幕在所述第一方向上的空边的尺寸。

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

24.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1-11中任一项所述的界面的动态布局方法。

25.一种芯片系统，其特征在于，所述芯片系统应用于电子设备；所述芯片系统包括一个或多个接口电路和一个或多个处理器；所述接口电路和所述处理器通过线路互联；所述接口电路用于从所述电子设备的存储器接收信号，并向所述处理器发送所述信号，所述信号包括所述存储器中存储的计算机指令；当所述处理器执行所述计算机指令时，所述电子设备执行如权利要求1-11中任一项所述的界面的动态布局方法。

Images