在豌豆莢的應用詳情頁中有個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方法，將事件攔截處理。

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

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

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

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

return child == dragContentView;

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

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

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

@Overridepublic 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代表快速往下滑動，否則為快速往上滑動。

@Overridepublic void onViewReleased(View releasedChild, float xvel, float yvel) {super.onViewReleased(releasedChild, xvel, yvel);// yvel > 0 Fling down || yvel < 0 Fling upint 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

總結

以上是生活随笔為你收集整理的仿豌豆荚ViewPager下拉的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。