Scroll效果研究 系统ScrollView源码分析

Posted by boredream on November 13, 2014

内容包括

  1. 最基本的随着touch滚动的效果
  2. fling效果,即滑动后抬起手后继续关心滚动的效果
  3. over scroll效果,即拖动超出边界的处理

上述123系统都有提供相关实现方法,但是ScrollView默认只有1,2的实现效果, over scroll需要我们自行进行一定处理后才可以看到~ 下面就ScrollView的源码进行分析,且提供三个自定义ScrollView(难度依次递进)实现上面的三种效果,已打包成demo

下面源码分析时,系统是乱七八糟直接写一起时,分析的被比较细也比较乱, demo中三个自定义ScrollView相当于按照难度梯度抽取出来的, 即view2是在view1基础上修改添加功能的,view3是在view2基础上修改添加功能的 可以从demo下手帮助理解其中原理


scroll相当于一个拖动,我们可以用scrollTo/By控制其滚动到某个位置, 那一般ScrollView控件这种都是随着我们的手势生效的,内部原理是如何的呢~ 下面来研究下系统ScrollView控件源码里面的具体实现~ 系统考虑的东西比较多,研究起来较为复杂,所以先就核心部分拆开一点点研究~

手的拖动肯定是跟touch即触摸事件挂钩了~直接定位到ScrollView中的该方法 (onTouchEvent干什么用的就不扫盲了)

首先是ACTION_DOWN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
case MotionEvent.ACTION_DOWN: {
    mIsBeingDragged = getChildCount() != 0;
    if (!mIsBeingDragged) {
        return false;
    }

    /*
     * If being flinged and user touches, stop the fling. isFinished
     * will be false if being flinged.
     */
    if (!mScroller.isFinished()) {
        mScroller.abortAnimation();
        if (mFlingStrictSpan != null) {
            mFlingStrictSpan.finish();
            mFlingStrictSpan = null;
        }
    }

    // Remember where the motion event started
    mLastMotionY = ev.getY();
    mActivePointerId = ev.getPointerId(0);
    break;
}

有三段代码,第二三段带注释,下面是介绍:

  1. ScrollView没有child则不做处理,这个不解释,都没child滚个蛋啊 如果有child则设置标志位mIsBeingDragged即”开始拖动”(看英文就可以理解了)

  2. 看注释理解~如果还在滑动用户触碰了屏幕,则立刻停止滑动 mScroller是一个OverScroller对象,是处理滚动的, 类介绍里提到这个功能和Scroller类差不多,大部分情况下可以替代之, 区别可以简单的理解为OverScroller允许超出边界,后面会介绍Scroller类~ 至于mFlingStrictSpan无视之

  3. 看注释理解~记住点击的位置 scrollerView,处理垂直滚动,这里就只记录Y坐标了 mActivePointerId是用来处理多点触控时的稳定性的,这里先记住作用就行了

然后是ACTION_MOVE 这个是重点,随着move我们希望控件也能随着我们的手的拖动滚动到所需位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
case MotionEvent.ACTION_MOVE:
    if (mIsBeingDragged ) {
        // Scroll to follow the motion event
        final int activePointerIndex = ev.findPointerIndex(mActivePointerId);
        final float y = ev.getY(activePointerIndex);
        final int deltaY = ( int) ( mLastMotionY - y);
        mLastMotionY = y;

        final int oldX = mScrollX;
        final int oldY = mScrollY;
        final int range = getScrollRange();
        final int overscrollMode = getOverScrollMode();
        final boolean canOverscroll = overscrollMode == OVER_SCROLL_ALWAYS ||
                (overscrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);

        if (overScrollBy(0, deltaY, 0, mScrollY,
                0, range, 0, mOverscrollDistance, true)) {
            // Break our velocity if we hit a scroll barrier.
            mVelocityTracker.clear();
        }
        onScrollChanged( mScrollX, mScrollY , oldX, oldY);

        if (canOverscroll) {
            final int pulledToY = oldY + deltaY;
            if (pulledToY < 0) {
                mEdgeGlowTop.onPull((float) deltaY / getHeight());
                if (! mEdgeGlowBottom.isFinished()) {
                    mEdgeGlowBottom.onRelease();
                }
            } else if (pulledToY > range) {
                mEdgeGlowBottom.onPull((float) deltaY / getHeight());
                if (! mEdgeGlowTop.isFinished()) {
                    mEdgeGlowTop.onRelease();
                }
            }
            if ( mEdgeGlowTop != null
                    && (! mEdgeGlowTop.isFinished() || !mEdgeGlowBottom.isFinished())) {
                invalidate();
            }
        }
    }
    break;

系统注释还是很良心的,一般以功能点为单位注释,这里还是根据注释去看 分两段:随着触摸事件的滚动,还有顶部底部边缘阴影的处理 阴影处理的先忽视

这里的触摸点获取不是直接event.getY,而是通过下面两句代码获取的

1
2
final int activePointerIndex = ev.findPointerIndex( mActivePointerId);
final float y = ev.getY(activePointerIndex);

上面已经介绍过了mActivityPointerId的保证多点触碰稳定性的作用, 包括onTouchEvent里面的ACTION_POINTER_DOWN/UP也是为了处理多点情况的, 为了不发散太多就不细介绍了(其实我也不是研究太透彻) 知道这样处理能防止多点触控的干扰,可以稳定获取到我们需要的触摸的y坐标就行了

根据现在的触摸坐标y和上次位置的y坐标mLastMotionY算出差值,即这次移动的距离deltaY 最后以获取到的这些数据进行滚动操作~ ScrollView中在这里使用的是overScrollBy方法,该方法是其父类view的方法,定位过去看下 其实如果要简单处理的话直接掉scrollTo方法就可以了~参见demo中MyScrollView1

如果觉得ScrollView里逻辑无法理解,那就可以先把上面demo的view1研究懂以后再继续下文

注意,scroll由于是没有限制的,即可以滚动到任何位置,显然不符合我们的需要, 所以我们要限制滚动范围,只在有内容的绘制部分滚动

由于ScrollView只是纵向Y轴上滚动,所以只限定y上滚动范围即可, 如下图示,红框是scrollview,蓝框是child,滚动范围应该是箭头所示部分~ 即0 到 child.height-scrollview,height scroll1

而demo里view1中也添加了这么一段(demo是横向滚动)

1
2
3
4
5
6
7
8
9
// Clamp values if at the limits and record
final int left = 0;
final int right = getScrollRangeX();
// 防止滚动超出边界
if(scrollX > right) {
      scrollX = right;
} else if(scrollX < left) {
      scrollX = left;
}

因为scrollView考虑的比较多,所以处理麻烦点,按照源码追踪到view中的overScrollerBy方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
    /**
     * Scroll the view with standard behavior for scrolling beyond the normal
     * content boundaries. Views that call this method should override
     * {@link #onOverScrolled(int, int, boolean, boolean)} to respond to the
     * results of an over -scroll operation.
     *
     * Views can use this method to handle any touch or fling -based scrolling.
     *
     * @param deltaX Change in X in pixels
     * @param deltaY Change in Y in pixels
     * @param scrollX Current X scroll value in pixels before applying deltaX
     * @param scrollY Current Y scroll value in pixels before applying deltaY
     * @param scrollRangeX Maximum content scroll range along the X axis
     * @param scrollRangeY Maximum content scroll range along the Y axis
     * @param maxOverScrollX Number of pixels to overscroll by in either direction
     *          along the X axis.
     * @param maxOverScrollY Number of pixels to overscroll by in either direction
     *          along the Y axis.
     * @param isTouchEvent true if this scroll operation is the result of a touch event.
     * @return true if scrolling was clamped to an over -scroll boundary along either
     *          axis, false otherwise.
     */
    @SuppressWarnings({"UnusedParameters"})
    protected boolean overScrollBy( int deltaX, int deltaY,
            int scrollX, int scrollY,
            int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY,
            boolean isTouchEvent) {
        final int overScrollMode = mOverScrollMode;
        final boolean canScrollHorizontal =
                computeHorizontalScrollRange() > computeHorizontalScrollExtent();
        final boolean canScrollVertical =
                computeVerticalScrollRange() > computeVerticalScrollExtent();
        final boolean overScrollHorizontal = overScrollMode == OVER_SCROLL_ALWAYS ||
                (overScrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && canScrollHorizontal);
        final boolean overScrollVertical = overScrollMode == OVER_SCROLL_ALWAYS ||
                (overScrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && canScrollVertical);

        int newScrollX = scrollX + deltaX;
        if (!overScrollHorizontal) {
            maxOverScrollX = 0;
        }

        int newScrollY = scrollY + deltaY;
        if (!overScrollVertical) {
            maxOverScrollY = 0;
        }

        // Clamp values if at the limits and record
        final int left = -maxOverScrollX;
        final int right = maxOverScrollX + scrollRangeX;
        final int top = -maxOverScrollY;
        final int bottom = maxOverScrollY + scrollRangeY;

        boolean clampedX = false;
        if (newScrollX > right) {
            newScrollX = right;
            clampedX = true;
        } else if (newScrollX < left) {
            newScrollX = left;
            clampedX = true;
        }

        boolean clampedY = false;
        if (newScrollY > bottom) {
            newScrollY = bottom;
            clampedY = true;
        } else if (newScrollY < top) {
            newScrollY = top;
            clampedY = true;
        }

        onOverScrolled(newScrollX, newScrollY, clampedX, clampedY);

        return clampedX || clampedY;
    }

方法的作用: 总结起来就是计算over scroll时scrollX/Y的值~ 并将其记录在onOverScrolled方法里

参数意义: 前8个分两组,1357是针对x轴的,2468则是y轴的,这里scrollView只纵向滚动,所以只处理y轴 比较难理解的是后俩参数

  1. scrollRange 是某方向上滚动的范围,可以参考上面的图片,只不过要把padding部分考虑进去 下面是系统获取范围的方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
     private int getScrollRange () {
         int scrollRange = 0;
         if (getChildCount() > 0) {
             View child = getChildAt(0);
             scrollRange = Math. max(0,
                     child.getHeight() - (getHeight() - mPaddingBottom - mPaddingTop));
         }
         return scrollRange;
     }
    

    不难理解,最大距离的情况就是childview移动到了最顶部,然后滑动到最底部,上面这个方法算的就是这个最大距离

  2. maxOverScroll 为越界滚动最大距离,即在之前范围的基础上再加上这个越界最大距离~ ScrollView在这里设置的是系统默认值0

比如以前纵向的滚动范围是0~300,那如果这个值设为50,则最终over scroll的范围就是-50~350,方法内算法如下

1
2
3
4
5
        // Clamp values if at the limits and record
        final int left = -maxOverScrollX;
        final int right = maxOverScrollX + scrollRangeX;
        final int top = -maxOverScrollY;
        final int bottom = maxOverScrollY + scrollRangeY;

top=-maxOverScrollY ~ bottom=maxOverScrollY+scrollRangY 带入我们假设的值,那就是0~300, 注意,这个300是Y坐标300~

这里假设我们的maxOverScrollY不是系统默认的Y而是 50, 那虽然滚动范围不变还是500-200=300~ 但是实际上可以滚动的范围是大于300的~ 效果类似于ios那种,listview到达顶部以后继续拖还可以移动~ 也可以脑补下拉刷新listview的效果

在拖到顶部以后,还可以overScroll继续拖动, 而继续拖动的最大距离就是maxOverScrollY,如图左边小箭头的长度 底部同理

那整个边界范围就变了~ 从原来的y = 0 ~ 300 变成了 -maxOverScrollY ~ scrollRangeY + maxOverScrollY 看图很好理解,就变成了 y = -50 ~ 350

横向同理

下面代码就是判断了 如果现在滚动的新坐标超过了over的极限值,则将极限值赋值给新坐标~ 简单而言就是滑动到极限越界距离以后就卡住他,让他”划不动”, 这里英文clamp为”钳住”的意思,英语好的可以帮助快速理解~

x/y方向达到极限距离的同时会分别记录下一个标志符,最后|作为返回值, 即任何一个方向上有划不动的情况时则返回true,否则false

最后通过onOverScrolled暴露给子类,这里view里面的onOverScrolled方法是empty不做任何处理的~里面注释也是卖萌,”我是故意的~”

上面一大串overScrollBy方法源码分析这里总结一下 该方法就相当于在scrollTo/By的基础上添加了对overScroll情况的处理, 但父类view中只处理数据,没有实际的scroll操作,父类view处理完数据后将其记录在onOverScrolled方法中, 子类继承onOverScrolled方法再根据得到的数据scrollTo/By处理即可~

举个简单的例子帮助理解,比如这个view相当于一个大加工厂, 那overScrollBy方法相当于一个加工车间,比如是做串串的(竹签上有海带素鸡一类的那种)- - 把原材料加工好成串串后,直接就丢到一个储藏的仓库里~不做任何其他操作

而继承view的子类ScrollView就相当于来拿货的销售商,来了以后不管生产过程,直接去这个储藏的仓库里, 把货拿出来然后该卖的卖,该自己吃的自己吃,该二次加工的二次加工~进行具体的操作~ 这个仓库就可以理解为onOverScrolled方法~

可以理解为一个监听,比如scrollview提供一个onScroll监听,父类只用该方法记录数据, 而子类复写之就可以获取到所需数据,如当前滚动到位置,根据需要处理了

回到源码ScrollView的onOverScrolled方法 其实简单处理的话直接在onOverScrolled里面scrollTo就可以了,但是系统考虑到scrollbar,animating scroll等情况所以处理的比较复杂 如果下面这段代码无法理解,可以先跳过本段,直接到ACTION_UP部分, 可以在看完后面OverScroll实现(demo中view3)介绍,研究懂后再回头看这段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @Override
    protected void onOverScrolled( int scrollX, int scrollY,
            boolean clampedX, boolean clampedY) {
        // Treat animating scrolls differently; see #computeScroll() for why.
        if (!mScroller.isFinished()) {
            mScrollX = scrollX;
            mScrollY = scrollY;
            invalidateParentIfNeeded();
            if ( clampedY) {
                mScroller.springBack(mScrollX, mScrollY, 0, 0, 0, getScrollRange());
            }
        } else {
            super.scrollTo(scrollX, scrollY);
        }
        awakenScrollBars();
    }

这里是if分成两部分的,注释说明为,对于还在进行中的滚动要区别处理, 区分处理的原因可以参考computeScroll()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    @Override
    public void computeScroll () {
        if (mScroller.computeScrollOffset()) {
            // This is called at drawing time by ViewGroup.  We don't want to
            // re-show the scrollbars at this point, which scrollTo will do,
            // so we replicate most of scrollTo here.
            //
            //         It's a little odd to call onScrollChanged from inside the drawing.
            //
            //         It is, except when you remember that computeScroll() is used to
            //         animate scrolling. So unless we want to defer the onScrollChanged()
            //         until the end of the animated scrolling, we don't really have a
            //         choice here.
            //
            //         I agree.  The alternative, which I think would be worse, is to post
            //         something and tell the subclasses later.  This is bad because there
            //         will be a window where mScrollX/Y is different from what the app
            //         thinks it is.
            //
            int oldX = mScrollX;
            int oldY = mScrollY;
            int x = mScroller.getCurrX();
            int y = mScroller.getCurrY();

            if (oldX != x || oldY != y) {
                final int range = getScrollRange();
                final int overscrollMode = getOverScrollMode();
                final boolean canOverscroll = overscrollMode == OVER_SCROLL_ALWAYS ||
                        (overscrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);

                overScrollBy(x - oldX, y - oldY, oldX, oldY, 0, range,
                        0, mOverflingDistance, false);
                onScrollChanged(mScrollX, mScrollY, oldX, oldY);

                if (canOverscroll) {
                    if (y < 0 && oldY >= 0) {
                        mEdgeGlowTop.onAbsorb(( int) mScroller.getCurrVelocity());
                    } else if (y > range && oldY <= range) {
                        mEdgeGlowBottom.onAbsorb(( int) mScroller.getCurrVelocity());
                    }
                }
            }

            awakenScrollBars();

            // Keep on drawing until the animation has finished.
            postInvalidate();
        } else {
            if (mFlingStrictSpan != null) {
                mFlingStrictSpan.finish();
                mFlingStrictSpan = null;
            }
        }
    }

注释翻译下 这个方法会在viewgroup draw绘制的时候调用, 我们不想在这个时候再次显示scrollbar滚动条,这个scrollTo方法会处理, 所以我们在这里复制了scrollTo方法的大部分内容

下面代码和onTouch里的MOVE中代码一样(上文有引用过这部分代码) 回到onOverScrolled方法中,结合看意思就是 如果mScroller.isFinished滚动动画已经结束了,那正常scrollTo方法滚动 如果未结束,那调用一个不会显示scrollBar滚动条的scrollTo方法 (上面注释说过,处理原因就是为了方法滚动条再次显示, 且代码大部分复制scrollTo,即相当于一个不显示滚动条的scrollTo方法)

且如果未滚动完成,还要加个判断, 如果是滚动到不能再滚动了,即clampedY=true 则进行回弹操作mScroller.springBack

再次引用上面车间加工串串的例子加深理解 demo中自己处理就相当于,卖串串的自己加工串串(计算数据), 直接卖(scrollTo)~ 系统的ScrollView呢,就是把串串交给加工车间view精加工一下(overScrollBy), 最后从onOverScrolled仓库中取加工好的串串再去卖(scrollTo)


回到onTouch,之后是ACTION_UP操作

按照平常滚屏的习惯,UP抬起时,一般还会有一个惯性继续滚动一段距离~ (这里我们把滚动叫做scroll,这个有惯性的甩~抛~的动作叫做fling~) 首先用VelocityTracket获取y向的速度,根据速度去处理fling (按照通常思维,速度越快,甩的越远~)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
             case MotionEvent. ACTION_UP:
                if ( mIsBeingDragged) {
                    final VelocityTracker velocityTracker = mVelocityTracker;
                    velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
                    int initialVelocity = ( int) velocityTracker.getYVelocity(mActivePointerId );

                    if (getChildCount() > 0) {
                        if ((Math. abs(initialVelocity) > mMinimumVelocity)) {
                            fling(-initialVelocity);
                        } else {
                            if ( mScroller.springBack(mScrollX, mScrollY, 0, 0, 0,
                                    getScrollRange())) {
                                invalidate();
                            }
                        }
                    }

                    mActivePointerId = INVALID_POINTER;
                    endDrag();
                }
                break;

这里有判断,当速度超过一个最小阀值的时候,就视为一个fling~则调用fling()方法 否则视为普通的scroll,那判断这个时候是否需要回弹操作,有的话invalidate刷新页面

下面是核心方法~甩~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    /**
     * Fling the scroll view
     *
     * @param velocityY The initial velocity in the Y direction. Positive
     *                  numbers mean that the finger/cursor is moving down the screen,
     *                  which means we want to scroll towards the top.
     */
    public void fling(int velocityY) {
        if (getChildCount() > 0) {
            int height = getHeight() - mPaddingBottom - mPaddingTop;
            int bottom = getChildAt(0).getHeight();

            mScroller.fling(mScrollX, mScrollY, 0, velocityY, 0, 0, 0,
                    Math. max(0, bottom - height), 0, height/2);

            final boolean movingDown = velocityY > 0;

            if (mFlingStrictSpan == null) {
                mFlingStrictSpan = StrictMode.enterCriticalSpan("ScrollView-fling" );
            }

            invalidate();
        }
    }

诸如这类”高级”的滚动,都使用了Scroller类处理~详见 Scroller滚动类

fling里面实际上调用的是mScroller的fling方法,我们定位到OverScroller类该方法

内部原理太多,这里只解释方法的作用和参数的意义了 方法作用:根据一个fling手势开始fling行为~移动的距离取决于fling的初始速度~ 参数传进来的值为 mScrollX, mScrollY, 0, velocityY, 0, 0, 0, Math. max(0, bottom - height), 0, height/2 一共10个参数分两组,奇数为x轴处理,偶为y 2 4 6 8 10五个参数分别介绍(x向的同理)

  • startY 开始甩的y坐标 - 值为当前滚动位置mScrollY
  • velocityY y轴上的速度 - 值为velocityTracker计算出来的速度值
  • minY y轴上可以到的最小坐标 - 值为0
  • maxY y抽上可以到的最大坐标 - 值为child的高度减去viewgroup除padding以外的高度~ (这个值和之前计算的scrollRangeY一样,只不过那个是长度,这个是坐标~ 想理解可以参考之前的图片)
  • overY 越界滑动的范围 - 值为viewgroup除padding高度以外的一半

fling里面的具体速度距离的算法…略过~

插一句 如果是没有over的scroll或者fling,那直接用Scroller类就可以了,系统考虑的比较全, 所以ScrollView里面用的是OverScroller类~ 同样的fling方法Scroller就没有最后两个和over相关的参数

下面是一个不考虑over情况用Scroller实现fling效果的demo


回到over scroll的处理 上面提到,系统ScrollView源码中是有处理over scroll的,只不过ScrollView中的对应参数overDistance为0,造成了ScrollView没有over scroll的效果 这里我们可以自己尝试实现下~

其实非常简单,demo12中ouTouch的MOVE里面的scrollTo方法改成和ScrollView一样的, 即利用父类view的overScrollBy方法转一圈~ 只不过调用overScrollBy方法时,记得传入的maxOverScrollX/Y不能是0,不然就没意义了

这样拖动的时候就可以over scroll了~

既然有over scroll那我们肯定需要回弹效果,即松手后自动滚动回来~ 前面说过这种高级的要用Scroller类,而牵涉到over的,自然就用到OverScroller类了~ fling方法和Scroller一样,多一个overX方法,即fling时over scroll的最大距离, demo里我设定成了maxOverScrollX的一半,可以自行调整 fling的回弹是自动的,但我们fling行为是有个最小速度判断的,因而在UP时还要加个, 没有fling时,如果开始了一个回弹效果,则刷新视图~

以下是over scroll的优化效果 over scroll从体验上来说,我们希望是有一个阻塞的效果的, 即如果普通状态下,手指移动100距离,那view也滚动100距离, 但是over scroll时,手指移动100距离,view滚动距离应该按比例降低~ 这样一种效果才更加”真实”

此外demo中还在onOverScrolled回调用添加了一个拉断效果, 即当拖动到over scroll的极限距离时,虽然没有UP但是强制进行回弹操作, 相当于模拟了一个”拉断”的效果


缺陷, 没有考虑measure,所以MyScrollView中子类size有点问题,demo中暂时写死了child宽度, measure的原理介绍会在后面有时间整理出~希望大家持续关注