在豌豆莢的應用詳情頁中有個ViewPager布局，該布局頭部添加了一個可上下收展的view用于顯示應用資料。實現思路基本上就是利用ViewDragHelper進行拖動來控制頭部的view的布局。當TopView可見時，手勢事件被拖動層截獲控制上下拖動達到TopView的折疊和展開效果。當TopView不可見時，手勢事件交由ViewPager進行控制達到ListView正常滾動，并在ListView的onScroll滾動監聽中判斷ListView是否觸頂。如果觸頂則下拉拖動ViewPager顯示TopView.
項目已經上傳到Github的
DragTopLayout
.
先看下效果圖：
實現過程
1.繼承一個FrameLayout，在FrameLayout中控制子View拖動。FrameLayout初始化中實例化一個ViewDragHelper對象。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)">ViewDragHelper.create(<span class="hljs-keyword" style="outline:none!important; font-weight:bold">this</span>, <span class="hljs-number" style="color:#0880;outline:none!important;">1.0</span>f, callback);</code>
2.參數中callback即為拖動過程中所有的事件回調，實現一個ViewDragHelper.Callback()。
Callback中的所用到得方法如下：
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"><span class="hljs-comment" style="color:#888888;outline:none!important;">// 判斷child是否是拖動的目標</span>
tryCaptureView(View child, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> pointerId)
<span class="hljs-comment" style="color:#888888;outline:none!important;">// 拖動位置的處理，可以處理拖動過程中的最高位置或者最低位置</span>
clampViewPositionVertical(View child, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> top, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dy)
<span class="hljs-comment" style="color:#888888;outline:none!important;">// 拖動后view位置的改變</span>
onViewPositionChanged(View view, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> left, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> top, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dx, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dy)
<span class="hljs-comment" style="color:#888888;outline:none!important;">// 拖動手勢釋放后的處理</span>
onViewReleased(View releasedChild, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">float</span> xvel, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">float</span> yvel)
<span class="hljs-comment" style="color:#888888;outline:none!important;">// 拖動狀態的改變</span>
onViewDragStateChanged(<span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> state)</code>
3.覆蓋onInterceptTouchEvent和onTouchEvent方法，將事件攔截處理。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"> <span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">boolean</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">onInterceptTouchEvent</span>(MotionEvent ev) {
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">return</span> shouldIntercept && dragHelper.shouldInterceptTouchEvent(ev);
}
<span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">boolean</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">onTouchEvent</span>(MotionEvent event) {
dragHelper.processTouchEvent(event);
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">return</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">true</span>;
}</code>
4.覆蓋computeScroll方法，用以實現拖動后的滾動效果
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"> <span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">void</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">computeScroll</span>() {
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">if</span> (dragHelper.continueSettling(<span class="hljs-keyword" style="outline:none!important; font-weight:bold">true</span>)) {
ViewCompat.postInvalidateOnAnimation(<span class="hljs-keyword" style="outline:none!important; font-weight:bold">this</span>);
}
}</code>
5.簡單地拖動差不多實現了，下面就需要在Callback中進行拖動事件的自定義邏輯處理了。
先利用tryCaptureView判斷當前touch的view是否是目標拖動view，返回true則拖動處理，false不處理。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"><span class="hljs-keyword" style="outline:none!important; font-weight:bold">return</span> child == dragContentView;</code>
在clampViewPositionVertical方法中處理拖動的最高高度不超過上邊界。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"> <span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">clampViewPositionVertical</span>(View child, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> top, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dy) {
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">return</span> Math.min(topViewHeight, Math.max(top, getPaddingTop()));
}</code>
在onViewPositionChanged方法中控制拖動后新位置的處理。因為拖動過程中還需對TopView進行相應地處理，所以在方法內記錄拖動的top位置，并在onLayout回調方法中處理最新位置的現實。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"> <span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">void</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">onViewPositionChanged</span>(View changedView, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> left, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> top, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dx, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> dy) {
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">super</span>.onViewPositionChanged(changedView, left, top, dx, dy);
contentTop = top;
requestLayout();
}</code>
當釋放手勢后判斷手勢方向利用settleCapturedViewAt方法進行處理最終滾動位置。其中yvel參數>0代表快速往下滑動，否則為快速往上滑動。
<code class="language-java hljs " style="font-family:'Source Code Pro',monospace;font-size:undefined; padding:0.5em; color:rgb(0,0,0); display:block; outline:none!important; background-color:rgb(240,240,240)"> <span class="hljs-annotation" style="color:#888888;outline:none!important;">@Override</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">public</span> <span class="hljs-keyword" style="outline:none!important; font-weight:bold">void</span> <span class="hljs-title" style="color:#8800;outline:none!important; font-weight:bold">onViewReleased</span>(View releasedChild, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">float</span> xvel, <span class="hljs-keyword" style="outline:none!important; font-weight:bold">float</span> yvel) {
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">super</span>.onViewReleased(releasedChild, xvel, yvel);
<span class="hljs-comment" style="color:#888888;outline:none!important;">// yvel > 0 Fling down || yvel < 0 Fling up</span>
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">int</span> top;
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">if</span> (yvel > <span class="hljs-number" style="color:#0880;outline:none!important;">0</span> || contentTop > topViewHeight) {
top = topViewHeight + getPaddingTop();
} <span class="hljs-keyword" style="outline:none!important; font-weight:bold">else</span> {
top = getPaddingTop();
}
<span class="hljs-keyword" style="outline:none!important; font-weight:bold">if</span> (wizard.enableSliding) {
dragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);
}
postInvalidate();
}</code>
這樣就處理好了拖動的所有事件了。具體代碼可參考Github上的項目。
文章轉載頁http://blog.csdn.net/chenupt/article/details/43228671#comments
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
