逛豆瓣的時候看到了這樣的控件，覺得挺有趣，遂模仿之

先看看原版的效果

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

歡迎交流