ViewDragHelper详解

野性酷女 2022-08-03 03:20 41阅读 0赞

` 转载自：http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0911/1680.html`

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的本质其实是分析onInterceptTouchEvent和onTouchEvent的MotionEvent参数，然后根据分析的结果去改变一个容器中被拖动子View的位置（ 通过`offsetTopAndBottom(int offset)和offsetLeftAndRight(int offset)`方法 ），他能在触摸的时候判断当前拖动的是哪个子View；`

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

**`用法：`**

`1.ViewDragHelper的初始化`

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  \}

![84581410406679.gif][]

同上，处理纵向的拖动：

`在DragHelperCallback中实现clampViewPositionVertica`l方法，实现过程同clampViewPositionHorizontal

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.  \}

![15821410406710.gif][]

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

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>public boolean tryCaptureView(View child, int pointerId) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>child == mDragView1;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

![85881410406898.gif][]

滑动边缘:

分为滑动左边缘还是右边缘：EDGE\_LEFT和EDGE\_RIGHT，下面的代码设置了可以处理滑动左边缘：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE\_LEFT);

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  @Override  
2.  public void onEdgeDragStarted(int edgeFlags, int pointerId) \{  
3.      mDragHelper.captureChildView(mDragView2, pointerId);  
4.  \}

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

![1FF11053-0.gif][]

代码中的关键点：

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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**][https_github.com_flavienlaurent_flavienlaurent.com]

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

[MenuDrawer]: http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0310/1589.html
[view plain]: http://blog.csdn.net/jianghejie123/article/details/39315319#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/470063
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/470063/fork
[84581410406679.gif]: /images/20220731/9fa46618c5a94b6085ea16a4c16acfc1.png
[15821410406710.gif]: /images/20220731/c809db7070364f529bd69ebe508aa670.png
[85881410406898.gif]: http://jcodecraeer.com/uploads/20140911/85881410406898.gif
[1FF11053-0.gif]: /images/20220731/e03be0207c6c4b16bbd3a55daaa03e1c.png
[https_github.com_flavienlaurent_flavienlaurent.com]: https://github.com/flavienlaurent/flavienlaurent.com