逛豆瓣的時候看到了這樣的控件，覺得挺有趣傅蹂，遂模仿之
先看看原版的效果
douban.gif
再看看模仿的效果
mock1.gif
mock2.gif
mock3.gif
分析
控件結(jié)構(gòu)分析
結(jié)構(gòu).png
由于*ScrollView只能有一個child view纷闺，所以整個child view的結(jié)構(gòu)如圖，這里我選擇的是LinearLayout作為最外層的布局份蝴，content為展示的可滑動的內(nèi)容犁功，“更多”滑到最右邊繼續(xù)滑時出現(xiàn)的部分，先通過margin把“更多”隱藏
還有“更多”出現(xiàn)時的波紋效果婚夫，這個效果是通過貝塞爾曲線實現(xiàn)的浸卦，這里的實現(xiàn)比較簡單，只取一個控制點案糙，y坐標的數(shù)值為height的一半限嫌，x坐標隨滑動距離變化
關(guān)鍵代碼
控件的滑動效果由child view（下稱wrapView）和content view（下稱contentView）配合產(chǎn)生
- 當滑動到最左邊并繼續(xù)滑動的時候，wrapView的scrollX變化时捌，產(chǎn)生第1個gif圖效果
- 當滑動到最右邊并繼續(xù)滑動的時候怒医，wrapView的scrollX先變化，當滑出到一定距離的時候匣椰，contentView的scrollX變化裆熙，產(chǎn)生第3個gif圖效果
- 其他情況不處理滑動，交由
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 >= 產(chǎn)生"更多"動作的距離僚稿，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);
}
松手后復(fù)原的滑動效果使用Scroller完成，讀者可參考相關(guān)文檔和文章
源碼和demo
github:horizontal-elasticity-scrollview
歡迎交流
