Android Scroller OverScroller使用

Scroller是一个专门用于处理滚动效果的工具类，可能在大多数情况下，我们直接使用Scroller的场景并不多，但是很多大家所熟知的控件在内部都是使用Scroller来实现的，如ViewPager、ListView等。而如果能够把Scroller的用法熟练掌握的话，我们自己也可以轻松实现出类似于ViewPager这样的功能。

先撇开Scroller类不谈，其实任何一个控件都是可以滚动的，因为在View类当中有scrollTo()和scrollBy()这两个方法，如下图所示： 

这两个方法都是用于对View进行滚动的，那么它们之间有什么区别呢？简单点讲，scrollBy()方法是让View相对于当前的位置滚动某段距离，而scrollTo()方法则是让View相对于初始的位置滚动某段距离。不管是scrollTo()还是scrollBy()方法，滚动的都是该View内部的内容。

另外还有一点需要注意，就是两个scroll方法中传入的参数，第一个参数x表示相对于当前位置横向移动的距离，正值向左移动，负值向右移动，单位是像素。第二个参数y表示相对于当前位置纵向移动的距离，正值向上移动，负值向下移动，单位是像素。

但是scrollTo()和scrollBy()这两个方法完成的滚动效果是跳跃式的，没有任何平滑滚动的效果。没错，只靠scrollTo()和scrollBy()这两个方法是很难完成ViewPager这样的效果的，因此我们还需要借助另外一个关键性的工具，也就我们今天的主角Scroller。 

Scroller的基本用法其实还是比较简单的，主要可以分为以下几个步骤： 
1. 创建Scroller的实例 
2. 调用startScroll()方法来初始化滚动数据并刷新界面 
3. 重写computeScroll()方法，并在其内部完成平滑滚动的逻辑 
那么下面我们就按照上述的步骤，通过一个模仿ViewPager的简易例子来学习和理解一下Scroller的用法。 

新建一个ScrollerLayout并让它继承自ViewGroup来作为我们的简易ViewPager布局，代码如下所示：

public class ScrollerLayout extends ViewGroup {

    /**
     * 用于完成滚动操作的实例
     */
    private Scroller mScroller;

    /**
     * 判定为拖动的最小移动像素数
     */
    private int mTouchSlop;

    /**
     * 手机按下时的屏幕坐标
     */
    private float mXDown;

    /**
     * 手机当时所处的屏幕坐标
     */
    private float mXMove;

    /**
     * 上次触发ACTION_MOVE事件时的屏幕坐标
     */
    private float mXLastMove;

    /**
     * 界面可滚动的左边界
     */
    private int leftBorder;

    /**
     * 界面可滚动的右边界
     */
    private int rightBorder;

    public ScrollerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 第一步，创建Scroller的实例
        mScroller = new Scroller(context);
        ViewConfiguration configuration = ViewConfiguration.get(context);
        // 获取TouchSlop值
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            // 为ScrollerLayout中的每一个子控件测量大小
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            int childCount = getChildCount();
            for (int i = 0; i < childCount; i++) {
                View childView = getChildAt(i);
                // 为ScrollerLayout中的每一个子控件在水平方向上进行布局
                childView.layout(i * childView.getMeasuredWidth(), 0, (i + 1) * childView.getMeasuredWidth(), childView.getMeasuredHeight());
            }
            // 初始化左右边界值
            leftBorder = getChildAt(0).getLeft();
            rightBorder = getChildAt(getChildCount() - 1).getRight();
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mXDown = ev.getRawX();
                mXLastMove = mXDown;
                break;
            case MotionEvent.ACTION_MOVE:
                mXMove = ev.getRawX();
                float diff = Math.abs(mXMove - mXDown);
                mXLastMove = mXMove;
                // 当手指拖动值大于TouchSlop值时，认为应该进行滚动，拦截子控件的事件
                if (diff > mTouchSlop) {
                    return true;
                }
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                mXMove = event.getRawX();
                int scrolledX = (int) (mXLastMove - mXMove);
                if (getScrollX() + scrolledX < leftBorder) {
                    scrollTo(leftBorder, 0);
                    return true;
                } else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
                    scrollTo(rightBorder - getWidth(), 0);
                    return true;
                }
                scrollBy(scrolledX, 0);
                mXLastMove = mXMove;
                break;
            case MotionEvent.ACTION_UP:
                // 当手指抬起时，根据当前的滚动值来判定应该滚动到哪个子控件的界面
                int targetIndex = (getScrollX() + getWidth() / 2) / getWidth();
                int dx = targetIndex * getWidth() - getScrollX();
                // 第二步，调用startScroll()方法来初始化滚动数据并刷新界面
                mScroller.startScroll(getScrollX(), 0, dx, 0);
                invalidate();
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {
        // 第三步，重写computeScroll()方法，并在其内部完成平滑滚动的逻辑
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }
}

首先在ScrollerLayout的构造函数里面我们进行了上述步骤中的第一步操作，即创建Scroller的实例，由于Scroller的实例只需创建一次，因此我们把它放到构造函数里面执行。另外在构建函数中我们还初始化的TouchSlop的值，这个值在后面将用于判断当前用户的操作是否是拖动。 
接着重写onMeasure()方法和onLayout()方法，在onMeasure()方法中测量ScrollerLayout里的每一个子控件的大小，在onLayout()方法中为ScrollerLayout里的每一个子控件在水平方向上进行布局。
接着重写onInterceptTouchEvent()方法， 在这个方法中我们记录了用户手指按下时的X坐标位置，以及用户手指在屏幕上拖动时的X坐标位置，当两者之间的距离大于TouchSlop值时，就认为用户正在拖动布局，然后我们就将事件在这里拦截掉，阻止事件传递到子控件当中。 
那么当我们把事件拦截掉之后，就会将事件交给ScrollerLayout的onTouchEvent()方法来处理。如果当前事件是ACTION_MOVE，说明用户正在拖动布局，那么我们就应该对布局内容进行滚动从而影响拖动事件，实现的方式就是使用我们刚刚所学的scrollBy()方法，用户拖动了多少这里就scrollBy多少。另外为了防止用户拖出边界这里还专门做了边界保护，当拖出边界时就调用scrollTo()方法来回到边界位置。 
如果当前事件是ACTION_UP时，说明用户手指抬起来了，但是目前很有可能用户只是将布局拖动到了中间，我们不可能让布局就这么停留在中间的位置，因此接下来就需要借助Scroller来完成后续的滚动操作。首先这里我们先根据当前的滚动位置来计算布局应该继续滚动到哪一个子控件的页面，然后计算出距离该页面还需滚动多少距离。接下来我们就该进行上述步骤中的第二步操作，调用startScroll()方法来初始化滚动数据并刷新界面。startScroll()方法接收四个参数，第一个参数是滚动开始时X的坐标，第二个参数是滚动开始时Y的坐标，第三个参数是横向滚动的距离，正值表示向左滚动，第四个参数是纵向滚动的距离，正值表示向上滚动。紧接着调用invalidate()方法来刷新界面。 
现在前两步都已经完成了，最后我们还需要进行第三步操作，即重写computeScroll()方法，并在其内部完成平滑滚动的逻辑 。在整个后续的平滑滚动过程中，computeScroll()方法是会一直被调用的，因此我们需要不断调用Scroller的computeScrollOffset()方法来进行判断滚动操作是否已经完成了，如果还没完成的话，那就继续调用scrollTo()方法，并把Scroller的curX和curY坐标传入，然后刷新界面从而完成平滑滚动的操作。 
现在ScrollerLayout已经准备好了，接下来我们修改activity_main.xml布局中的内容，如下所示：

可以看到，这里我们在ScrollerLayout中放置了三个按钮用来进行测试，其实这里不仅可以放置按钮，放置任何控件都是没问题的。 

最后MainActivity当中删除掉之前测试的代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

好的，所有代码都在这里了，现在我们可以运行一下程序来看一看效果了，如下图所示： 

========================================================================

 Scroller和OverScroller，这两个是AndroidUI框架下实现滚动效果的最关键的类，ScrollView内部的实现也是使用的OverScroller，所以熟练的使用这两个类的相关API，可以让我们满足大部分的开发需求。

    在View类里面，有两个和滚动相关的类，scrollTo()和scrollBy。这两个方法可以实现View内容的移动，注意，是内容，不是位置！是移动，不是滚动！什么叫做内容呢？比如说一个TextView，如果使用scrollTo()，那么移动的是里面的文字，而不是位置，scrollBy()也是一样的。那么为什么是移动，不是滚动呢？这是因为这两个方法完成的都是瞬间完成，即瞬移，而不是带有滚动过程的滚动，所以说，如果要实现效果比较好的滚动，光靠View自带的方法还是不行滴，还是要Scrollers出马~

    但是！Scrollers并不是控制View进行滚动，包括内容或者是位置，实际上，Scrollers只是一个控件移动轨迹的辅助计算类，如果你想滚，他能帮你计算什么时间应该滚到什么位置，但是滚不滚，全靠你自觉~所以说，滚动位置由Scrollers计算出来了，我们在什么时候滚呢？滚多少呢？这时候，就要View的一个回调函数computeScroll()出马了。

    我们看看View里面的computeScroll()做了些什么

 /**
      * Called by a parent to request that a child update its values for mScrollX
      * and mScrollY if necessary. This will typically be done if the child is
      * animating a scroll using a {@link android.widget.Scroller Scroller}
      * object.
      */
     public void computeScroll() {
     }

     duang！空的！不过没事，看看注释，就是说，如果我们用Scroller实现一个滚动动画的时候，这个方法就会被调用，被谁调用呢？parent，谁改变呢？child。所以一般来说，这个方法可以用来更新mScrollX和mScrollY，但是其实不光可以改变这些，我们还能做其他事情。

    如果我们调用Scroller.startScroll(int startX, int startY, int dx, int dy)，那么我们就可以在computeScroll()里面执行实际的操作了，就像下面这样

 @Override
     public void computeScroll() {

         // 先判断mScroller滚动是否完成
         if (mScroller.computeScrollOffset()) {
             // 这里调用View的scrollTo()完成实际的滚动
             scrollTo( mScroller.getCurrX(), mScroller .getCurrY());
             // 必须调用该方法，否则不一定能看到滚动效果
             invalidate();
         }
         super.computeScroll();
     }

     Scroller.computeScrollOffset方法是来判断滚动过程是否完成的,如果没有完成，就需要不停的scrollTo下去，所以在最后需要加一个invalidate(),这样可以再次触发computScroll,直到滚动已经结束。

    其实说到这里，有的同学可能比较迷惑，OverScroller和Scroller有什么区别呢？事实上，这两个类都属于Scrollers，Scroller出现的比较早，在API1就有了，OverScroller是在API9才添加上的，出现的比较晚，所以功能比较完善，Over的意思就是超出，即OverScroller提供了对超出滑动边界的情况的处理，这两个类80%的API是一致的，OverScroller比Scroller添加了一下几个方法

    ☞ isOverScrolled()
    ☞ springBack(int startX, int startY, int minX, int maxX, int minY, int maxY) 
    ☞ fling(int startX, int startY, int velocityX, int velocityY, int minX, int maxX, int minY, int maxY, int overX, int overY)
    ☞ notifyHorizontalEdgeReached(int startX, int finalX, int overX)
    ☞ notifyVerticalEdgeReached(int startY, int finalY, int overY)

    从名字也能看出来，都是对Over功能的支持，其他的API都一样，所以介绍通用API的时候，并不区分OverScroller和Scroller。

    下面简单介绍一下常用的API。

    ☞ computeScrollOffset() 这个就是来判断当前的滑动动作是否完成的，用法很单一，就是在computeScroll()里面来做判断滚动是否完成

    ☞ getCurrX() 这个就是获取当前滑动的坐标值，因为Scrollers只是一个辅助计算类，所以如果我们想获取滑动时的时时坐标，就可以通过这个方法获得，然后在computeScroll()里面调用

    ☞ getFinalX() 这个是用来获取最终滑动停止时的坐标

    ☞ isFinished() 用来判断当前滚动是否结束

    ☞ startScroll(int startX, int startY, int dx, int dy) 用来开始滚动，这个是很重要的一个触发computeScroll()的方法，调用这个方法之后，我们就可以在computeScroll里面获取滚动的信息，然后完成我们的需要。这个还有一个带有滚动持续时间的重载函数，可以根据需求自由使用。特别要注意这四个参数，startX和startY是开始的坐标位置，正数左上，负数右下，dx、dy同理，当在computeScroll()获取getCurrX()的时候，变化范围就与这里地设置有关。

 /**
     * Start scrolling by providing a starting point and the distance to travel.
     * The scroll will use the default value of 250 milliseconds for the
     * duration.
     *
     * @param startX Starting horizontal scroll offset in pixels. Positive
     *        numbers will scroll the content to the left.
     * @param startY Starting vertical scroll offset in pixels. Positive numbers
     *        will scroll the content up.
     * @param dx Horizontal distance to travel. Positive numbers will scroll the
     *        content to the left.
     * @param dy Vertical distance to travel. Positive numbers will scroll the
     *        content up.
     */
    public void startScroll(int startX, int startY, int dx, int dy) {
        startScroll(startX, startY, dx, dy, DEFAULT_DURATION);
    }

    ☞ fling(int startX, int startY, int velocityX, int velocityY, int minX, int maxX, int minY, int maxY) 这个方法也很重要，如果你想实现滑动之后，布局能够根据移动速度，慢慢减速的话，就需要用这个来实现，这里需要加速度的参数，我们可以通过VelocityTracker这个类来获取，然后使用，具体参数函数，在下面的实例中进行说明。

    说了这么多东西，都是最基础的，也是最没意思的，下面通过几个小例子，我们来简单地使用以下这些API，加深理解。

    顺便贴一下代码，在后面对代码进行解读。

 public void click(View view) {

         switch (view.getId()) {
             case R.id.btn_scroll_to:
                 textView.scrollTo(distance, 0);
                 distance += 10;
                 break;
             case R.id.btn_scroll_by:
                 textView.scrollBy(30, 0);
                 break;
             case R.id.btn_sping_back:
                 //不知道为什么第一次调用会贴墙，即到达x=0的位置
                 textView.spingBack();
                 break;
         }

     }

     首先点击了scrollBy()三次，这个函数是相对坐标移动，与当前坐标无关，而scrollTo()则是绝对坐标移动，如果distance相同的话，第二次就不会移动了，其实scrollBy()在源码上也是scrollTo()

 /**
  * Move the scrolled position of your view. This will cause a call to
  * {@link #onScrollChanged(int, int, int, int)} and the view will be
  * invalidated.
  * @param x the amount of pixels to scroll by horizontally
  * @param y the amount of pixels to scroll by vertically
  */
 public void scrollBy(int x, int y) {
     scrollTo(mScrollX + x, mScrollY + y);
 }

     这样就明白为什么3次scrollBy()之后，调用scrollTo()之后，内容会移动回来了，以为前面的移动是30*3=90，而scrollTo()第一次调用distance是30，所以坐标就回来了，视觉上就是后退回来。

    第三个拖拽回弹效果用的是一个自定义控件，下面我们会详细的分析实现。

    第四个效果是spingBack()，即OverScroller的回弹效果，我们顺便也介绍了。

    OK，咱们开始介绍这个可以回弹的自定义TextView是如何实现这种效果的。

    下面是实现的代码

 /**
  * Created by zhaokaiqiang on 15/2/28.
  */
 public class JellyTextView extends TextView {

     private OverScroller mScroller;

     private float lastX;
     private float lastY;

     private float startX;
     private float startY;

     public JellyTextView(Context context, AttributeSet attrs) {
         super(context, attrs);
         mScroller = new OverScroller(context, new BounceInterpolator());
     }


     @Override
     public boolean onTouchEvent(MotionEvent event) {

         switch (event.getAction()) {
             case MotionEvent.ACTION_DOWN:
                 lastX = event.getRawX();
                 lastY = event.getRawY();
                 break;
             case MotionEvent.ACTION_MOVE:
                 float disX = event.getRawX() - lastX;
                 float disY = event.getRawY() - lastY;

                 offsetLeftAndRight((int) disX);
                 offsetTopAndBottom((int) disY);
                 lastX = event.getRawX();
                 lastY = event.getRawY();
                 break;
             case MotionEvent.ACTION_UP:
                 mScroller.startScroll((int) getX(), (int) getY(), -(int) (getX() - startX),
                         -(int) (getY() - startY));
                 invalidate();
                 break;
         }

         return super.onTouchEvent(event);
     }


     @Override
     public void computeScroll() {

         if (mScroller.computeScrollOffset()) {
             setX(mScroller.getCurrX());
             setY(mScroller.getCurrY());
             invalidate();
         }

     }

     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
         startX = getX();
         startY = getY();
     }

     public void spingBack() {

         if (mScroller.springBack((int) getX(), (int) getY(), 0, (int) getX(), 0,
                 (int) getY() - 100)) {
             Log.d("TAG", "getX()=" + getX() + "__getY()=" + getY());
             invalidate();
         }

     }


 }

     代码不到一百行，是不是很简单呀，实现的效果是类似果冻的颤动效果，来来来，凯子哥带你分析下代码实现。

    首先我们用的是OverScroller，因为和Scroller非常类似，而且增加了回弹支持，所以大部分情况下我们都可以使用OverScroller。我们在构造函数完成初始化，然后因为我们需要记录最开始的位置，在回弹的时候需要用，所以在onSizeChange()完成了起始坐标的初始化。为了完成拖拽功能，我们需要重写onTouch，然后在MOVE事件中，完成控件的位置移动，用offsetLeftAndRight和offsetTopAndBottom即可，参数是一个相对位移的距离，所以很简单就完成了控件跟随手指移动的效果。

    最后的效果当然是控件回弹，但是这里的回弹并不是用spingBack()完成，而是通过startScroll()完成，只要设置好当前的位置和我们需要位移的距离，然后记住invalidate一下，我们就可以去computeScroll()里面实际的改变控件的位置了，通过getCurrX()就可以获取到如果当前滚动应该的位置，所以setX()就OK啦，很简单是不是？不过要记住invalidate()，这样才能继续往下触发未完成的滚动操作。

    另外发现没，这个控件叫JellyTextView，就是果冻TextView，因为实现的是有来回颤动的效果，这个怎么实现呢？也很简单，设置一个BounceInterpolation就可以了，so easy~

    OK，其实现在大部分的Scroller的用法我们都用过了，还剩下一个OverScroll特有的spingBack()和fling()，我们先介绍一个spingBack的用法。

    springBack(int startX, int startY, int minX, int maxX, int minY, int maxY) 

    看上面的参数，前两个是开始位置，是绝对坐标，minX和maxX是用来设定滚动范围的，也是绝对坐标范围，如果startX不在这个范围里面，比如大于maxX，就会触发computeScroll()，我们可以移动距离，最终回弹到maxX所在的位置，并返回true，从而完成后续的滚动效果，比minX小的话，就会回弹到minX，一样的道理。所以我们可以像上面代码里面一样，判断是否在范围内，在的话，就invalidate()一下，触发滚动动画，所以名字叫spingBack()，即回弹，在上面的视频里有演示效果。参照效果和代码，你应该能看明白用法。