两个ScrollView在一起的故事

前言

很多时候，作为程序猿的我们都会接到产品的奇奇怪怪的需求，比如我们正要说的，要在同一个界面使用两个ScrollView，这个两个ScrollView不是并列的，而是在垂直方向的哦。这时你的心里肯定有千万只草泥马飞奔而过，这坑爹需求，怎么可能两个ScrollView同时使用啊，一个界面里有两个ScrollView不是滑动各种冲突了啊。别急，这篇文章就是为了帮你解决这样的变态需求的，且听我一一道来。

知识要点

首先，你必须掌握如何自定义View，然后还要熟悉事件的传递机制，再来就是怎么使用Scroller，最后还要知道VelocityTracker（计算手势滑动的速度），掌握这些知识之后，看起这篇文章来将水到渠成了，如果还不是很了解或者熟悉的同学，就先自行Google或者度娘下了，如果有需要，我也会把相关的文章写下来的。

先来看看效果图：

实现

1、自定义一个Relativelayout。

public class LayoutContainer extends RelativeLayout {
    public LayoutContainer(Context context) {
        super(context);
    }

    public LayoutContainer(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public LayoutContainer(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

然后我们一步一步往里面添加代码了。

2、将两个ScrollView绘制进来。

我们把这两个View分别定义为mTopView和mBottomView。

绘制进来我们使用了onMeasure和onLayout

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //isMeasured的存在是只onMeasure一次，不让requestLayout调用的时候再次onMeasure
        if (!isMeasured) {
            isMeasured = true;
            mViewHeight = getMeasuredHeight();
            mViewWidth = getMeasuredWidth();
            mTopView = getChildAt(0);
            mBottomView = getChildAt(1);
            mBottomView.setOnTouchListener(bottomViewTouchListener);
            mTopView.setOnTouchListener(topViewTouchListener);
        }
    }

这里我们让TopView和BottomView分别实现了OnTouchListener，目的就是为了判断，如果当前界面在TopView时，是否可以继续往下滑动，如果当前界面在BottomView的时候，是否可以继续往上滑动。

private OnTouchListener topViewTouchListener = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //判断是否在最底部
            if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv.getMeasuredHeight()) && mCurrentViewIndex == 0) {
                canPullUp = true;
            } else {
                canPullUp = false;
            }
            return mCanScroll;
        }
    };

    private OnTouchListener bottomViewTouchListener = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //判断是否在最顶部
            if (sv.getScrollY() == 0 && mCurrentViewIndex == 1) {
                canPullDown = true;
            } else {
                canPullDown = false;
            }
            return mCanScroll;
        }
    };

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //mMoveLen 手滑动距离，这个是控制布局的主要变量
        mTopView.layout(0, (int) mMoveLen, mViewWidth, mTopView.getMeasuredHeight() + (int) mMoveLen);
        mBottomView.layout(0, mTopView.getMeasuredHeight() + (int) mMoveLen,
                mViewWidth, mTopView.getMeasuredHeight() + (int) mMoveLen + mBottomView.getMeasuredHeight());
    }

一开始初始化的时候，就是把TopView和BottomView分别绘制进来，把BottomView绘制在TopView的下面。

3、添加事件分发，也就是dispatchTouchEvent

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                if (vt == null) {
                    vt = VelocityTracker.obtain();
                } else {
                    vt.clear();
                }
                mLastY = ev.getY();
                mLastX = ev.getX();
                mTempLastY = ev.getY();
                vt.addMovement(ev);
                mEvents = 0;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
            case MotionEvent.ACTION_POINTER_UP:
                mEvents = -1;
                break;
            case MotionEvent.ACTION_MOVE:
                vt.addMovement(ev);
                //mCurrentViewIndex:记录当前展示的是哪个view，0是TopView，1是BottomView
                if (canPullUp && mCurrentViewIndex == 0 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);//不断计算滑动的距离
                    if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    } else if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                    }
                    if (mMoveLen < -5) {
                        // 防止事件冲突
                        mCanScroll = true;
                    } else {
                        mCanScroll = false;
                    }
                } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                    } else if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    }
                    if (mMoveLen > 5 - mViewHeight) {
                        // 防止事件冲突
                        mCanScroll = true;
                    } else {
                        mCanScroll = false;
                    }
                } else {
                    mCanScroll = false;
                    mEvents++;
                }
                mLastY = ev.getY();
                requestLayout();
                break;
            case MotionEvent.ACTION_UP:
                double deltaX = Math.sqrt((ev.getX() - mLastX) * (ev.getX() - mLastX) + (ev.getY() - mTempLastY) * (ev.getY() - mTempLastY));
                if (deltaX < 10) {
                    mIsClick = true;
                }
                if (mIsClick) {
                    mIsClick = false;
                    break;
                }
                mLastY = ev.getY();
                vt.addMovement(ev);
                //你想要指定的得到的速度单位，如果值为1，代表1毫秒运动了多少像素。如果值为500，代表 0.5秒内运动了多少像素
                vt.computeCurrentVelocity(500);
                // 获取Y方向的速度 可以通过getXVelocity()和getYVelocity()获得横向和竖向的速率
                int initialVelocity = (int) vt.getYVelocity();
                if (mMoveLen != 0 && mMoveLen != mTempMoveLen) {
                    fling(-initialVelocity);
                }
                mTempMoveLen = mMoveLen;
                try {
                    vt.recycle();
                    vt = null;
                } catch (Exception e) {
                    e.printStackTrace();
                }
                break;
        }
        super.dispatchTouchEvent(ev);
        return super.dispatchTouchEvent(ev);
    }

这里可以看到最后是return super.dispatchTouchEvent(ev)，这是为了让子View也可以接收到事件。

这里的VelocityTracker，就是用来计算手滑动的速度，这个要用来当TopView要过渡到BottomView的时候，模拟ScrollView的滚动惯性的。

模拟ScrollView滚动惯性关键就在于Scroller，我们可以看到MotionEvent.ACTION_UP的时候，有这样的方法：fling(-initialVelocity);

    public void fling(int velocityY) {
        if (getChildCount() > 0) {
            mScroller.fling(getScrollX(), getScrollY(), 0, velocityY, 0, 0, -700, 700);
            awakenScrollBars(mScroller.getDuration());
            invalidate();
        }
    }

这里的 -700和700分别是往上滚动和往下滚动的最大值。

然后重写computeScroll方法

    /**
     * 当scrollY > 0时，是往下滑动，当scrollY < 0时，是往上滑动
     */
    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset() && mMoveLen != (-mScreenH + getStatusBarHeight(getContext()))) {
            int scrollX = mScroller.getCurrX();
            int scrollY = mScroller.getCurrY();
            //往上滑动
            if (scrollY > 0 && oldY < 0) {
                oldY = 0;
            }
            if (scrollY > 0 && scrollY < oldY) {
                oldY = 0;
            }

            //往下滑动
            if (scrollY < 0 && scrollY > oldY) {
                oldY = 0;
            }
            if (scrollY < 0 && oldY > 0) {
                oldY = 0;
            }
            if (mMoveLen != 0 || mMoveLen != (-mScreenH + getStatusBarHeight(getContext()))) {
                scrollTo(scrollX, scrollY);
            }
            if (scrollY > 0) {
                mMoveLen = mMoveLen - scrollY + oldY;
            }
            if (scrollY < 0) {
                mMoveLen = mMoveLen - scrollY + oldY;
            }
            if (mMoveLen > 0) {
                mMoveLen = 0;
            }
            if (mMoveLen <= (-mScreenH + getStatusBarHeight(getContext()))) {
                mMoveLen = -mScreenH + getStatusBarHeight(getContext());
            }
            oldY = scrollY;
            if (mMoveLen != 0 || mMoveLen != (-mScreenH + getStatusBarHeight(getContext()))) {
                requestLayout();
            }
        }
    }

这里进行了一系列判断，当时也是累啊，首先是要判断是往上滑动还是往下滑动，再来就是判断最大的滑动距离，然后再进行重写scrollTo方法。

@Override
    public void scrollTo(int x, int y) {
        if (mScrollX != x || mScrollY != y) {
            int oldX = mScrollX;
            int oldY = mScrollY;
            mScrollX = x;
            mScrollY = y;
            onScrollChanged(mScrollX, mScrollY, oldX, oldY);
            if (!awakenScrollBars()) {
                invalidate();
            }
        }
    }

这里使用到的是onScrollChanged方法进行View的滚动，然后对View进行invalidate，这样就可以达到滚动的惯性了。

整个代码的流程就是这样的了，实现了两个ScrollView同时在一个界面内，而且可以做到平滑的滑动，具有ScrollView本身的滑动惯性，而且不局限于ScrollView，这要是有滚动条的View都可以使用。

总结

整个代码看下来是不是有点凌乱，我也觉得有点乱，不过只要有耐心点就可以很快理解了。

首先，一个自定义RelativeLayout，然后把两个包含ScrollView的子View同时绘制在这个自定义的RelativeLayout内，并且是上下排列，然后重写dispatchTouchEvent方法，对事件进行处理，主要是在TopView和BottomView过渡的时候进行处理，要判断是TopView往BottomView过渡还是BottomView往TopView过渡，这个是关键点，最后就使用到Scroller进行滚动惯性的模拟，需要重写View的computeScroll和scrollTo两个方法，然后在滚动的时候需要判断是否超出了滚动的距离，还有滚动的方向。

当然到了这里肯定少不了源码的分享了

Github LayoutContainer源码