两个ScrollView在一起的故事
<p style="text-align:center"><img src="https://simg.open-open.com/show/cbf44d39a280c5428c0445db5f266185.jpg"></p> <p><strong>前言</strong></p> <p>很多时候,作为程序猿的我们都会接到产品的奇奇怪怪的需求,比如我们正要说的,要在同一个界面使用两个ScrollView,这个两个ScrollView不是并列的,而是在垂直方向的哦。这时你的心里肯定有千万只草泥马飞奔而过,这坑爹需求,怎么可能两个ScrollView同时使用啊,一个界面里有两个ScrollView不是滑动各种冲突了啊。别急,这篇文章就是为了帮你解决这样的变态需求的,且听我一一道来。</p> <p><strong>知识要点</strong></p> <p>首先,你必须掌握如何自定义View,然后还要熟悉事件的传递机制,再来就是怎么使用Scroller,最后还要知道VelocityTracker(计算手势滑动的速度),掌握这些知识之后,看起这篇文章来将水到渠成了,如果还不是很了解或者熟悉的同学,就先自行Google或者度娘下了,如果有需要,我也会把相关的文章写下来的。</p> <p>先来看看效果图:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e6e382e348da9c2e292487b778fecd1.gif"></p> <p><strong>实现</strong></p> <p>1、自定义一个Relativelayout。</p> <pre> <code class="language-java">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); }</code></pre> <p>然后我们一步一步往里面添加代码了。</p> <p>2、将两个ScrollView绘制进来。</p> <p>我们把这两个View分别定义为mTopView和mBottomView。</p> <p>绘制进来我们使用了onMeasure和onLayout</p> <pre> <code class="language-java">@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); } }</code></pre> <p>这里我们让TopView和BottomView分别实现了OnTouchListener,目的就是为了判断,如果当前界面在TopView时,是否可以继续往下滑动,如果当前界面在BottomView的时候,是否可以继续往上滑动。</p> <pre> <code class="language-java">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; } };</code></pre> <pre> <code class="language-java">@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()); }</code></pre> <p>一开始初始化的时候,就是把TopView和BottomView分别绘制进来,把BottomView绘制在TopView的下面。</p> <p>3、添加事件分发,也就是dispatchTouchEvent</p> <pre> <code class="language-java">@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); }</code></pre> <p>这里可以看到最后是return super.dispatchTouchEvent(ev),这是为了让子View也可以接收到事件。</p> <p>这里的VelocityTracker,就是用来计算手滑动的速度,这个要用来当TopView要过渡到BottomView的时候,模拟ScrollView的滚动惯性的。</p> <p>模拟ScrollView滚动惯性关键就在于Scroller,我们可以看到MotionEvent.ACTION_UP的时候,有这样的方法:fling(-initialVelocity);</p> <pre> <code class="language-java">public void fling(int velocityY) { if (getChildCount() > 0) { mScroller.fling(getScrollX(), getScrollY(), 0, velocityY, 0, 0, -700, 700); awakenScrollBars(mScroller.getDuration()); invalidate(); } }</code></pre> <p>这里的 -700和700分别是往上滚动和往下滚动的最大值。</p> <p>然后重写computeScroll方法</p> <pre> <code class="language-java">/** * 当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(); } } }</code></pre> <p>这里进行了一系列判断,当时也是累啊,首先是要判断是往上滑动还是往下滑动,再来就是判断最大的滑动距离,然后再进行重写scrollTo方法。</p> <pre> <code class="language-java">@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(); } } }</code></pre> <p>这里使用到的是onScrollChanged方法进行View的滚动,然后对View进行invalidate,这样就可以达到滚动的惯性了。</p> <p>整个代码的流程就是这样的了,实现了两个ScrollView同时在一个界面内,而且可以做到平滑的滑动,具有ScrollView本身的滑动惯性,而且不局限于ScrollView,这要是有滚动条的View都可以使用。</p> <p><strong>总结</strong></p> <p>整个代码看下来是不是有点凌乱,我也觉得有点乱,不过只要有耐心点就可以很快理解了。</p> <p>首先,一个自定义RelativeLayout,然后把两个包含ScrollView的子View同时绘制在这个自定义的RelativeLayout内,并且是上下排列,然后重写dispatchTouchEvent方法,对事件进行处理,主要是在TopView和BottomView过渡的时候进行处理,要判断是TopView往BottomView过渡还是BottomView往TopView过渡,这个是关键点,最后就使用到Scroller进行滚动惯性的模拟,需要重写View的computeScroll和scrollTo两个方法,然后在滚动的时候需要判断是否超出了滚动的距离,还有滚动的方向。</p> <p> </p> <p> </p> <p>来自:http://www.jianshu.com/p/0fa34bbd0b65</p> <p> </p>
本文由用户 lpwngw228s 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!