逛豆瓣的时候看到了这样的控件,觉得挺有趣,遂模仿之
先看看原版的效果
再看看模仿的效果
分析
控件结构分析
由于*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
处理
详细参考以下代码
public boolean (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) { 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(); }大专栏 |