背景图显示方法和电子设备

技术领域

本申请涉及电子技术领域，具体涉及一种背景图显示方法和电子设备。

背景技术

列表是电子设备中各个应用程序（application，APP）常用的显示格式。为了增加显示效果，在显示列表内容的同时，可以显示背景图。

然而，发明人发现，一些列表的背景图存在模糊不清晰的现象，显示效果不佳。

发明内容

本申请提供了一种背景图显示方法和电子设备，在显示列表背景图时，无需拉伸背景图，不会造成背景图失真，提高用户视觉体验。

第一方面，本申请提供一种背景图显示方法，该方法由电子设备执行，该方法包括：接收用户的第一操作，第一操作用于指示显示第一界面，第一界面中包括第一列表，第一列表的底层显示第一背景图；响应于第一操作，创建第一视图，第一视图中包括至少一个第一列表项视图；创建第二视图，第二视图重叠于第一视图的上层，第二视图中包括至少一个第二列表项视图，至少一个第二列表项视图占满或超出第二视图的布局，且每个第二列表项视图的尺寸小于或等于第一背景图的尺寸；向各个第一列表项视图填充第一列表的内容；向各个第二列表项视图填充第一背景图。

可选的，第一操作例如可以为点击应用的图标，或者点击某一界面中能够触发界面跳转的某一控件等。本申请实施例对于第一操作不做任何限定。

第一视图和第二视图均为列表的布局容器。可选的，第一视图和第二视图可以为列表视图（list view），或者回收器视图（recycler view）等，本申请实施例对此不做任何限定。

第一方面提供的背景图显示方法，分别构建第一视图和第二视图，通过第一视图显示列表的内容，通过第二视图显示第一背景图，将列表内容和第一背景图分开显示。而且，第二列表项视图占满或超出第二视图的布局，且每个第二列表项视图的尺寸小于或等于第一背景图的尺寸，这样，向各个第二列表视图分别填充第一背景图后，第一背景图能够铺满或超出第二视图，且不需拉伸第一背景图，不会出现背景图模糊、不清晰、变形等现象，提高显示效果，进而提高用户视觉体验。

一种可能的实现方式中，第二视图的布局尺寸与第一视图的布局尺寸相同。如此，能够实现列表内容和第一背景图的同步显示，即存在列表内容的区域，底部均显示有第一背景图，防止出现背景显示留白等现象，提高显示效果。

一种可能的实现方式中，创建第二视图之前，该方法还包括：根据第一背景图的尺寸和第一视图的布局尺寸，确定第二列表项视图的布局信息；创建第二视图，包括：根据第二列表项视图的布局信息，创建第二视图。

该实现方式中，根据第一背景图的尺寸和第一视图的布局尺寸，确定第二列表视项视图的布局信息，使至少一个第二列表项视图占满或超出第二视图的布局，且每个第二列表项视图的尺寸小于或等于第一背景图的尺寸。如此，能够避免第一背景图显示时被拉伸，防止第一背景图失真，进一步提高显示效果，提高用户视觉效果。

一种可能的实现方式中，布局尺寸包括布局宽度和布局高度，布局信息包括第二列表项视图的宽度、第二列表项视图的高度、宽度布局数量和高度布局数量，宽度布局数量是指第二列表项沿宽度方向的布局数量，高度布局数量是指第二列表项沿高度方向的布局数量；根据第一背景图的尺寸和第一视图的布局尺寸，确定第二列表项视图的布局信息，包括：确定第一背景图的宽度和高度；确定布局宽度与第一背景图的宽度的比值，得到第一比值；将第一比值向上取整，得到宽度布局数量；根据第一背景图的宽度和高度，确定第二列表项视图的宽度和第二列表项视图的高度；确定布局高度与第二列表项视图的高度的比值，得到第二比值；对第二比值向上取整，得到高度布局数量。

该实现方式中，将布局宽度与第一背景图的宽度的比值向上取整，得到宽度布局数量，这样第二列表项视图沿宽度方向能够占满或超出第二视图；将布局高度与第二列表项视图的高度的比值向上取整，得到高度布局数量，这样，第二列表项视图沿高度方向能够占满或超出第二视图。因而填充第一背景图后，第一背景图能够占满或超出第二视图的布局，不需要拉伸背景原图，因而不会导致第一背景图失真，所以能够提高显示效果，提高用户视觉体验。

一种可能的实现方式中，根据第一背景图的宽度和高度，确定第二列表项视图的宽度和第二列表项视图的高度，包括：将第一背景图的宽度作为第二列表项视图的宽度；将第一背景图的高度作为第二列表项视图的高度。

该实现方式中，直接将第一背景图的宽度作为第二列表项视图的宽度，将第一背景图的高度作为第二列表项视图的高度，也即，填充第一背景图时，无需对第一背景图拉伸或压缩，不改变第一背景图的尺寸，因而不会导致第一背景图失真，提高显示效果，提高用户视觉体验。

一种可能的实现方式中，根据第一背景图的宽度和高度，确定第二列表项视图的宽度和第二列表项视图的高度，包括：确定布局宽度与宽度布局数量的商，得到第二列表项视图的宽度；确定第二列表项视图的宽度与第一背景图的宽度的比值，得到缩小比例；确定缩小比例与第一背景图的高度的乘积，得到第二列表项视图的高度。

该实现方式中，第二列表视图的高度根据其宽度的缩小比例计算得到，因此，向第二列表视图填充第一背景图时，对第一背景图的缩小为等比例缩小，不会导致第一背景图失真，进一步提高显示效果，提高用户视觉体验。

一种可能的实现方式中，电子设备包括框架加载组件和背景布局计算组件，创建第一视图之前，该方法包括：框架加载组件响应于第一操作，获取第一界面的界面信息，界面信息中包括第一标志位和第二标志位，第一标志位的值为第一值，表征第一列表的底层显示背景图，第二标志位的值为第二值，表征背景图的显示方式为通过列表布局容器显示；根据第一背景图的尺寸和第一视图的布局尺寸，确定第二列表项视图的布局信息，包括：框架加载组件确定第二标志位的值为第二值的情况下，向背景布局计算组件发送布局计算指令；背景布局计算组件响应于布局计算指令，根据第一背景图的尺寸和第一视图的布局尺寸，确定第二列表项视图的布局信息。

可选的，第一值可以为1，第二值也可以为1。也就是说，第一界面的界面信息中携带值为1的第一标志位和值为1的第二标志位。第一标志位值为1，表征第一列表的底层显示背景图，第二标志位的值为1，表征背景图的显示方式为通过列表布局容器显示。

该实现方式中，通过第一标志位标记是否显示背景图，通过第二标志位标记是否通过列表布局容器显示。如此，能够准确的实现背景图的显示，提高显示效果。而且，该实现方式中，框架加载组件在确定第二标志位的值为第二值的情况下，向背景布局计算组件发送布局计算指令，指示背景布局组件计算第二列表项视图的布局信息，如此能够准确地指示背景布局组件在需要计算时执行计算流程，节约算法流程，提高算法运行效率。

可选的，电子设备还包括显示组件，背景布局计算组件计算得到第二列表项视图的布局信息发送至显示组件，由显示组件根据该布局信息创建第二视图。

一种可能的实现方式中，电子设备还包括数据获取组件，该方法包括：框架加载组件向数据获取组件发送数据获取指令；数据获取组件响应于数据获取指令，获取第一列表的内容和第一背景图。

一种可能的实现方式中，电子设备还包括显示组件，创建第一视图，包括：框架加载组件向显示组件发送显示指令，显示指令中携带第一标志位和第二标志位；显示组件响应于显示指令，创建第一视图；创建第二视图，包括：显示组件确定第一标志位的值为第一值且第二标志位的值为第二值的情况下，创建第二视图。

也就是说，在确定第一标志位的值为第一值，第二标志位的值为第二值的情况下，显示组件创建第二视图。否则，显示组件不创建第二视图。如此，显示组件能够在需要通过列表布局容器显示背景图时，准确创建第二视图和第二适配器，提高显示准确性。

一种可能的实现方式中，第一视图和第二视图均为回收器视图。回收器视图能够回收使用视图，提高滑动效率，节约系统资源。

一种可能的实现方式中，向各个第一列表项视图填充第一列表的内容之前，该方法还包括：显示组件创建第一适配器，第一适配器中包括与至少一个第一列表项视图一一对应的第一子项，各个第一子项中存储有第一列表的内容；向各个第一列表项视图填充第一列表的内容，包括：显示组件将各个第一子项中的内容填充至对应的第一列表项视图。

该实现方式中，通过适配器能够准确实现视图的填充和加载刷新等，提高列表内容的显示准确性和显示效率。

一种可能的实现方式中，向各个第二列表项视图填充第一背景图之前，该方法还包括：显示组件创建第二适配器，第二适配器中包括与至少一个第二列表项视图一一对应的第二子项，各个第二子项中存储有第一背景图；向各个第二列表项视图填充第一背景图，包括：显示组件将各个第二子项中的第一背景图填充至对应的第二列表项视图。

一种可能的实现方式中，第一视图的背景透明。

该实现方式中，通过适配器能够准确实现视图的填充和加载刷新等，提高背景图的显示准确性和显示效率。

一种可能的实现方式中，第二列表项视图之间的分割线透明。这样，不会影响第一视图中内容的显示，进一步提高显示效果。

一种可能的实现方式中，该方法还包括：接收用户在第一列表内的滑动操作；响应于滑动操作，第一视图和第二视图同步滑动。

该实现方式中，在接收到滑动操作时，第一视图和第二视图同时响应滑动操作，同步滑动。如此，实现了列表背景图的可滑动，提高背景图显示的灵活性和生动性，提高显示效果，提高用户视觉体验。而且，背景图和列表的滑动能够同步进行，防止滑动错乱，进一步提高显示效果，提高用户视觉体验。

一种可能的实现方式中，响应于滑动操作，第一视图和第二视图同步滑动，包括：响应于滑动操作，第一视图根据滑动操作的滑动参数，滑动各个第一列表项视图；响应于滑动操作，第一视图将滑动参数传递至第二视图；第二视图根据滑动参数，滑动各个第二列表项视图。

可选的，滑动参数包括滑动操作的滑动位置、滑动距离或者滑动偏移量等中的至少一种。

可选的，滑动参数为滑动坐标时，可以通过scrollTo（x，y）函数实现滑动。滑动参数为滑动偏移量时，可以通过scrollBy（dx，dy）函数实现滑动。

该实现方式中，第一视图响应滑动参数滑动其中的第一列表项视图，实现列表内容的滑动。同时，第一视图能够将滑动参数传递至第二视图，触发第二视图滑动其中的第二列表项视图，实现背景图的滑动。采用同样的滑动参数，能够实现列表内容和背景图的同步滑动，防止滑动错乱，提高显示效果，提高用户体验。

一种可能的实现方式中，电子设备包括滑动管理器；第一视图和第二视图同步滑动之前，该方法还包括：第二视图向滑动管理器注册滑动事件监听；滑动管理器向第一视图注册滑动事件监听；响应于滑动操作，第一视图将滑动参数传递至第二视图，包括：响应于滑动操作，第一视图向滑动管理器回调滑动参数；滑动管理器向第二视图回调滑动参数。

该实现方式中，以滑动管理器作为中间的参数传递和滑动的管理者，简单、快速、准确地实现第一视图与第二视图滑动参数的传递，提高同步滑动的准确性，进而提高显示效果。

一种可能的实现方式中，该方法还包括：若第一视图确定第一列表项视图已滑动至底部，则向第一视图对应的第一适配器发送第一指示消息，并向第二视图对应的第二适配器发送第二指示消息；第一适配器响应于第一指示消息，获取新内容，新内容为待显示于第一列表的内容；第一适配器将新内容加载至第一适配器中，并将新内容刷新至第一视图；第二适配器响应于第二指示消息，将第二适配器中存储的第一背景图重复加载，并将重复加载的第一背景图刷新至第二视图。

该实现方式中，在第一列表项视图滑动至底部时，由第一视图指示第一适配器和第二适配器同时加载数据，实现了列表内容和背景图的同步加载刷新。而且，第二适配器在加载数据时，将其中保存的第一背景图循环加载，无需重新获取数据，提高列表背景显示的效率。

第二方面，本申请提供一种装置，该装置包含在电子设备中，该装置具有实现上述第一方面及上述第一方面的可能实现方式中电子设备行为的功能。功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元。例如，接收模块或单元、处理模块或单元等。

第三方面，本申请提供一种电子设备，电子设备包括：处理器、存储器和接口；处理器、存储器和接口相互配合，使得电子设备执行第一方面的技术方案中任意一种方法。

第四方面，本申请提供一种芯片，包括处理器。处理器用于读取并执行存储器中存储的计算机程序，以执行第一方面及其任意可能的实现方式中的方法。

可选的，芯片还包括存储器，存储器与处理器通过电路或电线连接。

进一步可选的，芯片还包括通信接口。

第五方面，本申请提供一种计算机可读存储介质，计算机可读存储介质中存储了计算机程序，当计算机程序被处理器执行时，使得该处理器执行第一方面的技术方案中任意一种方法。

第六方面，本申请提供一种计算机程序产品，计算机程序产品包括：计算机程序代码，当计算机程序代码在电子设备上运行时，使得该电子设备执行第一方面的技术方案中任意一种方法。

附图说明

图1是本申请实施例提供的一例列表显示界面；

图2是本申请实施例提供的另一例列表显示界面；

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

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

图5是本申请实施例提供的一例APP的界面变化示意图；

图6是本申请实施例提供的一例背景图显示方法的流程示意图；

图7是本申请实施例提供的一例背景图的显示方法的交互过程示意图；

图8是本申请实施例提供的一例回收器视图和适配器示意图；

图9是本申请实施例提供的另一例背景图显示方法的流程示意图；

图10是本申请实施例提供的一例回收器视图示意图；

图11是本申请实施例提供的一例适配器示意图；

图12是本申请实施例提供的一例内容回收器视图4与背景回收器视图重合后的效果图；

图13是本申请实施例提供的又一例背景图显示方法的流程示意图；

图14是本申请实施例提供的一例背景列表项布局示意图；

图15是本申请实施例提供的又一例背景图显示方法的流程示意图；

图16是本申请实施例提供的另一例背景列表项布局示意图；

图17是本申请实施例提供的另一例APP的界面变化示意图；

图18是本申请实施例提供的又一例背景图显示方法的流程示意图；

图19是本申请实施例提供的又一例背景图显示方法的流程示意图。

具体实施方式

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

以下，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”、“第三”的特征可以明示或者隐含地包括一个或者更多个该特征。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本申请说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

列表是APP在显示界面时常用的显示格式。可以理解，列表可以为单列多行的列表，可以为单行多列的列表，也可以为多行多列的列表（即网格列表），还可以为交错显示的列表等。示例性的，图1为本申请实施例提供的几种列表显示界面。如图1中的（a）图所示，在设置APP中，各个设置选项可以通过列表的形式显示。如图1中的（b）图所示，在某外卖APP中，各条售卖信息可以通过列表的形式显示。如图1中的（c）图所示，在应用下载APP（例如，应用市场APP、应用商店APP等）中，各条应用信息也可以通过列表的形式显示。如图1中的（d）图所示，在信息APP中，各条短信息可以通过列表的形式显示。可以理解，图1仅作为几种列表的示例，不用于限定。实际应用中，列表可以应用于任何APP的界面显示中。

列表可以通过列表视图（list view）或回收器视图（recycler view）等布局容器实现。

为了提高列表的显示效果，可以为列表增加背景图，如图2所示。相关技术中，列表背景图的显示，主要是通过将显示列表内容的布局容器的背景设置为背景图片来实现，将背景图铺满整个布局容器。然而，多数情况下，背景图的尺寸并不能与布局容器的布局尺寸完全匹配，因此需要对背景图的尺寸进行调整，例如，拉伸背景图等。这样，会改变背景图分辨率，导致背景图显示失真，出现背景图模糊、不清晰或变形等现象，显示效果不佳，影响用户视觉体验。具体的，参见图2，背景图被拉伸，导致图片变形，显示效果不佳。

有鉴于此，本申请实施例提供一种背景图显示方法，分别构建用于显示列表内容的内容回收器视图（content recycler view，也称为第一视图）和用于显示背景图的背景回收器视图（background recycler view，也称为第二视图），内容回收器视图重叠设置于背景回收器视图的上层。背景回收器视图包括至少一个列表项视图（item view，简称item或列表项），这些列表项占满或超出背景回收器视图，且每个列表项的尺寸小于或等于背景图的尺寸。之后，将列表内容数据填充至内容回收器视图，将每一张背景图作为一个列表项的内容数据，填充至背景回收器视图。这样，背景图能够铺满或超出背景回收器视图，且不需拉伸背景图，不会出现背景图模糊、不清晰、变形等现象，提高显示效果，进而提高用户视觉体验。

下面对本方法所适用的电子设备的结构进行说明。

本申请实施例提供的背景图显示方法可以应用于手机、平板电脑、可穿戴设备、车载设备、增强现实（augmented reality，AR）/虚拟现实（virtual reality，VR）设备、笔记本电脑、超级移动个人计算机（ultra-mobile personal computer，UMPC）、上网本、个人数字助理（personal digital assistant，PDA）等可以安装应用程序（application，APP）的电子设备上，本申请实施例对电子设备的具体类型不作任何限制。

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

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

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

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

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

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

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

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。例如，界面中显示某一应用一列表，用户在显示屏194表面执行滑动操作。触摸传感器180K检测用户的触摸数据，并传递给应用处理器。应用处理器根据触摸数据确定该触摸操作为滑动操作。之后，应用处理器控制该应用响应该滑动操作，对列表进行滑动显示。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

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

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

应用程序包可以包括应用下载，短信息，通话，相机，图库，日历，通话，地图，WLAN，蓝牙，音乐，视频等应用程序（图4中未具体示出）。

如图4所示，本申请实施例中，应用程序层的任一APP可以包括框架加载组件、数据获取组件、背景布局计算组件、显示组件和滑动管理器。

框架加载组件作为APP的指挥中心，用于控制该APP中各个界面的跳转和显示等。例如，响应用户的某一操作，控制该APP显示界面a；响应用户的另一操作，控制该APP从界面a跳转至界面b。

数据获取组件用于获取界面显示所需的界面数据，例如列表中的文本数据、图片数据，以及列表的背景图数据等。可选的，数据获取组件可以从服务器下载数据，也可以从本地获取数据，本申请对此不做任何限定。

背景布局计算组件用于计算背景图的尺寸，并根据背景图的尺寸和内容回收器视图的布局尺寸计算背景回收器视图中列表项的尺寸。

显示组件用于实现界面的显示。本实施例中，显示组件可以用于创建内容回收器视图和背景回收器视图，并将内容回收器视图和背景回收器视图重合显示，向内容回收器视图中各个列表项填充（即渲染）列表内容数据，以实现列表内容的显示，向背景回收器视图中各个列表项填充背景图，以实现列表背景的显示。在一个具体的实施例中，显示组件可以为活动（activity）创建的片段（fragment）。

滑动管理器用于管理内容回收器视图和背景回收器视图的滑动。

可选的，在一些实施例中，显示组件也可以通过创建其他布局容器来实现列表内容和列表背景的显示。例如，可以创建内容列表视图（content list view）和背景列表视图（background list view）等，本申请实施例对此不做任何限定。以下主要以内容回收器视图和背景回收器视图为例进行说明。

可以理解，APP的各个组件实现其功能需要底层模块的支持，可以通过调用底层相关模块来实现。例如，显示组件可以通过调用应用程序框架层的窗口管理器、资源管理器等等实现其功能。

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

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

输入框架用于接收内核层上报的触摸事件，并将触摸事件分发至对应的应用。

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

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

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

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

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

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

为了便于说明，下述实施例中，将一张或多张未拉伸的背景图铺满或超出背景回收器视图的形成过程称为“拼接显示背景图”，将“拼接显示背景图”形成的背景显示效果称为“拼接背景”。

以下以用于下载应用的应用市场APP为例进行说明。示例性的，图5为本申请实施例提供的一例APP的界面变化示意图。如图5中的（a）图所示，以电子设备为手机为例，手机显示桌面，桌面显示有应用市场APP的图标501。用户点击应用市场APP的图标501，响应于用户的点击操作，手机启动应用市场APP，并显示应用市场APP的主界面502，如图5中的（b）图所示。主界面502中包括列表5021、列表5022、列表5023等，列表5021、列表5022、列表5023的底层均不包含背景图。

主界面502中还包括应用榜控件503，用户点击应用榜控件503，界面跳转至应用榜界面504，如图5中的（c）图所示。应用榜界面504中显示有多个应用的信息，且这些应用的信息以列表505的形式显示，列表505的底层显示有拼接背景。该拼接背景由多张背景原图（也称为第一背景图）拼接而成，图中分别示出为背景原图5051、背景原图5052和背景原图5053。

下面对图5所示的界面变化对应实现过程进行说明。

首先对主界面502的显示过程进行说明。

图6是本申请实施例提供的一例背景图的显示方法的流程示意图，图7是本申请实施例提供的一例背景图的显示方法的交互过程示意图，请一并参见图6和图7，本申请实施例提供的背景图显示方法可以包括：

S101、响应于用户点击应用市场APP图标的操作（也称为第一操作），应用程序框架层的输入框架将触摸事件1分发至应用市场APP的框架加载组件。

具体的，用户点击应用市场APP图标，触摸传感器检测用户的触摸数据，并将触摸数据上报至内核层的触摸传感器驱动。触摸传感器驱动根据触摸数据，生成触摸事件，并将触摸事件上报至应用程序框架层的输入框架。输入框架对该触摸事件进行分发。由于用户点击的位置对应应用市场APP的图标，因此将该触摸事件分发至应用市场APP。本实施例中，用户点击应用市场APP图标的操作对应的触摸事件称为触摸事件1。

S102、框架加载组件响应于触摸事件1，获取主界面502的界面信息，界面信息中包括界面身份标识号（Identity document，ID）、界面名称、界面数据的链接、背景图标志位（0）和拼接标志位（0）等。

可以理解，框架加载组件为应用市场APP界面显示的管理者，其能够获知该应用所有界面的显示逻辑。例如，应用市场APP启动时，默认启动哪个界面，再例如，用户点击哪个界面中的哪个控件时，跳转至显示哪个界面等等。该步骤中，用户点击应用市场APP的图标，应用市场APP默认启动主界面502。

不同的界面可以通过界面ID、界面名称等进行标识。

界面数据的链接是指界面中需要显示的列表、文本、图片等的链接。链接例如可以为例如统一资源定位系统（uniform resource locator，URL）。背景图标志位（也称为第一标志位）用于指示列表的底层是否需要显示背景图。可选的，背景图标志位的值为1，表示列表底层显示背景图，背景图标志位为0，表示列表底层不显示背景图。拼接标志位（也称为第二标志位）用于表征列表的背景图是否通过本申请提供的方法拼接显示，即通过回收器视图或其他列表的布局容器显示。可选的，拼接标志位的值为1，表示拼接显示背景图，拼接标志位的值为0，表示不拼接显示背景图。

可选的，若背景图标志位的值为1，则该界面数据的链接中还可以包括背景图的链接。

该步骤中，主界面502的列表底层不包含背景图，因而主界面502的界面信息中，背景图标志位的值为0，拼接标志位的值也为0。

S103、框架加载组件向数据获取组件发送数据获取指令1，数据获取指令1中携带主界面502的界面数据的链接。

数据获取指令1用于指示获取主界面502的界面数据。

S104、数据获取组件响应于数据获取指令1，根据主界面502的界面数据的链接，从服务器获取主界面502的界面数据，界面数据中包括列表5021、列表5022和列表5023的列表信息和列表内容数据。

列表信息是指与列表相关的信息，例如可以包括列表对应的回收器视图的布局尺寸（即回收器视图布局的宽度和高度等）、列表中列表项的数量、列表中列表项的尺寸（列表项的宽度和高度等），以及列表中列表项的布局方式等。列表内容数据可以包括需要显示于列表中的文本、图片等数据。列表中列表项的布局方式例如可以包括线性布局、网格布局、瀑布布局等。

可选的，服务器可以为云服务器。图7中以云服务器为例示出。服务器端可以存储有应用市场APP界面显示所需的界面数据。

当然，在一些实施例中，数据获取组件也可以直接从电子设备本地的存储器中获取界面数据，本申请实施例对此不做任何限定，具体的可以根据实际应用的需求设置。

S105、数据获取组件将主界面502的界面数据返回至框架加载组件。

S106、框架加载组件确定界面信息中的拼接标志位的值为0，向显示组件发送显示指令1，显示指令1中携带主界面502的界面数据、背景图标志位（0）和拼接标志位（0）。

显示指令1用于指示显示主界面502。

S107、显示组件响应于显示指令1，根据主界面502的界面数据中，列表5021、列表5022和列表5023的列表信息，分别创建内容回收器视图1、内容回收器视图2和内容回收器视图3。

具体的，显示组件根据界面指令中携带的界面数据，确定界面数据中包含列表信息，则根据列表信息创建对应的内容回收器视图。内容回收器视图为列表的布局容器，用于实现列表内容的显示和滑动。

可选的，显示组件可以首先添加所需依赖项，再根据列表信息定义列表的总布局，之后定义内容回收器视图中每个列表项的布局。

同时，显示组件确定显示指令中的背景图标志位为0，且拼接标志位为0，因而确定列表无需显示背景图，不创建背景回收器视图。

示例性的，图8为本申请实施例提供的一例回收器视图和适配器（adpter）示意图。参见图8，本实施例中，显示组件根据列表信息，创建三个内容回收器视图。其中，内容回收器视图1为列表5021的布局容器，用于实现列表5021中内容的显示和滑动。对应于图5中的（b）图，内容回收器视图1用于显示应用A1、应用A2、应用A3和应用A4及其他应用的内容，列表项布局方式为纵向线性布局。

继续参见图8，内容回收器视图2为列表5022的布局容器，用于实现列表5022中内容的显示和滑动。对应于图5中的（b）图，内容回收器视图2用于显示应用X1、应用X2、应用X3和应用X4及其他应用的内容，列表项布局方式为纵向线性布局。

继续参见图8，内容回收器视图3为列表5023的布局容器，用于实现列表5023中内容的显示和滑动。对应于图5中的（b）图，内容回收器视图3用于显示应用B1、应用B2及其他应用的内容，列表项布局方式为横向线性布局。

S108、显示组件根据内容回收器视图1、内容回收器视图2和内容回收器视图3，以及界面数据中的列表内容数据，分别创建对应的内容适配器（content adpter）1、内容适配器2和内容适配器3，内容适配器1中存储列表5021的列表内容数据，内容适配器2中存储列表5022的列表内容数据，内容适配器3中存储列表5023的列表内容数据。

适配器为一个抽象类，用于管理向回收器视图中填充的数据。换句话说，适配器为回收器视图的数据源。每个适配器中包括多个子项（例如可以为视图持有者（view holder）对象），每个子项与回收器视图中的一个列表项绑定，用于存储向该列表项填充的一组数据。

本申请实施例中，内容回收器视图对应的适配器称为内容适配器（也称为第一适配器），背景回收器视图对应的适配器称为背景适配器（background adpter，也称为第二适配器）。内容适配器中的子项也称为第一子项，背景适配器中的子项也称为第二子项。

继续参见图8，内容适配器1与内容回收器视图1对应，用于管理向内容回收器视图1中填充的数据。内容适配器2与内容回收器视图2对应，用于管理向内容回收器视图2中填充的数据。内容适配器3与内容回收器视图3对应，用于管理向内容回收器视图3中填充的数据。

需要说明的是，图8仅作为示例，用于阐述内容回收器视图和内容适配器的原理，并不代表实际实现形式和实际数据，也不构成对本申请的任何限定。

S109、显示组件将内容适配器1中的列表内容数据对应填充至内容回收器视图1，将内容适配器2中的列表内容数据对应填充至内容回收器视图2，将内容适配器3中的列表内容数据对应填充至内容回收器视图3。

具体的，以内容适配器1和内容回收器视图1为例，对于内容回收器视图1中的任一个列表项，显示组件从内容适配器1中读取与该列表项绑定的子项中存储的数据，并填充至该列表项，从而实现对内容回收器视图1的显示。

如此，实现了主界面502中列表5021、列表5022和列表5023的显示。当然，除了列表5021、列表5022和列表5023外，显示组件通过调用底层相关模块，实现主界面502中其他控件、视图等的显示，在此不再赘述。

下面对应用榜界面的显示过程进行说明。

图9是本申请实施例提供的另一例背景图显示方法的流程示意图，请一并参见图5和图9，本申请实施例提供的背景图显示方法可以包括：

S201、响应于用户点击主界面502中的应用榜控件503的操作（也称为第一操作），输入框架将触摸事件2分发至应用市场APP中的框架加载组件。

S202、框架加载组件响应于触摸事件2，获取应用榜界面504的界面信息，界面信息中包括界面身份标识号（identity document，ID）、界面名称、界面数据的链接、背景图标志位（1）和拼接标志位（1）等。

该步骤中，应用榜界面504的列表底层包含背景图，且该背景图为拼接的背景图。因而，应用榜界面504的界面信息中，背景图标志位的值为1，拼接标志位的值也为1。因而，界面数据的链接中包括界面中列表505的数据的链接，还包括拼接形成拼接背景的背景原图的链接。

S203、框架加载组件向数据获取组件发送数据获取指令，数据获取指令2中携带应用榜界面504的界面数据的链接，界面数据的链接中包括背景原图的链接。

数据获取指令2用于指示获取应用榜界面504的界面数据。

S204、数据获取组件响应于数据获取指令2，根据应用榜界面504的界面数据的链接，从服务器获取应用榜界面504的界面数据，应用榜界面504的界面数据中包括列表505的列表信息和列表内容数据，以及背景原图。

S205、数据获取组件将应用榜界面504的界面数据返回至框架加载组件。

S206、框架加载组件确定界面信息中的拼接标志位的值为1，向背景布局计算组件发送布局计算指令，并向显示组件发送显示指令2。布局计算指令中携带应用榜界面504界面数据。显示指令2中携带应用榜界面504的界面数据、背景图标志位（1）和拼接标志位（1）。

本申请实施例中，为了便于区分，将背景回收器视图中的列表项称为背景列表项（background item，也称为第二列表项视图），将内容回收器视图中的列表项称为内容列表项（content item，也称为第一列表项视图）。

布局计算指令用于指示界面数据中的列表信息和背景原图，计算背景回收器视图中的背景列表项的布局信息。可选的，背景列表项的布局信息可以包括背景列表项的尺寸，以及沿宽度方向和高度方向的布局数量等。背景列表项的尺寸包括背景列表项的高度和宽度等。

显示指令2用于指示显示应用榜界面504。

与上述图6所示的实施例不同的是，本实施例中，拼接标识位的值为1，表征拼接显示背景图。因而，框架加载组件不仅向显示组件发送显示指令，指示显示界面，而且向背景布局计算组件发送布局计算指令，指示计算背景回收器视图中列表项的布局信息。

S207、背景布局计算组件响应于布局计算指令，根据界面504的界面数据中，列表505的列表信息和背景原图，计算背景回收器视图中的背景列表项的布局信息，使背景列表项至少占满背景回收器视图的布局，且背景列表项的尺寸小于或等于背景原图的尺寸。

其中，背景回收器视图的布局尺寸与列表505对应的内容回收器视图的布局尺寸相同。因而，根据列表505的列表信息，结合背景原图，可以计算得到能够至少占满背景回收器视图，且小于或等于背景原图尺寸的背景列表项的布局信息。

也就是说，本实施例中，计算背景列表项布局信息的原则是，第一，背景列表项的布局至少占满背景回收器视图。即，背景列表项的布局正好占满背景回收器视图，或者，背景列表项的布局超出背景回收器视图。第二，背景列表项的尺寸小于或等于背景原图的尺寸。

可选的，布局计算模块可以根据列表505的列表信息中的列表布局尺寸（即内容回收器视图的布局尺寸），以及背景原图的尺寸，计算背景列表项沿宽度方向的布局数量和高度方向的布局数量。

该步骤的具体计算方法在后续实施例中进行进一步说明。

S208、背景布局计算组件将背景列表项的布局信息发送至显示组件。

S209、显示组件响应于显示指令2，根据列表505的列表信息，创建内容回收器视图4，并确定背景图标志位和拼接标志位均为1，显示组件根据背景列表项的布局信息，创建背景回收器视图，且设置内容回收器视图4的背景为透明效果。其中，背景回收器视图与内容回收器视图4的布局尺寸相同。

具体的，显示组件根据显示指令2中携带的应用榜界面504的界面数据，确定界面504中包括列表505。因而创建内容回收器视图4。同时，显示组件根据该界面数据中的背景图标志位和拼接标志位，确定该列表505需显示背景图，且背景图为拼接背景图。因此，显示组件不仅创建列表505对应的布局容器内容回收器视图4，而且，创建拼接背景图的布局容器背景回收器视图。背景回收器视图的布局尺寸与内容回收器视图4相同。具体的，显示组件可以将内容回收器视图4的布局宽度作为背景回收器视图的布局宽度，将内容回收器视图4的布局高度作为背景回收器视图的布局高度，并根据上述步骤S208中背景布局计算组件发送的背景列表项的布局信息，创建背景回收器视图。

可选的，显示组件可以通过addContentRecyclerView（）函数创建内容回收器视图4，通过addBackgroundRecyclerView（）函数创建背景回收器视图。

另外，为了保证后续背景图具有较好的显示效果，将内容回收器视图4的背景设置为透明效果。

在一个实施例中，显示组件在创建背景回收器视图时，可以将背景列表项的分割线设置为透明。这样，不会影响内容回收器视图4中内容的显示，进一步提高显示效果。

示例性的，图10为本申请实施例提供的一例回收器视图示意图。内容回收器视图4和背景回收器视图可以如图10所示。

S210、显示组件根据内容回收器视图4，以及列表5的列表内容数据，创建内容回收器视图4对应的内容适配器4，根据背景回收器视图和背景原图，创建背景回收器视图对应的背景适配器。内容适配器4中存储列表5的列表内容数据，背景适配器中各个子项均存储背景原图。

具体的，背景适配器中子项的数量与背景回收器视图中背景列表项的数量相等。每个子项对应写入一张背景原图，且与一个背景列表项绑定。

参见图11，内容适配器4和背景适配器可以如图11所示。

S211、显示组件将内容回收器视图4与背景回收器视图重合在一起，且内容回收器视图4位于背景回收器视图的上层。

参见图12，内容回收器视图4与背景回收器视图重合后的效果图可以如图12所示，其中，为了便于区分，将背景回收器视图以图案填充示出。

S212、显示组件将内容适配器4中的列表内容数据对应填充至内容回收器视图4，将背景适配器中的背景原图对应填充至背景回收器视图。

如此，实现了应用榜界面504中列表505及拼图背景的显示。

本实施例提供的方法，在列表需要显示拼接背景时，根据界面数据中的列表信息和背景原图，计算背景列表项的布局信息，并基于布局信息，创建背景回收器视图和背景适配器。这样创建的背景回收器视图中，背景列表项的至少占满该背景回收器视图的布局，且每个背景列表项的尺寸小于或等于背景原图的尺寸。因而，将背景适配器中存储的背景原图对应写入背景回收器视图中的各个列表项后，背景原图至少能够铺满背景回收器视图，且不需要拉伸背景原图，不会造成背景原图失真，提高显示效果。

下面对背景列表项布局信息的计算过程进行说明。

在一个实施例中，背景列表项沿固定方向正好占满背景回收器视图，沿非固定方向占满或超出背景回收器视图。可以理解，沿高度方向超出背景回收器视图的部分，在用户滑动列表至此背景列表项时，在界面中显示。固定方向是指列表不可滑动的方向。非固定方向是指列表可以滑动的方向。例如，列表若可以沿高度方向（即上下）滑动，则高度方向为非固定方向，宽度方向为固定方向。列表若可以沿宽度方向（即左右）滑动，则宽度方向为非固定方向，高度方向为固定方向。

示例性的，图13为本申请实施例提供的又一例背景图显示方法的流程示意图。以固定方向为宽度方向为例，如图13所示，上述步骤“S207、背景布局计算组件响应于布局计算指令，根据界面504的界面数据中，列表505的列表信息和背景原图，计算背景回收器视图中的背景列表项的布局信息”，包括：

S1301、背景布局计算组件响应于布局计算指令，根据界面数据中的背景原图，计算背景原图的宽度wb和高度hb。

具体的，布局计算指令中携带界面数据，界面数据中包括背景原图。背景布局计算组件得到背景原图后，即可计算背景原图的宽度wb和高度hb。

S1302、背景布局计算组件根据界面数据中列表505的列表信息，确定列表505对应的内容回收器视图4的布局宽度W和布局高度H。

如上实施例所述，内容回收器视图4的布局尺寸与背景回收器视图布局尺寸相同。因而，内容回收器视图4的布局宽度W和布局高度H也即背景回收器视图的布局宽度和布局高度。

S1303、背景布局计算组件计算布局宽度W与背景原图的宽度wb的比值，得到第一比值，并对第一比值向上取整，得到背景列表项沿宽度方向的布局数量Qw。

即，Qw=ceil(W/wb)。ceil()为向上取整函数。可以理解，整数向上取整等于整数本身。

S1304、背景布局计算组件计算布局宽度W与沿宽度方向的布局数量Qw的商，得到每个背景列表项的宽度wi。

S1305、背景布局计算组件计算背景列表项的宽度wi与背景原图的宽度wb的比值，得到缩小比例K。

即，K=wi/wb。

S1306、背景布局计算组件计算缩小比例K与背景原图的高度hb的乘积，得到背景列表项的高度hi。

S1307、背景布局计算组件计算布局高度H与背景列表项的高度hi的比值，得到第二比值，并对第二比值向上取整，得到背景列表项沿高度方向的布局数量Qh。

即，Qh=ceil(H/hi)。

当然，在一些其他的实施例中，背景列表项沿高度方向的布局数量Qh也可以根据计算结果设置，使Qh大于或等于ceil(H/hi)。

示例性的，图14为本申请实施例提供的一例背景列表项布局示意图。参见图14，上述计算过程中，根据背景原图的宽度与布局宽度的大小关系，可以包括以下三种情况：

1）背景原图的宽度wb比布局宽度W宽，即，wb＞W。

参见图14中的（a）图，这种情况下，0＜W/wb＜1，Qw=1，K＜1。也就是说，这种情况下，背景列表项沿宽度方向的布局数量为1，背景列表项的宽度wi即为布局宽度W，向背景列表项填充背景原图时，可以将背景原图压缩后填充，这样，不会导致背景原图失真。

2）背景原图的宽度wb比布局宽度W窄，即，wb＜W。

参见图14中的（b）图，这种情况下，W/wb＞1，Qw＞1，K＜1或者K=1。也就是说，这种情况下，背景列表项沿宽度方向的布局数量大于1。每个背景列表项填充一张背景原图，背景原图不需拉伸后填充，不会导致背景原图失真。具体的，若W/wb为大于1的整数，则K=1，不需要改变背景图的宽度和高度，直接填充，不会导致背景原图失真。若W/wb为大于1的非整数，则K＜1，将背景原图压缩后填充，不会导致背景原图失真。以Qw=3为例，背景列表项的布局如图14中的（b）图所示。

3）背景原图的宽度wb与布局宽度W相等，即，wb=W。

参见图14中的（c）图，这种情况下，W/wb=1，Qw=1，K=1。也就是说，这种情况下，背景列表项沿宽度方向的布局数量为1，背景列表项的宽度wi即为布局宽度W，向背景列表项填充背景原图时，不需要改变背景原图的宽度和高度，直接填充，这样，不会导致背景原图失真。

由上述分析可知，无论哪一种情况，背景原图沿宽度方向上正好铺满背景原图的情况下，不需要拉伸背景原图，因而不会导致背景原图失真，所以能够提高显示效果，提高用户视觉体验。而且，该方法中，背景列表项的高度根据其宽度的缩小比例计算得到，因此，对背景原图的缩小为等比例缩小，不会导致背景原图失真，进一步提高显示效果，提高用户视觉体验。

在另一个实施例中，背景列表项沿宽度方向和高度方向，均占满或超出背景回收器视图。可以理解，沿宽度方向超出背景回收器视图的部分，在界面显示时可以不显示。沿高度方向超出背景回收器视图的部分，在用户滑动列表至此背景列表项时，在界面中显示。

示例性的，图15为本申请实施例提供的又一例背景图显示方法的流程示意图。继续以固定方向为宽度方向为例，如图15所示，上述步骤“S207、背景布局计算组件响应于布局计算指令，根据界面504的界面数据中，列表505的列表信息和背景原图，计算背景回收器视图中的背景列表项的布局信息”，包括：

S1501、背景布局计算组件响应于布局计算指令，根据界面数据中的背景原图，计算背景原图的宽度wb和高度hb。

S1502、背景布局计算组件将背景原图的宽度wb作为每个背景列表项的宽度wi，将背景原图的高度hb作为背景列表项的高度hi。

即，wi=wb，hb=hi。

S1503、背景布局计算组件根据界面数据中列表505的列表信息，确定列表505对应的内容回收器视图4的布局宽度W和高度H。

S1504、背景布局计算组件计算布局宽度W与背景原图的宽度wb的比值，得到第一比值，并对第一比值向上取整，得到背景列表项沿宽度方向的布局数量Qw。

即，Qw=ceil(W/wb)。

S1505、背景布局计算组件计算布局高度H与背景原图的高度hb的比值，得到第二比值，并对第二比值向上取整，得到背景列表项沿高度方向的布局数量Qh。

即，Qh=ceil(H/hb)。

如步骤S1502，背景原图的高度hb等于背景列表项的高度hi，因而，该步骤也即：计算布局高度H与背景列表项的高度hi的比值，得到第二比值，并对第二比值向上取整，得到背景列表项沿高度方向的布局数量Qh。即，Qh=ceil(W/hi)。

本实施例中，与上述实施例不同的是，不对背景原图压缩，直接将背景原图的宽度和高度作为背景列表项的宽度和高度，并根据列表505的宽度与背景原图的宽度的比值向上取整，得到背景列表项沿宽度方向的布局数量，根据列表505的高度与背景原图的高度的比值向上取整，得到背景列表项沿高度方向的布局数量。这样，多张背景原图不拉伸也不压缩的情况下，直接填充至背景列表项，背景原图就会占满或超出背景回收器视图。具体的，若W/wb为整数，则背景原图正好占满背景回收器视图，否则背景原图超出背景回收器视图。但是，无论哪种情况，都不对背景原图进行拉伸或压缩，不会影响背景原图的分辨率，因而不会导致背景原图失真，提高显示效果。

示例性的，图16为本申请实施例提供的另一例背景列表项布局示意图。参见图16，本实施例中，存在以下几种情况：

1）布局宽度为背景原图的宽度的整数倍，且布局高度不为背景原图的高度的整数倍，即W/wb为整数，H/hb不为整数。

这种情况下，背景原图沿宽度方向正好铺满背景回收器视图，沿高度方向超出背景回收器视图，填充效果例如可以如图16中的（a）图所示。

2）布局宽度不为背景原图的宽度的整数倍，且布局高度不为背景原图的高度的整数倍，即W/wb不为整数，H/hb不为整数。

这种情况下，背景原图沿宽度方向和高度方向均超出背景回收器视图，填充效果例如可以如图16中的（b）图所示。

3）布局宽度不为背景原图的宽度的整数倍，且布局高度为背景原图的高度的整数倍，即W/wb不为整数，H/hb为整数。

这种情况下，背景原图沿宽度方向超出背景回收器视图，沿高度方向正好铺满背景回收器视图，填充效果例如可以如图16中的（c）图所示。

4）布局宽度为背景原图的宽度的整数倍，且布局高度为背景原图的高度的整数倍，即W/wb为整数，H/hb为整数。

这种情况下，背景原图沿宽度方向和高度方向均正好铺满背景回收器视图，填充效果例如可以如图16中的（d）图所示。

由上述分析可知，无论哪一种情况，背景原图沿宽度方向和高度方向正好铺满背景回收器视图，或者超出背景回收器视图，不需要拉伸也不需要压缩背景原图，因而不会导致背景原图失真，所以能够提高显示效果，提高用户视觉体验。

下面对列表的滑动过程进行说明。

继续以上述图5中的（c）图所示的界面为例，可以理解，用户在列表505内执行滑动操作，列表505中的列表内容随用户的滑动操作而滑动。

在一个实施例中，列表505中的列表内容随用户滑动操作滑动时，拼接背景不随用户滑动操作而滑动。

在另一个实施例中，拼接背景也可以随用户滑动操作，与列表505中的列表内容一起滑动。具体的，接续图5中的（c）图，参见图17。如图17中的（a）图所示，用户在列表505内执行向上的滑动操作，列表505中的列表内容和拼接背景同时向上滑动，且滑动的距离可以与用户手指滑动操作的距离相同，如图17中的（b）图所示。

另外，随着用户不断的向上滑动，若加载的列表内容和拼接背景显示完后，应用市场APP可以继续加载列表内容和拼接背景。在一个具体的实施例中，加载过程中，界面中可以显示“加载中”等提示信息，如图17中的（c）图所示。加载完成后，界面中显示新加载的列表内容和新加载的拼接背景，即刷新列表内容和刷新拼接背景。其中，新加载的拼接背景可以与第一次加载的拼接背景相同，且新加载的拼接背景与原来加载的拼接背景接续显示，如图17中的（d）图所示，应用C10和背景原图5054为新加载的内容。

下面对图17所示的界面变化对应的实现过程进行说明。为了便于理解，以下按照列表滑动过程和列表加载过程（或称为列表刷新过程）两个部分进行说明。

1、列表滑动过程

示例性的，图18为本申请实施例提供的又一例背景图显示方法的流程示意图，请一并参见图17中的（a）图、（b）图和图18，该方法包括：

S1801、背景回收器视图调用addOnScrollListener（）函数，向滑动管理器注册滑动事件监听。

具体的，背景回收器视图可以通过代码binding.recyclerViewbackground.addOnScrollListener（object：RecyclerView.OnScrollListener（）），向滑动管理器注册滑动事件监听。可选的，OnScroll的回调参数可以为滑动坐标（x，y），x表示滑动后的横坐标，即当前触摸事件的横坐标，y表示滑动后的纵坐标，即当前触摸事件的纵坐标。后续实施例也是如此，不再赘述。

S1802、滑动管理器调用addOnScrollListener（）函数，向内容回收器视图4注册滑动事件监听。

S1803、内容回收器视图4调用addOnScrollListener（）函数，向输入框架注册滑动事件监听。

具体的，内容回收器视图4可以通过代码binding.contentrecyclerViewContent.addOnScrollListener（object：RecyclerView.OnScrollListener（）），向输入框架注册滑动事件监听。

可以理解，内容回收器视图4可以直接地向输入框架注册滑动事件监听，也可以间接地向输入框架注册滑动事件监听，例如，内容回收器视图4可以向应用的窗口注册滑动事件监听，且该窗口向输入框架注册滑动事件监听。本申请实施例对此不做任何限定。

以上步骤S1801至S1803为滑动事件监听的注册过程。可选的，以上滑动事件的监听可以在背景回收器视图和内容回收器视图4创建后注册。

S1804、响应于用户的滑动操作，输入框架向内容回收器视图4分发滑动事件1，回调滑动坐标（x1，y1）。

具体的，当用户执行滑动操作时，输入框架基于底层触摸传感器等上报的触摸事件，得到滑动坐标。同时，由于内容回收器视图4向输入框架已注册滑动事件监听，因而，在发生滑动事件时，输入框架向内容回收器视图4回调滑动坐标。换句话说，当发生滑动事件时，输入框架向内容回收器视图4通知滑动坐标。

本实施例中，以当前时刻的滑动坐标为（x1，y1）为例进行说明。

S1805、内容回收器视图4调用scrollTo（x，y）函数，根据滑动坐标（x1，y1），滑动内容回收器视图4中的内容列表项。

具体的，内容回收器视图4可以调用scrollTo（x，y）函数，并将滑动坐标（x1，y1）作为该函数的参数，实现内容回收器视图4中的内容列表项的滑动。如此，实现列表4中的列表内容的滑动。参见图17中的（a）图和（b）图，应用C1、应用C2、应用C3、应用C4、应用C5、应用C6和应用C7对应的内容列表项向上滑动。

在另一个实施例中，内容回收器视图4也可以根据滑动坐标（x1，y1）计算滑动偏移量（dx1，dy1）。dx1表示当前滑动横坐标偏移量，即，滑动后的位置相对于滑动前的位置在横坐标方向上的偏移量。dy1表示当前滑动纵坐标偏移量，即，滑动后的位置相对于滑动前的位置在纵坐标方向上的偏移量。之后，内容回收器视图4也可以调用scrollBy（dx，dy）函数，将滑动偏移量（dx1，dy1）作为该函数的参数，滑动内容列表项。本申请实施例对此不做任何限定。滑动坐标和滑动偏移量等参数可以统称为滑动参数。

S1806、内容回收器视图4向滑动管理器回调滑动坐标（x1，y1）。

可选的，该步骤可以与步骤S1405同步进行。

S1807、滑动管理器向背景回收器视图回调滑动坐标（x1，y1）。

S1808、背景回收器视图调用scrollTo（x，y）函数，根据滑动坐标（x1，y1），滑动背景回收器视图中的背景列表项。

本实施例中，通过背景回收器视图向滑动管理器注册滑动事件监听，滑动管理器向内容回收器视图4注册滑动事件监听。如此，当有滑动事件发生时，内容回收器视图4感知该滑动事件的同时，能够通过滑动管理器通知到背景回收器视图，使背景回收器视图和内容回收器视图4均能够得到该滑动事件的滑动坐标。这样，背景回收器视图和内容回收器视图4基于相同的滑动坐标滑动，即二者同步响应滑动事件，实现列表内容拼接背景的同步滑动，使列表显示更加生动形象，提高显示效果。

2、列表加载过程

示例性的，图19为本申请实施例提供的又一例背景图显示方法的流程示意图，请一并参见图17中的（c）图、（d）图和图19，该方法包括：

S1901、响应于用户的滑动操作，输入框架向内容回收器视图4分发滑动事件2，回调滑动坐标（x2，y2）。

本实施例中，以滑动操作对应的滑动坐标为（x2，y2）为例进行说明。

S1902、内容回收器视图4根据当前界面第一个内容列表项的ID，当前界面中可见的内容列表项数量和已填充内容的内容列表项的总数量，确定当前已滑动至内容回收器视图4底部。

具体的，对于任一个回收器视图，可以为其中的每一个列表项按照顺序设置ID（例如，从0开始排序依次设置ID）。当前界面中显示的列表项的ID，以及当前界面中可见的列表项的数量可知。另外，回收器视图中已填充内容的列表项总数量可知。已填充内容的列表项也即适配器中子项的数量。

基于此，内容回收器视图4若确定第一个内容列表项的ID加上当前界面中可见的内容列表项数量，等于已填充内容的内容列表项的总数量，则确定当前已滑动至内容回收器视图4的底部。

S1903、内容回收器视图4调用loadMore（）函数，指示内容适配器4加载列表内容数据。

可选的，loadMore（）函数可以携带加载页数或者目标加载页码（page）等参数。

可选的，内容回收器视图4可以向内容适配器4发送第一指示消息。第一指示消息用于指示加载列表内容数据。

S1904、内容适配器4响应于内容回收器视图4的指示，调用getDate（）函数，向数据获取组件获取新列表内容数据。

S1905、内容适配器4加载新列表内容数据。

具体的，内容适配器4创建新的子项，并将新列表内容数据存储至新的子项中。

S1906、内容适配器4调用content.notifyDateSetChanged（），将新列表内容数据刷新至内容回收器视图4中的内容列表项。

S1907、内容回收器视图4调用scrollTo（x，y）函数，根据滑动坐标（x2，y2），滑动内容回收器视图4中的内容列表项。

S1908、内容回收器视图4调用loadMore（）函数，指示背景适配器加载背景原图。

可选的，内容回收器视图4可以向背景适配器发送第二指示消息。第二指示消息用于指示加载背景原图。

S1909、背景适配器响应于内容回收器视图4的指示，调用list.add（image）函数将其中保存的背景原图重复加载（也即循环加载）。

可选的，背景适配器重复加载背景原图的数量可以根据loadMore（）函数携带的加载页数或者目标加载页码（page）确定。

S1910、背景适配器调用background.notifyDateSetChanged（）函数，将重复加载的背景原图刷新至背景回收器视图中的背景列表项。

S1911、内容回收器视图4向滑动管理器回调滑动坐标（x2，y2）。

S1912、滑动管理器向背景回收器视图回调滑动坐标（x2，y2）。

S1913、背景回收器视图调用scrollTo（x，y）函数，根据滑动坐标（x2，y2），滑动背景回收器视图中的背景列表项。

可以理解，在一些实施例中，在列表未滑动至底部时，按照其他的预设条件，也可以触发列表的加载刷新，例如，预加载的内容不足预设页数等。本申请实施例对此不做任何限定。但是，无论哪种触发条件触发，列表加载刷新均可以按照上述过程实现。

本实施例中，通过内容回收器视图获知是否滑动到列表的底部。在滑动到列表底部的情况下，通过调用loadMore（）函数，指示内容适配器和背景适配器分别加载数据，并分别通过notifyDateSetChanged（）函数刷新内容回收器视图和背景回收器视图中的内容。如此，实现了列表内容和背景拼图的同步加载刷新。而且，背景适配器在加载图片时，将其中保存的背景原图循环加载，无需重新获取数据，提高列表背景显示的效率。

需要说明的是，以上实施例是以应用市场APP为例进行说明，但是，本申请实施例提供的方法并不限于应用于该APP，其可以应用于任何需要显示列表及背景图的APP。而且，以上实施例中，是以回收器视图为例进行说明的，实际应用中，该方法也可以通过列表视图或者其他任何能够实现列表显示和滑动的视图实现，本申请实施例对此不做任何限定。

另外，以上实施例中，各个步骤之间的顺序并不作为限定，在不影响逻辑实现的前提下，各个步骤之间的顺序可以根据实际需求设置，而且，多个步骤也可以同时执行。

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

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

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

本实施例提供的电子设备，用于执行上述背景图显示方法，因此可以达到与上述实现方法相同的效果。

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

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

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

本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质中存储了计算机程序，当计算机程序被处理器执行时，使得处理器执行上述任一实施例的背景图显示方法。

本申请实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的背景图显示方法。

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

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

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

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

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

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

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

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