CN102880389B - 通过触摸移动进行页面切换的方法及其装置 - Google Patents

Abstract

本发明提供一种通过触摸移动进行页面切换的方法及其装置，其方法包括以下步骤：生成高宽与屏幕大小相一致的背景图片；将应用程序的图标分别渲染并生成相应图标图片；将所述图标图片按照页面上的实际位置与所述背景图片相合并，得到各页面的图标布局图片；进行翻页操作时，根据当前实际页面获取对应的图标布局图片；根据用户移动操作，使用所述图标布局图片代替实际页面图标进行移动；移动结束时，根据当前图标布局图片获取对应的页面图标并进行显示。本发明的方法与装置，在翻页过程中隐藏实际页面的应用程序图标，通过移动页面布局图片完成翻页过程，减少了翻页的***消耗，缩短了翻页所需要的时间，使翻页功能能够流畅运作，提高了用户体验。

Description

通过触摸移动进行页面切换的方法及其装置

技术领域

本发明涉及一种交互显示技术，特别是涉及一种通过触摸移动进行页面切换的方法以及一种通过触摸移动进行页面切换的装置。

背景技术

对于以通过触摸主界面上应用程序的图标（或称“按钮”）的方式来为用户提供功能服务的触摸屏产品来说，其主界面基本上是由提供给用户操作的应用程序的图标所组成的。然而，由于触摸设备的主界面上每一页所能够显示的图标有数量限制，因此当应用程序的图标超出这个数量限制时就需要新增一页去容纳多出来的图标。此时，当用户需要查看其它页面的图标时就需要用手指在触摸屏上进行移动翻页。在这个页面切换的过程中，主界面上的图标一个个的都会进行移动，这对于一般的小屏幕触摸设备来说是不会有任何影响的。然而随着大屏幕触摸设备的流行，我们越来越发现在页面切换的过程中，经常会有页面移动不流畅的情况出现，特别是屏幕上的图标特别多的时候这个问题更加明显。

经过研究发现，出现上述问题的原因主要是因为在移动图标时，需要不断对界面进行刷新，而大屏幕触摸设备的屏幕分辨率很高，每刷新一次所需要的时间比小屏幕低分辨率的设备要长很多；再加上显示在界面上的图标实际上是一个个的控件，移动多个控件的***开销是比较大的，从而造成了在页面切换移动应用程序图标的时候容易出现卡顿现象。

因此，如何更好的实现这个翻页功能并使其流畅运作是现在亟待解决的问题。

发明内容

基于此，有必要针对上述页面切换时存在的运作不流畅的问题，提供一种通过触摸移动进行页面切换的方法及其装置。

一种通过触摸移动进行页面切换的方法，包括以下步骤：

根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片；

根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动；

当移动结束时，根据当前显示的图标布局图片获取对应的页面图标并进行显示。

一种通过触摸移动进行页面切换的装置，包括：

背景图片生成模块，用于根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

图标渲染模块，用于将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

合并模块，用于将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

关联模块，用于在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片；以及当移动结束时，根据当前显示的图标布局图片获取对应的页面图标并进行显示；

图片移动模块，用于翻页时根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动。

从上述方法可以看出，本发明的通过触摸移动进行页面切换的方法及其装置，在翻页过程中隐藏实际页面的应用程序图标，通过移动页面布局图片完成翻页过程，从而减少了翻页的***消耗，缩短了翻页所需要的时间，使翻页功能能够流畅运作。本发明的方法及其装置使用范围广、灵活方便，提高了用户体验。

附图说明

图1为本发明的一种通过触摸移动进行页面切换的方法流程示意图；

图2为实施例一中主界面的第一页示意图；

图3为实施例一中主界面的第二页示意图；

图4为实施例一中页面移动过程示意图；

图5为实施例一中页面移动完成示意图；

图6是实施例二中页面移动过程示意图；

图7是实施例二中页面移动完成示意图；

图8为本发明的一种通过触摸移动进行页面切换的装置结构示意图。

具体实施方式

下面结合附图以及具体的实施例对本发明的通过触摸移动进行页面切换的方法及其装置进行具体说明。

参见图1所示，一种通过触摸移动进行页面切换的方法，包括以下步骤：

步骤S1，根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

步骤S2，将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

步骤S3，将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

步骤S4，在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片；

步骤S5，根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动；

步骤S6，当移动结束时，根据当前显示的图标布局图片获取对应的页面图标并进行显示。

作为一个较好的实施例，在步骤S3得到各个页面的图标布局图片之后，步骤S4进行翻页操作之前，还可以包括步骤：建立布局图片列表，将所述各个页面的图标布局图片按照实际的页面顺序存放在所述布局图片列表中。

另外，所述各个页面的图标布局图片可以按照所述布局图片列表的存放位置与所述实际页面的顺序位置一一关联。为使主界面上应用程序图标排列整齐，无论哪一页显示在主界面上，应用程序图标的位置都是已经确定的，即每个图标的在界面的位置（离屏幕左边和上边的距离以及其宽度和高度）已经确定，实际数值根据期望的显示效果进行调整。当移动结束后，首先会确定当前显示的是哪一张布局图片（图标布局图片都按实际页面顺序保存在一个列表中，例如列表的第一个元素就是第一页的图标布局图片，以此类推），然后获取与该布局图片相对应的页面应用程序图标，最后按照每个图标的位置把图标按顺序显示在主界面上（每页的图标也是按其实际显示的顺序存储在一个列表中，例如第一个图标就是指该图标显示在屏幕的第一个位置上）。

作为一个较好的实施例，步骤S1中所述背景图片可以是透明的（为了能够显示主界面的背景图片）；另外背景图片可以为png格式。

作为一个较好的实施例，本发明中可以在程序初始化以及页面的图标发生变化时生成所述各个页面的图标布局图片，以保证各个页面的图标布局图片与实际页面的图标相一致。

作为一个较好的实施例，用户在实际触摸移动操作中：

当向左翻页时，判断该实际页面是否最左页，若是，则隐藏应用程序图标，取出当前页面的图标布局图片并显示在屏幕中，若否，则隐藏页面的应用程序图标，取出当前页面的图标布局图片及其左页页面的图标布局图片一并移动；

或

当向右翻页时，判断该实际页面是否最右页，若是，则隐藏应用程序图标，取出当前页面的图标布局图片并显示在屏幕中，若否，则隐藏页面的应用程序图标，取出当前页面的图标布局图片及其右页页面的图标布局图片一并移动。

另外，为了使得页面之间的翻页动作更具连贯性，所述当前页面的图标布局图片及其左页页面的图标布局图片一并移动时，所述当前页面的图标布局图片的左边缘紧贴其左页页面的图标布局图片的右边缘，两张图片同时移动；

或

所述当前页面的图标布局图片及其右页页面的图标布局图片一并移动时，所述当前页面的图标布局图片的右边缘紧贴其右页页面的图标布局图片的左边缘，两张图片同时移动。

作为一个较好的实施例，因为本发明主要针对大屏幕显示设备，为了尽可能让用户进行翻页时触摸移动尽可能短的距离，因此加入触摸移动速度判断。即当用户开始触摸移动翻页时，记录每次移动的点的屏幕坐标和***时间，当移动翻页结束时，判断移动最后五个点（五个点为经验值，如果小于五个，则取所有记录点）的平均速度，计算方式为：移动点数除以最后一个点的时间减去所取点中所记录的***时间最靠前的点的时间。然后再定义一个临界速度值（为正数），如果平均速度值的绝对值超过该值，则自动向左翻页或者自动向右翻页，否则界面显示当前页的图标布局图片。另外如果当前页面的图标布局图片已经移动了大于或者等于其宽度三分之一的距离，则此时取消触摸操作也会自动向左翻页或者自动向右翻页。如果当前页面的图标布局图片已经移动了小于其宽度三分之一的距离，此时取消触摸操作则不会自动向左翻页或者自动向右翻页，而是自动返回当前页的图标布局图片。

作为一个较好的实施例，要实现自动翻页功能。可以在开始自动翻页时建立一个定时器（它每隔一段时间执行一次某个操作），让它每隔一段时间去移动图标布局图片，定时器的时间间隔和每次图标布局图片移动的位移以实际显示效果进行调整。图标布局图片实际上要完成翻页动作所需要的总位移计算方式为当前图标布局图片的宽度减去其自动翻页前已经移动的位移量，定时器在把图标布局图片移动所需总位移后即可停止。

为使本领域的技术人员对本发明的文案有更深的了解，下面通过两个具体的实施例来进行描述：

实施例一：

假设程序总共有三页，当程序启动时首先生成这三页的图标布局图片。如图2所示，假设当前页为第一页，当用户在屏幕上刚开始向左触摸移动时，首先从图标布局图片列表中取出第一页的图标布局图片和第二页的图标布局图片（第二页的图标布局图片如图3所示），并把第二页图标布局图片的左边缘紧贴第一页图标布局图片的右边缘。然后隐藏页面上的实际应用程序图标，并把第一页的图标布局图片显示在屏幕上，这样不会让用户感到画面的闪烁。当用户持续向左触摸移动时，第一页的图标布局图片和第二页的图标布局图片也会不断跟随用户操作向左移动，如图4所示，图标布局图片第一页已经向左移动了一半的图片宽度位移，第二页也向左移动了一半的图片宽度位移，中间线条就是第一页的图标布局图片的右边缘和第二页图标布局图片的左边缘的分割线。当用户取消触摸动作时，如果第一页图标布局图片向左移动的距离小于其宽度，则此时启动自动翻页功能。因为第一页图标布局图片向左移动的距离大于其宽度的三分之一，所以此时启动定时器继续把第一页和第二页图标布局图片向左移动第一页图标布局图片宽度的二分之一位移。移动完毕后停止定时器，隐藏第一第二页图标布局图片，然后把第二页的实际应用程序图标显示出来，如图5所示。

实施例二：

假如当前页为第一页，并且用户在触摸屏上进行向右触摸移动，此时仅需要从图标布局图片列表中取出第一页的图标布局图片即可。当用户持续向右触摸移动时，图标布局图片移动如图6所示。因为当前页为第一页，所以不能进行向右翻页操作，当用户取消触摸移动操作时，定时器自动把图标布局图片移回其原来位置，所需要移动图标布局图片的位移量为其已被移动的位移量（即图7中的“关于”按钮和图6中的“关于”按钮之间的在x轴方向上的距离）。

与上述一种通过触摸移动进行页面切换的方法相对应的，本发明还提供一种通过触摸移动进行页面切换的装置，参见图8所示，包括：

背景图片生成模块，用于根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

图标渲染模块，用于将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

合并模块，用于将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

关联模块，用于在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片；以及当移动结束时，根据当前显示的图标布局图片获取对应的页面图标并进行显示；

图片移动模块，用于在翻页时根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动。

作为一个较好的实施例，本发明中的合并模块中还可以包括列表模块，用于按照实际的页面顺序存放所述各个页面的图标布局图片。

作为一个较好的实施例，所述各个页面的图标布局图片可以按照所述列表模块的存放位置与所述实际页面的顺序位置一一关联。

作为一个较好的实施例，所述背景图片可以是透明的；和/或，所述背景图片可以为png格式。

作为一个较好的实施例，所述合并模块可以在程序初始化以及页面的程序图标发生变化时生成所述各个页面的图标布局图片。

本发明的一种通过触摸移动进行页面切换的装置的其他技术特征与上述一种通过触摸移动进行页面切换的方法完全相同，在此不予赘述。

从上述方案可以看出，本发明的通过触摸移动进行页面切换的方法及其装置，在翻页过程中隐藏实际页面的应用程序图标，通过移动页面布局图片完成翻页过程，从而减少了翻页的***消耗，缩短了翻页所需要的时间，使翻页功能能够流畅运作。本发明的方法及其装置使用范围广、灵活方便，提高了用户体验。

以上所述本发明的实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种通过触摸移动进行页面切换的方法，其特征在于，包括以下步骤：

根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

在程序初始化以及页面的图标发生变化时得到所述各个页面的图标布局图片；

在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片，隐藏页面上的各个应用程序的图标，并将当前显示的实际页面的图标布局图片显示在屏幕上；记录每次移动的点的屏幕坐标和***时间；

根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动；

当移动结束时，根据移动点数除以最后一个点的时间减去所取点中所记录的***时间最靠前的点的时间，确定移动最后五个点的平均速度，若所述平均速度的绝对值超过预设的临界速度值，则自动向左翻页或者自动向右翻页，否则界面显示当前页的图标布局图片；根据当前显示的图标布局图片获取对应的页面图标并进行显示，其中根据当前显示的图标布局图片获取对应的页面图标并进行显示的步骤包括：隐藏当前显示的图标布局图片，并将当前显示的图标布局图片对应的实际的页面上的各个应用程序图标显示在屏幕上。

2.根据权利要求1所述的通过触摸移动进行页面切换的方法，其特征在于：在得到各个页面的图标布局图片后、进行翻页操作前，还包括步骤：建立图标布局图片列表，并将所述各个页面的图标布局图片按照实际的页面顺序存放在该页面布局图片列表中。

3.根据权利要求2所述的通过触摸移动进行页面切换的方法，其特征在于：所述各个页面的图标布局图片按照所述图标布局图片列表的存放位置与所述实际页面的顺序位置一一关联。

4.根据权利要求1所述的通过触摸移动进行页面切换的方法，其特征在于：所述背景图片是透明的；

和/或

所述背景图片为png格式。

5.一种通过触摸移动进行页面切换的装置，其特征在于，包括：

背景图片生成模块，用于根据触摸设备的屏幕大小生成高宽与所述屏幕大小相一致的背景图片；

图标渲染模块，用于将主界面上的各个应用程序的图标分别进行渲染，生成对应数目的图标图片；

合并模块，用于将生成的图标图片按照对应的图标在各个页面上的实际位置与所述背景图片相合并，得到各个页面的图标布局图片；

所述合并模块在程序初始化以及页面的图标发生变化时得到所述各个页面的图标布局图片；

关联模块，用于在进行翻页操作时，根据当前显示的实际页面获取对应的图标布局图片，隐藏页面上的各个应用程序的图标，并将当前显示的实际页面的图标布局图片显示在屏幕上，并记录每次移动的点的屏幕坐标和***时间；以及当移动结束时，根据移动点数除以最后一个点的时间减去所取点中所记录的***时间最靠前的点的时间，确定移动最后五个点的平均速度，若所述平均速度的绝对值超过预设的临界速度值，则自动向左翻页或者自动向右翻页，否则界面显示当前页的图标布局图片；根据当前显示的图标布局图片获取对应的页面图标并进行显示，其中根据当前显示的图标布局图片获取对应的页面图标并进行显示包括：隐藏当前显示的图标布局图片，并将当前显示的图标布局图片对应的实际的页面上的各个应用程序图标显示在屏幕上；

图片移动模块，用于翻页时根据用户的实际触摸移动操作，使用所述图标布局图片来代替实际的页面图标进行移动。

6.根据权利要求5所述的通过触摸移动进行页面切换的装置，其特征在于：所述合并模块中还包括列表模块，用于按照实际的页面顺序存放所述各个页面的图标布局图片。

7.根据权利要求6所述的通过触摸移动进行页面切换的装置，其特征在于：所述各个页面的图标布局图片按照所述列表模块的存放位置与所述实际页面的顺序位置一一关联。

8.根据权利要求5所述的通过触摸移动进行页面切换的装置，其特征在于：所述背景图片是透明的；

和/或

所述背景图片为png格式。