仿豌豆莢ViewPager下拉：DragTopLayout
在豌豆莢的應用詳情頁中有個ViewPager布局，該布局頭部添加了一個可上下收展的view用于顯示應用資料。實現思路基本上就是利用 ViewDragHelper進行拖動來控制頭部的view的布局。當TopView可見時，手勢事件被拖動層截獲控制上下拖動達到TopView的折疊和展開效果。當TopView不可見時，手勢事件交由ViewPager進行控制達到ListView正常滾動，并在ListView的onScroll 滾動監聽中判斷ListView是否觸頂。如果觸頂則下拉拖動ViewPager顯示TopView.
項目已經上傳到Github的DragTopLayout.
先看下效果圖：
實現過程
1.繼承一個FrameLayout，在FrameLayout中控制子View拖動。FrameLayout初始化中實例化一個ViewDragHelper對象。
</div>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方法，將事件攔截處理。
</div> @Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return shouldIntercept && dragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
dragHelper.processTouchEvent(event);
return true;
}</pre><br />
4.覆蓋computeScroll方法，用以實現拖動后的滾動效果
</div>
@Override
public void computeScroll() {
if (dragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
5.簡單地拖動差不多實現了，下面就需要在Callback中進行拖動事件的自定義邏輯處理了。
先利用tryCaptureView判斷當前touch的view是否是目標拖動view，返回true則拖動處理，false不處理。
</div>
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回調方法中處理最新位置的現實。
</div>
@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();
}
</div>
這樣就處理好了拖動的所有事件了。具體代碼可參考Github上的項目。
https://github.com/chenupt/DragTopLayout
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
相關經驗