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

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

背景技术：

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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