CN111190681A

CN111190681A - 显示界面适配方法、显示界面适配设计方法和电子设备

Info

Publication number: CN111190681A
Application number: CN201911414597.3A
Authority: CN
Inventors: 周轩
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2019-12-31
Filing date: 2019-12-31
Publication date: 2020-05-22
Also published as: WO2021135730A1

Abstract

本申请公开了一种显示界面适配方法、显示界面适配设计方法、装置、电子设备及存储介质。其中，显示界面适配方法包括：获取屏幕分辨率；根据所述屏幕分辨率确定栅格属性的值；获取目标元素的布局参数，其中，所述目标元素的布局参数采用所述栅格属性描述；根据所述目标元素的布局参数和所述栅格属性的值，显示所述目标元素。采用该显示界面适配方法能够实现不同终端产品在界面适配上的效率，实现一次设计多分辨率适配的功能。

Description

显示界面适配方法、显示界面适配设计方法和电子设备

【技术领域】

本申请涉及通信技术领域，尤其涉及一种显示界面适配方法、显示界面适配设计方法和电子设备。

【背景技术】

目前，终端产品的屏幕分辨率和屏幕尺寸的种类越来越多，除了手机和平板的横竖屏界面之外，APP(Application，应用程序)还需要在折叠屏、车载、电视等产品上进行界面适配，这给开发者带来了大量的重复设计工作量，在界面适配上的效率较低。

【发明内容】

有鉴于此，本申请实施例提供了一种显示界面适配方法、显示界面适配设计方法、装置、电子设备及存储介质，用以解决不同终端产品在界面适配上效率较低的问题。

第一方面，本申请实施例提供了一种显示界面适配方法，包括：

获取屏幕分辨率；

根据所述屏幕分辨率确定栅格属性的值；

获取目标元素的布局参数，其中，所述目标元素的布局参数采用所述栅格属性描述；

根据所述目标元素的布局参数和所述栅格属性的值，显示所述目标元素。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，其中，所述第一栅格属性用于表示元素距离屏幕边界的距离，采用第一宽度作为度量单位，所述第二栅格属性用于表示邻近的所述元素之间的距离，采用第二宽度作为度量单位，所述第三栅格属性用于表示元素的宽度，采用栅格宽度作为度量单位。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述根据所述屏幕分辨率确定栅格属性的值，包括：

查找第一映射关系表，其中，所述第一映射关系表存储所述屏幕分辨率和栅格属性的值的映射关系；

根据所述屏幕分辨率、所述屏幕分辨率和栅格属性的值的映射关系确定所述栅格属性的值。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述目标元素包括目标标识，所述获取目标元素的布局参数，包括：

查找第二映射关系表，其中，所述第二映射关系表存储元素的布局参数和所述元素的标识的映射关系，所述元素的布局参数采用栅格属性描述；

根据所述目标标识、所述元素的布局参数和所述元素的标识的映射关系获取所述目标元素的布局参数。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述屏幕上显示一个或多个所述显示界面，在一个所述显示界面中，包括一个或多个显示子界面。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述方法还包括：

当检测到所述显示界面进行横竖屏切换时，刷新所述栅格属性的值；

根据所述屏幕分辨率确定栅格数量；

当所述栅格数量满足预设条件时，根据所述栅格数量调整所述显示界面的内容布局。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述当所述栅格数量满足预设条件时，根据所述栅格数量调整所述显示界面的内容布局，包括：

当所述栅格数量小于第一预设条件时，所述显示界面包括第一预设列数的子界面，其中，所述第一预设列数的子界面的宽度根据所述栅格数量确定；

当所述栅格数量大于或等于第一预设条件时，所述显示界面包括第二预设列数的子界面，其中，所述第二预设列数的子界面的宽度根据所述栅格数量确定。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，当所述方法应用于折叠屏电子设备时，所述折叠屏电子设备包括左屏幕和右屏幕，所述方法包括：

获取所述左屏幕的屏幕分辨率，以及，获取所述右屏幕的屏幕分辨率；

根据所述左屏幕的屏幕分辨率确定所述左屏幕的栅格属性的值，以及，根据所述右屏幕的屏幕分辨率确定所述右屏幕的栅格属性的值；

获取左屏幕上显示的第一目标元素的布局参数，以及，获取右屏幕上显示的第二目标元素的布局参数，其中，所述第一目标元素的布局参数、第二目标元素的布局参数采用所述栅格属性描述；

左屏幕根据所述第一目标元素的布局参数和所述左屏幕的栅格属性的值，显示所述第一目标元素；

右屏幕根据所述第二目标元素的布局参数和所述右屏幕的栅格属性的值，显示所述第二目标元素。

第二方面，本申请实施例提供了一种显示界面适配装置，包括：

第一获取模块，用于获取屏幕分辨率；

第一确定模块，用于根据所述屏幕分辨率确定栅格属性的值；

第二获取模块，用于获取目标元素的布局参数，其中，所述目标元素的布局参数采用所述栅格属性描述；

第一显示模块，用于根据所述目标元素的布局参数和所述栅格属性的值，显示所述目标元素。

进一步地，所述栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，其中，所述第一栅格属性用于表示元素距离屏幕边界的距离，采用第一宽度作为度量单位，所述第二栅格属性用于表示邻近的所述元素之间的距离，采用第二宽度作为度量单位，所述第三栅格属性用于表示元素的宽度，采用栅格宽度作为度量单位。

进一步地，所述第一确定模块具体用于：

进一步地，所述目标元素包括目标标识，所述第二获取模块具体用于：

进一步地，所述屏幕上显示一个或多个所述显示界面，在一个所述显示界面中，包括一个或多个显示子界面。

进一步地，所述装置还包括：

刷新单元，用于当检测到所述显示界面进行横竖屏切换时，刷新所述栅格属性的值；

获取单元，用于获取目标元素的布局参数，其中，所述目标元素的布局参数采用所述栅格属性描述；

显示单元，用于根据所述目标元素的布局参数和所述栅格属性的值，显示所述目标元素。

进一步地，所述装置还包括：

确定单元，用于根据所述屏幕分辨率确定栅格数量；

调整单元，用于当所述栅格数量满足预设条件时，根据所述栅格数量调整所述显示界面的内容布局。

进一步地，所述调整单元具体用于：

进一步地，当执行所述装置中的各模块、单元功能的主体为折叠屏电子设备时，所述装置包括：

第四获取模块，用于获取所述左屏幕的屏幕分辨率，以及，获取所述右屏幕的屏幕分辨率；

第三确定模块，用于根据所述左屏幕的屏幕分辨率确定所述左屏幕的栅格属性的值，以及，根据所述右屏幕的屏幕分辨率确定所述右屏幕的栅格属性的值；

第五获取模块，用于获取左屏幕上显示的第一目标元素的布局参数，以及，获取右屏幕上显示的第二目标元素的布局参数，其中，所述第一目标元素的布局参数、第二目标元素的布局参数采用所述栅格属性描述；

第三显示模块，用于左屏幕根据所述第一目标元素的布局参数和所述左屏幕的栅格属性的值，显示所述第一目标元素；

第四显示模块，用于右屏幕根据所述第二目标元素的布局参数和所述右屏幕的栅格属性的值，显示所述第二目标元素。

第三方面，本申请实施例提供了一种显示界面适配设计方法，包括：

确定绘制屏幕分辨率；

根据所述绘制屏幕分辨率确定栅格属性的值并生成栅格；

获取目标元素；

采用所述栅格，根据栅格属性的值显示所述目标元素。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述根据所述绘制界面分辨率生成栅格，包括：

查找第三映射关系表，其中，所述第三映射关系表存储所述绘制屏幕分辨率和栅格属性的值的映射关系；

根据所述绘制屏幕分辨率和所述栅格属性的值的映射关系生成所述栅格。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述采用所述栅格，显示所述目标元素在所述绘制界面上，包括：

当所述目标元素被拖拉到所述绘制界面上时，采用所述栅格的吸附功能将所述目标元素吸附对齐到栅格上，显示所述目标元素。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述采用所述栅格的吸附功能将所述目标元素吸附对齐到栅格上，包括：

当所述栅格的吸附功能为左侧吸附功能时，将所述目标元素左对齐到栅格上；

当所述栅格的吸附功能为右侧吸附功能时，将所述目标元素左对齐到栅格上；

当所述栅格的吸附功能为居中吸附功能时，将所述目标元素居中对齐到栅格上。

如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述在采用所述栅格，显示所述目标元素在所述绘制界面上之后，还包括：

根据所述目标元素的布局参数生成布局参考标注，其中，所述布局参考标注采用所述栅格属性表示，所述布局参考标注在所述绘制屏幕上显示或者存储在文本中。

第四方面，本申请实施例提供了一种显示界面适配设计装置，包括：

第二确定模块，用于确定绘制屏幕分辨率；

生成模块，用于根据所述绘制屏幕分辨率确定栅格属性的值并生成栅格；

第三获取模块，用于获取目标元素；

第二显示模块，用于采用所述栅格，根据栅格属性的值显示所述目标元素。

进一步地，所述生成模块具体用于：

进一步地，所述第二显示模块包括：

吸附单元，用于当所述目标元素被拖拉到所述绘制界面上时，采用所述栅格的吸附功能将所述目标元素吸附对齐到栅格上，显示所述目标元素。

进一步地，所述吸附单元具体用于：

进一步地，所述装置还包括：

生成单元，用于根据所述目标元素的布局参数生成布局参考标注，其中，所述布局参考标注采用所述栅格属性表示，所述布局参考标注在所述绘制屏幕上显示或者存储在文本中。

第五方面，一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面或第三方面所述方法的步骤。

第六方面，本申请实施例提供了一种计算机可读存储介质，包括：计算机程序，所述计算机程序被处理器执行时实现上述第一方面或第三方面所述方法的步骤。

在本申请实施例中，通过引入栅格系统，从设计者和开发者的角度共同出发，采用栅格属性描述目标元素的布局参数，使得设计者和开发者能够通过同样的参数描述方式进行沟通，无需考虑在不同屏幕分辨率下目标元素所占用的实际像素个数，并且，通过第一映射关系表，使得目标元素在不同屏幕分辨率下能够根据不同的栅格属性的值自适应调整目标元素在显示界面上的实际大小，达到显示界面适配的效果，提高界面适配的效率。

【附图说明】

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。

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

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

图3是本申请一实施例提供的一种约束布局的示意图；

图4是本申请一实施例提供的一种显示界面采用栅格划分的示意图；

图5是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图6是本申请一实施例提供的一种在界面设计阶段利用栅格进行排版的示意图；

图7是本申请一实施例提供的一种在界面设计后自动生成标注的示意图；

图8a是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图8b是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图8c是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图9a是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图9b是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图10a是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图10b是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图11是本申请一实施例提供的又一种显示界面采用栅格划分的示意图；

图12是本申请一实施例提供的一种显示界面适配装置的原理框图；

图13是本申请一实施例提供的一种显示界面适配设计装置的原理框图。

【具体实施方式】

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

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

在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

图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等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备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可以包括一个或多个接口。接口可以包括集成电路(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可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器110通过运行存储在内部存储器121的指令，和/或存储在设置于处理器中的存储器的指令，执行电子设备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还可以用于导航，体感游戏场景。

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

骨传导传感器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的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

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

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

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

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

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

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

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

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

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

电话管理器用于提供电子设备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绘图的绘图引擎。

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

下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。

当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用框架层的接口，启动相机应用，进而通过调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。

现有技术中，采用iOS和Android等操作系统的电子设备支持约束布局(constraint layout)技术，这种约束布局技术需要开发者定义显示界面中各个元素之间的约束关系，以在显示界面上按开发者的想法将各个元素展示出来。

例如，如图3所示，对于三个控件(控件为元素中的一种)的布局有以下常见的四种布局模式：

1、Spread：表示平均分配控件边距外的空白，从图3中可知，控件边距外的空白共有4处，采用该布局模式将把这些空白设为等距，实现控件边距外空白的平均分配。

2、Spread inside：表示从左至右的第一个控件的左侧和从左至右的最后一个控件的右侧不分配空白，然后对显示界面中剩余的空白处进行分配。

3、Weighted：表示通过设置三个控件的权重来分配控件。

4、Packed：表示三个控件挨在一起，从左至右的第一个控件和第三个控件的两边侧默认平均分配剩余空白，进一步地，还可以通过在属性面板中调整两边侧剩余空白的占比。

可以理解地，以上常见的四种布局模式对使用者的抽象思维能力要求较高，需要从各种屏幕尺寸上总结出控件布局的约束关系。当约束布局的使用者为UX(Userexperience，用户体验)设计师时，UX设计师将更加难以理解和使用约束布局。由于当前开发者的操作环境是开发工具(如Android Studio和Xcode)，而UX设计师的操作环境是设计工具(如Sketch)，与开发者的操作环境存在差异，即便是UX设计师理解了屏幕尺寸上控件布局的约束关系，也难以将约束布局的规则传递给开发者，开发者和UX设计师之间存在沟通障碍。

本申请从开发者和UX设计者的角度出发，提出在设计工具(设计态)和操作系统(运行态)的显示界面适配的解决方法，以提高效率，实现元素的一次设计多分辨率适配的目的，并且，能够让开发者和UX设计师之间实现通畅的沟通。在一实施例中，如图4所示，屏幕上显示界面采用栅格系统表示，不同屏幕分辨率的显示界面可以映射到有限的栅格数量上(栅格在图4中采用阴影的方式示出)。

在一实施例中，栅格系统包括栅格属性，栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，其中，第一栅格属性用于表示显示单元元素距离屏幕边界的距离，采用第一宽度作为度量单位，第二栅格属性用于表示邻近的显示单元元素之间的距离，采用第二宽度作为度量单位，第三栅格属性用于表示显示单元元素的宽度，采用栅格宽度作为度量单位。

具体地，栅格系统是一种描述界面的度量单位。栅格系统中包括有多个栅格，APP中的不同元素可以采用栅格属性来描述其宽度。其中，栅格系统包括第一栅格属性Margins、第二栅格属性Gutters和第三栅格属性Columns三种栅格属性，Margins用来控制元素距离屏幕边缘的距离关系，采用m作为度量单位，Gutters用来控制元素和元素之间的距离关系，采用g作为度量单位，Columns表示界面的内容宽度，采用c作为度量单位，对于不同分辨率的电子设备，可以定义栅格属性的值，如在不同屏幕分辨率下，1c对应的实际像素个数不同，特别地，1c也表示栅格宽度。

栅格属性Margins、Gutters和Columns如图4中所示，可以看到在屏幕的显示界面上，最左侧的栅格距离屏幕左边界的宽度，或者，最右侧的栅格距离屏幕右边界的宽度表示栅格属性Margins；将显示界面划分的栅格的宽度表示栅格属性Columns；栅格之间的宽度表示栅格属性Gutters。可以理解地，利用栅格属性Margins、Gutters和Columns可以描述显示界面上各元素在显示界面水平方向上的位置关系。

可以理解地，在不同屏幕分辨率所显示的显示界面上，像素个数差别将造成元素的适配问题。例如，同一尺寸大小的屏幕A和屏幕B，屏幕A的分辨率(屏幕像素总数)为1280*720(px)，屏幕B的分辨率为1920*1080(px)，其中，“*”中前的数字表示屏幕长度像素个数，“*”中后的数字指的是屏幕宽度像素个数。同一尺寸大小的屏幕A和屏幕B由于分辨率不同，其屏幕上的像素密度值也是不同的，例如，在安卓开发中，xhdpi表示屏幕分辨率为1280*720(px)，其像素密度值dpi为320；xxhdpi表示屏幕分辨率为1920*1080(px)，其像素密度值dpi为480。由已知的换算关系：1dp的长度相当于一个160dpi的屏幕上一个物理像素的长度可知，在xhdpi的像素密度下，1dp＝2px，在xxhdpi的像素密度下，1dp＝3px，其中，dp单位称为独立像素，是一种虚拟单位，又称设备无关像素。

可以理解地，在显示界面配置的设计过程中常用dp去描述元素的宽度，而当屏幕的像素密度值不同时，采用dp进行描述显然会出现元素不适配的问题，对于目前市面各种各样的屏幕尺寸、屏幕分辨率的电子设备来说，开发者需对每一种不同电子设备机型都需要单独进行适配，否则，在打开同一个APP时，APP上元素的显示将无法达到预期的展示效果。

具体地，在设计工具(设计态)实现元素的一次设计多分辨率适配时，显示界面适配设计方法包括如下步骤：

S10：获取绘制屏幕分辨率。

其中，绘制屏幕是指UX设计师进行界面设计时使用的屏幕，以在绘制屏幕上显示出设计后的界面，实现对界面的设计效果。绘制屏幕可以是电子设备整个的屏幕，也可以是在屏幕上部分显示的弹窗界面、分屏界面等界面所对应的屏幕部分。

S20：根据绘制屏幕分辨率确定栅格属性的值并生成栅格，其中，栅格属性用于绘制屏幕的度量参考。

可以理解地，栅格属性的值根据绘制屏幕分辨率的改变而改变，如栅格属性Column的值为1c时，在不同绘制屏幕分辨率下1c对应的实际像素个数是不同的。栅格的宽度为1c，在确定栅格属性的值后可确定栅格的数量并采用栅格将绘制屏幕划分。

S30：获取目标元素。

其中，目标元素可以是指UX设计师选中的控件，也可以是选中的文字、图片等其他元素。

S40：采用栅格，根据栅格属性的值显示目标元素。

可以理解地，UX设计师可以借助栅格进行界面设计，以更好地进行排版，并利用栅格属性的值设计目标元素的大小，使得目标元素在该栅格系统下能够有较佳的展示效果，实现目标元素在绘制界面上的适配。

在一实施例中，采用栅格系统，利用栅格属性可以解决在不同屏幕分辨率所显示的显示界面上，由于像素个数差别造成的元素适配问题。例如，UX设计师在设计工具中，将通过预先建立的第三映射关系表，利用该第三映射关系表实现元素适配，其中，该第三映射关系表存储绘制屏幕分辨率和栅格属性的值的映射关系。当UX设计师设定好某个屏幕分辨率时，设计工具将根据第三映射关系表，自动画出屏幕上的栅格，例如：当屏幕分辨率为x*y时，栅格数量为n，栅格属性Margins＝m，Gutters＝g，Columns＝c。其中，显示界面上控件(如按钮)的宽度属性需要通过栅格属性来描述，例如控件的宽度不应描述为60dp，而应该描述为1c。可以理解地，当采用栅格属性描述界面上控件的宽度属性时，在该确定的屏幕分辨率下，1c宽度对应的实际像素个数是确定的，在其他屏幕分辨率下，1c宽度则对应其他的实际像素个数，因此，该栅格属性已根据屏幕分辨率作了适配，UX设计师只需关心如何在栅格系统上进行布局即可，而无需考虑在不同屏幕分辨率下控件的宽度的实际像素个数。

可以理解地，元素除了控件外，还包括但不限于图片、文字等元素，像图片、文字等元素可以采用固定的大小限定展示的效果，也可以采用栅格属性进行描述，在此不作限定。

在不同电子设备中，采用栅格系统划分显示界面的效果图如图5所示。从图5中可以看出，不同尺寸、不同屏幕分辨率的电子设备得到的栅格数量可能是不同的，即使栅格数量相同，其栅格属性的值也可能是不同的。

在一实施例中，当手机竖屏时手机的屏幕分辨率为2560*1440(px)时，手机横屏时手机的屏幕分辨率为1440*2560(px)，可以理解地，虽然两者在屏幕像素总数上是相同的，但从用户使用角度上存在区别，手机竖屏和手机横屏时的屏幕分辨率认为是不同的分辨率。手机竖屏和手机横屏在采用栅格系统划分后，如图5所示，手机竖屏划分得到4个栅格，而手机横屏划分得到8个栅格。

在一实施例中，折叠屏竖屏和折叠屏横屏在采用栅格系统划分后，折叠屏竖屏和折叠屏横屏均得到8个栅格。尽管两者的栅格数量相同，但由于屏幕分辨率(区分横屏、竖屏)是不同的，其栅格属性的值也是不同的。例如，折叠屏竖屏1c＝60dp，而折叠屏横屏1c＝90dp。可以理解地，UX设计师在设计APP界面时，可以不用考虑不同屏幕分辨率适配的问题，直接统一采用栅格属性对元素进行描述即可。

在一实施例中，如图6所示，UX设计师在APP界面设计过程中，可通过控件栏将控件(包括但不限于采用文本表示的按钮、单选按钮、下拉控件、微调框等)拖拉或者点击选择到设计工具的画布上，此时，可以通过吸附功能将控件对齐到栅格上，其中，对齐具体可以是左对齐，也可以是居中对齐、右对齐或其他预设的对齐方式。其中，该吸附功能是建立在栅格上实现的，当将控件拖到设计工具的画布上时，控件将会在靠近栅格的位置触发预置的吸附操作。例如，在距离控件最近的栅格上完成吸附，并以栅格为参考将控件对齐，其中，左对齐时，控件将吸附并对齐到栅格的左边界上。本实施例中，采用该吸附功能可以充分利用栅格划分显示界面的排版优势，UX设计师可以在栅格的基础上进行高效、规范的设计。

在一实施例中，如图7所示，UX设计师在APP界面设计完成后，设计图上可自动生成与元素布局相关的参数的标注，例如，点击控件a，可以在屏幕上显示控件a的宽度为1c，控件a和控件b之间的横向距离为1g、控件a距离屏幕左边界的距离为1c+1m+1g等标注。进一步地，也可以采用文本形式对APP界面上与元素布局相关的参数进行描述。可以理解地，开发者在开发工具进行界面设计时，同样也是采用标注中栅格属性的方式对元素布局相关的参数进行描述，开发者无需关心不同尺寸、不同屏幕分辨率的电子设备的显示界面适配问题。

具体地，在操作系统(运行态)实现元素的一次设计多分辨率适配时，显示界面适配方法包括如下步骤：

S50：获取屏幕分辨率。

具体地，屏幕分辨率可以包括手机、手表、平板电脑和电视机等电子设备屏幕的分辨率。

S60：根据屏幕分辨率确定栅格属性的值，其中，栅格属性用于显示界面的度量参考。

其中，栅格属性是指如Margins、Gutters和Columns的属性，对于不同屏幕分辨率的栅格属性的值是不同的，如屏幕分辨率为1280*720(px)和屏幕分辨率为1920*1080(px)的栅格属性的值1c对应的实际像素个数是不同的。

S70：获取目标元素的布局参数，其中，目标元素的布局参数采用栅格属性描述。

其中，目标元素具体可以是指在打开一APP页面时待显示的元素，如按钮等控件等。以控件作为目标元素为例，目标元素的布局参数具体可以是指控件的尺寸如宽度，以及其他与位置相关的参数，如采用Gutters和Columns的栅格属性描述的布局参数。

进一步地，元素的布局参数和元素的标识的映射关系在设计阶段后存储在第二映射关系表中，根据目标元素的目标标识，如目标元素的ID为a，则可获取该目标元素的布局参数，并且，该布局参数采用栅格属性描述，如目标元素的宽度为1c。

S80：根据目标元素的布局参数和栅格属性的值，显示目标元素。

可以理解地，显示界面是根据电子设备屏幕的分辨率显示，显示界面上具体可包括目标元素，以及其他类型的元素。

可以理解地，目标元素的布局参数在不同屏幕分辨率下的栅格属性描述是相同的，如控件a的宽度在屏幕分辨率为1280*720(px)和分辨率为1920*1080(px)下的宽度均表示为1c，但由于屏幕分辨率的不同，两者的栅格属性的值是不同的，也即控件a在不同显示界面下宽度的实际尺寸不同。

在一实施例中，在APP运行阶段，电子设备可以获取当前APP窗口尺寸，其中，在APP页面覆盖整个屏幕的情况下，APP窗口尺寸与屏幕尺寸相同。在得到当前APP窗口尺寸后，电子设备查询预先存储的第一映射关系表，根据该第一映射关系表得到Margins、Gutters和Columns的值与实际像素个数之间的对应关系，其中，该第一映射关系表存储屏幕分辨率和栅格属性的值的映射关系。例如，控件a的宽度为1c，栅格属性Columns在该电子设备的屏幕分辨率下1c＝60dp，则APP采用栅格属性值1c填入控件的宽度，能够确定控件所占用的实际像素个数。

可以理解地，在不同电子设备运行同一APP时，各电子设备都将先获取当前APP窗口尺寸，且统一采用栅格属性描述控件的参数尺寸。各电子设备通过查询第一映射关系表，能够确定当前APP窗口尺寸与栅格属性的值的映射关系，得到栅格属性的值与实际像素个数之间的对应关系，从而，在不同电子设备运行同一APP时，可以统一采用栅格属性描述控件的参数尺寸，分别确定不同APP窗口尺寸下控件的实际距离，使得控件的参数尺寸与APP窗口尺寸适配。

例如，屏幕C的分辨率(屏幕像素总数)为1280*720(px)，屏幕D的分辨率为1920*1080(px)，同一APP在屏幕C和屏幕D上显示，且APP页面覆盖屏幕C和屏幕D。当控件a的宽度采用栅格属性描述为1c时(除屏幕C和屏幕D，在其他任何屏幕上的控件a的宽度也是采用1c进行描述)，显然，根据第一映射关系表，控件a在屏幕C上显示时与在屏幕D上显示时所占用的实际像素个数是不同的。可以理解地，由于控件a的宽度在屏幕C上显示时与在屏幕D上显示时都是1c，控件a的显示效果是适配界面的。

在一实施例中，在用户使用电子设备过程中经常会出现APP横竖屏切换的情况。此时，APP显示界面上的栅格数量可能会发生变化。具体地，当电子设备检测到出现横竖屏切换时，将刷新获取APP窗口的尺寸大小(区分竖屏和横屏，例如竖屏为1280*720(px)，横屏为720*1280(px))并根据APP窗口的尺寸大小重新划分栅格，以及，重新获取横竖屏切换后的第一映射关系表，从而重新调整栅格属性的值(如在竖屏状态下有1c＝60dp，横屏状态下调整为1c＝90dp，其中，dp可以根据屏幕分辨率转换为具体像素个数)，达到实时适配的显示效果。

进一步地，屏幕上显示一个或多个显示界面，在一个显示界面中，包括一个或多个显示子界面。可以理解地，一个屏幕可划分为一个或多个显示界面，以对元素进行展示。进一步地，在一个显示界面中，还可以有一个或多个的显示子界面。

在一实施例中，当用户使用电子设备过程中采用分屏功能时，此时将分屏的多个显示窗口作为独立的显示窗口，各显示窗口刷新获取其显示窗口的屏幕分辨率，并根据各显示窗口的屏幕分辨率重新划分栅格，以及，分别重新获取分屏后各独立显示窗口的第一映射关系表，从而重新调整栅格属性的值，以达到实时适配的显示效果。

进一步地，当用户使用电子设备中过程出现悬浮窗口或其他独立显示窗口时，同样地，悬浮窗口或其他独立显示窗口获取其显示窗口的屏幕分辨率，并根据独立显示窗口的屏幕分辨率重新划分栅格，以及，分别重新获取各独立显示窗口的第一映射关系表，从而重新调整栅格属性的值，达到实时适配的显示效果。

进一步地，APP还可以根据栅格属性进行布局内容的调整。

具体地，根据屏幕分辨率确定栅格数量，当栅格数量小于第一预设条件时，显示界面包括第一预设列数的子界面，其中，第一预设列数的子界面的宽度根据栅格数量确定；当栅格数量大于或等于第一预设条件时，显示界面包括第二预设列数的子界面，其中，第二预设列数的子界面的宽度根据栅格数量确定。

如图8a、图8b和图8c所示，以邮箱APP为例，当屏幕宽度≤4栅格时，APP上显示1列操作界面；当屏幕宽度>4栅格时，APP上显示2列操作界面，包括左操作界面和右操作界面，其中，当4栅格<屏幕宽度≤8栅格时，左操作界面占3栅格，当屏幕宽度>8栅格时，左操作界面占4栅格。

可以理解地，在运行阶段时，电子设备根据上述布局内容的逻辑确定APP内左操作界面和右操作界面所对应的屏幕分辨率，再通过查询屏幕分辨率和栅格属性的映射关系表，进行布局内容的自适应调整。具体地，如图8a所示，当屏幕宽度为360dp的竖屏手机运行邮箱APP时，其屏幕宽度采用4栅格表示，则邮箱APP只显示1列操作界面；如图8b所示，当屏幕宽度为733dp的竖屏折叠屏手机运行邮箱APP时，其屏幕宽度采用8栅格表示，邮箱APP显示左操作界面和右操作界面，其中，左操作界面占3栅格；如图8c所示，当屏幕宽度为1024dp的横屏平板电脑运行邮箱APP时，其屏幕宽度采用12栅格表示，邮箱APP显示左操作界面和右操作界面，其中，左操作界面占4栅格。在一实施例中，通过栅格属性进行APP布局内容的调整，能够在不同电子设备下对布局内容作出适应性调整，使得APP具有更高的可操作性。

在一实施例中，如图8b和如图8c所示，在折叠屏竖屏和平板电脑横屏运行邮箱APP时，右操作界面右下方包括不同的元素，包括图标(回复、回复全部、转发、删除和更多选项操作)和文字元素，具体地，对于这些元素可以采用固定大小的方式显示，也可以采用栅格属性描述的方式限定元素的空间位置关系。

在一实施例中，如图9a和9b所示，在手机横竖屏切换时，显示界面上控件基于栅格进行了变化，从图9a和9b中可以看出，在手机竖屏时，栅格的宽度较手机横屏时窄，则手机竖屏时1c对应的实际像素个数相对手机横屏时1c对应的实际像素个数较少。可以理解地，由于手机在横竖屏切换时，其屏幕分辨率发生了变化(分辨率a*b不等于b*a)，则控件需要根据刷新的第一映射关系表，重新调整控件栅格属性的值。从图9a和图9b中可以看出，控件c从手机竖屏切换到手机横屏时，假设手机横屏时的控件c宽度仍为1c，则控件c在手机横屏时显示的实际像素个数较多，从肉眼观察上比在手机竖屏时显示的要大一些。

需要说明的是，控件c在手机横屏时，其宽度不一定是1c，可以是采用栅格属性Columns表示的其他值，如0.8c等。

在获取手机横屏的屏幕分辨率时，也对应获取了第二映射关系表。可以理解地，若在手机横竖屏切换后控件c仍保持原有的控件尺寸1c，则控件有可能不符合手机横屏的APP适配，需要对手机横屏的控件c的控件尺寸也进行修改，这些控件尺寸的差别均存储在第二映射关系表中，在手机横竖屏切换时将同步更新控件的尺寸等布局参数。

在一实施例中，如图10a所示，折叠屏手机在展开状态下左右分屏。从图10a中可以看出，折叠屏手机在展开状态下采用左右分屏的功能后，拥有两个独立的显示界面，并且，该两个独立的显示界面的栅格数量相同，采用的屏幕分辨率和栅格属性的映射关系表也相同。可以理解地，折叠屏手机均分为两个分辨率相同的屏幕，包括左屏幕和右屏幕，在该两屏幕的显示界面上，控件d的控件尺寸可以采用同样的栅格属性的值描述，例如，控件d在左屏幕显示界面上的宽度为1c，且若1c＝60dp，那么，控件d在右屏幕上的宽度也为1c，且1c＝60dp，此时，控件c的控件尺寸在两屏幕上显示的实际大小是相同的。

可以理解地，折叠屏手机在折叠状态下左右分屏与在展开状态下左右分屏类似，折叠屏手机在折叠状态下分成了两个独立的显示界面，同样地，该两个独立的显示界面的栅格数量相同，采用的第一映射关系表也相同。当控件d在折叠后的第一屏幕显示界面上的宽度为1c，并且1c＝60dp，则控件d在折叠后的第二屏幕的宽度也为1c，且1c＝60dp。

在一实施例中，如图10b所示，折叠屏手机在折叠状态下左右分屏。从图10b中可以看出，折叠屏手机在折叠状态下采用左右分屏的功能后，由于折叠后的第一屏幕存在固定功能显示区(如显示时钟的固定功能显示区)，折叠后的第一屏幕的分辨率和折叠后的第二屏幕的分辨率不同，此时两者采用的第一映射关系表不同。可以理解地，控件d在折叠后的第一屏幕和折叠后的第二屏幕采用相同的宽度1c时，其在两者的显示界面上的实际大小是存在区别的，若需保持控件d在两者的显示界面上的实际大小相同，则需要调整控件d在折叠后的第一屏幕的宽度，或者，调整控件d在折叠后的第二屏幕的宽度。例如，折叠后的第一屏幕的1.2c＝60dp，折叠后的第二屏幕的1c＝60dp，则控件d在折叠后的第二屏幕的宽度为1c时，为了保持折叠后的第一屏幕的控件e显示的大小与折叠后的第二屏幕的控件d显示的大小相同，需要将折叠后的第一屏幕的控件e的宽度设置为1.2c。

在一实施例中，如图11所示，平板电脑弹出悬浮窗口。从图11中可以看出，在屏幕上弹出了悬浮窗口1和悬浮窗口2。可以理解地，当屏幕上弹出悬浮窗口1和悬浮窗口2时，将把弹出的悬浮窗口1和悬浮窗口2作为显示子界面看待。同样地，弹出的悬浮窗口1和悬浮窗口2采用栅格系统进行划分：通过分别获取悬浮窗口1和悬浮窗口2的第一映射关系表，确定悬浮窗口1和悬浮窗口2的栅格数量，以及栅格属性的值，实现栅格的划分。可以理解地，弹出的悬浮窗口可看作独立的显示子界面，在悬浮窗口的控件将按照显示子界面的所对应的屏幕分辨率进行适配，达到期望的展示效果。

在一实施例中，对于手表横竖屏切换的情况，当手表屏幕为正方形时，屏幕分辨率为a*a时，手表横竖屏切换后的栅格数量及栅格属性的值不变；当手表屏幕分辨率为a*b时，手表横竖屏切换后的栅格数量可能相同，但栅格属性的值不同。可以理解地，控件在屏幕显示界面上的显示将根据其尺寸及栅格属性的值确定。

在一实施例中，对于电视机上出现多窗口的情况，如电视机上同时出现分屏和悬浮窗口的情况，电视机将获取分屏出现的窗口和悬浮窗口所对应的屏幕分辨率，以及与屏幕分辨率对应的第一映射关系表。分屏出现的窗口和悬浮窗口将根据第一映射关系表划分栅格，并显示各自窗口中的控件。其中，同种类型的控件f和控件f’出现在悬浮窗口和分屏的窗口中，控件f和控件f’在悬浮窗口和分屏的窗口中的宽度均为1c，由于悬浮窗口和分屏的窗口的栅格属性的值不同，在悬浮窗口中的控件f比在分屏窗口中的控件f’的实际宽度要小，但适配于悬浮窗口。同样地，分屏窗口中的控件f’也适配于分屏的窗口。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

基于实施例中所提供的显示界面适配方法，本申请实施例进一步给出实现上述方法实施例中各步骤及方法的装置实施例。

图12示出与实施例中显示界面适配方法一一对应的显示界面适配装置的原理框图。如图12所示，该显示界面适配装置包括第一获取模块50、第一确定模块60、第二获取模块70和第一显示模块80。其中，第一获取模块50、第一确定模块60、第二获取模块70和第一显示模块80的实现功能与实施例中显示界面适配方法对应的步骤一一对应，为避免赘述，本实施例不一一详述。

第一获取模块50，用于获取屏幕分辨率。

第一确定模块60，用于根据屏幕分辨率确定栅格属性的值。

第二获取模块70，用于获取目标元素的布局参数，其中，目标元素的布局参数采用栅格属性描述。

第一显示模块80，用于根据目标元素的布局参数和栅格属性的值，显示目标元素。

进一步地，栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，其中，第一栅格属性用于表示元素距离屏幕边界的距离，采用第一宽度作为度量单位，第二栅格属性用于表示邻近的元素之间的距离，采用第二宽度作为度量单位，第三栅格属性用于表示元素的宽度，采用栅格宽度作为度量单位。

进一步地，第一确定模块具体用于：

查找第一映射关系表，其中，第一映射关系表存储屏幕分辨率和栅格属性的值的映射关系；

根据屏幕分辨率、屏幕分辨率和栅格属性的值的映射关系确定栅格属性的值。

进一步地，目标元素包括目标标识，第二获取模块具体用于：

查找第二映射关系表，其中，第二映射关系表存储元素的布局参数和元素的标识的映射关系，元素的布局参数采用栅格属性描述；

根据目标标识、元素的布局参数和元素的标识的映射关系获取目标元素的布局参数。

进一步地，屏幕上显示一个或多个显示界面，在一个显示界面中，包括一个或多个显示子界面。

进一步地，装置还包括：

刷新单元，用于当检测到显示界面进行横竖屏切换时，刷新栅格属性的值；

获取单元，用于获取目标元素的布局参数，其中，目标元素的布局参数采用栅格属性描述；

显示单元，用于根据目标元素的布局参数和栅格属性的值，显示目标元素。

进一步地，装置还包括：

确定单元，用于根据屏幕分辨率确定栅格数量；

调整单元，用于当栅格数量满足预设条件时，根据栅格数量调整显示界面的内容布局。

进一步地，调整单元具体用于：

当栅格数量小于第一预设条件时，显示界面包括第一预设列数的子界面，其中，第一预设列数的子界面的宽度根据栅格数量确定；

当栅格数量大于或等于第一预设条件时，显示界面包括第二预设列数的子界面，其中，第二预设列数的子界面的宽度根据栅格数量确定。

进一步地，当执行装置中的各模块、单元功能的主体为折叠屏电子设备时，装置包括：

第四获取模块，用于获取左屏幕的屏幕分辨率，以及，获取右屏幕的屏幕分辨率；

第三确定模块，用于根据左屏幕的屏幕分辨率确定左屏幕的栅格属性的值，以及，根据右屏幕的屏幕分辨率确定右屏幕的栅格属性的值；

第五获取模块，用于获取左屏幕上显示的第一目标元素的布局参数，以及，获取右屏幕上显示的第二目标元素的布局参数，其中，第一目标元素的布局参数、第二目标元素的布局参数采用栅格属性描述；

第四显示模块，用于右屏幕根据第二目标元素的布局参数和右屏幕的栅格属性的值，显示第二目标元素。

基于实施例中所提供的显示界面适配设计方法，本申请实施例进一步给出实现上述显示界面适配设计方法实施例中各步骤及方法的装置实施例。

图13示出与实施例中显示界面适配设计方法一一对应的显示界面适配设计装置的原理框图。如图13所示，该显示界面适配设计装置包括第二确定模块10、生成模块20、第三获取模块30和第二显示模块40。其中，第二确定模块10、生成模块20、第三获取模块30和第二显示模块40的实现功能与实施例中显示界面适配设计方法对应的步骤一一对应，为避免赘述，本实施例不一一详述。

第二确定模块10，用于确定绘制屏幕分辨率。

生成模块20，用于根据绘制屏幕分辨率确定栅格属性的值并生成栅格。

第三获取模块30，用于获取目标元素。

第二显示模块40，用于采用栅格，根据栅格属性的值显示目标元素。

进一步地，生成模块具体用于：

查找第三映射关系表，其中，第三映射关系表存储绘制屏幕分辨率和栅格属性的值的映射关系；

根据绘制屏幕分辨率和栅格属性的值的映射关系生成栅格。

进一步地，第二显示模块包括：

吸附单元，用于当目标元素被拖拉到绘制界面上时，采用栅格的吸附功能将目标元素吸附对齐到栅格上，显示目标元素。

进一步地，吸附单元具体用于：

当栅格的吸附功能为左侧吸附功能时，将目标元素左对齐到栅格上；

当栅格的吸附功能为右侧吸附功能时，将目标元素左对齐到栅格上；

当栅格的吸附功能为居中吸附功能时，将目标元素居中对齐到栅格上。

进一步地，装置还包括：

生成单元，用于根据目标元素的布局参数生成布局参考标注，其中，布局参考标注采用栅格属性表示，布局参考标注在绘制屏幕上显示或者存储在文本中。

本实施例提供一电子设备(如图1所示的电子设备100)，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现实施例中显示界面适配方法的步骤，或者，所述处理器执行所述计算机程序时实现实施例中显示界面适配设计方法的步骤，为避免赘述，在此不再一一叙述。

本实施例提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现实施例中显示界面适配方法，为避免重复，此处不一一赘述。或者，该计算机程序被处理器执行时实现实施例中显示界面适配装置中各模块/单元的功能，为避免重复，此处不一一赘述。

应当明确，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

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

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所存储的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims

1.一种显示界面适配方法，其特征在于，包括：

获取屏幕分辨率；

根据所述屏幕分辨率确定栅格属性的值；

2.根据权利要求1所述的方法，其特征在于，所述栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，

其中，所述第一栅格属性用于表示元素距离屏幕边界的距离，采用第一宽度作为度量单位，所述第二栅格属性用于表示邻近的所述元素之间的距离，采用第二宽度作为度量单位，所述第三栅格属性用于表示元素的宽度，采用栅格宽度作为度量单位。

3.根据权利要求1所述的方法，其特征在于，所述根据所述屏幕分辨率确定栅格属性的值，包括：

4.根据权利要求1所述的方法，其特征在于，所述目标元素包括目标标识，所述获取目标元素的布局参数，包括：

5.根据权利要求1所述的方法，其特征在于，所述屏幕上显示一个或多个所述显示界面，在一个所述显示界面中，包括一个或多个显示子界面。

6.根据权利要求1-5任意一项所述的方法，其特征在于，所述方法还包括：

7.根据权利要求1-5任意一项所述的方法，其特征在于，所述方法还包括：

根据所述屏幕分辨率确定栅格数量；

8.根据权利要求7所述的方法，其特征在于，所述当所述栅格数量满足预设条件时，根据所述栅格数量调整所述显示界面的内容布局，包括：

9.根据权利要求1-5任意一项所述的方法，其特征在于，当所述方法应用于折叠屏电子设备时，所述折叠屏电子设备包括左屏幕和右屏幕，所述方法包括：

10.一种显示界面适配设计方法，其特征在于，包括：

确定绘制屏幕分辨率；

根据所述绘制屏幕分辨率确定栅格属性的值并生成栅格；

获取目标元素；

采用所述栅格，根据栅格属性的值显示所述目标元素。

11.根据权利要求10所述的方法，其特征在于，所述根据所述绘制屏幕分辨率生成栅格，包括：

12.根据权利要求10所述的方法，其特征在于，所述采用所述栅格，显示所述目标元素，包括：

13.根据权利要求12所述的方法，其特征在于，所述采用所述栅格的吸附功能将所述目标元素吸附对齐到栅格上，包括：

14.根据权利要求10-13任意一项所述的方法，其特征在于，所述在采用所述栅格，显示所述目标元素之后，还包括：

15.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如下步骤：

获取屏幕分辨率；

根据所述屏幕分辨率确定栅格属性的值；

16.根据权利要求15所述的电子设备，其特征在于，所述栅格属性包括第一栅格属性、第二栅格属性和第三栅格属性，其中，所述第一栅格属性用于表示元素距离屏幕边界的距离，采用第一宽度作为度量单位，所述第二栅格属性用于表示邻近的所述元素之间的距离，采用第二宽度作为度量单位，所述第三栅格属性用于表示元素的宽度，采用栅格宽度作为度量单位。

17.根据权利要求15所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述根据所述屏幕分辨率确定栅格属性的值时，包括如下步骤：

18.根据权利要求15所述的电子设备，其特征在于，所述目标元素包括目标标识，所述处理器执行所述计算机程序，实现所述获取目标元素的布局参数时，包括如下步骤：

19.根据权利要求15所述的电子设备，其特征在于，所述屏幕上显示一个或多个所述显示界面，在一个所述显示界面中，包括一个或多个显示子界面。

20.根据权利要求15-19任意一项所述的电子设备，其特征在于，所述处理器执行所述计算机程序还实现如下步骤：

21.根据权利要求15-19任意一项所述的电子设备，其特征在于，所述处理器执行所述计算机程序还实现如下步骤：

根据所述屏幕分辨率确定栅格数量；

22.根据权利要求21所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述当所述栅格数量满足预设条件时，根据所述栅格数量调整所述显示界面的内容布局时，包括如下步骤：

23.根据权利要求15-19任意一项所述的电子设备，其特征在于，当所述方法应用于折叠屏电子设备时，所述折叠屏电子设备包括左屏幕和右屏幕，所述处理器执行所述计算机程序，还实现如下步骤：

24.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如下步骤：

确定绘制屏幕分辨率；

根据所述绘制屏幕分辨率确定栅格属性的值并生成栅格；

获取目标元素；

采用所述栅格，根据栅格属性的值显示所述目标元素。

25.根据权利要求24所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述根据所述绘制屏幕分辨率生成栅格时，包括如下步骤：

26.根据权利要求24所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述采用所述栅格，显示所述目标元素时，包括如下步骤：

27.根据权利要求26所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述当所述目标元素被拖拉到所述绘制界面上时，采用所述栅格的吸附功能将所述目标元素吸附对齐到栅格上时，包括如下步骤：

28.根据权利要求24-27任意一项所述的电子设备，其特征在于，所述处理器执行所述计算机程序，实现所述采用所述栅格，显示所述目标元素之后，还包括如下步骤：

29.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至9任意一项所述显示界面适配方法的步骤，或者，所述计算机程序被处理器执行时实现如权利要求10至14任意一项所述显示界面适配方法的步骤。