Android Scroll详解(二)：OverScroller实战

时间 2019-12-05

标签 android scroll 详解 overscroller 实战栏目 Android 繁體版

原文原文链接

做者：ztelur
联系方式：segmentfault，csdn，github
本文仅供我的学习，不用于任何形式商业目的，转载请注明原做者、文章来源，连接，版权归原文做者全部。html

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

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

为了节约你的时间，我特意将文章大体内容总结以下：spring

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

详细代码请查看个人github。函数

Drag

Drag是最为基本的手势：用户可使用手指在屏幕上滑动，以拖动屏幕相应内容移动。实现Drag手势其实很简单，步骤以下：

在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 maxOverScrollX,int maxOverScrollY: 标示能够滚动的最大的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的机制，但愿你们多多关注。

Android Scroll详解(二)：OverScroller实战

Drag

多触点Drag

Fling

OverScroll

后记

参考文章