在豌豆莢的應(yīng)用詳情頁中有個(gè)ViewPager布局，該布局頭部添加了一個(gè)可上下收展的view用于顯示應(yīng)用資料。實(shí)現(xiàn)思路基本上就是利用ViewDragHelper進(jìn)行拖動(dòng)來控制頭部的view的布局。當(dāng)TopView可見時(shí)，手勢(shì)事件被拖動(dòng)層截獲控制上下拖動(dòng)達(dá)到TopView的折疊和展開效果。當(dāng)TopView不可見時(shí)，手勢(shì)事件交由ViewPager進(jìn)行控制達(dá)到ListView正常滾動(dòng)，并在ListView的onScroll滾動(dòng)監(jiān)聽中判斷ListView是否觸頂。如果觸頂則下拉拖動(dòng)ViewPager顯示TopView.

項(xiàng)目已經(jīng)上傳到Github的DragTopLayout.?
先看下效果圖：?

實(shí)現(xiàn)過程

---

1.繼承一個(gè)FrameLayout，在FrameLayout中控制子View拖動(dòng)。FrameLayout初始化中實(shí)例化一個(gè)ViewDragHelper對(duì)象。

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

2.參數(shù)中callback即為拖動(dòng)過程中所有的事件回調(diào)，實(shí)現(xiàn)一個(gè)ViewDragHelper.Callback()。?
Callback中的所用到得方法如下：

// 判斷child是否是拖動(dòng)的目標(biāo) tryCaptureView(View child, int pointerId) // 拖動(dòng)位置的處理，可以處理拖動(dòng)過程中的最高位置或者最低位置 clampViewPositionVertical(View child, int top, int dy) // 拖動(dòng)后view位置的改變 onViewPositionChanged(View view, int left, int top, int dx, int dy) // 拖動(dòng)手勢(shì)釋放后的處理 onViewReleased(View releasedChild, float xvel, float yvel) // 拖動(dòng)狀態(tài)的改變 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方法，用以實(shí)現(xiàn)拖動(dòng)后的滾動(dòng)效果

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

5.簡單地拖動(dòng)差不多實(shí)現(xiàn)了，下面就需要在Callback中進(jìn)行拖動(dòng)事件的自定義邏輯處理了。?
先利用tryCaptureView判斷當(dāng)前touch的view是否是目標(biāo)拖動(dòng)view，返回true則拖動(dòng)處理，false不處理。

return child == dragContentView;

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

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

在onViewPositionChanged方法中控制拖動(dòng)后新位置的處理。因?yàn)橥蟿?dòng)過程中還需對(duì)TopView進(jìn)行相應(yīng)地處理，所以在方法內(nèi)記錄拖動(dòng)的top位置，并在onLayout回調(diào)方法中處理最新位置的現(xiàn)實(shí)。

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

當(dāng)釋放手勢(shì)后判斷手勢(shì)方向利用settleCapturedViewAt方法進(jìn)行處理最終滾動(dòng)位置。其中yvel參數(shù)>0代表快速往下滑動(dòng)，否則為快速往上滑動(dòng)。

@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();}

這樣就處理好了拖動(dòng)的所有事件了。具體代碼可參考Github上的項(xiàng)目。

---

聯(lián)系方式：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。