ViewDragHelper详解

2013年谷歌i/o大会上介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDragHelper来处理拖动。ViewDragHelper是framework中不为人知却非常有用的一个工具

ViewDragHelper解决了Android中手势处理过于复杂的问题,在DrawerLayout出现之前,侧滑菜单都是由第三方开源代码实现的,其中著名的当属MenuDrawer ,MenuDrawer重写onTouchEvent方法来实现侧滑效果,代码量很大,实现逻辑也需要很大的耐心才能看懂。如果每个开发人员都从这么原始的步奏开始做起,那对于安卓生态是相当不利的。所以说ViewDragHelper等的出现反映了安卓开发框架已经开始向成熟的方向迈进。

本文先介绍ViewDragHelper的基本用法,然后介绍一个能真正体现ViewDragHelper实用性的例子。

其实ViewDragHelper并不是第一个用于分析手势处理的类,gesturedetector也是,但是在和拖动相关的手势分析方面gesturedetector只能说是勉为其难。

关于ViewDragHelper有如下几点:

ViewDragHelper.Callback是连接ViewDragHelper与view之间的桥梁(这个view一般是指拥子view的容器即parentView);

   ViewDragHelper的实例是通过静态工厂方法创建的;

   你能够指定拖动的方向;

   ViewDragHelper可以检测到是否触及到边缘;

   ViewDragHelper并不是直接作用于要被拖动的View,而是使其控制的视图容器中的子View可以被拖动,如果要指定某个子view的行为,需要在Callback中想办法;

   ViewDragHelper的本质其实是分析onInterceptTouchEventonTouchEvent的MotionEvent参数,然后根据分析的结果去改变一个容器中被拖动子View的位 通过offsetTopAndBottom(int offset)和offsetLeftAndRight(int offset)方法 ),他能在触摸的时候判断当前拖动的是哪个子View;

   虽然ViewDragHelper的实例方法 ViewDragHelper create(ViewGroup forParent, Callback cb) 可以指定一个被ViewDragHelper处理拖动事件的对象 ,但ViewDragHelper类的设计决定了其适用于被包含在一个自定义ViewGroup之中,而不是对任意一个布局上的视图容器使用ViewDragHelper

-----------------------------------------------------------------------------------------------

本文最先发表在我的个人网站 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0911/1680.html

------------------------------------------------------------------------------------- ----------------

用法:

1.ViewDragHelper的初始化

ViewDragHelper一般用在一个自定义ViewGroup的内部,比如下面自定义了一个继承于LinearLayout的DragLayout,DragLayout内部有一个子viewmDragView作为成员变量:

[html]  view plain copy
  1. public class DragLayout extends LinearLayout {  
  2. private final ViewDragHelper mDragHelper;  
  3. private View mDragView;  
  4. public DragLayout(Context context) {  
  5.   this(context, null);  
  6. }  
  7. public DragLayout(Context context, AttributeSet attrs) {  
  8.   this(context, attrs, 0);  
  9. }  
  10. public DragLayout(Context context, AttributeSet attrs, int defStyle) {  
  11.   super(context, attrs, defStyle);  
  12. }  

创建一个带有回调接口的 ViewDragHelper

 

[html]  view plain copy
  1. public DragLayout(Context context, AttributeSet attrs, int defStyle) {  
  2.   super(context, attrs, defStyle);  
  3.   mDragHelper = ViewDragHelper.create(this, 1.0f, new DragHelperCallback());  
  4. }  

其中1.0f是敏感度参数参数越大越敏感。第一个参数为this,表示该类生成的对象,他是ViewDragHelper的拖动处理对象,必须为ViewGroup

要让ViewDragHelper能够处理拖动需要将触摸事件传递给ViewDragHelper,这点和gesturedetector是一样的:

[html]  view plain copy
  1. @Override  
  2. public boolean onInterceptTouchEvent(MotionEvent ev) {  
  3.   final int action = MotionEventCompat.getActionMasked(ev);  
  4.   if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {  
  5.       mDragHelper.cancel();  
  6.       return false;  
  7.   }  
  8.   return mDragHelper.shouldInterceptTouchEvent(ev);  
  9. }  
  10. @Override  
  11. public boolean onTouchEvent(MotionEvent ev) {  
  12.   mDragHelper.processTouchEvent(ev);  
  13.   return true;  
  14. }  

接下来,你就可以在回调中处理各种拖动行为了。


2.拖动行为的处理

处理横向的拖动:

DragHelperCallback中实现clampViewPositionHorizontal方法, 并且返回一个适当的数值就能实现横向拖动效果,clampViewPositionHorizontal的第二个参数是指当前拖动子view应该到达的x坐标。所以按照常理这个方法原封返回第二个参数就可以了,但为了让被拖动的view遇到边界之后就不在拖动,对返回的值做了更多的考虑。

[html]  view plain copy
  1. @Override  
  2. public int clampViewPositionHorizontal(View child, int left, int dx) {  
  3.   Log.d("DragLayout", "clampViewPositionHorizontal " + left + "," + dx);  
  4.   final int leftBound = getPaddingLeft();  
  5.   final int rightBound = getWidth() - mDragView.getWidth();  
  6.   final int newLeft = Math.min(Math.max(left, leftBound), rightBound);  
  7.   return newLeft;  
  8. }  

ViewDragHelper详解_第1张图片

同上,处理纵向的拖动:

DragHelperCallback中实现clampViewPositionVertical方法,实现过程同clampViewPositionHorizontal

[html]  view plain copy
  1. @Override  
  2. public int clampViewPositionVertical(View child, int top, int dy) {  
  3.   final int topBound = getPaddingTop();  
  4.   final int bottomBound = getHeight() - mDragView.getHeight();  
  5.   final int newTop = Math.min(Math.max(top, topBound), bottomBound);  
  6.   return newTop;  
  7. }  

ViewDragHelper详解_第2张图片

clampViewPositionHorizontal 和 clampViewPositionVertical必须要重写,因为默认它返回的是0。事实上我们在这两个方法中所能做的事情很有限。 个人觉得这两个方法的作用就是给了我们重新定义目的坐标的机会。

通过DragHelperCallback的tryCaptureView方法的返回值可以决定一个parentview中哪个子view可以拖动,现在假设有两个子views (mDragView1和mDragView2)  ,如下实现tryCaptureView之后,则只有mDragView1是可以拖动的。

1
2
3
4
@Override
public boolean tryCaptureView(View child, int pointerId) {
   return child == mDragView1;
}

ViewDragHelper详解_第3张图片

滑动边缘:

分为滑动左边缘还是右边缘:EDGE_LEFT和EDGE_RIGHT,下面的代码设置了可以处理滑动左边缘:

[html]  view plain copy
  1. mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);  

假如如上设置,onEdgeTouched方法会在左边缘滑动的时候被调用,这种情况下一般都是没有和子view接触的情况。

[html]  view plain copy
  1. @Override  
  2. public void onEdgeTouched(int edgeFlags, int pointerId) {  
  3.     super.onEdgeTouched(edgeFlags, pointerId);  
  4.     Toast.makeText(getContext(), "edgeTouched", Toast.LENGTH_SHORT).show();  
  5. }  

如果你想在边缘滑动的时候根据滑动距离移动一个子view,可以通过实现onEdgeDragStarted方法,并在onEdgeDragStarted方法中手动指定要移动的子View

[html]  view plain copy
  1. @Override  
  2. public void onEdgeDragStarted(int edgeFlags, int pointerId) {  
  3.     mDragHelper.captureChildView(mDragView2, pointerId);  
  4. }  

ViewDragHelper让我们很容易实现一个类似于YouTube视频浏览效果的控件,效果如下:


代码中的关键点:

1.tryCaptureView返回了唯一可以被拖动的header view;

2.拖动范围drag range的计算是在onLayout中完成的;

3.注意在onInterceptTouchEvent和onTouchEvent中使用的ViewDragHelper的若干方法;

4.在computeScroll中使用continueSettling方法(因为ViewDragHelper使用了scroller)

5.smoothSlideViewTo方法来完成拖动结束后的惯性操作。

需要注意的是代码仍然有很大改进空间。

activity_main.xml

[html]  view plain copy
  1. <FrameLayout  
  2.         xmlns:android="http://schemas.android.com/apk/res/android"  
  3.         android:layout_width="match_parent"  
  4.         android:layout_height="match_parent">  
  5.     <ListView  
  6.             android:id="@+id/listView"  
  7.             android:layout_width="match_parent"  
  8.             android:layout_height="match_parent"  
  9.             android:tag="list"  
  10.             />  
  11.     <com.example.vdh.YoutubeLayout  
  12.             android:layout_width="match_parent"  
  13.             android:layout_height="match_parent"  
  14.             android:id="@+id/youtubeLayout"  
  15.             android:orientation="vertical"  
  16.             android:visibility="visible">  
  17.         <TextView  
  18.                 android:id="@+id/viewHeader"  
  19.                 android:layout_width="match_parent"  
  20.                 android:layout_height="128dp"  
  21.                 android:fontFamily="sans-serif-thin"  
  22.                 android:textSize="25sp"  
  23.                 android:tag="text"  
  24.                 android:gravity="center"  
  25.                 android:textColor="@android:color/white"  
  26.                 android:background="#AD78CC"/>  
  27.         <TextView  
  28.                 android:id="@+id/viewDesc"  
  29.                 android:tag="desc"  
  30.                 android:textSize="35sp"  
  31.                 android:gravity="center"  
  32.                 android:text="Loreum Loreum"  
  33.                 android:textColor="@android:color/white"  
  34.                 android:layout_width="match_parent"  
  35.                 android:layout_height="match_parent"  
  36.                 android:background="#FF00FF"/>  
  37.     </com.example.vdh.YoutubeLayout>  
  38. </FrameLayout>  

YoutubeLayout.java
[html]  view plain copy
  1. public class YoutubeLayout extends ViewGroup {  
  2. private final ViewDragHelper mDragHelper;  
  3. private View mHeaderView;  
  4. private View mDescView;  
  5. private float mInitialMotionX;  
  6. private float mInitialMotionY;  
  7. private int mDragRange;  
  8. private int mTop;  
  9. private float mDragOffset;  
  10. public YoutubeLayout(Context context) {  
  11.   this(context, null);  
  12. }  
  13. public YoutubeLayout(Context context, AttributeSet attrs) {  
  14.   this(context, attrs, 0);  
  15. }  
  16. @Override  
  17. protected void onFinishInflate() {  
  18.     mHeaderView = findViewById(R.id.viewHeader);  
  19.     mDescView = findViewById(R.id.viewDesc);  
  20. }  
  21. public YoutubeLayout(Context context, AttributeSet attrs, int defStyle) {  
  22.   super(context, attrs, defStyle);  
  23.   mDragHelper = ViewDragHelper.create(this, 1f, new DragHelperCallback());  
  24. }  
  25. public void maximize() {  
  26.     smoothSlideTo(0f);  
  27. }  
  28. boolean smoothSlideTo(float slideOffset) {  
  29.     final int topBound = getPaddingTop();  
  30.     int y = (int) (topBound + slideOffset * mDragRange);  
  31.     if (mDragHelper.smoothSlideViewTo(mHeaderView, mHeaderView.getLeft(), y)) {  
  32.         ViewCompat.postInvalidateOnAnimation(this);  
  33.         return true;  
  34.     }  
  35.     return false;  
  36. }  
  37. private class DragHelperCallback extends ViewDragHelper.Callback {  
  38.   @Override  
  39.   public boolean tryCaptureView(View child, int pointerId) {  
  40.         return child == mHeaderView;  
  41.   }  
  42.     @Override  
  43.   public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {  
  44.       mTop = top;  
  45.       mDragOffset = (float) top / mDragRange;  
  46.         mHeaderView.setPivotX(mHeaderView.getWidth());  
  47.         mHeaderView.setPivotY(mHeaderView.getHeight());  
  48.         mHeaderView.setScaleX(1 - mDragOffset / 2);  
  49.         mHeaderView.setScaleY(1 - mDragOffset / 2);  
  50.         mDescView.setAlpha(1 - mDragOffset);  
  51.         requestLayout();  
  52.   }  
  53.   @Override  
  54.   public void onViewReleased(View releasedChild, float xvel, float yvel) {  
  55.       int top = getPaddingTop();  
  56.       if (yvel > 0 || (yvel == 0 && mDragOffset > 0.5f)) {  
  57.           top += mDragRange;  
  58.       }  
  59.       mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);  
  60.   }  
  61.   @Override  
  62.   public int getViewVerticalDragRange(View child) {  
  63.       return mDragRange;  
  64.   }  
  65.   @Override  
  66.   public int clampViewPositionVertical(View child, int top, int dy) {  
  67.       final int topBound = getPaddingTop();  
  68.       final int bottomBound = getHeight() - mHeaderView.getHeight() - mHeaderView.getPaddingBottom();  
  69.       final int newTop = Math.min(Math.max(top, topBound), bottomBound);  
  70.       return newTop;  
  71.   }  
  72. }  
  73. @Override  
  74. public void computeScroll() {  
  75.   if (mDragHelper.continueSettling(true)) {  
  76.       ViewCompat.postInvalidateOnAnimation(this);  
  77.   }  
  78. }  
  79. @Override  
  80. public boolean onInterceptTouchEvent(MotionEvent ev) {  
  81.   final int action = MotionEventCompat.getActionMasked(ev);  
  82.   if (( action != MotionEvent.ACTION_DOWN)) {  
  83.       mDragHelper.cancel();  
  84.       return super.onInterceptTouchEvent(ev);  
  85.   }  
  86.   if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {  
  87.       mDragHelper.cancel();  
  88.       return false;  
  89.   }  
  90.   final float x = ev.getX();  
  91.   final float y = ev.getY();  
  92.   boolean interceptTap = false;  
  93.   switch (action) {  
  94.       case MotionEvent.ACTION_DOWN: {  
  95.           mInitialMotionX = x;  
  96.           mInitialMotionY = y;  
  97.             interceptTap = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);  
  98.           break;  
  99.       }  
  100.       case MotionEvent.ACTION_MOVE: {  
  101.           final float adx = Math.abs(x - mInitialMotionX);  
  102.           final float ady = Math.abs(y - mInitialMotionY);  
  103.           final int slop = mDragHelper.getTouchSlop();  
  104.           if (ady > slop && adx > ady) {  
  105.               mDragHelper.cancel();  
  106.               return false;  
  107.           }  
  108.       }  
  109.   }  
  110.   return mDragHelper.shouldInterceptTouchEvent(ev) || interceptTap;  
  111. }  
  112. @Override  
  113. public boolean onTouchEvent(MotionEvent ev) {  
  114.   mDragHelper.processTouchEvent(ev);  
  115.   final int action = ev.getAction();  
  116.     final float x = ev.getX();  
  117.     final float y = ev.getY();  
  118.     boolean isHeaderViewUnder = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);  
  119.     switch (action & MotionEventCompat.ACTION_MASK) {  
  120.       case MotionEvent.ACTION_DOWN: {  
  121.           mInitialMotionX = x;  
  122.           mInitialMotionY = y;  
  123.           break;  
  124.       }  
  125.       case MotionEvent.ACTION_UP: {  
  126.           final float dx = x - mInitialMotionX;  
  127.           final float dy = y - mInitialMotionY;  
  128.           final int slop = mDragHelper.getTouchSlop();  
  129.           if (dx * dx + dy * dy < slop * slop && isHeaderViewUnder) {  
  130.               if (mDragOffset == 0) {  
  131.                   smoothSlideTo(1f);  
  132.               } else {  
  133.                   smoothSlideTo(0f);  
  134.               }  
  135.           }  
  136.           break;  
  137.       }  
  138.   }  
  139.   return isHeaderViewUnder && isViewHit(mHeaderView, (int) x, (int) y) || isViewHit(mDescView, (int) x, (int) y);  
  140. }  
  141. private boolean isViewHit(View view, int x, int y) {  
  142.     int[] viewLocation = new int[2];  
  143.     view.getLocationOnScreen(viewLocation);  
  144.     int[] parentLocation = new int[2];  
  145.     this.getLocationOnScreen(parentLocation);  
  146.     int screenX = parentLocation[0] + x;  
  147.     int screenY = parentLocation[1] + y;  
  148.     return screenX >= viewLocation[0] && screenX < viewLocation[0] + view.getWidth() &&  
  149.             screenY >= viewLocation[1] && screenY < viewLocation[1] + view.getHeight();  
  150. }  
  151. @Override  
  152. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  153.     measureChildren(widthMeasureSpec, heightMeasureSpec);  
  154.     int maxWidth = MeasureSpec.getSize(widthMeasureSpec);  
  155.     int maxHeight = MeasureSpec.getSize(heightMeasureSpec);  
  156.     setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, 0),  
  157.             resolveSizeAndState(maxHeight, heightMeasureSpec, 0));  
  158. }  
  159. @Override  
  160. protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  161.   mDragRange = getHeight() - mHeaderView.getHeight();  
  162.     mHeaderView.layout(  
  163.             0,  
  164.             mTop,  
  165.             r,  
  166.             mTop + mHeaderView.getMeasuredHeight());  
  167.     mDescView.layout(  
  168.             0,  
  169.             mTop + mHeaderView.getMeasuredHeight(),  
  170.             r,  
  171.             mTop  + b);  
  172. }  

代码下载地址: https://github.com/flavienlaurent/flavienlaurent.com


不管是menudrawer 还是本文实现的DragLayout都体现了一种设计哲学,即可拖动的控件都是封装在一个自定义的Layout中的,为什么这样做?为什么不直接将ViewDragHelper.create(this, 1f, new DragHelperCallback())中的this替换成任何已经布局好的容器,这样这个容器中的子View就能被拖动了,而往往是单独定义一个Layout来处理?个人认为如果在一般的布局中去拖动子view并不会出现什么问题,只是原本规则的世界被打乱了,而单独一个Layout来完成拖动,无非是说,他本来就没有什么规则可言,拖动一下也无妨。

你可能感兴趣的:(ViewDragHelper详解)