CN106775227A - 一种页面切换的方法及*** - Google Patents
一种页面切换的方法及*** Download PDFInfo
- Publication number
- CN106775227A CN106775227A CN201611107989.1A CN201611107989A CN106775227A CN 106775227 A CN106775227 A CN 106775227A CN 201611107989 A CN201611107989 A CN 201611107989A CN 106775227 A CN106775227 A CN 106775227A
- Authority
- CN
- China
- Prior art keywords
- convex
- value
- abscissa value
- page
- abscissa
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04801—Cursor retrieval aid, i.e. visual aspect modification, blinking, colour changes, enlargement or other visual cues, for helping user do find the cursor in graphical user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及页面展示领域,尤其涉及一种页面切换的方法及***。本发明通过获取当前页面指示标签的中心点的横坐标值,得到第一横坐标值;获取目标页面指示标签的中心点的横坐标值,得到第二横坐标值;绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。实现突出当前页面的指示标签,提高了指示器的显著性和易用性。
Description
技术领域
本发明涉及页面展示领域,尤其涉及一种页面切换的方法及***。
背景技术
目前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、设置凸形图的颜色为页面指示器的颜色的反色。
例如,设置页面指示器的颜色为浅蓝色,则将凸形图设置为浅蓝色的反色深红色,从而突出凸形图,进一步提高指示器指示当前页面标签的显著性。
综上所述,本发明提供的一种页面切换的方法,通过实时绘制凸形图,所述凸形图的突起部分指向当前页面对应的指示标签,突出当前页面的指示标签,满足用户的个性化需求,提高了指示器的显著性和易用性。进一步地,可有效防止页面滑动过程中凸形图显示的卡顿现象。进一步地,设置获取纵坐标值的个数不同,绘制出的凸形图不同。进一步地,根据页面的滑动方向获取目标页面的指示标签,使得所述页面切换的方法同时支持向左滑动屏幕将显示页面切换至当前页面的左侧页面,向右滑动屏幕将显示页面切换至当前页面的右侧页面。进一步地,凸形图的颜色为页面指示器的颜色的反色可进一步突出指向当前页面的指示标签。本发明还提供一种页面切换的***,可实现突出当前页面的指示标签的功能,提高了指示器的显著性和易用性。
以上所述仅为本发明的实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等同变换,或直接或间接运用在相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种页面切换的方法,其特征在于,包括:
S1、获取当前页面指示标签的中心点的横坐标值,得到第一横坐标值;
S2、获取目标页面指示标签的中心点的横坐标值,得到第二横坐标值;
S3、绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。
2.根据权利要求1所述的页面切换的方法,其特征在于,所述S3具体为:
S31、设置凸形图的宽度值和凸形图的最大高度值;
S32、根据所述凸形图的宽度值、所述凸形图的最大高度值、所述滑动距离和所述第二横坐标值计算得到凸形图的纵坐标值集合,具体为:
根据计算得到凸形图的纵坐标值集合;其中,mGussionHeightOffset为所述滑动距离,Hmax为所述凸形图的最大高度值,μ为所述第二横坐标值,w为所述凸形图的宽度值,x为从所述第一横坐标值至所述第二横坐标值的区间内的横坐标值;
S33、根据所述纵坐标值集合绘制凸形图。
3.根据权利要求2所述的页面切换的方法,其特征在于,还包括:
设置获取凸形图的纵坐标值的个数。
4.根据权利要求1所述的页面切换的方法,其特征在于,所述S2具体为:
获取页面的滑动方向;
根据所述滑动方向和当前页面指示标签,得到目标页面指示标签;
计算所述目标页面指示标签的中心点的横坐标值,得到第二横坐标值。
5.根据权利要求1所述的页面切换的方法,其特征在于,还包括:
设置凸形图的颜色为页面指示器的颜色的反色。
6.一种页面切换的***,其特征在于,包括:
第一获取模块,用于获取当前页面指示标签的中心点的横坐标值,得到第一横坐标值;
第二获取模块,用于获取目标页面指示标签的中心点的横坐标值,得到第二横坐标值;
绘制模块,用于绘制凸形图最高点对应的横坐标值从所述第一横坐标值变换到所述第二横坐标值的过程中与页面的实时滑动距离对应的凸形图。
7.根据权利要求6所述的页面切换的***,其特征在于,所述绘制模块包括:
设置单元,用于设置凸形图的宽度值和凸形图的最大高度值;
第一计算单元,用于根据所述凸形图的宽度值、所述凸形图的最大高度值、所述滑动距离和所述第二横坐标值计算得到凸形图的纵坐标值集合,具体为:
根据计算得到凸形图的纵坐标值集合;其中,mGussionHeightOffset为所述滑动距离,Hmax为所述凸形图的最大高度值,μ为所述第二横坐标值,w为所述凸形图的宽度值,x为从所述第一横坐标值至所述第二横坐标值的区间内的横坐标值;
绘制单元,用于根据所述纵坐标值集合绘制凸形图。
8.根据权利要求7所述的页面切换的***,其特征在于,还包括:
第一设置模块,用于设置获取凸形图的纵坐标值的个数。
9.根据权利要求6所述的页面切换的***,其特征在于,所述第二获取模块包括:
第一获取单元,用于获取页面的滑动方向;
第二获取单元,用于根据所述滑动方向和当前页面指示标签,得到目标页面指示标签;
第二计算单元,用于计算所述目标页面指示标签的中心点的横坐标值,得到第二横坐标值。
10.根据权利要求6所述的页面切换的***,其特征在于,还包括:
第二设置模块,用于设置凸形图的颜色为页面指示器的颜色的反色。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611107989.1A CN106775227B (zh) | 2016-12-06 | 2016-12-06 | 一种页面切换的方法及*** |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611107989.1A CN106775227B (zh) | 2016-12-06 | 2016-12-06 | 一种页面切换的方法及*** |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106775227A true CN106775227A (zh) | 2017-05-31 |
CN106775227B CN106775227B (zh) | 2019-08-06 |
Family
ID=58874354
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201611107989.1A Active CN106775227B (zh) | 2016-12-06 | 2016-12-06 | 一种页面切换的方法及*** |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106775227B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109254823A (zh) * | 2018-09-21 | 2019-01-22 | 武汉华中时讯科技有限责任公司 | 一种切换多级嵌套的分页视图元素的方法、存储器及终端 |
CN109739593A (zh) * | 2018-11-21 | 2019-05-10 | 惠州Tcl移动通信有限公司 | 多网页切换浏览方法、移动终端及计算机可读存储介质 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103500057A (zh) * | 2013-10-08 | 2014-01-08 | 百度在线网络技术(北京)有限公司 | 移动终端及其操控方法和装置 |
JP2015005045A (ja) * | 2013-06-19 | 2015-01-08 | コニカミノルタ株式会社 | 電子表示端末、電子表示端末用プログラム、電子表示端末用プログラムが記録された記録媒体、および表示方法 |
CN104932790A (zh) * | 2015-06-26 | 2015-09-23 | 联想(北京)有限公司 | 一种信息处理方法及电子设备 |
CN105068734A (zh) * | 2015-08-20 | 2015-11-18 | 广东欧珀移动通信有限公司 | 一种终端的滑动控制方法及装置 |
EP2953018A1 (en) * | 2010-03-02 | 2015-12-09 | Sony Mobile Communications AB | Mobile terminal and input device |
CN105426538A (zh) * | 2015-12-21 | 2016-03-23 | 北京奇虎科技有限公司 | 页面切换方法及装置 |
CN105589650A (zh) * | 2014-11-14 | 2016-05-18 | 阿里巴巴集团控股有限公司 | 一种页面导航方法和装置 |
-
2016
- 2016-12-06 CN CN201611107989.1A patent/CN106775227B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP2953018A1 (en) * | 2010-03-02 | 2015-12-09 | Sony Mobile Communications AB | Mobile terminal and input device |
JP2015005045A (ja) * | 2013-06-19 | 2015-01-08 | コニカミノルタ株式会社 | 電子表示端末、電子表示端末用プログラム、電子表示端末用プログラムが記録された記録媒体、および表示方法 |
CN103500057A (zh) * | 2013-10-08 | 2014-01-08 | 百度在线网络技术(北京)有限公司 | 移动终端及其操控方法和装置 |
CN105589650A (zh) * | 2014-11-14 | 2016-05-18 | 阿里巴巴集团控股有限公司 | 一种页面导航方法和装置 |
CN104932790A (zh) * | 2015-06-26 | 2015-09-23 | 联想(北京)有限公司 | 一种信息处理方法及电子设备 |
CN105068734A (zh) * | 2015-08-20 | 2015-11-18 | 广东欧珀移动通信有限公司 | 一种终端的滑动控制方法及装置 |
CN105426538A (zh) * | 2015-12-21 | 2016-03-23 | 北京奇虎科技有限公司 | 页面切换方法及装置 |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109254823A (zh) * | 2018-09-21 | 2019-01-22 | 武汉华中时讯科技有限责任公司 | 一种切换多级嵌套的分页视图元素的方法、存储器及终端 |
CN109254823B (zh) * | 2018-09-21 | 2022-02-22 | 武汉华中时讯科技有限责任公司 | 一种切换多级嵌套的分页视图元素的方法、存储器及终端 |
CN109739593A (zh) * | 2018-11-21 | 2019-05-10 | 惠州Tcl移动通信有限公司 | 多网页切换浏览方法、移动终端及计算机可读存储介质 |
CN109739593B (zh) * | 2018-11-21 | 2022-06-10 | 惠州Tcl移动通信有限公司 | 多网页切换浏览方法、移动终端及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN106775227B (zh) | 2019-08-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11687233B2 (en) | Handwriting processing method, touch display device, computer device and storage medium | |
KR102107887B1 (ko) | 합성 화상을 생성하는 방법 및 장치 | |
CN102937849B (zh) | 实时手写笔迹的美化方法及电子设备 | |
US5889523A (en) | Method and apparatus for dynamically grouping a plurality of graphic objects | |
US7310780B2 (en) | Methods, systems and computer program products for visually tethering related graphical objects | |
CN104407732B (zh) | 同步书写方法和*** | |
CN105321147B (zh) | 图像处理的方法及装置 | |
JP4916548B2 (ja) | 画像のドミナントライン(dominantline)の確定及び使用 | |
CN106201172A (zh) | 一种触屏终端的画布显示方法及装置 | |
CN103310474A (zh) | 一种手写原笔迹的实现方法及*** | |
CN103777852A (zh) | 一种获取图像的方法、装置 | |
CN106775227A (zh) | 一种页面切换的方法及*** | |
CN104915332A (zh) | 一种生成排版模板的方法及装置 | |
CN103473077A (zh) | 丰富应用程序主窗口显示界面的方法及装置 | |
CN104199547A (zh) | 人机交互式虚拟触控装置、***及方法 | |
CN113448486A (zh) | 电子白板用笔笔锋实现方法、装置、存储介质及电子白板 | |
CN102830800B (zh) | 利用手势识别控制数字标牌的方法和*** | |
CN105988566A (zh) | 一种信息处理方法及电子设备 | |
CN104199548B (zh) | 一种三维人机交互操作装置、***及方法 | |
CN113590000B (zh) | 笔迹处理方法、笔迹处理装置、存储介质 | |
JP2017151916A5 (zh) | ||
CN109189314A (zh) | 手写设备的书写引导方法、装置、设备及介质 | |
CN102999930A (zh) | 一种电子笔迹线条描绘方法及装置 | |
CN109299310A (zh) | 一种屏幕图像取色和搜索方法及*** | |
CN113989831A (zh) | 近视防控方法、装置、终端设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |