Android Scroll具体解释(二)：OverScroller实战

作者： ztelur

联系方式：segmentfault，csdn。github

本文仅供个人学习，不用于不论什么形式商业目的，转载请注明原作者、文章来源。链接，版权归原文作者全部。

本文是android滚动相关的系列文章的第二篇，主要总结一下使用手势相关的代码逻辑。主要是单点拖动，多点拖动，fling和OveScroll的实现。每一个手势都会有代码片段。

对android滚动相关的知识还不太了解的同学能够先阅读一下文章：

为了节约你的时间，我特地将文章大致内容总结例如以下：

手势Drag的实现和原理
手势Fling的实现和原理
OverScroll效果和EdgeEffect效果的实现和原理。

具体代码请查看我的github

Drag

Drag是最为主要的手势：用户能够使用手指在屏幕上滑动，以拖动屏幕对应内容移动。实现Drag手势事实上非常easy。过程例如以下：

在ACTION_DOWN事件发生时。调用getX和getY函数获得事件发生的x,y坐标值，并记录在mLastX和mLastY变量中。
在ACTION_MOVE事件发生时。调用getX和getY函数获得事件发生的x,y坐标值,将其与mLastX和mLastY比較。假设二者差值大于一定限制（ScaledTouchSlop）,就运行scrollBy函数，进行滚动,最后更新mLastX和mLastY的值。
在ACTION_UP和ACTION_CANCEL事件发生时，清空mLastX。mLastY。

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        int actionId = MotionEventCompat.getActionMasked(event);

        switch (actionId) {

            case MotionEvent.ACTION_DOWN:

                mLastX = event.getX();

                mLastY = event.getY();

                mIsBeingDragged = true;

                if (getParent() != null) {

                    getParent().requestDisallowInterceptTouchEvent(true);

                }

                break;

            case MotionEvent.ACTION_MOVE:

                float curX = event.getX();

                float curY = event.getY();

                int deltaX = (int) (mLastX - curX);

                int deltaY = (int) (mLastY - curY);

                if (!mIsBeingDragged && (Math.abs(deltaX)> mTouchSlop ||

                                                        Math.abs(deltaY)> mTouchSlop)) {

                    mIsBeingDragged = true;

                    // 让第一次滑动的距离和之后的距离不至于差距太大

                    // 由于第一次必须>TouchSlop,之后则是直接滑动

                    if (deltaX > 0) {

                        deltaX -= mTouchSlop;

                    } else {

                        deltaX += mTouchSlop;

                    }

                    if (deltaY > 0) {

                        deltaY -= mTouchSlop;

                    } else {

                        deltaY += mTouchSlop;

                    }

                }

                // 当mIsBeingDragged为true时，就不用推断> touchSlopg啦，不然会导致滚动是一段一段的

                // 不是非常连续

                if (mIsBeingDragged) {

                        scrollBy(deltaX, deltaY);

                        mLastX = curX;

                        mLastY = curY;

                }

                break;

            case MotionEvent.ACTION_CANCEL:

            case MotionEvent.ACTION_UP:

                mIsBeingDragged = false;

                mLastY = 0;

                mLastX = 0;

                break;

            default:

        }

        return mIsBeingDragged;

    }

多触点Drag

上边的代码仅仅适用于单点触控的手势。假设你是两个手指触摸屏幕。那么它仅仅会依据你第一个手指滑动的情况来进行屏幕滚动。更为致命的是。当你先松开第一个手指时，由于我们少监听了ACTION_POINTER_UP事件，将会导致屏幕突然滚动一大段距离，由于第二个手指移动事件的x,y值会和第一个手指移动时留下的mLastX和mLastY比較，导致屏幕滚动。

假设我们要监听并处理多触点的事件，我们还须要对ACTION_POINTER_DOWN和ACTION_POINTER_UP事件进行监听，而且在ACTION_MOVE事件时，要记录全部触摸点事件发生的x,y值。

当ACTION_POINTER_DOWN事件发生时，我们要记录第二触摸点事件发生的x,y值为mSecondaryLastX和mSecondaryLastY，和第二触摸点pointer的id为mSecondaryPointerId
当ACTION_MOVE事件发生时，我们除了依据第一触摸点pointer的x，y值进行滚动外，也要更新mSecondayLastX和mSecondaryLastY
当ACTION_POINTER_UP事件发生时。我们要先推断是哪个触摸点手指被抬起来啦。假设是第一触摸点，那么我们就将坐标值和pointer的id都更换为第二触摸点的数据；假设是第二触摸点，就仅仅要重置一下数据就可以。

        switch (actionId) {

            .....

            case MotionEvent.ACTION_POINTER_DOWN:

                activePointerIndex = MotionEventCompat.getActionIndex(event);

                mSecondaryPointerId = MotionEventCompat.findPointerIndex(event,activePointerIndex);

                mSecondaryLastX = MotionEventCompat.getX(event,activePointerIndex);

                mSecondaryLastY = MotionEventCompat.getY(event,mActivePointerId);

                break;

            case MotionEvent.ACTION_MOVE:

                ......

                // handle secondary pointer move

                if (mSecondaryPointerId != INVALID_ID) {

                    int mSecondaryPointerIndex = MotionEventCompat.findPointerIndex(event, mSecondaryPointerId);

                    mSecondaryLastX = MotionEventCompat.getX(event, mSecondaryPointerIndex);

                    mSecondaryLastY = MotionEventCompat.getY(event, mSecondaryPointerIndex);

                }

                break;

            case MotionEvent.ACTION_POINTER_UP:

                //推断是否是activePointer up了

                activePointerIndex = MotionEventCompat.getActionIndex(event);

                int curPointerId  = MotionEventCompat.getPointerId(event,activePointerIndex);

                Log.e(TAG, "onTouchEvent: "+activePointerIndex +" "+curPointerId +" activeId"+mActivePointerId+

                                        "secondaryId"+mSecondaryPointerId);

                if (curPointerId == mActivePointerId) { // active pointer up

                    mActivePointerId = mSecondaryPointerId;

                    mLastX = mSecondaryLastX;

                    mLastY = mSecondaryLastY;

                    mSecondaryPointerId = INVALID_ID;

                    mSecondaryLastY = 0;

                    mSecondaryLastX = 0;

                    //反复代码。为了让逻辑看起来更加清晰

                } else{ //假设是secondary pointer up

                    mSecondaryPointerId = INVALID_ID;

                    mSecondaryLastY = 0;

                    mSecondaryLastX = 0;

                }

                break;

            case MotionEvent.ACTION_CANCEL:

            case MotionEvent.ACTION_UP:

                mIsBeingDragged = false;

                mActivePointerId = INVALID_ID;

                mLastY = 0;

                mLastX = 0;

                break;

            default:

        }

Fling

当用户手指高速划过屏幕，然后高速立马屏幕时，系统会判定用户运行了一个Fling手势。视图会高速滚动，而且在手指立马屏幕之后也会滚动一段时间。Drag表示手指滑动多少距离，界面跟着显示多少距离，而fling是依据你的滑动方向与轻重，还会自己主动滑动一段距离。Filing手势在android交互设计中应用非常广泛：电子书的滑动翻页、ListView滑动删除item、滑动解锁等。所以怎样检測用户的fling手势是非常重要的。

在检測Fling时，你须要检測手指在屏幕上滑动的速度。这是你就须要VelocityTracker和Scroller这两个类啦。

我们首先使用VelocityTracker.obtain()这种方法获得事实上例
然后每次处理触摸时间时，我们将触摸事件通过addMovement方法传递给它
最后在处理ACTION_UP事件时。我们通过computeCurrentVelocity方法获得滑动速度;
我们推断滑动速度是否大于一定数值(MinFlingSpeed),假设大于，那么我们调用Scroller的fling方法。

然后调用invalidate()函数。
我们须要重载computeScroll方法，在这种方法内。我们调用Scroller的computeScrollOffset()方法啦计算当前的偏移量。然后获得偏移量，并调用scrollTo函数,最后调用postInvalidate()函数。
除了上述的操作外。我们须要在处理ACTION_DOWN事件时，对屏幕当前状态进行推断，假设屏幕如今正在滚动(用户刚进行了Fling手势)。我们须要停止屏幕滚动。

具体这一套流程是怎样运转的。我会在下一篇文章中具体解释，大家也能够自己查阅代码或者google来搞懂当中的原理。

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        .....

        if (mVelocityTracker == null) {

            //检查速度測量器，假设为null。获得一个

            mVelocityTracker = VelocityTracker.obtain();

        }

        int action = MotionEventCompat.getActionMasked(event);

        int index = -1;

        switch (action) {

            case MotionEvent.ACTION_DOWN:

                ......

                                if (!mScroller.isFinished()) { //fling

                    mScroller.abortAnimation();

                }

                .....

                break;

            case MotionEvent.ACTION_MOVE:

                ......

                break;

            case MotionEvent.ACTION_CANCEL:

                endDrag();

                break;

            case MotionEvent.ACTION_UP:

                if (mIsBeingDragged) {

                //当手指立马屏幕时，获得速度。作为fling的初始速度     mVelocityTracker.computeCurrentVelocity(1000,mMaxFlingSpeed);

                    int initialVelocity = (int)mVelocityTracker.getYVelocity(mActivePointerId);

                    if (Math.abs(initialVelocity) > mMinFlingSpeed) {

                        // 由于坐标轴正方向问题，要加负号。

                        doFling(-initialVelocity);

                    }

                    endDrag();

                }

                break;

            default:

        }

        //每次onTouchEvent处理Event时，都将event交给时间

        //測量器

        if (mVelocityTracker != null) {

            mVelocityTracker.addMovement(event);

        }

        return true;

    }

    private void doFling(int speed) {

        if (mScroller == null) {

            return;

        }

        mScroller.fling(0,getScrollY(),0,speed,0,0,-500,10000);

        invalidate();

    }

    @Override

    public void computeScroll() {

        if (mScroller.computeScrollOffset()) {

            scrollTo(mScroller.getCurrX(),mScroller.getCurrY());

            postInvalidate();

        }

    }

OverScroll

在Android手机上，当我们滚动屏幕内容到达内容边界时，假设再滚动就会有一个发光效果。而且界面会进行滚动一小段距离之后再回复原位，这些效果是怎样实现的呢？我们须要使用Scroller和scrollTo的升级版OverScroller和overScrollBy了，还有发光的EdgeEffect类。

我们先来了解一下相关的API，理解了这些接口參数的含义，你就能够轻松使用这些接口来实现上述的效果啦。

protected boolean overScrollBy(int deltaX, int deltaY,

            int scrollX, int scrollY,

            int scrollRangeX, int scrollRangeY,

            int maxOverScrollX, int maxOverScrollY,

            boolean isTouchEvent)

int deltaX,int deltaY : 偏移量，也就是当前要滚动的x，y值。
int scrollX,int scrollY : 当前的mScrollX和mScrollY的值。
int scrollRangeX,int scrollRangeY: 标示能够滚动的最大的x,y值，也就是你视图真实的长和宽。也就是说。你的视图可视大小可能是100,100,可是视图中的内容的大小为200,200,所以。上述两个值就为200,200
int maxOverScrollX,int maxOverScrollY：同意超过滚动范围的最大值。x方向的滚动范围就是0~maxOverScrollX,y方向的滚动范围就是0~maxOverScrollY。
boolean isTouchEvent:是否在onTouchEvent中调用的这个函数。所以。当你在computeScroll中调用这个函数时。就能够传入false。

protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY)

int scrollX,int scrollY:就是x。y方向的滚动距离。就相当于mScrollX和mScrollY。

你既能够直接把二者赋值给对应的成员变量。也能够使用scrollTo函数。
boolean clampedX,boolean clampY:表示是否到达超出滚动范围的最大值。

假设为true。就须要调用OverScroll的springBack函数来让视图回复原来位置。

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

int startX,int startY:标示当前的滚动值，也就是mScrollX和mScrollY的值。
int minX,int maxX:标示x方向的合理滚动值
int minY,int maxY:标示y方向的合理滚动值。

相信看完上述的API之后，大家会有非常多的疑惑，所以这里我来举个样例。

假设视图大小为100*100。当你一直下拉到视图上边缘。然后在下拉，这时，mScrollY已经达到或者超过正常的滚动范围的最小值了，也就是0，可是你的maxOverScrollY传入的是10,所以。mScrollY最小能够到达-10,最大能够为110。所以，你能够继续下拉。等到mScrollY到达或者超过-10时。clampedY就为true。标示视图已经达到能够OverScroll的边界，须要回滚到正常滚动范围，所以你调用springBack(0,0,0,100)。

然后我们再来看一下发光效果是怎样实现的。

使用EdgeEffect类。

一般来说，当你仅仅上下滚动时，你仅仅须要两个EdgeEffect实例，分别代表上边界和下边界的发光效果。你须要在以下两个情景下改变EdgeEffect的状态。然后在draw()方法中绘制EdgeEffect

处理ACTION_MOVE时，假设发现y方向的滚动值超过了正常范围的最小值时。你须要调用上边界实例的onPull方法。假设是超过最大值。那么就是调用下边界的onPull方法。
在computeScroll函数中。也就是说Fling手势运行过程中，假设发现y方向的滚动值超过正常范围时的最小值时，调用onAbsorb函数。

然后就是重载draw方法。让EdgeEffect实例在画布上绘制自己。

你会发现，你必须对画布进行移动或者旋转来让EdgeEffect绘制出上边界或者下边界的发光的效果，由于EdgeEffect对象自己是没有上下左右的概念的。

    @Override

    public void draw(Canvas canvas) {

        super.draw(canvas);

        if (mEdgeEffectTop != null) {

            final int scrollY = getScrollY();

            if (!mEdgeEffectTop.isFinished()) {

                final int count = canvas.save();

                final int width = getWidth() - getPaddingLeft() - getPaddingRight();

                canvas.translate(getPaddingLeft(),Math.min(0,scrollY));

                mEdgeEffectTop.setSize(width,getHeight());

                if (mEdgeEffectTop.draw(canvas)) {

                    postInvalidate();

                }

                canvas.restoreToCount(count);

            }

        }

        if (mEdgeEffectBottom != null) {

            final int scrollY = getScrollY();

            if (!mEdgeEffectBottom.isFinished()) {

                final int count = canvas.save();

                final int width = getWidth() - getPaddingLeft() - getPaddingRight();

                canvas.translate(-width+getPaddingLeft(),Math.max(getScrollRange(),scrollY)+getHeight());

                canvas.rotate(180,width,0);

                mEdgeEffectBottom.setSize(width,getHeight());

                if (mEdgeEffectBottom.draw(canvas)) {

                    postInvalidate();

                }

                canvas.restoreToCount(count);

            }

        }

    }

 @Override

    public boolean onTouchEvent(MotionEvent event) {

            ......

            case MotionEvent.ACTION_MOVE:

                .....

                if (mIsBeingDragged) {

                    overScrollBy(0,(int)deltaY,0,getScrollY(),0,getScrollRange(),0,mOverScrollDistance,true);

                    final int pulledToY = (int)(getScrollY()+deltaY);

                    mLastY = y;

                    if (pulledToY<0) {

                        mEdgeEffectTop.onPull(deltaY/getHeight(),event.getX(mActivePointerId)/getWidth());

                        if (!mEdgeEffectBottom.isFinished()) {

                            mEdgeEffectBottom.onRelease();

                        }

                    } else if(pulledToY> getScrollRange()) {

                        mEdgeEffectBottom.onPull(deltaY/getHeight(),1.0f-event.getX(mActivePointerId)/getWidth());

                        if (!mEdgeEffectTop.isFinished()) {

                            mEdgeEffectTop.onRelease();

                        }

                    }

                    if (mEdgeEffectTop != null && mEdgeEffectBottom != null &&(!mEdgeEffectTop.isFinished()

                                        || !mEdgeEffectBottom.isFinished())) {

                        postInvalidate();

                    }

                }

                .....

        }

        ....

    }

    @Override

    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {

        if (!mScroller.isFinished()) {

            int oldX = getScrollX();

            int oldY = getScrollY();

            scrollTo(scrollX,scrollY);

            onScrollChanged(scrollX,scrollY,oldX,oldY);

            if (clampedY) {

                Log.e("TEST1","springBack");

                mScroller.springBack(getScrollX(),getScrollY(),0,0,0,getScrollRange());

            }

        } else {

            // TouchEvent中的overScroll调用

            super.scrollTo(scrollX,scrollY);

        }

    }

    @Override

    public void computeScroll() {

        if (mScroller.computeScrollOffset()) {

            int oldX = getScrollX();

            int oldY = getScrollY();

            int x = mScroller.getCurrX();

            int y = mScroller.getCurrY();

            int range = getScrollRange();

            if (oldX != x || oldY != y) {

                overScrollBy(x-oldX,y-oldY,oldX,oldY,0,range,0,mOverFlingDistance,false);

            }

            final int overScrollMode = getOverScrollMode();

            final boolean canOverScroll = overScrollMode == OVER_SCROLL_ALWAYS ||

                    (overScrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);

            if (canOverScroll) {

                if (y<0 && oldY >= 0) {

                    mEdgeEffectTop.onAbsorb((int)mScroller.getCurrVelocity());

                } else if (y> range && oldY < range) {

                    mEdgeEffectBottom.onAbsorb((int)mScroller.getCurrVelocity());

                }

            }

        }

    }

后记

本篇文章是系列文章的第二篇，大家可能已经知道怎样实现各类手势。可是对当中的机制和原理还不是非常了解，之后的第三篇会解说从本篇代码的视角解说一下android视图绘制的原理和Scroller的机制，希望大家多多关注。

參考文章

http://stackoverflow.com/questions/22843671/android-swipe-vs-fling

https://www.google.com/design/spec/patterns/gestures.html#gestures-drag-swipe-or-fling-details

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1212/2145.html