在豌豆荚的应用详情页中有个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