在豌豆莢的應(yīng)用詳情頁中有個(gè)ViewPager布局，該布局頭部添加了一個(gè)可上下收展的view用于顯示應(yīng)用資料。實(shí)現(xiàn)思路基本上就是利用ViewDragHelper進(jìn)行拖動(dòng)來控制頭部的view的布局。當(dāng)TopView可見時(shí)，手勢事件被拖動(dòng)層截獲控制上下拖動(dòng)達(dá)到TopView的折疊和展開效果。當(dāng)TopView不可見時(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對象。
<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.參數(shù)中callback即為拖動(dòng)過程中所有的事件回調(diào)，實(shí)現(xiàn)一個(gè)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是否是拖動(dòng)的目標(biāo)</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;">// 拖動(dòng)位置的處理，可以處理拖動(dòng)過程中的最高位置或者最低位置</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;">// 拖動(dòng)后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;">// 拖動(dòng)手勢釋放后的處理</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;">// 拖動(dòng)狀態(tài)的改變</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方法，用以實(shí)現(xiàn)拖動(dòng)后的滾動(dòng)效果
<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.簡單地拖動(dòng)差不多實(shí)現(xiàn)了，下面就需要在Callback中進(jìn)行拖動(dòng)事件的自定義邏輯處理了。
先利用tryCaptureView判斷當(dāng)前touch的view是否是目標(biāo)拖動(dòng)view，返回true則拖動(dòng)處理，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方法中處理拖動(dòng)的最高高度不超過上邊界。
<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方法中控制拖動(dòng)后新位置的處理。因?yàn)橥蟿?dòng)過程中還需對TopView進(jìn)行相應(yīng)地處理，所以在方法內(nèi)記錄拖動(dòng)的top位置，并在onLayout回調(diào)方法中處理最新位置的現(xiàn)實(shí)。
<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>
當(dāng)釋放手勢后判斷手勢方向利用settleCapturedViewAt方法進(jìn)行處理最終滾動(dòng)位置。其中yvel參數(shù)>0代表快速往下滑動(dòng)，否則為快速往上滑動(dòng)。
<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>
這樣就處理好了拖動(dòng)的所有事件了。具體代碼可參考Github上的項(xiàng)目。
文章轉(zhuǎn)載頁http://blog.csdn.net/chenupt/article/details/43228671#comments
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
