快速滚动滑块（Fast ScrollThumb）的实现

Fast ScrollThumb

一 Fast ScrollThumb简介

  随着智能终端的日益普及，人们更多地使用手机上网，读小说，购物等等，这些网页往往也会比较长，由于智能终端屏幕的限制，很多APP都会提供一个快速滚动滑块（Fast ScrollThumb），便于用户快速移动页面，定位到想要的页面位置。然而Fast ScrollThumb 并未成为系统的标准控件，需要应用开发者自己去实现。下面基于Android系统的APP，分析一下Fast ScrollThumb的实现。

 

二 Fast ScrollThumb的交互

  对于普通APP当页面显示超出屏幕的内容时，都会在右边显示一个滚动条（ScrollBar），如图1所示。但是这个滚动除了让用户感知到，提示用户还有更多内容以及大概的当前内容占所有内容的比例。然而这样的滚动条也许并不是用户真正想要的，如果这时存在能让用户可以拖动的滚动条，用来快速滚动页面定位到用户想要的位置，就像facebook那样，如图2所示。

 

图1 普通滚动条

 

图2 facebook’s Fast ScrollThumb

  如果现在已经有这样的ScrollThumb了，那么先考虑一下它的交互是怎样的呢？在Android Patterns（http://unitid.nl/androidpatterns/uap_pattern/scroll-thumb）上有这样一幅交互图，如图3所示。

图3 Fast ScrollThumb交互示意图（图片copy来源于http://unitid.nl/androidpatterns/uap_pattern/scroll-thumb）

#1 用户浏览一个长列表或长页面时；

#2 当用户开始缓慢滚动时，表明用户需要仔细阅读页面内容，当用户触发一个fling操作时，表明用户想看“更远”地方的内容；

#3 一个Fast ScrollThumb出现在屏幕的右侧边缘，它出现的位置也同时表明了当前内容占全部内容的比例，这时默认样式的滚动条应该消失；

#4 用户可以向上或向下拖动Fast ScrollThumb，以便快速定位到感兴趣的内容；

#5 当用户再次缓慢滚动页面时，并且用户手指并没有按在Fast ScrollThumb上，Fast ScrollThumb应该在一段很小时间间隔后自动消失。

三 Fast ScrollThumb的实现

  经过以上分析，有了需求和具体交互设计，那么接下来应该看看如何实现Fast ScrollThumb了。下面提供两种实现方式：

#1 把ScrollThumb作为一个view

这里的想法就是把ScrollThumb作为一个view，再把用来显示的view，一起放到一个ViewGroup中，这样的实现好处就是非常直观，同时不需要处理ScrollThumb复杂的touch事件，只需要重写view的dispatchTouchEvent方法，在该方法中通过translationToY改变位置，然后在由回调通知内容view进行scroll，demo效果如图4所示，demo实现代码，见附件。这个实现方式虽然简单，但是有很多致命的缺点，在ScrollThumb滑动过程中，会出现跳跃或抖动。

 

图4 demo

 

#2 把ScrollThumb作为一个image

这个实现方式稍微复杂，思想就是把ScrollThumb作为一个image，在它应该出现的地方，画到view上面，这里需要开发者自己处理touch事件以及绘制等等。但是优点也是非常明显的，滑块在滑动过程中不会出现跳跃抖动现象。在实现过程中，可以参考Android原生widget的FastScroller实现。

Fast ScrollThumb在移动终端上的浏览器中是非常重要的功能，下面对比QQ，UC，Baidu，小米浏览器的Fast ScrollThumb。

 

   QQ

      UC    

 

     百度
 

     小米

版权声明：本文为博主原创文章，未经博主允许不得转载。

ps：demo下载地址

参考文献：

1 http://unitid.nl/androidpatterns/uap_pattern/scroll-thumb

2https://android.googlesource.com/platform/frameworks/base/+/6cfc7a0acb0d3b202ae1dbee88e7e8bdfaee5590/core/java/android/widget/FastScroller.java