一种页面切换的方法及系统与流程

本发明涉及页面展示领域，尤其涉及一种页面切换的方法及系统。

背景技术：

目前Android众多app中，ViewPager控件的使用无处不在，然而其页面指示器(TabPageIndicator)却比较单调。比较常见的是开源的第三方控件ViewPagerIndicator和2015年Google大会上发布的Android Support Design库中的TabLayout控件。因为可以达到ViewPagerIndicator的效果，并且是官方发布的，能够兼容2.2及以上版本，TabLayout的使用与日俱增。然而这两个控件形式单一，仅仅可以使用一条线(或者说矩形)通过不同的颜色来达到指示的目的，其指示效果不明显。

技术实现要素：

本发明所要解决的技术问题是：提供一种页面切换的方法及系统，提高页面指示器的显著性。

为了解决上述技术问题，本发明采用的技术方案为：

本发明提供一种页面切换的方法，包括：

S1、获取当前页面指示标签的中心点的横坐标值，得到第一横坐标值；

S2、获取目标页面指示标签的中心点的横坐标值，得到第二横坐标值；

S3、绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。

本发明还提供一种页面切换的系统，包括：

第一获取模块，用于获取当前页面指示标签的中心点的横坐标值，得到第一横坐标值；

第二获取模块，用于获取目标页面指示标签的中心点的横坐标值，得到第二横坐标值；

绘制模块，用于绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。

本发明的有益效果在于：通过实时绘制凸形图，所述凸形图的突起部分指向当前页面对应的指示标签，突出当前页面的指示标签，满足用户的个性化需求，提高了指示器的显著性和易用性。

附图说明

图1为本发明一种页面切换的方法的具体实施方式的流程框图；

图2为本发明一种页面切换的系统的具体实施方式的结构框图；

图3为锯齿形指示器的效果图；

图4为波形指示器的效果图；

标号说明：

1、第一获取模块；2、第二获取模块；3、绘制模块。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：通过实时绘制凸形图，突出当前页面的指示标签，提高了指示器的显著性和易用性。

请参照图1至图4，

如图1所示，本发明提供一种页面切换的方法，包括：

S1、获取当前页面指示标签的中心点的横坐标值，得到第一横坐标值；

S2、获取目标页面指示标签的中心点的横坐标值，得到第二横坐标值；

S3、绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。

进一步地，所述S3具体为：

S31、设置凸形图的宽度值和凸形图的最大高度值；

S32、根据所述凸形图的宽度值、所述凸形图的最大高度值、所述滑动距离和所述第二横坐标值计算得到凸形图的纵坐标值集合，具体为：

根据计算得到凸形图的纵坐标值集合；其中，mGussionHeightOffset为所述滑动距离，Hmax为所述凸形图的最大高度值，μ为所述第二横坐标值，w为所述凸形图的宽度值，x为从所述第一横坐标值至所述第二横坐标值的区间内的横坐标值；

S33、根据所述纵坐标值集合绘制凸形图。

由上述描述可知，本发明提供的计算凸形图的纵坐标值集合的计算公式中需实时获取的参数只有当前计算的凸形图的纵坐标值对应的横坐标值，计算过程简单，可有效防止页面滑动过程中凸形图显示的卡顿现象。

进一步地，还包括：

设置获取凸形图的纵坐标值的个数。

由上述描述可知，设置获取纵坐标值的个数不同，绘制出的凸形图不同。

进一步地，所述S2具体为：

获取页面的滑动方向；

根据所述滑动方向和当前页面指示标签，得到目标页面指示标签；

计算所述目标页面指示标签的中心点的横坐标值，得到第二横坐标值。

由上述描述可知，根据页面的滑动方向获取目标页面的指示标签，使得所述页面切换的方法同时支持向左滑动屏幕将显示页面切换至当前页面的左侧页面，向右滑动屏幕将显示页面切换至当前页面的右侧页面。

进一步地，还包括：

设置凸形图的颜色为页面指示器的颜色的反色。

由上述描述可知，凸形图的颜色为页面指示器的颜色的反色可进一步突出指向当前页面的指示标签。

如图2所示，本发明还提供一种页面切换的系统，包括：

第一获取模块1，用于获取当前页面指示标签的中心点的横坐标值，得到第一横坐标值；

第二获取模块2，用于获取目标页面指示标签的中心点的横坐标值，得到第二横坐标值；

绘制模块3，用于绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。

进一步地，所述绘制模块包括：

设置单元，用于设置凸形图的宽度值和凸形图的最大高度值；

第一计算单元，用于根据所述凸形图的宽度值、所述凸形图的最大高度值、所述滑动距离和所述第二横坐标值计算得到凸形图的纵坐标值集合，具体为：

根据计算得到凸形图的纵坐标值集合；其中，mGussionHeightOffset为所述滑动距离，Hmax为所述凸形图的最大高度值，μ为所述第二横坐标值，w为所述凸形图的宽度值，x为从所述第一横坐标值至所述第二横坐标值的区间内的横坐标值；

绘制单元，用于根据所述纵坐标值集合绘制凸形图。

进一步地，还包括：

第一设置模块，用于设置获取凸形图的纵坐标值的个数。

进一步地，所述第二获取模块包括：

第一获取单元，用于获取页面的滑动方向；

第二获取单元，用于根据所述滑动方向和当前页面指示标签，得到目标页面指示标签；

第二计算单元，用于计算所述目标页面指示标签的中心点的横坐标值，得到第二横坐标值。

进一步地，还包括：

第二设置模块，用于设置凸形图的颜色为页面指示器的颜色的反色。

由上述描述可知，通过所述页面切换的系统，可实现突出当前页面的指示标签的功能，提高了指示器的显著性和易用性。

本发明的实施例为：

Android Support Design库中的TabLayout控件是官方发布的，使用简单，具有指示器的作用，但是该控件的样式单一，只能通过矩形来制作指示器，其指示效果不明显。以TabLayout为基础制作带有凸形图的指示器的方法步骤如下所述：

S1、获取当前页面指示标签的中心点的横坐标值，得到第一横坐标值；

其中，分别获取页面指示标签的左边界和右边界在指示器中的坐标值mIndicatorLeft和mIndicatorRight，根据(mIndicatorRight+mIndicatorLeft)/2计算得到页面指示标签的中心点的横坐标。

S2、获取页面的滑动方向；根据所述滑动方向和当前页面指示标签，得到目标页面指示标签；计算所述目标页面指示标签的中心点的横坐标值，得到第二横坐标值；

S3、绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图，具体为：

S31、设置凸形图的宽度值和凸形图的最大高度值；

其中，从Android design support库里面提取出TabLayout类的实现，将类名修改为RippleTabLayout，并在其中增加设置凸形图的宽度以及凸形图的最大高度值的接口。

提取RippleTabLayout类中TabStrip类的实现，修改其类名为SlidingTabStrip，增加一个用于记录凸形图横坐标变化的偏移量mGussionHeightOffset，初始化为0，其取值范围为[0,1]。

重写RippleTabLayout中其他所有design support库中相关的类。使用自己定义的同样功能的类代替之，这样我们不需要导入design support库，就能够直接使用RippleTabLayout达到显示凸形图的特效。

S32、设置获取凸形图的纵坐标值的个数；

S33、根据所述凸形图的宽度值、所述凸形图的最大高度值、所述滑动距离和所述第二横坐标值计算得到凸形图的纵坐标值集合，具体为：

根据计算得到凸形图的纵坐标值集合；其中，mGussionHeightOffset为所述滑动距离，Hmax为所述凸形图的最大高度值，μ为所述第二横坐标值，w为所述凸形图的宽度值，x为从所述第一横坐标值至所述第二横坐标值的区间内的横坐标值；

S34、根据所述纵坐标值集合绘制凸形图；

其中，创建Path对象，Path对象获取特定个数的凸形图的点对应的横坐标值和纵坐标值，调用画布函数，绘制Path对象中的每一个点。其中，Path对象中凸形图的点的个数与步骤S32中设置获取凸形图的纵坐标值的个数相同。Path对象中点的个数不同，其绘制出的凸形图不同，本发明所述的凸形图为对称凸形。如，Path对象中点的个数为3个时，包括凸形图的最高点的坐标和两个最低点的坐标，绘制出的凸形图为锯齿形，效果图如图3所示。Path对象中点的个数为20个时，绘制出的凸形图为波形，效果图如图4所示。

S4、设置凸形图的颜色为页面指示器的颜色的反色。

例如，设置页面指示器的颜色为浅蓝色，则将凸形图设置为浅蓝色的反色深红色，从而突出凸形图，进一步提高指示器指示当前页面标签的显著性。

综上所述，本发明提供的一种页面切换的方法，通过实时绘制凸形图，所述凸形图的突起部分指向当前页面对应的指示标签，突出当前页面的指示标签，满足用户的个性化需求，提高了指示器的显著性和易用性。进一步地，可有效防止页面滑动过程中凸形图显示的卡顿现象。进一步地，设置获取纵坐标值的个数不同，绘制出的凸形图不同。进一步地，根据页面的滑动方向获取目标页面的指示标签，使得所述页面切换的方法同时支持向左滑动屏幕将显示页面切换至当前页面的左侧页面，向右滑动屏幕将显示页面切换至当前页面的右侧页面。进一步地，凸形图的颜色为页面指示器的颜色的反色可进一步突出指向当前页面的指示标签。本发明还提供一种页面切换的系统，可实现突出当前页面的指示标签的功能，提高了指示器的显著性和易用性。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。