CN116450251A - 一种适配多设备的页面布局的方法及电子设备 - Google Patents

Abstract

本申请提供了一种适配多设备的页面布局的方法及电子设备，该电子设备可以是手机、平板、PC、智慧屏等，开发人员可以根据显示屏的布局宽度w配置多个预设的尺寸区间，并为每一种尺寸区间配置不同的布局模板，不同布局模板对应不同的页面布局方式，例如对应不同的显示区域的组成和参数、控件数量和布局，控件尺寸等一种或多种，不同的页面布局方式可以满足用户不同的使用需求和使用场景；当任意电子设备显示目标应用界面时，可以根据电子设备的实际布局尺寸使用不同的布局模板，进而适配不同尺寸、形状、分辨率的显示屏，一次界面开发实现多种电子设备的适配，减少了开发人员的开发工作量，降低了工作成本，提高了界面开发效率。

Description

一种适配多设备的页面布局的方法及电子设备

技术领域

本申请涉及电子技术领域，尤其涉及一种适配多设备的页面布局的方法及电子设备。

背景技术

随着数字智能时代和电子设备的发展，电子设备的种类也日益增多，用户可以同时拥有手机、平板、智慧屏、车载设备、个人电脑(personal computer，PC)、智能手表等多种不同类型的电子设备。

不同的电子设备可能具有不同尺寸、形状、分辨率的显示屏，示例性的，不同的电子设备可能具有横屏、竖屏、折叠屏等多种不同尺寸、形状的显示屏。开发人员在应用界面的开发过程中，往往需要保证同一个应用界面能够适配不同尺寸、形状、分辨率的显示屏，因此，多样化的屏幕形态、不同的屏幕特性参数等无形地增加了应用界面的开发难度，目前应用界面的页面布局无法适配于不同尺寸、形状、分辨率的电子设备的显示屏。

如何保证应用界面的页面布局能够适配不同尺寸、不同形状、不同分辨率的显示屏，是当前亟需解决的问题。

发明内容

本申请提供一种适配多设备的页面布局的方法及电子设备，该方法可以根据电子设备的实际布局尺寸使用不同的布局模板，进而适配不同尺寸、形状、分辨率的显示屏，一次界面开发实现多种电子设备的适配，减少了开发人员的开发工作量，降低了工作成本，提高了界面开发效率。

第一方面提供了一种页面布局的方法，应用于包括显示屏的电子设备，所述方法包括：获取待显示的应用界面包括的页面元素信息和所述应用界面对应布局文件，所述布局文件包括布局模板集合，所述布局模板集合包括一种或多种布局模板，所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间，所述一种或多种布局模板中的每一种布局模板指示所述应用界面包括的一个或多个显示区域，以及所述一个或多个显示区域中每一个显示区域包括的页面元素；获取所述显示屏的实际布局尺寸，所述实际布局尺寸包括所述显示屏用于显示所述应用界面时的显示区域的长度和/或宽度；根据所述实际布局尺寸，从所述布局模板集合包括的一种或多种布局模板中确定目标布局模板；根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

应理解，“应用界面”可以是任意一款应用程序(application，APP)的任意运行界面，本申请实施例对此不作限定。后续实施例的描述中，以待显示的一个应用界面为例，介绍不同电子设备的显示屏上显示该应用界面的过程，将该应用界面也称为“目标应用界面”，将该应用界面来源的APP称为“目标应用”。

示例性的，以视频应用为例，该视频应用作为目标应用，该“应用界面”可以是视频应用的一级界面，例如该视频应用的主界面；或者，该“应用界面”还可以是用户播放任意一个视频片段之后显示的二级界面，例如视频播放界面，或者其他任意一个用户使用该视频应用的过程中的运行界面，本申请实施例对目标应用、应用界面不作限定。

还应理解，在本申请实施例中，开发人员可以通过集成开发环境(IntegratedDevelopment Environment，IDE)进行应用界面的开发，即开发人员可以为每一个应用界面开发对应的页面布局文件，该页面布局文件可以用于确定该应用界面的显示区域的组成、显示区域的布局、显示区域的尺寸，以及可以进一步用于确定每一个显示区域的中所包括的每一个控件的显示尺寸、在显示屏上的布局规则或显示特点等。

还应理解，本申请实施例中，“页面元素”可以是该应用界面上文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件在内的所有页面元素(或界面元素)的统称，本申请实施例对此不作限定。

可选地，任意一个应用界面(例如“应用界面”)可以对应一个唯一的页面布局文件，本申请实施例可以称为“多态布局文件”。换言之，对于任意一种电子设备，或者对于具有不同的屏幕尺寸、不同的屏幕形状、不同的屏幕分辨率等具有不同屏幕特性的显示屏，该应用界面可以对应唯一的页面布局文件。

或者，任意一个应用界面(例如“应用界面”)可以对应两个或两个以上的页面布局文件。其中，该“应用界面”对应的两个或两个以上页面布局文件中的任意一个页面布局文件可以是应用于一种或多种电子设备，或者不同屏幕特性的显示屏等。

一种可能的实现方式中，开发人员可以通过IDE为应用界面开发页面布局文件，并根据该应用界面对应的目标应用的源代码、该应用界面的资源文件和该应用界面的页面布局文件，打包生成用户可直接安装运行的应用程序安装包(application package，APK)。

具体地，开发人员在开发过程中，可以为不同的“应用界面”配置可能的页面布局方式。一种可能的实现方式中，开发人员在为每一个应用界面开发页面布局文件时，可以结合电子设备的屏幕显示宽度，预设一种或多种类型的尺寸参数。

可选地，对于任意一个应用界面，开发人员可以配置屏幕布局宽度w对应的多个预设区间，并为每一种预设区间配置不同的页面布局方式和/或不同的控件尺寸。其中，“页面布局方式”可以包括该目标应用界面的显示区域的组成、显示区域的布局、显示区域的尺寸、每一个控件的布局、坐标中的一种或多种，“控件尺寸”可以包括控件的显示高度、显示宽度中的一种或多种。

通过上述方法，开发人员可以根据不同电子设备的布局宽度w，确定多种预设的布局模板，后续就可以根据电子设备的实际布局宽度w确定出当前可用的目标布局模板，并根据该目标布局模板对应的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件信息，确定该目标应用界面所包括的每一个控件的布局方式，该过程不需要关注电子设备的屏幕尺寸、屏幕长宽比、屏幕形状、屏幕分辨率等屏幕特性参数，可以将每一个应用界面适配到不同的电子设备上，实现一次界面开发就能够适配多种电子设备的显示屏，提高不同电子设备的显示效果。

结合第一方面，在第一方面的某些实现方式中，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，所述每一个页面元素的尺寸信息包括长度信息和/或宽度信息，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：根据所述目标布局模板，确定所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；根据所述应用界面包括的页面元素信息，以及所述第用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：根据所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，计算所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；根据所述应用界面包括的页面元素信息，以及所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

一种可能的实现方式中，该目标布局模板中可以直接配置该应用界面包括的每一个控件的宽度和高度等参数，例如160px×160px等。或者，该目标布局模板中可以直接配置该应用界面包括的相邻两个控件之间的间距等。

可选地，电子设备可以根据某控件的高度、宽度，确定左上角M点、右下角N点的坐标，进而确定该控件的显示位置。同理，其他更多的控件可以按照相同的方法，计算每一个控件的显示位置，直到该内容推荐区域中所有控件、以及该视频播放区域、该内容详情区域的所有控件都排布完成，即确定了该目标应用界面的布局。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述应用界面包括的页面元素信息包括每一个页面元素的标识和每一个页面元素的区域标识，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：根据所述目标布局模板，确定所述应用界面包括的一个或多个显示区域；根据所述每一个页面元素的标识和所述每一个页面元素的区域标识，确定所述一个或多个显示区域中每一个显示区域包括的页面元素；绘制、渲染所述一个或多个显示区域中每一个显示区域包括的页面元素，并在所述显示屏上显示所述应用界面。

一种可能的实现方式中，电子设备可以根据该布局文件确定该目标应用界面包括的显示区域的组成、显示区域的排布方式，还可以遍历所述目标应用界面中的一个或多个控件，确定每一个控件的区域标识，即确定每一个控件将显示在哪一个显示区域，再结合据控件宽、高等参数信息，进一步确定每一个控件的尺寸和/或坐标，进而为每一个显示区域确定控件的布局，最终呈现该应用界面。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述应用界面包括的页面元素信息还包括每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，所述绘制、渲染所述应用界面包括的页面元素，包括：根据所述每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，绘制、渲染所述应用界面包括的页面元素。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述根据所述实际布局尺寸，从所述布局模板集合包括的一种或多种布局模板中确定目标布局模板，包括：根据所述实际布局尺寸，从所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间中，确定所述实际布局尺寸所对应的目标尺寸区间；根据所述目标尺寸区间，从所述布局模板集合包括的一种或多种布局模板中确定所述目标布局模板。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述应用界面包括的一个或多个显示区域中的任意两个显示区域没有重叠区域；或者，所述应用界面包括的一个或多个显示区域中的任意两个显示区域有重叠区域且具有不同的显示层级；或者，所述应用界面包括的一个或多个显示区域具有预设的布局样式；或者，所述应用界面包括的一个或多个显示区域具有用户可调节的自定义的布局样式。

结合第一方面和上述实现方式，在第一方面的某些实现方式中，所述应用界面包括的页面元素包括文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件中的一种或多种。

综上所述，通过本申请实施例提供的适配多设备的页面布局的方法，对于任意一个应用界面(例如“应用界面”)，开发人员只需要开发一套页面布局文件，就能够实现将该应用界面显示到不同的电子设备，使得该应用界面能够适配不同尺寸、不同形状、不同分辨率的显示屏，一次开发实现多种电子设备的适配，减少了开发人员开发应用界面的工作量，降低了开发人员的工作成本，提高了界面开发效率。

具体地，在开发人员开发应用界面的过程中，可以通过不同的多个布局模板，为目标应用界面自定义不同数量、不同类型、不同排布的显示区域，满足用户各种不同的使用需求和使用场景。开发人员可以根据电子设备的布局宽度配置多个预设区间，并为每一种预设区间配置对应的布局模板，即配置不同的页面布局方式和/或不同的控件尺寸。

在该目标应用界面显示到任意电子设备的显示屏的过程中，可以根据实际电子设备的布局宽度w确定出该应用界面适配的目标布局模板，并根据该目标布局模板确定该应用界面的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息，进而确定该应用界面所包括的每一个控件的布局方式。

该过程不依赖电子设备的类型和电子设备的屏幕特性，能够实现该应用界面的自适应适配显示，只需要开发人员进行一次应用界面的开发，就能够适配多种电子设备的不同尺寸、不同形状、不同分辨率的显示屏，做到一套布局，多端适配，提高了不同电子设备的显示效果。

此外，开发人员可以根据不同电子设备的实际布局宽度、实际布局高度、设备类型、应用类型中的一种或多种，自定义该应用界面包括的各显示区域的相对位置、层次关系，在不同场景中，能够触发不同的电子设备自动调整各显示区域的相对位置、层次关系等，满足了用户各种不同的使用需求和使用场景。

第二方面提供了一种电子设备，其特征在于，包括：显示屏；一个或多个处理器；一个或多个存储器；安装有多个应用程序的模块；所述存储器存储有一个或多个程序，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：获取待显示的应用界面包括的页面元素信息和所述应用界面对应布局文件，所述布局文件包括布局模板集合，所述布局模板集合包括一种或多种布局模板，所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间，所述一种或多种布局模板中的每一种布局模板指示所述应用界面包括的一个或多个显示区域，以及所述一个或多个显示区域中每一个显示区域包括的页面元素；获取所述显示屏的实际布局尺寸，所述实际布局尺寸包括所述显示屏用于显示所述应用界面时的显示区域的长度和/或宽度；根据所述实际布局尺寸，从所述布局模板集合包括的一种或多种布局模板中确定目标布局模板；根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

结合第二方面，在第二方面的某些实现方式中，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，所述每一个页面元素的尺寸信息包括长度信息和/或宽度信息，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：根据所述目标布局模板，确定所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；根据所述应用界面包括的页面元素信息，以及所述第用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：根据所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，计算所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；根据所述应用界面包括的页面元素信息，以及所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，所述应用界面包括的页面元素信息包括每一个页面元素的标识和每一个页面元素的区域标识，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：根据所述目标布局模板，确定所述应用界面包括的一个或多个显示区域；根据所述每一个页面元素的标识和所述每一个页面元素的区域标识，确定所述一个或多个显示区域中每一个显示区域包括的页面元素；绘制、渲染所述一个或多个显示区域中每一个显示区域包括的页面元素，并在所述显示屏上显示所述应用界面。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，所述应用界面包括的页面元素信息还包括每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：根据所述每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，绘制、渲染所述应用界面包括的页面元素。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行以下步骤：根据所述实际布局尺寸，从所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间中，确定所述实际布局尺寸所对应的目标尺寸区间；根据所述目标尺寸区间，从所述布局模板集合包括的一种或多种布局模板中确定所述目标布局模板。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，所述应用界面包括的一个或多个显示区域中的任意两个显示区域没有重叠区域；或者，所述应用界面包括的一个或多个显示区域中的任意两个显示区域有重叠区域且具有不同的显示层级；或者，所述应用界面包括的一个或多个显示区域具有预设的布局样式；或者，所述应用界面包括的一个或多个显示区域具有用户可调节的自定义的布局样式。

结合第二方面和上述实现方式，在第二方面的某些实现方式中，所述应用界面包括的页面元素包括文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件中的一种或多种。

第三方面提供了一种电子设备上的图形用户界面系统，所述电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，所述一个或多个处理器用于执行存储在所述一个或多个存储器中的一个或多个计算机程序，所述图形用户界面系统包括所述电子设备执行如第一方面和第一方面中任一项所述的方法时，电子设备显示的图形用户界面。

第四方面提供了一种装置，该装置包含在电子设备中，该装置具有实现上述第一方面及上述第一方面的任意一种可能实现方式中所述电子设备行为的功能。

可选地，该装置具有的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元。例如，显示模块或单元、检测模块或单元、处理模块或单元等。

第五方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行上述第一方面或者第一方面的任意一种可能的方法。

第六方面提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述第一方面或者第一方面的任意一种可能的方法。

附图说明

图1是本申请实施例提供的多种常见的电子设备的屏幕示意图。

图2是一例视频应用的应用界面显示在不同电子设备的显示屏上的界面示意图。

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

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

图5是本申请实施例提供的一例适配多设备的页面布局的方法的实现过程示意图。

图6是本申请实施例提供的一例视频应用的目标应用界面的页面布局示意图。

图7是本申请实施例提供的另一例视频应用的目标应用界面的页面布局示意图。

图8是本申请实施例提供的一例应用阶段页面布局适配多设备的示意性流程图。

图9是本申请实施例提供的一例测量流程的实现过程的示意图。

图10是本申请实施例提供的一例确定控件的坐标信息的示意图。

具体实施方式

不同的电子设备，可能具有不同的屏幕尺寸、不同的屏幕形状、不同的屏幕分辨率等屏幕特性，在本申请实施例中，可以将屏幕尺寸、屏幕长宽比(aspect ratio)、屏幕形状、屏幕分辨率等参数称为显示屏的“屏幕特性”，对于具有不同的屏幕尺寸、不同的屏幕形状、不同的屏幕分辨率等特性的显示屏，可以称为该显示屏具有不同的“屏幕特性”。

图1是本申请实施例提供的多种常见的电子设备的屏幕示意图。

示例性的，在日常生活中，用户使用频率较高的电子设备可以包括如图1中的(a)图所示的PC、图1中的(b)图所示的智慧屏、图1中的(c)图所示的平板和图1中的(d)图所示的折叠屏手机等。

其中，不同的电子设备可以具有不同尺寸、不同形状、不同分辨率的显示屏，进而对应不同的屏幕特性参数。或者，同一个电子设备在用户的使用过程中，也可能具有不同的屏幕特性参数，例如图1中的(d)图示出的折叠屏手机，展开状态和折叠状态可以具有不同尺寸的屏幕显示区域，即在用户使用过程中，电子设备的显示屏的显示区域可变。

对于图1示出的多种常见的电子设备，表1示出了手机、PC、智慧屏、平板等多种常见的电子设备的部分屏幕特性参数，例如屏幕尺寸、屏幕长宽比、屏幕形状、屏幕分辨率等屏幕特性参数。

其中，屏幕分辨率可以理解为显示屏的横向、纵向上的像素点数，单位是像素(pixels，px)。一般以“纵向像素×横向像素”表示。应理解，在屏幕尺寸一样的情况下，分辨率越高，屏幕越清晰，画面越细腻。

屏幕长宽比(aspect ratio)也可以称为“纵横比”或者“屏幕比例”，屏幕长宽比为16:9可以理解为屏幕宽度和高度的比例为16:9。示例性的，图1中的(a)图示出的PC的屏幕长宽比可以为3:2，图1中的(b)图示出的智慧屏的屏幕长宽比可以为16:9，图1中的(c)图示出的平板的屏幕长宽比可以为16:10等。

屏幕形状可以随着电子设备的类型、制造厂商的不同而不同。示例性的，手机的显示屏一般可以为矩形形状，进一步可以被设计为水滴屏、刘海屏、窄边框全面屏等，本申请实施例对此不作赘述。

表1

上述列举了不同电子设备可能的屏幕特性，电子设备的显示屏为用户显示应用界面的过程中，对于同一个应用界面，当该应用界面显示到不同电子设备的显示屏上时，可以具有不同的界面显示样式，即该应用界面可以对应不同的页面布局方式。

为了便于理解，下面将以手机、平板和智慧屏等几种常见的电子设备的界面显示过程为例，结合附图，进行具体阐述同一个应用界面在不同电子设备的显示屏上的页面布局方式。

图2是一例视频应用的应用界面显示在不同电子设备的显示屏上的界面示意图。

示例性的，图2中的(a)图示出了手机在解锁模式下显示的主界面201，该主界面201可以包括顶端状态栏区域和界面显示区域，该顶端状态栏区域可以显示运营商标识、无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)的信号标识、手机的电量标识和当前时间等一种或多种内容，该界面显示区域显示了天气时钟组件以及手机上安装的多款应用程序(application，App)。其中，应用程序可以包括电话、信息、设置、视频等。应理解，该主界面201还可以包括其他更多的应用程序，本申请实施例对手机主界面显示的内容不作限定。

假设用户执行如图2中的(a)图所示的操作，点击视频应用的图标，响应于用户的点击操作，手机显示如图2中的(b)图所示视频应用的主界面202，该视频应用的主界面202可以理解为视频应用的“一级界面”。

可选地，该视频应用的主界面202上可以包括如图中虚线框示出的菜单显示区域202-1、内容推荐区域202-2和导航区域202-3。示例性的，如图2中的(b)图所示，该菜单显示区域202-1可以包括视频搜索框、设置控件、每日推荐控件、电视剧控件和电影控件等多种可能的用户可以操作的控件。该内容推荐区域202-2可以包括视频列表，该视频列表可以显示一个或多个为用户推荐的视频的封面缩略图和视频名称等，例如视频1、视频2、视频3等多个视频片段的封面缩略图和名称。该导航区域202-3可以包括“主页”选项、“视频”选项、“时刻”选项和“我的”选项，本申请实施例对每个显示区域的显示内容不作限定。

应理解，不同品牌、不同型号的手机，可以对应不同的屏幕特性，当该视频应用的主界面202显示到不同尺寸的手机显示屏上时，可能显示更多或更少的控件、内容等，本申请实施例对此不作限定。

还应理解，对于手机、平板、智慧屏等不同的电子设备，当任意一个应用界面分别显示到不同电子设备的显示屏时，可以具有不同的页面布局方式。具体地，开发人员可以为该应用界面开发相关的页面布局文件，电子设备通过运行不同的页面布局文件，进而可以加载出不同样式的应用界面。

表2示出了应用界面在电子设备上显示时可能对应的多种页面布局方式，每一种页面布局方式可以对应不同的页面元素(或称为“界面元素”)的布局规则或显示特点。

应理解，在本申请实施例中，“页面布局方式”可以用于定义每一个应用界面包括的文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件在内的所有页面元素(或称为“界面元素”)在屏幕显示区域中的排列规则、显示尺寸、显示位置等一种或多种参数。

还应理解，不同的电子设备可以采用列举的任意一种或多种页面布局方式，从而加载出不同样式的应用界面，本申请实施例对此不作限定。

表2

示例性的，以手机为例，主流的竖屏手机的显示屏形状一般为窄长的矩形，可以具有“列表式”的页面布局方式，可以称为“竖排的列表式”。在如图2中的(b)图所示的手机显示屏上显示的该视频应用的主界面202上，每日推荐控件、电视剧控件和电影控件等多个文本控件可以在手机显示屏的宽度方向上呈现横向排列，“视频1”、“视频2”等视频名称包括的文本控件可以在手机显示屏的宽度方向上进行横向排列，“视频1”、“视频2”各自对应的封面缩略图(即图片控件)也可以在手机显示屏的宽度方向上进行横向排列，“视频3”的视频名称、封面缩略图相对于视频1和视频2可以具有从上到下的竖排列表式的页面布局，此处不再赘述。

一种可能的实现方式中，具有不同屏幕特性的电子设备，例如手机、平板、智慧屏等不同的电子设备，对于同一个应用界面，可以使用独立、不同的页面布局文件，进而加载出不同样式的应用界面。

示例性的，以图2中的(b)图所示的该视频应用的主界面202为例，当该视频应用的主界面202显示到手机、平板、智慧屏等不同的电子设备的显示屏上时，可以具有不同的页面布局方式。

手机显示屏上显示的该视频应用的“一级界面(该视频应用的主界面202)”可以如图2中的(b)图所示；当该视频应用的“一级界面”显示到平板的显示屏时，可以显示如图2中的(c)图所示的界面203。

应理解，平板的显示屏具有较大的显示尺寸，平板显示的界面203可以显示比手机界面202显示更多的控件、更多数量的推荐视频片段，或者具有不同的界面元素的排列方式(即页面布局方式)等，本申请实施例对此不作限定。

示例性的，如图2中的(c)图所示，平板显示的该界面203可以包括菜单显示区域203-1、内容推荐区域203-2和导航区域203-3。其中，该菜单显示区域203-1可以包括搜索框、每日推荐控件、电视剧控件、电影控件、综艺控件、历史记录控件等多种可能的操作控件。该内容推荐区域203-2可以包括一个或多个为用户推荐的视频内容，例如视频1、视频2、视频3、视频4等多个视频片段，多个视频片段可以具有“横向列表式”的页面布局方式。该导航区域202-3可以包括“主页”选项、“视频”选项、“时刻”选项和“我的”选项，本申请实施例对每个显示区域的显示内容不作限定。

在上述过程中，对比图2中的(b)图所示的界面202和如图2中的(c)图所示的界面203，同一个应用界面(该视频应用的“一级界面”)显示到手机、平板等不同的电子设备显示屏上时，不同的电子设备可以使用独立的页面布局文件。该过程要求界面开发者需要分别为不同的电子设备开发不同页面布局文件，该方式增加了开发人员的开发工作量，且容易导致电子设备的资源文件具有较高的重用率。

另一种可能的实现方式中，具有不同屏幕特性的电子设备可以复用手机的小尺寸显示屏的页面布局文件，通过多窗口(例如悬浮窗、双窗口显示等)的显示方式，在小窗口中复用小尺寸显示屏的页面布局方式，进而加载出和手机的小尺寸显示屏相同显示效果的应用界面。

示例性的，以该视频应用的“一级界面”(如图2中的(b)图所示的界面202)为例，当该视频应用的“一级界面”显示到智慧屏等大尺寸显示屏上时，智慧屏等大尺寸显示屏可以复用手机的页面布局文件。如图2中的(d)图所示，智慧屏可以以悬浮窗204(或者双窗口、多窗口等)的形式，在悬浮窗204中显示和手机显示屏上的该视频应用的主界面202相同页面布局的界面，为了简便，此处对悬浮窗204中包括的界面内容不再赘述。

在上述过程中，当大尺寸显示屏复用手机等小尺寸显示屏的页面布局方式时，小尺寸显示屏上显示的应用界面可能无法在大尺寸显示屏上全屏显示，无法发挥出大尺寸显示屏的优势。

此外，同一套页面布局方式可能在竖屏上具有较好的显示效果，但是复用到具有不同屏幕特性或屏幕参数横屏上时，并不能保证横屏也具有最优的显示效果，可能降低了用户的视觉体验。

再者，悬浮窗、双窗口显示等页面布局方式及任务栈管理对于界面开发人员要求较高，且增加了界面开发人员的开发工作难度。

又一种可能的实现方式中，开发者可以分别开发不同的应用版本，对于具有不同的屏幕特性的电子设备，可以安装不同版本的应用，以保证应用界面能够适配不同的电子设备。

示例性的，以微信应用为例，开发者可以单独开发针对手机的微信/>应用版本1和针对平板的微信/>应用版本2，进而通过在不同的手机、平板上安装不同版本的微信/>应用，实现在用户使用微信/>应用的过程中，能够加载出适配于手机、平板等不同电子设备显示屏的微信/>应用界面。

在上述过程中，要求开发人员为不同的电子设备独立开发不同版本的应用，该过程放弃了页面布局方式对不同电子设备的适配性。具体地，对于同一个应用界面，该过程需要根据不同电子设备的显示屏的尺寸进行定制，例如定制该应用界面的界面元素的数量、界面元素的间距、界面元素的尺寸等，无法实现应用界面在不同电子设备上的兼容，每一次修改界面元素的数量、界面元素的间距、界面元素的尺寸等，会造成较高的维护成本。

综上所述，上述不同的界面显示方式无法满足不同的电子设备、不同屏幕的页面布局需求，针对上述问题，本申请实施例将提供一种适配多设备的页面布局的方法，该方法可以实现同一个应用界面对不同设备、不同屏幕的多端自动适配，降低应用界面的开发难度和工作量，提高开发人员的开发效率。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

本申请实施例提供的适配多设备的页面布局的方法可以应用于手机、平板、可穿戴设备、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)等电子设备上，本申请实施例对电子设备的具体类型不作任何限制。

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

应理解，本申请实施例的电子设备可以包括图3示出的电子设备100部分结构或全部结构，或者还可以包括更多的其他未示出的结构，本申请实施例对此不作限定。

示例性的，如图3所示，电子设备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 identificationmodule，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的等待时间，因而提高了系统的效率。

在本申请实施例中，电子设备100作为将要显示任意一个应用界面的电子设备，该应用界面可以称为“目标应用界面”。电子设备100的处理器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/6G等无线通信的解决方案。移动通信模块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可以通过无线通信技术与网络以及其他设备通信。

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

显示屏194用于显示图像，视频等。显示屏194包括显示面板。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

示例性的，在本申请实施例中，以图2中的(a)图和(b)图所示的手机，以及图2中的(c)图所示的平板为例，手机、平板的显示屏194可以接收用户的点击、双击等触摸操作，触发手机运行视频应用，同时在手机的显示屏194上显示视频应用运行过程中的界面，例如图2中的(a)图所示的手机主界面201、图2中的(b)图所示的视频应用的主界面202等。

对于图2中的(d)图所示的智慧屏，智慧屏还可以通过遥控器等检测用户的操作指令，并在智慧屏的显示屏194上显示相关的界面，例如界面204等，此处不再赘述。

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

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

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件把光信号转换成电信号，之后将电信号传递给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用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。

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

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

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。

耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。

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

磁传感器180D包括霍尔传感器。

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

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

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。

环境光传感器180L用于感知环境光亮度。

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

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。

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

可选地，在本申请实施例中，该触摸传感器180K可以检测用户的触摸、点击等操作，生成操作事件，并将该操作事件传递给处理器110，由处理器110确定该操作事件包括触摸点的坐标、触摸状态等相关参数，根据该操作事件做出响应。

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

马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。

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

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。

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

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

可选地，本申请实施例的发送端设备和接收端设备可以都为系统，具有图4所示的分层架构，该分层架构可以包括若干个层，每一层都有清晰的角色和分工，且层与层之间通过软件接口通信。

示例性的，在一些实施例中，如图4所示，可以将系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(/>runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。示例性的，如图4所示，应用程序层可以包括电话、信息、设置、视频等应用程序对应的应用程序包，本申请实施例对此不作限定。

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

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

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

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。存放的数据可以包括视频数据、图像数据、音频数据等，还可以包括拨打和接听的通话记录数据，用户的浏览历史和书签等数据，此处不再赘述。

视图系统包括可视控件，或者称为UI控件，例如文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件，本申请实施例都可以称为“页面元素”或“界面元素”。视图系统可用于构建应用程序的应用界面。应用界面可以由一个或多个视图组成的。示例性的，某一个应用界面可以包括短信通知图标，还可以包括显示文字的视图以及显示图片的视图等。

示例性的，在本申请实施例中，当用户点击视频应用的图标时，该视频应用可以通过应用程序框架层的API调用视图系统中的UI控件，并根据自身待显示的目标应用界面确定需要显示哪些UI控件。

此外，该目标应用界面对应的多个UI控件可以携带有视频应用的应用标识，和/或携带不同显示区域的标识。该目标应用界面对应的多个UI控件进一步由布局管理模块确定显示尺寸、如何进行布局等。

布局管理模块包括一个或多个页面布局文件，每一个应用界面可以对应一个或多个页面布局文件。具体地，开发人员在为每一个应用界面开发页面布局文件时，可以结合电子设备的屏幕显示宽度，预设一种或多种类型的尺寸参数。

可选地，开发人员可以配置屏幕布局宽度w对应的多个预设区间，并为每一种预设区间配置不同的页面布局方式和/或不同的控件尺寸。其中，“控件尺寸”可以包括控件的显示高度和/或显示宽度。

示例性的，以图2中的(b)图所示的视频应用的主界面202为例，该视频应用的主界面202可以包括视频搜索框、设置控件、每日推荐控件、电视剧控件、电影控件等多种可能的用户可以操作的控件，以及一个或多个为用户推荐的视频的封面缩略图和视频名称等。在本申请实施例中，布局管理模块包括的该视频应用的主界面202对应的“页面布局文件”可以定义该视频应用的主界面202上所有控件的布局方式、控件尺寸等参数信息。

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

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

通知管理器使应用程序可以在屏幕的状态栏中显示通知信息，可以用于向用户传达消息，该通知信息可以在状态栏短暂停留后自动消失，无需用户执行关闭操作等交互过程。比如通知管理器可以告知用户下载完成等消息。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知；或者，通知管理器还可以是以对话窗口形式出现在屏幕上的通知，例如在状态栏提示文本信息等；又或者，通知管理器还可以控制电子设备发出提示音，电子设备的振动，电子设备的指示灯闪烁等，此处不再赘述。

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

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

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

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

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

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

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

二维图形引擎是二维绘图的绘图引擎。

示例性的，在本申请实施例中，当电子设备的显示屏上显示目标应用界面时，可以基于视图系统、二维图形引擎、三维图形处理库、图像处理库等，依次进行应用界面的图像渲染、合成、图层处理等，最终在显示屏上显示该目标应用界面。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，音频驱动，传感器驱动。示例性的，在本申请实施例中，电子设备的显示屏上显示该目标应用界面时，需要显示驱动的参与，进而驱动系统进行目标应用界面的图像渲染、合成、图层处理等，此处不再赘述。

为了便于理解，本申请以下实施例将以具有图3和图4所示结构的电子设备100为例，结合附图和应用场景，对本申请实施例提供的适配多设备的页面布局的方法进行具体阐述。

图5是本申请实施例提供的一例适配多设备的页面布局的方法的实现过程示意图。

应理解，本申请实施例提供的适配多设备的页面布局的方法的具体实现过程可以划分为两个阶段：开发阶段和应用阶段，下面针对每一个阶段进行详细的介绍。

第一阶段：开发阶段

应理解，在开发阶段，主要由开发人员基于集成开发环境(IntegratedDevelopment Environment，IDE)进行应用界面的开发。

可选地，该IDE可以是华为公司的专用开发工具，也可以是通用开发平台等，本申请实施例对此不作限定。

示例性的，如图5所示，该开发阶段的具体实现过程可以包括步骤1：

步骤1，开发人员通过IDE为应用界面开发页面布局文件，并根据该应用界面对应的目标应用的源代码、该应用界面的资源文件和该应用界面的页面布局文件，打包生成用户可直接安装运行的应用程序安装包(application package，APK)。

应理解，“应用界面”可以是任意一款应用程序(application，APP)的任意运行界面，本申请实施例对此不作限定。

在后续实施例的描述中，以某一个应用界面为例，介绍不同电子设备的显示屏上显示该应用界面的过程，将该应用界面也称为“目标应用界面”，将该应用界面来源的APP称为“目标应用”。

示例性的，以视频应用为例，该视频应用作为目标应用，该“目标应用界面”可以是如图2中的(b)图所示的一级界面——该视频应用的主界面202，或者，该“目标应用界面”还可以是用户点击该视频应用的主界面202上的任意一个视频片段之后显示的二级界面——视频播放界面等任意一个用户使用该视频应用的过程中的运行界面，本申请实施例对目标应用、目标应用界面不作限定。

还应理解，在本申请实施例中，“开发人员通过IDE为应用界面开发页面布局文件”可以理解为开发人员为每一个应用界面开发对应的页面布局文件，该页面布局文件可以用于确定每一个应用界面的显示区域的组成、显示区域的布局、显示区域的尺寸，以及可以进一步用于确定每一个显示区域的中所包括的每一个页面元素的显示尺寸、每一个页面元素在显示屏上的布局规则或显示特点等。

还应理解，本申请实施例中，以“控件”作为页面元素(或称为“界面元素”)，“控件”可以是该应用界面上文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件，本申请实施例对此不作限定。

可选地，任意一个应用界面(即本申请实施例所说的“目标应用界面”)可以对应一个唯一的页面布局文件，本申请实施例可以称为“多态布局文件”。换言之，对于任意一种电子设备，或者对于具有不同的屏幕尺寸、不同的屏幕形状、不同的屏幕分辨率等具有不同屏幕特性的显示屏，该目标应用界面可以对应唯一的页面布局文件。

示例性的，如图2中的(b)图所示的视频应用的一级界面——该视频应用的主界面202，开发人员可以为该视频应用的主界面202开发唯一的页面布局文件，该唯一的页面布局文件中可以包括布局模板集合，所述布局模板集合包括一种或多种布局模板。换言之，手机、平板、PC、智慧屏等不同的电子设备都可以使用该唯一的页面布局文件，并根据后续“应用阶段”中介绍的方法实现该视频应用的主界面202和不同电子设备的显示屏的适配，从而为用户提供更好的显示效果，降低了开发人员的界面开发的工作量和难度。

或者，任意一个应用界面(即本申请实施例的“目标应用界面”)可以对应两个或两个以上的页面布局文件。其中，该“目标应用界面”对应的两个或两个以上页面布局文件中的任意一个页面布局文件可以是应用于一种或多种电子设备，或者不同屏幕特性的显示屏等。

示例性的，如图2中的(b)图所示的该视频应用的主界面202，开发人员可以为该视频应用的主界面202开发页面布局文件1和页面布局文件2。其中，手机和平板可以使用页面布局文件1，PC、智慧屏等具有大尺寸屏幕的电子设备可以使用页面布局文件2，并根据后续“应用阶段”中介绍的方法实现该视频应用的主界面202和不同电子设备的显示屏的适配，也可以避免现有技术中为手机、平板、PC、智慧屏等不同类型的电子设备分别开发独立的页面布局文件，一定程度上也可以降低开发人员的界面开发的工作量和难度。

还应理解，步骤1中的“目标应用的源代码”可以包括该目标应用的标识、该目标应用界面的标识以及该目标应用界面所包括的文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件中每一种控件的控件标识等信息。

“应用程序的资源文件”可以定义该目标应用界面所包括的文本控件、图片控件等任意一种控件的属性参数信息，或者说所有的页面元素中每一种页面元素的属性参数信息。可选地，“应用程序的资源文件”可以是包括多种可扩展标记性语言(extensiblemarkup language，XML)文件，XML文件可以包括不同的资源目录，不同的资源目录下可以存储不同的文件。

示例性的，XML文件可以包括drawable目录、mipmap目录、color目录等。其中，mipmap目录下的mipmap文件可以存储应用图标的图片资源等，drawable目录下的drawable文件可以存放其余图片，color目录下可以存放字体颜色等参数信息。此外，XML文件还定义该目标应用界面中的文本的字体、颜色等属性参数信息，图片控件、按钮控件、进度条控件等所有的页面元素在显示屏上显示相关的属性参数信息等，本申请实施例对此不作限定。

具体地，下面以视频应用为例，介绍开发人员在开发过程中，可以为不同的“目标应用界面”配置可能的页面布局方式。

一种可能的实现方式中，开发人员在为每一个应用界面开发页面布局文件时，可以结合电子设备的屏幕显示宽度，预设一种或多种类型的尺寸参数。

可选地，对于目标应用界面，开发人员可以配置屏幕布局宽度w对应的多个预设区间，并为每一种预设区间配置不同的页面布局方式和/或不同的控件尺寸。其中，“页面布局方式”可以包括该目标应用界面的显示区域的组成、显示区域的布局、显示区域的尺寸、每一个控件的布局、坐标中的一种或多种，“控件尺寸”可以包括控件的显示高度、显示宽度中的一种或多种。

图6是本申请实施例提供的一例视频应用的目标应用界面的页面布局示意图。

示例性的，以用户点击视频应用的图标之后将要在显示屏上显示视频应用的主界面作为“目标应用界面”，当该视频应用的主界面显示到手机、平板、PC、智慧屏等不同的电子设备上，开发人员可以根据电子设备具有的不同尺寸、不同形状、不同分辨率的显示屏，配置不同的页面布局方式。

如图6中的(a)图所示，手机的显示屏的布局宽度为w1，开发人员可以预先为布局宽度w1所对应的预设区间1配置该视频应用的主界面601包括如图6中的(b)图所示的菜单显示区域、内容推荐区域进和导航区域，且该菜单显示区域、内容推荐区域和导航区域具有“上中下”的排列方式。

可选地，该菜单显示区域、内容推荐区域和导航区域可以具有相同的横向显示宽度w1和不同的纵向显示高度，以及相同或不同的显示层级。

一种可能的配置方式中，可以配置该菜单显示区域的纵向显示高度为h1，内容推荐区域的纵向显示高度为h2，导航区域的纵向显示高度为h3；另一种可能的配置方式中，可以配置该菜单显示区域、内容推荐区域和导航区域的纵向显示高度比例为h1：h2：h3，本申请实施例对此不作限定。

同理，如图6中的(c)图所示，平板的显示屏的布局宽度为w2，开发人员可以预先为布局宽度w2所对应的预设区间2配置该视频应用的主界面可以包括如图6中的(c)图所示的菜单显示区域、内容推荐区域进和导航区域，且该菜单显示区域、内容推荐区域和导航区域具有“上中下”的排列方式。

可选地，该菜单显示区域、内容推荐区域和导航区域可以具有相同的横向显示宽度w2和不同的纵向显示高度，以及相同或不同的显示层级。

一种可能的配置方式中，可以配置该菜单显示区域的纵向显示高度为h4，内容推荐区域的纵向显示高度为h5，导航区域的纵向显示高度为h6，且配置该菜单显示区域、的显示层级在该内容推荐区域的显示层级之上；另一种可能的配置方式中，可以配置该菜单显示区域、内容推荐区域和导航区域的纵向显示高度比例为h4：h5：h6，本申请实施例对此不作限定。

又同理，如图6中的(d)图所示，PC的显示屏的布局宽度为w4+w5，开发人员可以预先为布局宽度w4+w5所对应的预设区间3配置该视频应用的主界面可以包括如图6中的(d)图所示的菜单显示区域、内容推荐区域进和导航区域，且该菜单显示区域、内容推荐区域和导航区域具有“左中右”的排列方式。

可选地，该菜单显示区域、内容推荐区域和导航区域可以具有相同的纵显示宽度h7和不同的横向显示宽度，以及相同或不同的显示层级。

一种可能的配置方式中，可以配置该菜单显示区域的横向显示宽度为w3，内容推荐区域的横向显示宽度为w4，导航区域的横向显示宽度为w5，且配置该菜单显示区域的显示层级在该内容推荐区域的显示层级之上；另一种可能的配置方式中，可以配置该菜单显示区域、内容推荐区域和导航区域的横向显示宽度比例为w3：w4：w5，且配置该菜单显示区域的显示层级在该内容推荐区域的显示层级之上，本申请实施例对此不作限定。

再同理，如图6中的(e)图所示，智慧屏的显示屏的布局宽度为w8，开发人员可以预先为布局宽度w8所对应的预设区间4配置该视频应用的主界面可以包括如图6中的(e)图所示的菜单显示区域、内容推荐区域进和导航区域。

可选地，该菜单显示区域和内容推荐区域可以具有相同的纵向显示高度，该菜单显示区域、内容推荐区域和导航区域可以具有不同的横向显示宽度，以及相同或不同的显示层级。

一种可能的配置方式中，可以配置该菜单显示区域的横向显示宽度为w6，内容推荐区域的横向显示宽度为w7，导航区域的横向显示宽度为w8，且配置该菜单显示区域、内容推荐区域和导航区域具有相同的显示层级；另一种可能的配置方式中，可以配置该菜单显示区域、内容推荐区域和导航区域的横向显示宽度比例为w6：w7：w8，该菜单显示区域、内容推荐区域和导航区域的纵向显示高度比例为h8：h8：(h9-h8)，且配置该菜单显示区域、内容推荐区域和导航区域具有相同的显示层级，本申请实施例对此不作限定。

表3是本申请实施例列举的开发人员为目标应用界面预设的多种页面布局方式示例。结合表3和图6的几种电子设备，假设某电子设备显示屏的布局可用宽度为w(或者称为“布局宽度”)，开发人员可以通过该视频应用的主界面对应的“布局文件”配置多个预设区间，并为不同的预设区间分别配置不同的布局模板，换言之，为不同预设区间分别配置不同的与页面布局相关的参数。

表3

可选地，在本申请实施例中，开发人员可以根据多种常见的电子设备显示屏对应的可能布局宽度w配置多个预设区间。

示例性的，结合表3和图6介绍的内容，第一阈值x可以是36mm，当布局宽度w小于第一阈值x时，可以采用第一布局模板，获取所述第一布局模板指示的显示区域的组成和参数、控件以及控件宽、高等参数信息，确定在电子设备的显示屏上如何显示该目标应用界面。第二阈值y可以是183mm，当布局宽度w大于或等于第一阈值x且小于第二阈值y时，可以采用第二布局模板，获取所述第二布局模板指示的显示区域的组成和参数、控件以及控件宽、高等参数信息，确定在电子设备的显示屏上如何显示该目标应用界面……依次类推，为了简便，此处对表3中列举的不同区间内的布局模板不再赘述。

示例性的，当第一阈值x≤w<第二阈值y时，该视频应用的主界面显示到电子设备可以采用该目标应用界面对应的“页面布局文件”中的第二布局模板，第二布局模板可以指示显示屏上具有图6中的(b)图所示的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息，进而电子设备就可以确定该目标应用界面所包括的每一个控件的布局方式，并最终显示图6中的(a)图所示的该视频应用的主界面601。

应理解，表3所示出的多种页面布局方式以及对应的参数可以都包括在该目标应用界面对应的“页面布局文件”中，即，对于不同的布局宽度w所在区间对应的布局模板(例如第一布局模板、第二布局模板等)、以及每一个布局模板对应的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息都包括在该目标应用界面对应的“页面布局文件”中，后续实施例对此不再赘述。

还应理解，本申请实施例的第一布局模板、第二布局模板、第三布局模板、第四布局模板、第五布局模板可以用于指示该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息，进而确定该目标应用界面如何在电子设备的显示屏上进行显示，本申请实施例还可以根据电子设备显示屏的布局宽度w划分更多的预设区间，进而对应更多的布局模板，配置更多的页面布局方式，以适配更多的电子设备，本申请实施例对此不作限定。

还应理解，表3中的“显示区域的组成和参数”中某显示区域的宽度和高度可以以该区域占据显示屏的具体位置和尺寸数值表示，也可以以不同的显示区域之间的尺寸比例来表示，本申请实施例对此不作限定。

通过表3的内容，开发人员可以根据不同电子设备的布局宽度w，确定多种预设的布局模板，到后续的“应用阶段”，就可以根据实际电子设备的布局宽度w确定出当前可用的布局模板，并根据该布局模板对应的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息，确定该目标应用界面所包括的每一个控件的布局方式，实现一次界面开发就能够适配多种电子设备的显示屏，提高不同电子设备的显示效果。

图7是本申请实施例提供的另一例视频应用的目标应用界面的页面布局示意图。

应理解，图6中的(a)图示出的该视频应用的主界面601为该视频应用的“一级界面”，如果用户执行点击图6中的(a)图的视频2的封面缩略图的操作，响应于用户的操作，手机可以显示如图7中的(a)图所示的视频2的播放界面701，该视频2的播放界面701可以理解为该视频应用的“二级界面”。

示例性的，以该视频2的播放界面作为“目标应用界面”，当该视频2的播放界面显示到手机、平板、PC、智慧屏等不同的电子设备上，开发人员可以根据电子设备具有的不同尺寸、不同形状、不同分辨率的显示屏，配置不同的页面布局方式。

可选地，开发人员可以结合屏幕布局宽度w对应的多个预设区间，为该视频2的播放界面也配置不同的页面布局方式和/或不同的控件尺寸。

示例性的，如图7中的(b)图、(c)图、(d)图和(e)图所示，不同电子设备的屏幕布局宽度w可以对应不同数量的显示区域、显示区域的组成，为了简便，对图7中的(b)图、(c)图、(d)图和(e)图所示的每一种电子设备上的显示区域的布局对应于表4的内容。表4是本申请实施例列举的开发人员为该视频2的播放界面预设的多种页面布局方式示例。结合表4和图7，假设某电子设备显示屏的布局宽度为w，开发人员也可以通过该视频2的播放界面对应的“布局文件”配置多个预设区间，并为不同的预设区间分别配置不同的布局模板，即为不同预设区间分别配置不同的与页面布局相关的参数。

表4

对比表3和表4的内容可知，对于任意一个应用界面，开发人员可以配置不同的页面布局文件，且每一个应用界面对应的页面布局文件中可以包括一种或多种布局模板。其中，一种或多种布局模板中的每一种布局模板可以适用于电子设备的不同的屏幕布局宽度区间。

示例性的，对比图6中的(d)图和图7中的(d)图，该视频应用的主界面和该视频2的播放界面都显示在PC显示屏上时，对应不同的页面布局文件，且每一个页面布局文件中定义的布局模板不同，即使用的布局模板中定义的显示区域的组成、显示区域的布局、显示区域的尺寸，以及每一个显示区域的中所包括的每一个控件的显示尺寸、在显示屏上的布局规则或显示特点等可以不同。

还应理解，对于一个应用界面，该应用界面对应的页面布局文件中包括一种或多种布局模板可以定义不同数量的显示区域，该不同数量的显示区域可以具有不同的布局方式，本申请实施例对此不作限定。

示例性的，对比图7中的(d)图和图7中的(e)图，该视频2的播放界面分别显示在PC的显示屏和智慧屏的显示屏上时，运行同一个页面布局文件，该页面布局文件中定义的布局模板不同，即，PC和智慧屏使用的布局模板不同，显示区域的组成、显示区域的布局、显示区域的尺寸，以及每一个显示区域的中所包括的每一个控件的显示尺寸、在显示屏上的布局规则或显示特点等可以不同。

通过上述介绍的第一阶段(即开发阶段)的实现过程，开发人员完成每一个应用界面(例如一级界面、二级界面等)的开发过程，结合图5中的“开发阶段”的步骤1的实现过程，对于一个应用的不同界面，或者对于不同应用的不同界面，开发人员都可以为任意的应用界面开发并配置对应的页面布局文件。该过程不需要关注电子设备的屏幕尺寸、屏幕长宽比、屏幕形状、屏幕分辨率等屏幕特性参数，基于以下第二阶段(应用阶段)的实现过程，可以将每一个应用界面适配到不同的电子设备上。

第二阶段：应用阶段

图8是本申请实施例提供的一例应用阶段页面布局适配多设备的示意性流程图。

应理解，图8所示的方法800为第二阶段(应用阶段)的实现过程，该方法800可以对应于图5中示出的“应用阶段”中介绍的步骤2-步骤6的实现过程，下面将结合图5的步骤2-步骤6和图8所示的方法800，共同阐述本申请实施例提供的适配多设备的页面布局的方法。

示例性的，如图8所示，该方法800可以包括：

801，获取目标应用界面和所述目标应用界面对应的布局文件，所述布局文件包括布局模板集合，所述布局模板集合包括一种或多种布局模板。

802，遍历所述目标应用界面的一个或多个控件，确定所述一个或多个控件中每一个控件的区域标识。

应理解，以待显示的任意一个应用界面为例，将该应用界面也称为“目标应用界面”，将该应用界面来源的APP称为“目标应用”，介绍不同电子设备的显示屏上显示该目标应用界面的过程。

还应理解，所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间，所述一种或多种布局模板中的每一种布局模板指示所述目标应用界面包括的一个或多个显示区域，以及所述一个或多个显示区域中每一个显示区域包括的页面元素。例如“一种或多种布局模板”可以包括表3中所列举的第一布局模板、第二布局模板等。还应理解，根据前述介绍，在本申请实施例中，该“布局文件”是该目标应用界面对应的页面布局文件，例如包括表3或表4列举的内容，该“布局文件”包括布局模板集合。

还应理解，在本申请实施例中，该“布局文件”可以用于确定该目标应用界面的显示规则或显示策略，例如该“布局文件”可以用于确定该目标应用界面的页面布局方式和/或不同的控件尺寸。具体地，可以确定该目标应用界面的显示区域的组成、显示区域的布局、显示区域的尺寸、每一个控件的布局、坐标、控件的显示高度、显示宽度中的一种或多种，本申请实施例对此不作限定。

可选地，步骤801的执行时机可以具有多种不同的情况，相应地，步骤802可以和步骤801具有相同的执行时机。例如，当电子设备100的系统获取了目标应用界面即可以确定该目标应用界面所包括的一个或多个控件。

示例性的，对于目标应用(例如视频应用)，当用户下载并为电子设备100安装该目标应用时，电子设备100可以获取该目标应用的任意界面(例如一级界面、二级界面等N个应用界面)和任意一个界面对应的布局文件。

或者，当用户点击该电子设备100上安装的该目标应用的图标，运行该目标应用(例如视频应用)时，电子设备100可以获取该目标应用的任意界面(例如一级界面、二级界面等N个应用界面)和任意一个界面对应的布局文件。

又或者，当电子设备100响应于用户的操作，显示屏将要显示该目标应用界面(例如一级界面)时，可以获取该目标应用的界面(例如一级界面)和该目标应用的界面(例如一级界面)对应的布局文件，本申请实施例对此不作限定。

可选地，该步骤801-步骤802可以对应于图5中“应用阶段”的步骤2-步骤4示出的内部实现过程：

步骤2，在电子设备100安装并运行APK。

步骤3，用户在电子设备100运行目标应用，电子设备100的系统创建该目标应用界面的用户界面(user interface，UI)处理线程。示例性的，例如视频应用，对于视频应用的主界面，系统可以创建该视频应用的主界面对应的UI处理线程。

步骤4，电子设备100运行APK，解析目标应用界面的页面布局文件(例如xml文件)，获取与应用界面的页面布局相关的属性参数信息。

具体地，“目标应用界面的页面布局文件”可以理解为本申请实施例的“布局文件”或“XML文件”，系统解析并获取XML文件中与该目标应用界面的页面布局相关的属性参数信息，创建对应的view对象，并调用相关的应用程序编程接口(Application ProgrammingInterface，API)向view写入与页面布局相关的属性参数信息。

可选地，以上步骤2-步骤3的实现过程可以对应于步骤801中获取目标应用界面的过程，步骤4中“解析对应的XML文件并获取XML文件中与该目标应用界面的页面布局相关的属性参数信息”的实现过程可以对应于步骤801中获取所述目标应用界面对应的布局文件的过程，为了简便，此处不再赘述。

可选地，在本申请实施例中，“与该目标应用界面的页面布局相关的属性参数信息”可以包括电子设备100的“系统属性参数”、该目标应用的“应用属性参数”等信息。

其中，“系统属性参数”可以包括与当前的电子设备100相关的设备软、硬件参数等，例如电子设备100的系统软件版本、屏幕尺寸、长宽比(aspect ratio)、屏幕形状、屏幕分辨率等不同的屏幕特性参数等，本申请实施例对此不作限定。

该目标应用的“应用属性参数”可以包括与当前的电子设备100运行的“目标应用界面”相关的页面布局参数和/或该目标应用界面所包括的页面元素的属性参数信息等。

其中，“目标应用界面”相关的页面布局参数可以用于确定该目标应用界面的显示规则或显示策略，例如该目标应用界面所包括的多个显示区域、显示区域的组成、显示区域的布局、显示区域的尺寸等。

“该目标应用界面所包括的页面元素的属性参数信息”可以包括该目标应用界面所包括的文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件等一种或多种控件在内的所有页面元素的属性参数信息。示例性的，以文本控件作为页面元素，“页面元素的属性参数信息”中可以包括显示该文本控件时可以具有的文本颜色、字体、跑马灯动效等一种或多种与页面元素的显示相关的属性参数信息，本申请实施例对此不作限定。

一种可能的实现方式中，在电子设备100的系统中运行APK进入相应的目标应用界面时，android底层机制可以创建一个activity，并对APK中相关的页面布局文件(例如XML文件)进行解析和保存，同时也支持直接调用相关的应用程序编程接口(ApplicationProgramming Interface，API)，进而向view配置与该目标应用界面的页面布局相关的参数。

还应理解，在应用界面的显示过程中，每一个activity可以理解为控制部分，相当于一个容器(container)，界面视图(view)主要负责显示应用界面，且view只能在这个container里才能正常工作。换言之，当系统加载了一个activity之后，再加载该activity相对应的view才能显示出画面来，view可以包括具体的页面布局(layout)，为用户显示相应的应用界面。当用户切换应用界面时，系统可以从一个activity跳转到另一个activity时，再根据将要跳转显示的应用界面对应的页面布局文件为用户显示出相应的新的应用界面。

当系统经过步骤4之后，可以进入图5中示出的view的处理流程，通过API向view配置与该目标应用界面的页面布局相关的参数，具体实现过程对应于：

步骤5—步骤6，经过view的处理流程，例如设备参数测量、测量流程(onMeasure)、布局流程(onLayout)、绘制与显示流程(onDraw)等处理流程，最终绘制、渲染所述目标应用界面，并在电子设备100的显示屏上进行显示该目标应用界面。

一种可能的实现方式中，可以将步骤5-步骤6示出的view的实现过程进一步划分为以下几个不同的流程，每个流程对应于图8中的不同步骤：

(1)测量流程

“测量流程”中的步骤可以理解为确定“显示尺寸”的过程，应理解，“显示尺寸”可以包括该目标应用界面的每一个显示区域的尺寸、所有控件中每一个控件的尺寸等。

一种可能的实现方式中，电子设备100可以通过“测量流程”确定该目标应用界面可以包括的一个或多个显示区域、一个或多个显示区域的布局、每一个显示区域的尺寸，以及可以进一步确定每一个显示区域中所包括的每一个控件的显示尺寸等。

具体地，该测量流程可以对应于图8中的步骤803：

803，获取电子设备的实际布局宽度w，根据所述实际布局宽度w和所述布局文件，确定目标布局模板，并根据所述目标布局模板确定所述目标应用界面的一个或多个显示区域，计算所述目标应用界面的每一个显示区域中包括的每一个控件的尺寸信息。

一种可能的实现方式中，在步骤803的实现过程中，电子设备可以根据当前显示屏的实际布局宽度w确定该实际布局宽度w所在的预设区间，并根据w所在的预设区间从所述布局文件中包括的一个或多个布局模板中确定适配的目标布局模板，例如根据表3或表4的w所属区间确定对应的目标布局模板，进而确定出该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

可选地，该测量流程的步骤803的具体实现过程可以对应于图9中的算法900，电子设备获取当前显示屏的布局宽度w之后，可以根据算法900确定出该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

图9是本申请实施例提供的一例测量流程的实现过程的示意图，示例性的，如图9所示，该算法900可以包括步骤901-步骤913：

901，开始。

可选地，该步骤901可以对应于步骤801-步骤802的实现过程，即获取待显示的目标应用界面和所述目标应用界面对应的布局文件的过程。该步骤901的执行时机可以和步骤801-802的执行时机保持一致，本申请实施例对此不作限定。

902，获取待显示的电子设备的屏幕显示区域的布局宽度w。

可选地，该步骤902可以具有多种可能的执行时机。示例性的，电子设备出厂时屏幕显示区域的布局宽度w可以是固定的，或者，对于折叠屏手机、大屏设备等屏幕显示区域可变的电子设备，该步骤902获取待显示的电子设备的屏幕显示区域的布局宽度w可以是在执行了步骤801-步骤802时，即获取待显示的目标应用界面和所述目标应用界面对应的布局文件时触发获取电子设备当前的屏幕显示区域，本申请实施例对此不作限定。

903，判断屏幕显示区域的布局宽度w是否小于第一阈值x？

904，当屏幕显示区域的布局宽度w小于第一阈值x时，按照第一布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

示例性的，结合表3或表4的内容，根据布局宽度w所属区间，当w<x时，可以确定该目标应用界面可以采用第一布局模板，即电子设备可以归类为手表等可穿戴设备，该目标应用界面可以按照第一布局模板对应的显示区域的组成和参数、控件以及控件宽高等更多的参数信息，确定如何在显示屏上进行页面布局或显示。

905，当屏幕显示区域的布局宽度w大于或等于所述第一阈值x时，判断布局宽度w是否小于第二阈值y？

906，当屏幕显示区域的布局宽度w大于或等于所述第一阈值x且w小于第二阈值y时，判断所述电子设备是否是竖屏显示？

907，当所述电子设备是竖屏显示时，按照第二布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

示例性的，结合表3或表4的内容，根据布局宽度w所属区间，当x≤w<y时，可以确定该目标应用界面可以采用第二布局模板，即电子设备可以归类为手机、平板等竖屏类型设备，该目标应用界面可以按照第二布局模板对应的显示区域的组成和参数、控件以及控件宽高等更多的参数信息，确定如何在显示屏上进行页面布局或显示。

908，当屏幕显示区域的布局宽度w大于或等于所述第二阈值y时，判断布局宽度w是否小于第三阈值z？

909，当屏幕显示区域的布局宽度w大于或等于所述第二阈值y且w小于第三阈值z时，按照第三布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

示例性的，结合表3或表4的内容，根据布局宽度w所属区间，当y≤w<z时，可以确定该目标应用界面可以采用第三布局模板，即电子设备可以归类为手机、平板等横屏类型设备，该目标应用界面可以按照第三布局模板对应的显示区域的组成和参数、控件以及控件宽高等更多的参数信息，确定如何在显示屏上进行页面布局或显示。

可选地，对于一个预设的尺寸区间，还可以结合电子设备是横屏显示或者竖屏显示匹配更细化的布局模板。具体地，在步骤909中，系统还可以进一步判断当前的电子设备是横屏显示应用界面或者竖屏显示应用界面，并根据横屏或竖屏的不同显示方式。示例性的，结合表3和表4，在y≤w<z的尺寸区间内，当电子设备是横屏显示应用界面时，可以按照第三布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。在y≤w<z的尺寸区间内，当电子设备是横屏显示应用界面时，可以按照第四布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

910，根据电子设的设备类型和/或目标应用的应用类型，判断所述电子设备是否是分栏显示的电子设备？

可选地，在本申请实施例中，“分栏显示”可以是针对特定类型的电子设备，例如PC。示例性的，如图6中的(d)图所示，PC显示屏上显示的应用界面一般可以分栏显示，菜单显示区域一直显示在内容推荐区域的显示层级之上，且以“左中右”的排列方式同时显示了菜单显示区域、内容推荐区域和导航区域。智慧屏上显示的应用界面一般不分栏显示，本申请实施例对此不作限定。

或者，“分栏显示”可以是针对特定应用，例如备忘录应用等便签类应用、电子邮箱应用等。示例性的，备忘录应用等便签类应用在PC、智慧屏等屏幕尺寸较大的电子设备上显示时，可以同时以分栏显示的方式显示菜单区域、内容标题区和内容详情区等，从而发挥出大屏幕的尺寸优势，提高用户的视觉体验和使用体验。

911，当所述电子设备不是分栏显示的电子设备和/或所述目标应用不是分栏显示的应用类型时，按照第六布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

912，当所述电子设备是分栏显示的电子设备和/或所述目标应用是分栏显示的应用类型时，按照第五布局模板确定该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

示例性的，结合表3或表4的内容，根据布局宽度w所属区间，当z≤w时，系统可以进一步判断当前的电子设备是否是分栏显示的电子设备，和/或，判断所述目标应用是否是分栏显示的应用类型，并根据判断结果，匹配不同的布局模板。例如，当z≤w且电子设备是分栏显示的PC时，按照第五布局模板对应的显示区域的组成和参数、控件以及控件宽高等更多的参数信息，确定如何在显示屏上进行页面布局或显示。当z≤w且电子设备是不分栏显示的智慧屏时，按照第六布局模板对应的显示区域的组成和参数、控件以及控件宽高等更多的参数信息，确定如何在显示屏上进行页面布局或显示。

913，确定一个或多个显示区域、每一个显示区域中包括的每一个控件的尺寸信息。

应理解，本申请实施例的第一布局模板、第二布局模板、第三布局模板、第四布局模板、第五布局模板、第六布局模板可以用于指示该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息，进而确定该目标应用界面如何在电子设备的显示屏上进行显示，本申请实施例还可以根据电子设备显示屏的布局宽度w划分更多的预设区间，进而对应更多的布局模板，配置更多的页面布局方式，以适配更多的电子设备，本申请实施例对此不作限定。

一种可能的实现方式中，第一布局模板、第二布局模板等布局模板指示该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息时，可以直接配置该目标应用界面包括的每一个控件的宽度和/或高度等参数信息。示例性的，对于图6中的(a)图所示的视频2的封面缩略图控件，可以配置该视频2的封面缩略图控件的尺寸为160px×160px。

另一种可能的实现方式中，也可以在第一布局模板、第二布局模板等布局模板中配置该目标应用界面包括的控件数量、控件之间的间距等参数，进而电子设备可以根据显示屏上实际显示区域的面积、尺寸和控件数量、控件之间的间距等参数，确定如何显示该目标应用界面。示例性的，对于图6中的(a)图所示的视频1的封面缩略图控件和视频2的封面缩略图控件，可以配置两个封面缩略图控件之间的间距为100px，本申请实施例对此不作限定。

通过上述“测量流程”中的步骤可以从该目标应用界面对应的布局文件中的“目标布局模板”，例如第一布局模板、第二布局模板、第三布局模板等，并进一步根据“布局模板”确定了该目标应用界面包括的显示区域的组成和参数、控件以及控件宽、高等参数信息。

(2)布局流程

应理解，“布局流程”中的步骤可以进一步确定该目标应用界面每一个显示区域中每一个控件的坐标信息，即“布局流程”可以用于确定该目标应用界面包括的所有控件如何排布。

具体地，该布局流程可以对应于图8中的步骤804：

804，根据所述目标布局模板，确定所述目标应用界面的一个或多个显示区域的坐标信息，计算所述目标应用界面的每一个显示区域中包括的每一个控件的坐标信息。

一种可能的实现方式中，电子设备根据该目标布局模板可以确定该目标应用界面包括的显示区域的组成、显示区域的排布方式，还可以根据步骤802中遍历所述目标应用界面中的一个或多个控件，确定每一个控件的区域标识，即确定每一个控件将显示在哪一个显示区域，再进一步确定每一个控件的坐标。

图10是本申请实施例提供的一例确定控件的坐标信息的示意图。

示例性的，以平板显示屏上显示视频2的播放界面为例，假设开发人员为视频2的播放界面配置了图7中的(c)图所示的页面布局方式，具体地的参数可以参照如表4列举的内容。

如图10中的(a)图所示，建立如图所示的坐标系XOY，以平板的显示屏的实际显示区域的左上角的点O(0,0)为坐标原点，通过前述的测量过程，结合表4中的列举的第三布局模板，可以计算得到以下各个点的坐标：A(w9,0)，B(0，h12)，C(0，h12+h13)，D(w9，h12)，E(w9，h12+h13)，F(w9+w10,0)，G(w9+w10,h14)。

因此，可以进一步根据O(0,0)，A(w9,0)，D(w9，h12)和B(0，h12)四个点的坐标确定视频播放区域的显示范围，根据B(0，h12)，D(w9，h12)，E(w9，h12+h13)和C(0，h12+h13)四个点的坐标确定内容详情区域的显示范围，根据A(w9,0)，F(w9+w10,0)，G(w9+w10,h14)和E(w9，h12+h13)四个点的坐标确定内容推荐区域中每一个显示区域的显示范围。

此外，在步骤804中，确定了平板显示屏上显示区域的组成、每一个显示区域的显示范围之后，可以根据控件宽、高等参数信息，进一步为每一个显示区域确定控件的布局。

一种可能的实现方式中，当第一布局模板、第二布局模板等布局模板直接配置该目标应用界面包括的每一个控件的宽度和高度等参数时，例如视频2的封面缩略图控件的尺寸为w0×h0(例如前述列举的160px×160px)。

示例性的，如图10中的(a)图所示，以内容推荐区域中显示的视频的封面缩略图控件为例，系统可以确定该内容推荐区域的显示区域为A-F-G-E-D-A形成的矩形显示区域。该内容推荐区域的显示区域内将要显示3个视频的封面缩略图控件，那么系统可以根据该内容推荐区域的显示区域的显示宽度w10、显示高度h14和视频2的封面缩略图控件的尺寸w0×h0，确定3个视频的封面缩略图控件的布局，即确定3个视频的封面缩略图控件的显示位置和/或间距等。

可选地，系统可以计算该视频2的封面缩略图控件的高度和/或宽度确定左上角M点、右下角N点的坐标，进而确定该视频2的封面缩略图控件的显示位置。同理，其他更多的控件可以按照相同的方法，计算每一个控件的显示位置，直到该内容推荐区域中所有控件、以及该视频播放区域、该内容详情区域的所有控件都排布完成，即确定了该目标应用界面的布局。

(3)绘制与显示流程

应理解，“绘制与显示流程”中的步骤可以根据前述的“测量流程”和“布局流程”确定的该目标应用界面的布局，绘制、渲染并在显示屏上显示该目标应用界面。

具体地，该绘制与显示流程可以对应于图8中的步骤805：

805，根据一个或多个显示区域、每一个显示区域的坐标信息、每一个控件的尺寸信息、每一个控件的坐标信息，绘制、渲染、并在显示屏上显示所述目标应用界面。

示例性的，平板根据图10中的(a)图所示的布局方式，绘制、渲染得到所述目标应用界面，并在显示屏上显示如图10中的(b)图所示的视频2的播放界面，应理解，图10中的(b)图所示的视频2的播放界面的页面布局样式和图10中的(a)图所示的布局方式完全一致，为了简便，此处不再赘述。

综上所述，通过本申请实施例提供的适配多设备的页面布局的方法，对于任意一个应用界面，开发人员只需要开发一套页面布局文件，就能够实现将该应用界面显示到不同的电子设备，使得该应用界面能够适配不同尺寸、不同形状、不同分辨率的显示屏，一次开发实现多种电子设备的适配，减少了开发人员开发应用界面的工作量，降低了开发人员的工作成本，提高了界面开发效率。

具体地，在开发人员开发应用界面的过程中，可以通过不同的多个布局模板，为目标应用界面自定义不同数量、不同类型、不同排布的显示区域，满足用户各种不同的使用需求和使用场景。开发人员可以根据电子设备的布局宽度配置多个预设区间，并为每一种预设区间配置对应的布局模板，即配置不同的页面布局方式和/或不同的控件尺寸。

在该目标应用界面显示到任意电子设备的显示屏的过程中，可以根据实际电子设备的布局宽度w确定出该应用界面适配的目标布局模板，并根据该目标布局模板确定该应用界面的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息，进而确定该应用界面所包括的每一个控件的布局方式。

该过程不依赖电子设备的类型和电子设备的屏幕特性，能够实现该应用界面的自适应适配显示，只需要开发人员进行一次应用界面的开发，就能够适配多种电子设备的不同尺寸、不同形状、不同分辨率的显示屏，做到一套布局，多端适配，提高了不同电子设备的显示效果。

此外，开发人员可以根据不同电子设备的实际布局宽度、实际布局高度、设备类型、应用类型中的一种或多种，自定义该应用界面包括的各显示区域的相对位置、层次关系，在不同场景中，能够触发不同的电子设备自动调整各显示区域的相对位置、层次关系等，满足了用户各种不同的使用需求和使用场景。

需要说明的是，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，在本申请实施例的描述中，“多个”是指两个或多于两个。

应理解，本申请实施例中的方式、情况、类别以及实施例的划分仅是为了描述的方便，不应构成特别的限定，各种方式、类别、情况以及实施例中的特征在不矛盾的情况下可以相结合。

还应理解，本申请实施例中的术语“第一”、“第二”以及“第三”仅为了区分，不应对本申请构成任何限定。例如，本申请实施例中的“第一布局模板”、“第二布局模板”等，表示不同的布局模板对应的显示区域的组成和参数、以及每一个显示区域中所包括的每一个控件以及控件宽高等参数信息等不同，即该目标应用界面基于不同的布局模板可以具有不同的布局方式。

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

还需要说明的是，本申请实施例中，“预设”、“固定值”等可以通过在电子设备(例如发送端设备和接收端设备等)中预先保存相应的代码、表格或其他可用于指示相关信息的方式来实现，本申请对于其具体的实现方式不做限定。例如，本申请实施例中“预设区间”等。

可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件和/或软件模块。结合本文中所公开的实施例描述的各示例的算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以结合实施例对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本实施例可以根据上述方法示例对电子设备进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块可以采用硬件的形式实现。需要说明的是，本实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

在采用对应各个功能划分各个功能模块的情况下，上述实施例中涉及的电子设备的一种可能的组成示意图，该电子设备可以包括：显示单元、检测单元和处理单元。其中，显示单元、检测单元和处理单元相互配合，可以用于支持电子设备执行上述步骤等，和/或用于本文所描述的技术的其他过程。

需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。

本实施例提供的电子设备，用于执行上述适配多设备的页面布局的方法，因此可以达到与上述实现方法相同的效果。

在采用集成的单元的情况下，电子设备可以包括处理模块、存储模块和通信模块。其中，处理模块可以用于对电子设备的动作进行控制管理，例如，可以用于支持电子设备执行上述显示单元、检测单元和处理单元执行的步骤。存储模块可以用于支持电子设备执行存储程序代码和数据等。通信模块，可以用于支持电子设备与其他设备的通信。

其中，处理模块可以是处理器或控制器。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，数字信号处理(digital signal processing，DSP)和微处理器的组合等等。存储模块可以是存储器。通信模块具体可以为射频电路、蓝牙芯片、Wi-Fi芯片等与其他电子设备交互的设备。

在一个实施例中，当处理模块为处理器，存储模块为存储器时，本实施例所涉及的电子设备可以为具有图3所示结构的设备。

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

本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的适配多设备的页面布局的方法。

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

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

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

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

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

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

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

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

Claims (11)

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

获取待显示的应用界面包括的页面元素信息和所述应用界面对应布局文件，所述布局文件包括布局模板集合，所述布局模板集合包括一种或多种布局模板，所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间，所述一种或多种布局模板中的每一种布局模板指示所述应用界面包括的一个或多个显示区域，以及所述一个或多个显示区域中每一个显示区域包括的页面元素；

获取所述显示屏的实际布局尺寸，所述实际布局尺寸包括所述显示屏用于显示所述应用界面时的显示区域的长度和/或宽度；

根据所述实际布局尺寸，从所述布局模板集合包括的一种或多种布局模板中确定目标布局模板；

根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

2.根据权利要求1所述的方法，其特征在于，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，所述每一个页面元素的尺寸信息包括长度信息和/或宽度信息，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：

根据所述目标布局模板，确定所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；

根据所述应用界面包括的页面元素信息，以及所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

3.根据权利要求1所述的方法，其特征在于，所述一种或多种布局模板中的每一种布局模板还用于指示所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：

根据所述应用界面包括的页面元素的数量和/或相邻页面元素之间的间距信息，计算所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息；

根据所述应用界面包括的页面元素信息，以及所述应用界面包括的每一个页面元素的尺寸信息和/或坐标信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述应用界面包括的页面元素信息包括每一个页面元素的标识和每一个页面元素的区域标识，所述根据所述目标布局模板和所述应用界面包括的页面元素信息，绘制、渲染所述应用界面包括的页面元素，并在所述显示屏上显示所述应用界面，包括：

根据所述目标布局模板，确定所述应用界面包括的一个或多个显示区域；

根据所述每一个页面元素的标识和所述每一个页面元素的区域标识，确定所述一个或多个显示区域中每一个显示区域包括的页面元素；

绘制、渲染所述一个或多个显示区域中每一个显示区域包括的页面元素，并在所述显示屏上显示所述应用界面。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述应用界面包括的页面元素信息还包括每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，所述绘制、渲染所述应用界面包括的页面元素，包括：

根据所述每一个页面元素的显示颜色、显示字体、显示动画效果中的一种或多种与页面元素的显示相关的属性信息，绘制、渲染所述应用界面包括的页面元素。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述根据所述实际布局尺寸，从所述布局模板集合包括的一种或多种布局模板中确定目标布局模板，包括：

根据所述实际布局尺寸，从所述一种或多种布局模板中的每一种布局模板对应一个或多个预设的尺寸区间中，确定所述实际布局尺寸所对应的目标尺寸区间；

根据所述目标尺寸区间，从所述布局模板集合包括的一种或多种布局模板中确定所述目标布局模板。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述应用界面包括的一个或多个显示区域中的任意两个显示区域没有重叠区域；或者，

所述应用界面包括的一个或多个显示区域中的任意两个显示区域有重叠区域且具有不同的显示层级；或者，

所述应用界面包括的一个或多个显示区域具有预设的布局样式；或者，

所述应用界面包括的一个或多个显示区域具有用户可调节的自定义的布局样式。

8.根据权利要求1至7中任一项所述的方法，其特征在于，所述应用界面包括的页面元素包括文本控件、图片控件、按钮控件、进度条控件、时间控件、导航控件、滚动条控件、动画控件中的一种或多种。

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

显示屏；

一个或多个处理器；

一个或多个存储器；

安装有多个应用程序的模块；

所述存储器存储有一个或多个程序，当所述一个或者多个程序被所述处理器执行时，使得所述电子设备执行如权利要求1至8中任一项所述的方法。

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

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