CN107526576B - 页面的视图组件的展示方法和装置 - Google Patents

Abstract

本申请公开了一种页面的视图组件的展示方法和装置，其中，页面的视图组件的展示方法包括：确定页面的待显示区域，其中，页面划分为多个索引块；在页面的多个索引块中，确定与待显示区域关联的第一索引块；基于预先建立的索引块与页面的视图对象之间的索引，获取与第一索引块对应的第一视图对象；以及从页面的组件池中为第一视图对象选取对应的视图组件，以展示在待显示区域中。本申请实施例的页面的视图组件的展示方法和装置，能够实现视图组件的复用，避免创建过多的视图组件，减少消耗的内存，降低CPU使用率，提升系统性能。

Description

页面的视图组件的展示方法和装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面的视图组件的展示方法和装置。

背景技术

网页是构成网站的基本元素，是承载各种网站应用的平台。网页主要由各种视图组件组合而成，例如文本组件、图片组件等。随着信息化的快速发展，网页的内容也越来越丰富。由于屏幕显示区域有限，用户需要下拉操作或者右拉操作，才能展现出更多的网页内容。因此，为展现更多的网页内容，需要生成更多的视图组件，而视图组件的数量过多，会导致终端设备消耗内存过多、CPU使用率变高、帧率下降等降低系统性能的问题。

申请内容

本申请旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本申请的一个目的在于提出一种页面的视图组件的展示方法，能够实现视图组件的复用，避免创建过多的视图组件的问题，减少消耗的内存，降低CPU使用率，从而提升系统性能。

本申请的第二个目的在于提出一种页面的视图组件的展示装置。

为了实现上述目的，本申请第一方面实施例提出了一种页面的视图组件的展示方法，包括：确定页面的待显示区域，其中，所述页面划分为多个索引块；在所述页面的多个索引块中，确定与所述待显示区域关联的第一索引块；基于预先建立的索引块与页面的视图对象之间的索引，获取与所述第一索引块对应的第一视图对象；以及从所述页面的组件池中为所述第一视图对象选取对应的视图组件，以展示在所述待显示区域中。

本申请实施例的页面的视图组件的展示方法，能够实现视图组件的复用，避免创建过多的视图组件的问题，减少消耗的内存，降低CPU使用率，从而提升系统性能。

本申请第二方面实施例提出了一种页面的视图组件的展示装置，包括：第一确定模块，用于确定页面的待显示区域，其中，所述页面划分为多个索引块；第二确定模块，用于在所述页面的多个索引块中，确定与所述待显示区域关联的第一索引块；第一获取模块，基于预先建立的索引块与页面的视图对象之间的索引，获取与所述第一索引块对应的第一视图对象；以及选取模块，用于从所述页面的组件池中为所述第一视图对象选取对应的视图组件，以展示在所述待显示区域中。

本申请实施例的页面的视图组件的展示装置，能够实现视图组件的复用，避免创建过多的视图组件的问题，减少消耗的内存，降低CPU使用率，从而提升系统性能。

附图说明

图1是根据本申请一个实施例的页面的视图组件的展示方法的流程图一；

图2是页面分成多个索引块的效果示意图；

图3是索引块分成多个二级索引块的效果示意图；

图4是根据本申请一个实施例的页面的视图组件的展示方法的流程图二；

图5是根据本申请一个实施例的页面的视图组件的展示方法的流程图三；

图6是移动页面之前的效果示意图；

图7是移动页面后的效果示意图；

图8是确定移出区域范围的效果示意图；

图9是确定移出屏幕显示区域的视图组件的效果示意图；

图10是建立索引的流程图；

图11是根据虚拟视图确定页面的范围信息的效果示意图；

图12是建立索引的效果示意图；

图13是根据本申请一个实施例的页面的视图组件的展示装置的结构示意图一；

图14是根据本申请一个实施例的页面的视图组件的展示装置的结构示意图二；

图15是根据本申请一个实施例的页面的视图组件的展示装置的结构示意图三；

图16是根据本申请一个实施例的页面的视图组件的展示装置的结构示意图四。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。

下面参考附图描述本申请实施例的页面的视图组件的展示方法和装置。

图1是根据本申请一个实施例的页面的视图组件的展示方法的流程图一。

如图1所示，页面的视图组件的展示方法可包括：

S1、确定页面的待显示区域。

其中，页面可划分为多个索引块。

在本申请的一个实施例中，待显示区域可以是页面显示在移动终端屏幕的区域。页面可具有对应的画布。画布主要用于承载页面的视图对象。具体地，可通过对页面对应的画布进行划分，将页面划分为多个索引块。

其中，主要通过业务数据来确定画布的范围，通过对画布的编辑操作，可预览出生成的页面的大小、布局情况等。业务数据可以是待显示的内容数据，例如文本、图片等。在确定画布的范围之后，可对画布进行划分，从而将页面划分为多个索引块，并根据多个索引块建立索引。具体建立索引的过程，下文再详细介绍。

S2、在页面的多个索引块中，确定与待显示区域关联的第一索引块。其中，索引块由页面划分而成，每个索引块都具有独自的位置信息。由此，在页面的多个索引块中，可确定与待显示区域关联的第一索引块。本实施例中，索引块可分为一级索引块和二级索引块。一级索引块为基准块，其大小可以与屏幕显示区域的大小相同，也可以不同。为方便计算，本实施例中采取与屏幕显示区域的大小相同的基准块。一级索引块可分为多个二级索引块。如图2所示，页面可划分为四个一级索引块，基准块200、基准块201、基准块202和基准块203。而每个一级索引块可进一步划分为三列四行共十二个二级索引块，具体标号信息可如图3所示。

S3、基于预先建立的索引块与页面的视图对象之间的索引，获取与第一索引块对应的第一视图对象。

其中，索引用于记录索引块与视图对象之间的对应关系。其中，业务数据需要获取到对应的视图组件，才能在页面中显示，而生成的显示内容即视图对象。在确定与待显示区域关联的第一索引块之后，即可根据索引获取与其相对应的第一视图对象。

S4、从页面的组件池中为第一视图对象选取对应的视图组件，以展示在待显示区域中。

举例来说，假设第一视图对象为图片，则可选取对应的图片组件，然后展示在待展示区域中。

在本申请的实施例中，组件池可包括显示组件池和复用组件池。其中，显示组件池主要用于保存当前处于显示状态的组件。复用组件池主要用于保存当前处于非显示状态的组件。例如：当某一组件显示时，可从复用组件池中选取该组件放入至显示组件池中；当该组件不显示时，可将其从显示组件池中删除，并放入复用组件池中。

此外，如图4所示，本申请实施例的页面的视图组件的展示方法，还可包括以下步骤：

S5、建立显示组件池。

S6、将展示的第一视图对象对应的视图组件加入显示组件池。

当有视图组件被选取展示视图对象的时候，可将该视图组件加入显示组件池。

在此之后，如图5所示，本申请实施例的页面的视图组件的展示方法，还可包括以下步骤：

S7、当接收到对页面的移动指令时，移动页面。

S8、确定页面中与移动指令对应的移出区域。

具体地，可获取在页面移动前的待显示区域的第一位置信息，并获取在页面移动后的待显示区域的第二位置信息，然后根据第一位置信息和第二位置信息确定移出区域。

S9、基于索引确定与移出区域关联的第二视图对象。

具体地，在页面的多个索引块中，可确定与移出区域关联的第二索引块，然后基于索引获取与第二索引块对应的第二视图对象。

S10、从显示组件池中移除第二视图对象对应的视图组件，并将第二视图对象对应的视图组件加入至复用组件池中。

举例来说，用户通过手机浏览页面，手机的屏幕显示区域一般为5寸左右，只能显示页面内容的一部分，需要用户进行下拉等操作，才能展现更多的页面内容。也就是说，页面的区域往往大于屏幕显示区域。如图6所示，601表示页面，602表示屏幕显示区域。初始时，屏幕一般展示的是页面的左上角区域。假设屏幕显示区域左上顶点的坐标为(0，0)，由于屏幕显示区域的尺寸为已知，因此可计算出屏幕显示区域四个顶点的坐标，由此可确定屏幕显示区域在页面中的第一位置信息。在接收到移动指令时，可移动页面。此时，对页面的移动指令可以是向左移动或向上移动。相对的，屏幕显示区域相对于页面则是向下移动或者向右移动。如图7所示，701表示页面，702表示屏幕显示区域。假设屏幕显示区域先向下移动了距离2，又向右移动了距离2，则此时屏幕显示区域左上顶点的坐标变为了(2，-2)。由此，可计算出屏幕显示区域其他三个顶点的坐标，从而获取屏幕显示区域在移动后的相对于页面的第二位置信息。在获取第一位置信息和第二位置信息之后，可确定页面移出屏幕显示区域的移出区域。如图8所示，页面移动前的屏幕显示区域与页面移动后的屏幕显示区域有重叠的区域，则去除该重叠的区域804，即可得到移出区域805的范围。然后确定与移出区域805关联的第二索引块。再基于索引获取与第二索引块对应的第二视图对象。如图9所示，901-904表示四个视图。视图901、视图902、视图903均未显示在屏幕显示区域中，说明视图901、视图902、视图903已被移出，则可移除与视图901、视图902、视图903对应的视图组件，并将该组件加入至复用组件池中，从而实现视图组件的复用。

应当理解的是，复用组件池中的视图组件数量是有限的。如果复用组件池的视图组件均已被用做显示，而待显示的视图对象无法获取到对应的视图组件时，则需要创建新的视图组件。

下面详细介绍一下建立索引的过程。

如图10所示，建立索引包括以下步骤：

S101、获取业务数据，并根据业务数据生成对应的虚拟视图。

其中，业务数据可以是待显示的内容数据，例如文本、图片等。当然，业务数据中也包括了描述该内容数据的位置、大小等相关信息。例如：一个文本数据，宽为3，高为5；一个图片数据在该文本数据的右侧，距离为1的位置，大小为10*10。

在本实施例中，在获取业务数据后，可根据业务数据的类型如文本、图片，选取对应类型的视图组件，以生成对应的虚拟视图。应当注意的是，此时的位置信息为虚拟视图之间的相对位置信息，未确立标准的坐标系。

S102、根据虚拟视图确定画布的范围信息。

在生成业务数据对应的虚拟视图之后，可确定画布的范围信息。如图11所示，1101-1106表示六个虚拟视图，1100表示画布。可将位于最上侧的虚拟视图1101的上边，作为画布的上边界；将位于最左侧的虚拟视图1103的左边，作为画布的左边界；将位于最下侧的虚拟视图1105的下边，作为画布的下边界；将位于最右侧的虚拟视图1106的右边，作为画布的右边界。

S103、根据范围信息将画布划分为多个索引块。

在确定画布的范围信息之后，如图5所示，可将画布划分为多个索引块。其中，索引块可包括一级索引块和二级索引块。一级索引块即基准块。其中，基准块的大小可以与屏幕显示区域(待显示区域)的大小相同，也可以不同。为方便计算，本实施例中采取与屏幕显示区域的大小相同的基准块。

S104、根据虚拟视图与索引块的位置关系建立索引。

具体地，当虚拟视图的宽度大于基准块的宽度，或者当虚拟视图的高度大于基准块的高度时，根据虚拟视图与基准块的位置关系建立一级索引。如图12所示，视图1201的宽度大于基准块的宽度，视图1201与基准块0和基准块1相交，因此视图1201与基准块0和基准块1之间的对应关系为一级索引。

当虚拟视图的宽度小于基准块的宽度，且当虚拟视图的高度小于基准块的高度时，根据虚拟视图与二级索引块的位置关系建立二级索引。如图12所示，视图1202的宽度小于基准块的宽度，高度也小于基准块的高度，视图1202与索引块2-0、2-1、3-0和3-1相交，因此视图1202与索引块2-0、2-1、3-0和3-1之间的对应关系为二级索引。同理，视图1203对应二级索引块3-1和4-1。其中，二级索引块为基准块切分生成的。

最后，可根据一级索引和二级索引生成索引。

本申请实施例的页面的视图组件的展示方法，通过确定页面的待显示区域，并确定与待显示区域关联的第一索引块，以及基于预先建立的索引块与页面的视图对象之间的索引，获取与第一索引块对应的第一视图对象，然后从页面的组件池中为第一视图对象选取对应的视图组件，以展示在待显示区域中，实现了视图组件的复用，避免创建过多的视图组件的问题，减少消耗的内存，降低CPU使用率，从而提升系统性能。

为实现上述目的，本申请还提出一种页面的视图组件的展示装置。

图13是根据本申请一个实施例的页面的视图组件的展示装置的结构示意图一。

如图13所示，页面的视图组件的展示装置可包括：第一确定模块1310、第二确定模块1320、第一获取模块1330、和选取模块1340。

第一确定模块1310用于确定页面的待显示区域，其中，页面划分为多个索引块。

第二确定模块1320用于在页面的多个索引块中，确定与待显示区域关联的第一索引块。

第一获取模块1330基于预先建立的索引块与页面的视图对象之间的索引，获取与第一索引块对应的第一视图对象。

选取模块1340用于从页面的组件池中为第一视图对象选取对应的视图组件，以展示在待显示区域中。

如图14所示，页面的视图组件的展示装置还可包括：建立模块1410和第一加入模块1420。

建立模块1410用于建立显示组件池。

第一加入模块1420用于将展示的第一视图对象对应的视图组件加入显示组件池。

如图15所示，页面的视图组件的展示装置还可包括：移动模块1430、第三确定模块1440、第四确定模块1450、移除模块1460和第二加入模块1470。

移动模块1430用于当接收到对页面的移动指令时，移动页面。

第三确定模块1440用于确定页面中与移动指令对应的移出区域。

第四确定模块1450用于基于索引确定与移出区域关联的第二视图对象。

移除模块1460用于从显示组件池中移除第二视图对象对应的视图组件。

第二加入模块1470用于将第二视图对象对应的视图组件加入至复用组件池中。

如图16所示，页面的视图组件的展示装置还可包括建立索引模块1350。

其中，建立索引模块1350进一步包括生成单元1351、确定单元1352、划分单元1353和建立单元1354。

生成单元1351用于获取业务数据，并根据业务数据生成对应的虚拟视图。

确定单元1352用于根据虚拟视图确定画布的范围信息。

划分单元1353用于根据范围信息将画布划分为多个索引块。

建立单元1354用于根据虚拟视图与索引块的位置关系建立索引。

关于上述实施例中的视图组件的展示装置，其中各个模块执行操作的具体方式已经在有关该视图组件的展示方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本申请实施例的页面的视图组件的展示装置，通过确定页面的待显示区域，并确定与待显示区域关联的第一索引块，以及基于预先建立的索引块与页面的视图对象之间的索引，获取与第一索引块对应的第一视图对象，然后从页面的组件池中为第一视图对象选取对应的视图组件，以展示在待显示区域中，实现了视图组件的复用，避免创建过多的视图组件的问题，减少消耗的内存，降低CPU使用率，从而提升系统性能。

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

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种页面的视图组件的展示方法，其特征在于，包括以下步骤：

确定页面的待显示区域，其中，所述页面划分为多个索引块；

在所述页面的多个索引块中，确定与所述待显示区域关联的第一索引块；

基于预先建立的索引块与页面的视图对象之间的索引，获取与所述第一索引块对应的第一视图对象；以及

从所述页面的组件池中为所述第一视图对象选取对应的视图组件，以展示在所述待显示区域中；

其中，所述页面的区域大于所述待显示区域，所述页面具有对应的画布，建立所述索引包括：

获取业务数据，并根据所述业务数据生成对应的虚拟视图；根据所述虚拟视图确定所述画布的范围信息；根据所述范围信息将所述画布划分为多个索引块；根据所述虚拟视图与所述索引块的位置关系建立所述索引；

并且，所述组件池包括显示组件池和复用组件池，所述页面的视图组件的展示方法还包括：

建立显示组件池；

将所述展示的所述第一视图对象对应的视图组件加入所述显示组件池；

当接收到对所述页面的移动指令时，移动所述页面；

确定所述页面中与所述移动指令对应的移出区域；

基于所述索引确定与所述移出区域关联的第二视图对象；

从所述显示组件池中移除所述第二视图对象对应的视图组件，并将所述第二视图对象对应的视图组件加入至所述复用组件池中。

2.如权利要求1所述的方法，其特征在于，所述画布用于承载所述页面的视图对象，其中，通过对所述页面对应的画布进行划分，将所述页面划分为所述多个索引块。

3.如权利要求1所述的方法，其特征在于，所述确定所述页面中与所述移动指令对应的移出区域，包括：

获取在所述页面移动前的待显示区域的第一位置信息，并获取在所述页面移动后的待显示区域的第二位置信息；

根据所述第一位置信息和所述第二位置信息确定所述移出区域。

4.如权利要求1所述的方法，其特征在于，所述基于所述索引确定与所述移出区域关联的第二视图对象，包括：

在所述页面的多个索引块中，确定与所述移出区域关联的第二索引块；

基于所述索引获取与所述第二索引块对应的第二视图对象。

5.如权利要求1所述的方法，其特征在于，根据所述虚拟视图与所述索引块的位置关系建立所述索引，包括：

当所述虚拟视图的宽度大于所述索引块的宽度，或者当所述虚拟视图的高度大于所述索引块的高度时，根据所述虚拟视图与所述索引块的位置关系建立一级索引；

当所述虚拟视图的宽度小于所述索引块的宽度，且当所述虚拟视图的高度小于所述索引块的高度时，根据所述虚拟视图与二级索引块的位置关系建立二级索引，其中，所述二级索引块为所述索引块切分生成的；

根据所述一级索引和所述二级索引生成所述索引。

6.一种页面的视图组件的展示装置，其特征在于，包括：

第一确定模块，用于确定页面的待显示区域，其中，所述页面划分为多个索引块；

第二确定模块，用于在所述页面的多个索引块中，确定与所述待显示区域关联的第一索引块；

第一获取模块，基于预先建立的索引块与页面的视图对象之间的索引，获取与所述第一索引块对应的第一视图对象；以及

选取模块，用于从所述页面的组件池中为所述第一视图对象选取对应的视图组件，以展示在所述待显示区域中；

其中，所述页面的区域大于所述待显示区域，所述页面具有对应的画布，所述装置还包括建立索引模块，所述建立索引模块包括：

生成单元，用于获取业务数据，并根据所述业务数据生成对应的虚拟视图；

确定单元，用于根据所述虚拟视图确定所述画布的范围信息；

划分单元，用于根据所述范围信息将所述画布划分为多个索引块；

建立单元，用于根据所述虚拟视图与所述索引块的位置关系建立所述索引；

并且，所述组件池包括显示组件池和复用组件池，所述装置还包括：

建立模块，用于建立显示组件池；

第一加入模块，用于将所述展示的所述第一视图对象对应的视图组件加入所述显示组件池；

移动模块，用于当接收到对所述页面的移动指令时，移动所述页面；

第三确定模块，用于确定所述页面中与所述移动指令对应的移出区域；

第四确定模块，用于基于所述索引确定与所述移出区域关联的第二视图对象；

移除模块，用于从所述显示组件池中移除所述第二视图对象对应的视图组件；

第二加入模块，用于将所述第二视图对象对应的视图组件加入至所述复用组件池中。

7.如权利要求6所述的装置，其特征在于，所述画布用于承载所述页面的视图对象，其中，通过对所述页面对应的画布进行划分，将所述页面划分为所述多个索引块。

8.如权利要求6所述的装置，其特征在于，所述第三确定模块，用于：

获取在所述页面移动前的待显示区域的第一位置信息，并获取在所述页面移动后的待显示区域的第二位置信息；

根据所述第一位置信息和所述第二位置信息确定所述移出区域。

9.如权利要求6所述的装置，其特征在于，所述第四确定模块，用于：

在所述页面的多个索引块中，确定与所述移出区域关联的第二索引块；

基于所述索引获取与所述第二索引块对应的第二视图对象。

10.如权利要求6所述的装置，其特征在于，所述建立单元，用于：

当所述虚拟视图的宽度大于所述索引块的宽度，或者当所述虚拟视图的高度大于所述索引块的高度时，根据所述虚拟视图与所述索引块的位置关系建立一级索引；

当所述虚拟视图的宽度小于所述索引块的宽度，且当所述虚拟视图的高度小于所述索引块的高度时，根据所述虚拟视图与二级索引块的位置关系建立二级索引，其中，所述二级索引块为所述索引块切分生成的；

根据所述一级索引和所述二级索引生成所述索引。

Images