zoukankan      html  css  js  c++  java

  • 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的本质其实是分析onInterceptTouchEvent和onTouchEvent的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 plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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. }


    同上，处理纵向的拖动：

    在DragHelperCallback中实现clampViewPositionVertical方法，实现过程同clampViewPositionHorizontal

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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. }


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

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

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

    滑动边缘:

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);


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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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 plaincopy在CODE上查看代码片派生到我的代码片
    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来完成拖动，无非是说，他本来就没有什么规则可言，拖动一下也无妨。
  • 相关阅读:
    EncryptionAndDecryptionC# 加密 解密
    EncryptFac 加解密小工具
    Aes加密/解密示例项目
    DES加密解密工具
    DESC加密解密算法
    加解密合集
    Zabbix系列之一——zabbix3.4部署
    Linux下ntpdate时间同步
    SVN服务器搭建实录
    Failed to get D-Bus connection: Operation not permitted解决
  • 原文地址：https://www.cnblogs.com/Free-Thinker/p/4204900.html
Copyright © 2011-2022 走看看