仿豆瓣首页弹性滑动控件

来源：互联网发布：如何用js实现下拉菜单编辑：程序博客网时间：2024/06/07 10:01

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

先看看原版的效果

再看看模仿的效果

分析

控件结构分析

结构.png

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

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

关键代码

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

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

详细参考以下代码

@Overridepublic 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

欢迎交流

阅读全文

1 0