仿豆瓣首页弹性滑动控件

《仿豆瓣首页弹性滑动控件》

逛豆瓣的时候看到了这样的控件,觉得挺有趣,遂模仿之

先看看原版的效果

《仿豆瓣首页弹性滑动控件》 douban.gif

再看看模仿的效果

《仿豆瓣首页弹性滑动控件》 mock1.gif
《仿豆瓣首页弹性滑动控件》 mock2.gif
《仿豆瓣首页弹性滑动控件》 mock3.gif

分析

控件结构分析

《仿豆瓣首页弹性滑动控件》 结构.png

由于*ScrollView只能有一个child view,所以整个child view的结构如图,这里我选择的是LinearLayout作为最外层的布局,content为展示的可滑动的内容,“更多”滑到最右边继续滑时出现的部分,先通过margin把“更多”隐藏

还有“更多”出现时的波纹效果,这个效果是通过贝塞尔曲线实现的,这里的实现比较简单,只取一个控制点,y坐标的数值为height的一半,x坐标随滑动距离变化

关键代码

控件的滑动效果由child view(下称wrapView)和content view(下称contentView)配合产生

  1. 当滑动到最左边并继续滑动的时候,wrapView的scrollX变化,产生第1个gif图效果
  2. 当滑动到最右边并继续滑动的时候,wrapView的scrollX先变化,当滑出到一定距离的时候,contentView的scrollX变化,产生第3个gif图效果
  3. 其他情况不处理滑动,交由HorizontalScrollView处理

详细参考以下代码

@Override
public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mLastX = ev.getRawX();
            break;
        case MotionEvent.ACTION_MOVE:
            float mDeltaX = (ev.getRawX() - mLastX);
            mLastX = ev.getRawX();
            mDeltaX = mDeltaX * RATIO;
            if (mDeltaX > 0) {
                //不能左滑或者外层布局的scrollX > 0
                if (!canScrollHorizontally(-1) || mWrapView.getScrollX() > 0) {
                    //contentView的scrollX > 0,contentView scroll,使scrollX变化
                    if (mContentView.getScrollX() > 0) {
                        mContentView.scrollBy((int) -mDeltaX, 0);
                        mMsg.setText(mStringDragged);
                    } else {
                        //wrapView的scrollX > 0,wrapView scroll,使scrollX变化
                        mWrapView.scrollBy((int) -mDeltaX, 0);
                        mMsg.setText(mStringDragging);

                        //贝塞尔曲线控制点变化
                        mControlPoint.x = (int) (mRect.right - mWrapView.getScrollX() * RIPPLE_RATIO);
                        mControlPoint.y = mRect.bottom / 2;
                        invalidate();
                    }
                    return true;
                }
            } else {
                //不能右滑或者外层布局的scrollX < 0
                if (!canScrollHorizontally(1) || mWrapView.getScrollX() < 0) {
                    if (!canScrollHorizontally(1)) {
                        getDrawingRect(mRect);
                    }
                    //wrapView的scrollX >= 产生"更多"动作的距离,contentView scroll,使scrollX变化
                    if (mWrapView.getScrollX() >= mOffset) {
                        mContentView.scrollBy((int) -mDeltaX, 0);
                        mMsg.setText(mStringDragged);
                    } else {
                        //wrapView的scrollX < 0,wrapView scroll,使scrollX变化
                        mWrapView.scrollBy((int) -mDeltaX, 0);
                        mMsg.setText(mStringDragging);

                        //贝塞尔曲线控制点变化
                        mControlPoint.x = (int) (mRect.right - mWrapView.getScrollX() * RIPPLE_RATIO);
                        mControlPoint.y = mRect.bottom / 2;
                        invalidate();
                    }
                    return true;
                }
            }
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
            checkAction();
            if (mWrapView.getScrollX() < 0) {
                mScroller.startScroll(mWrapView.getScrollX(), 0, 0 - mWrapView.getScrollX(), 0,
                        (0 - mWrapView.getScrollX()) * 5);
            } else if (mContentView.getScrollX() > 0) {
                mScroller.startScroll(mContentView.getScrollX() + mWrapView.getScrollX(), 0,
                        0 - mContentView.getScrollX() - mWrapView.getScrollX(), 0,
                        (mContentView.getScrollX() + mWrapView.getScrollX()) * 6);
            } else {
                mScroller.startScroll(mWrapView.getScrollX(), 0, 0 - mWrapView.getScrollX(), 0,
                        mWrapView.getScrollX() * 5);
            }
            invalidate();
            break;
    }
    return super.onTouchEvent(ev);
}

松手后复原的滑动效果使用Scroller完成,读者可参考相关文档和文章

源码和demo

github:horizontal-elasticity-scrollview

欢迎交流

    原文作者:Axlchen
    原文地址: https://www.jianshu.com/p/aeb13af9aa26
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞