仿豌豆莢ViewPager下拉，豌豆莢viewpager

仿豌豆莢ViewPager下拉，豌豆莢viewpager

在豌豆莢的應用詳情頁中有個ViewPager布局，該布局頭部添加了一個可上下收展的view用於顯示應用資料。實現思路基本上就是利用ViewDragHelper進行拖動來控制頭部的view的布局。當TopView可見時，手勢事件被拖動層截獲控制上下拖動達到TopView的摺疊和展開效果。當TopView不可見時，手勢事件交由ViewPager進行控制達到ListView正常滾動，並在ListView的onScroll滾動監聽中判斷ListView是否觸頂。如果觸頂則下拉拖動ViewPager顯示TopView.

項目已經上傳到Github的DragTopLayout. 
先看下： 

實現過程

1.繼承一個FrameLayout，在FrameLayout中控制子View拖動。FrameLayout初始化中執行個體化一個ViewDragHelper對象。

ViewDragHelper.create(this, 1.0f, callback);

2.參數中callback即為拖動過程中所有的事件回調，實現一個ViewDragHelper.Callback()。 
Callback中的所用到得方法如下：

// 判斷child是否是拖動的目標tryCaptureView(View child, int pointerId)// 拖動位置的處理，可以處理拖動過程中的最高位置或者最低位置clampViewPositionVertical(View child, int top, int dy)// 拖動後view位置的改變onViewPositionChanged(View view, int left, int top, int dx, int dy)// 拖動手勢釋放後的處理onViewReleased(View releasedChild, float xvel, float yvel)// 拖動狀態的改變onViewDragStateChanged(int state)

3.覆蓋onInterceptTouchEvent和onTouchEvent方法，將事件攔截處理。

    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return shouldIntercept && dragHelper.shouldInterceptTouchEvent(ev);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        dragHelper.processTouchEvent(event);        return true;    }

4.覆蓋computeScroll方法，用以實現拖動後的滾動效果

    @Override    public void computeScroll() {        if (dragHelper.continueSettling(true)) {            ViewCompat.postInvalidateOnAnimation(this);        }    }

5.簡單地拖動差不多實現了，下面就需要在Callback中進行拖動事件的自訂邏輯處理了。 
先利用tryCaptureView判斷當前touch的view是否是目標拖動view，返回true則拖動處理，false不處理。

return child == dragContentView;

在clampViewPositionVertical方法中處理拖動的最高高度不超過上邊界。

    @Override    public int clampViewPositionVertical(View child, int top, int dy) {            return Math.min(topViewHeight, Math.max(top, getPaddingTop()));    }

在onViewPositionChanged方法中控制拖動後新位置的處理。因為拖動過程中還需對TopView進行相應地處理，所以在方法內記錄拖動的top位置，並在onLayout回調方法中處理最新位置的現實。

    @Override    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {        super.onViewPositionChanged(changedView, left, top, dx, dy);        contentTop = top;        requestLayout();    }

當釋放手勢後判斷手勢方向利用settleCapturedViewAt方法進行處理最終滾動位置。其中yvel參數>0代錶快速往下滑動，否則為快速往上滑動。

    @Override    public void onViewReleased(View releasedChild, float xvel, float yvel) {        super.onViewReleased(releasedChild, xvel, yvel);        // yvel > 0 Fling down || yvel < 0 Fling up        int top;        if (yvel > 0 || contentTop > topViewHeight) {            top = topViewHeight + getPaddingTop();        } else {            top = getPaddingTop();        }        if (wizard.enableSliding) {            dragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);        }        postInvalidate();    }

這樣就處理好了拖動的所有事件了。具體代碼可參考Github上的項目。

連絡方式：

• Chenupt - chenupt@outlook.com
• 微博：chenupt
• QQ：753785666