ViewDragHelper 的基本使用（一）

ViewDragHelper 的使用和分析

使用方法

一個簡單的例子

假設(shè)要實現(xiàn)一個可以對內(nèi)部的 view 進行自由拖拽的 ViewGroup，效果如圖：

圖.1 可隨手拖拽的view

可以重寫 onTouchEvent(MotionEvent event) 方法，對 MotionEvent 進行判斷和處理，從而實現(xiàn)拖拽的效果。但是使用 ViewDragHelper 可以很方便的實現(xiàn)。只要寫很少的代碼，如下：

public class DragLayout extends FrameLayout {

    private static final String TAG = "DragLayout";

    private ViewDragHelper mDragHelper;

    public DragLayout(@NonNull Context context) {
        super(context);
        init();
    }

    public DragLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DragLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
            @Override
            public boolean tryCaptureView(View child, int pointerId) {
                Log.d(TAG, "tryCaptureView, left="+child.getLeft()+"; top="+child.getTop());
                return true;
            }

            @Override
            public int clampViewPositionHorizontal(View child, int left, int dx) {
                Log.d(TAG, "left=" + left + "; dx=" + dx);
                return left;
            }

            @Override
            public int clampViewPositionVertical(View child, int top, int dy) {
                Log.d(TAG, "top=" + top + "; dy=" + dy);
                return top;
            }
        };
        mDragHelper = ViewDragHelper.create(this, callback);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return mDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mDragHelper.processTouchEvent(event);
        return true;
    }
}

然后再在 xml 中寫布局文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<com.viewdraghelperlearn.DragLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:gravity="center" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:background="@color/colorPrimary"
        android:gravity="center" />

</com.viewdraghelperlearn.DragLayout>

即可實現(xiàn)圖中的效果。該ViewGroup中的任何子view都有隨手指頭拖拽效果。

在上面的 DragLayout 中，基本上只做了三件事：

  1. 創(chuàng)建 ViewDragHelper 的實例；
  2. 將 onInterceptTouchEvent(MotionEvent ev) 傳遞給 ViewDragHelper 的 shouldInterceptTouchEvent(ev)；
  3. 將 onTouchEvent(MotionEvent event) 傳遞給 ViewDragHelper 的 processTouchEvent(event);

先說一下第一條，如何創(chuàng)建一 個ViewDragHelper 的實例。

創(chuàng)建 ViewdragHelper

ViewDragHelper 提供了兩個 create() 方法來創(chuàng)建實例，分別傳入兩個和三個參數(shù)：

/**
 *工廠方法創(chuàng)建新的 ViewDragHelper 的實例.
 *
 * @param forParent 與 ViewDragHelper 相關(guān)聯(lián)的父 ViewGroup
 * @param 滑動和拖拽的事件的回調(diào)
 * @return 新的 ViewDragHelper 的實例
 */
public static ViewDragHelper create(ViewGroup forParent, Callback cb) {
    return new ViewDragHelper(forParent.getContext(), forParent, cb);
}

/**
 * 工廠方法創(chuàng)建新的 ViewDragHelper 的實例.
 *
 * @param 與 ViewDragHelper 相關(guān)聯(lián)的父 ViewGroup
 * @param 靈敏度，越大越靈敏，1.0f是正常值
 * @param 滑動和拖拽的事件的回調(diào)
 * @return 新的 ViewDragHelper 的實例
 */
public static ViewDragHelper create(ViewGroup forParent, float sensitivity, Callback cb) {
    final ViewDragHelper helper = create(forParent, cb);
    helper.mTouchSlop = (int) (helper.mTouchSlop * (1 / sensitivity));
    return helper;
}

第二個方法比第一個方法多了一個靈敏度的參數(shù)。
先使用第一個方法創(chuàng)建實例，需要傳入兩個參數(shù)。

第一個參數(shù)是 ViewGroup，拖拽事件就是發(fā)生在這個 ViewGroup 里面的子 View 上。

第二個參數(shù)是一個 callback；這個回調(diào)用來指示拖拽時的各種狀態(tài)和事件的變化，回調(diào)中的方法有很多，一共13個。先看幾個相對常用和重要的，其余的放到后面再看。

  1. public abstract boolean tryCaptureView(View child, int pointerId);
    這是唯一的一個抽象方法，需要自己實現(xiàn)的。返回值表示是否捕捉這個 view 的拖拽事件。這個方法會調(diào)用多次，哪怕這個 view 已經(jīng)被捕捉過了，在下一次開始拖拽的時候，還是會回調(diào)這個方法。如果只想對 ViewGroup 內(nèi)的特定的 view 進行拖拽的處理，只需要返回類似于 child == mDragView 這樣的形式就行了。

  2. public int clampViewPositionHorizontal(View child, int left, int dx); 這個方法約束了 View 在水平方向上的運動。該方法默認是返回0的，所以一般都是需要重寫的。這個方法有三個參數(shù)：第一個 View 自然就是拖動的 View；第二個參數(shù) left，指的是拖動的 View 理論上將要滑動到的水平方向上的值；第三個參數(shù) dx 可以理解為滑動的速度，單位是 px 每秒。返回值是水平方向上的實際的x坐標(biāo)的值。上面的DragLayout 中直接返回了 left，就是說需要滑動到哪里，child 這個 View 就 滑動到哪里。

  3. clampViewPositionVertical(View child, int top, int dy) 這個方法和 public int clampViewPositionHorizontal(View child, int left, int dx); 是一樣的，只不過約束的是View 在豎直方向上的運動。

可以看到圖1中的方塊是可以拖拽并滑動到屏幕邊緣并且超出屏幕邊緣的。假設(shè)需要讓圖中的方形塊不滑動超出屏幕的邊緣，就需要在 clampViewPositionHorizontal 中動手腳。

以下不超出屏幕邊緣的實現(xiàn)代碼參考了Android ViewDragHelper完全解析 自定義ViewGroup神器 和 Each Navigation Drawer Hides a ViewDragHelper 這兩篇文章。

不超出屏幕邊緣，意味著方塊的 x 坐標(biāo)>=paddingleft，方塊的 x 坐標(biāo)<=ViewGroup.getWidth()-paddingright-child.getWidth；
于是 clampViewPositionHorizontal 寫成:

@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
    Log.d(TAG, "left=" + left + "; dx=" + dx);
    // 最小 x 坐標(biāo)值不能小于 leftBound
    final int leftBound = getPaddingLeft();
    // 最大 x 坐標(biāo)值不能大于 rightBound
    final int rightBound = getWidth() - child.getWidth() - getPaddingRight();
    final int newLeft = Math.min(Math.max(left, leftBound), rightBound);
    return newLeft;
}

同樣，clampViewPositionVertical(View child, int top, int dy) 應(yīng)該寫成：

@Override
public int clampViewPositionVertical(View child, int top, int dy) {
    Log.d(TAG, "top=" + top + "; dy=" + dy);
    // 最小 y 坐標(biāo)值不能小于 topBound
    final int topBound = getPaddingTop();
    // 最大 y 坐標(biāo)值不能大于 bottomBound
    final int bottomBound = getHeight() - child.getHeight() - getPaddingBottom();
    final int newTop = Math.min(Math.max(top, topBound), bottomBound);
    return newTop;
}

效果如圖2所示，可以看到無法拖動到超出屏幕邊緣，因為就算 left 或者 top 的值已經(jīng)是負數(shù)的時候，就返回的是 leftBound 和 topBound；當(dāng) left 或者 top 的值已經(jīng)是大于屏幕寬度或者高度的時候，就返回的是 rightBound 和 bottomBound。

圖.2 方塊不能滑動超過屏幕邊緣

ViewDragHelper.Callback 中的方法的使用

ViewDragHelper.Callback 里面一共有 13 個方法。在上面只說了 3 個，下面說一下其他的方法。

1. onViewReleased(View releasedChild, float xvel, float yvel)

這個方法在 View 釋放的時候調(diào)用，就是說這個 View 已經(jīng)不再被拖拽的時候調(diào)用。View 已經(jīng)不再被拖拽的時候，該 View 可能并沒有停止滑動，xvel 和 yvel 表示的是此時該 View 在水平和豎直方向上的速度，單位是px/s。

在使用微信語音通話的時候，可以看到一個方形的懸浮框，這個懸浮框在可以拖動，并且當(dāng)你放手的時候，這個懸浮框就會自動跑到屏幕邊緣。當(dāng)放手時候懸浮框的位置靠近左邊的時候就自動跑到左邊緣，當(dāng)放手時候懸浮框的位置靠近右邊的時候就自動跑到右邊緣。

圖.4 微信語音懸浮框自動貼邊

這個效果使用 ViewDragHelper 也可以很好的實現(xiàn)。也只需要幾行代碼，主要也就是在 onViewReleased 里面進行操作。
先看一下效果，如圖4所示：

圖.4 松手時方塊自動滑到屏幕邊緣

代碼如下：

private int mCurrentTop;
private int mCurrentLeft;

ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
    @Override
    public boolean tryCaptureView(View child, int pointerId) {
          mDragOriLeft = child.getLeft();
          mDragOriTop = child.getTop();
        Log.d(TAG, "tryCaptureView, left=" + child.getLeft() + "; top=" + child.getTop());
        return true;
    }
    @Override
    public int clampViewPositionHorizontal(View child, int left, int dx) {
        Log.d(TAG, "left=" + left + "; dx=" + dx);
        // 最小 x 坐標(biāo)值不能小于 leftBound
        final int leftBound = getPaddingLeft();
        // 最大 x 坐標(biāo)值不能大于 rightBound
        final int rightBound = getWidth() - child.getWidth() - getPaddingRight();
        final int newLeft = Math.min(Math.max(left, leftBound), rightBound);
        mCurrentLeft = newLeft;
        return newLeft;
    }
    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
        Log.d(TAG, "top=" + top + "; dy=" + dy);
        // 最小 y 坐標(biāo)值不能小于 topBound
        final int topBound = getPaddingTop();
        // 最大 y 坐標(biāo)值不能大于 bottomBound
        final int bottomBound = getHeight() - child.getHeight() - getPaddingBottom();
        final int newTop = Math.min(Math.max(top, topBound), bottomBound);
        mCurrentTop = newTop;
        return newTop;
    }
    @Override
    public void onViewReleased(View releasedChild, float xvel, float yvel) {
        super.onViewReleased(releasedChild, xvel, yvel);
        Log.d(TAG, "onViewReleased, xvel=" + xvel + "; yvel=" + yvel);
        int childWidth = releasedChild.getWidth();
        int parentWidth = getWidth();
        int leftBound = getPaddingLeft();// 左邊緣
        int rightBound = getWidth() - releasedChild.getWidth() - getPaddingRight();// 右邊緣
        // 方塊的中點超過 ViewGroup 的中點時，滑動到左邊緣，否則滑動到右邊緣
        if ((childWidth / 2 + mCurrentLeft) < parentWidth / 2) {
            mDragHelper.settleCapturedViewAt(leftBound, mCurrentTop);
        } else {
            mDragHelper.settleCapturedViewAt(rightBound, mCurrentTop);
        }
        invalidate();
    }
};
mDragHelper = ViewDragHelper.create(this, callback);

增加了兩個參數(shù)，分別是 mCurrentTop 和 mCurrentleft ，指代了當(dāng)前拖拽的 View 的當(dāng)前的水平和豎直方向的位置，分別在 clampViewPositionHorizontal 和 clampViewPositionVertical 里面對其賦值；然后在 onViewReleased 中，判斷松手時候的方塊的位置，方塊的中點超過 ViewGroup 的中點時，滑動到左邊緣，否則滑動到右邊緣。通過 ViewDragHelper 的 settleCapturedViewAt 方法來將方塊 View 設(shè)定到某個位置。

這里需要注意的是，僅僅調(diào)用 settleCapturedViewAt 是不能達到目的的，還需要重寫一下 ViewGroup 的 computeScroll 方法。

@Override
public void computeScroll() {
    super.computeScroll();
    if (mDragHelper != null && mDragHelper.continueSettling(true)) {
        invalidate();
    }
}
2. onEdgeTouched(int edgeFlags, int pointerId)、onEdgeDragStarted(int edgeFlags, int pointerId) 和 onEdgeLock(int edgeFlags)

這三個方法都與邊緣相關(guān)，常見的側(cè)滑菜單和滑動返回都可以利用這幾個方法實現(xiàn)。android有一個下拉菜單，就是從屏幕狀態(tài)欄上方往下拉，可以拉出一個菜單。這里利用 ViewDragHelper 的邊緣檢測的幾個方法來實現(xiàn)一個從屏幕下方網(wǎng)上拉而拉出菜單的例子。效果如下：

底部上拉菜單

代碼也很短，只有100行：

public class BottomMenuLayout extends LinearLayout {

    private static final String TAG = "BottomMenuLayout";

    private ViewDragHelper mDragHelper;
    private View mContent;
    private View mBottomMenu;

    public BottomMenuLayout(Context context) {
        super(context, null);
        init();
    }

    public BottomMenuLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs, 0);
        init();
    }

    public BottomMenuLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setOrientation(VERTICAL);
        ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
            @Override
            public boolean tryCaptureView(View child, int pointerId) {
                return child == mBottomMenu;
            }

            @Override
            public void onEdgeTouched(int edgeFlags, int pointerId) {
                super.onEdgeTouched(edgeFlags, pointerId);
                Log.d(TAG, "onEdgeTouched");
            }

            @Override
            public boolean onEdgeLock(int edgeFlags) {
                Log.d(TAG, "onEdgeLock");
                return super.onEdgeLock(edgeFlags);
            }

            @Override
            public void onEdgeDragStarted(int edgeFlags, int pointerId) {
                Log.d(TAG, "onEdgeDragStarted");
                mDragHelper.captureChildView(mBottomMenu, pointerId);
            }


            @Override
            public int clampViewPositionVertical(View child, int top, int dy) {
                return Math.max(getHeight() - child.getHeight(), top);
            }


            @Override
            public void onViewReleased(View releasedChild, float xvel, float yvel) {
                if (yvel <= 0) {
                    mDragHelper.settleCapturedViewAt(0,
                            getHeight() - releasedChild.getHeight());
                } else {
                    mDragHelper.settleCapturedViewAt(0, getHeight());
                }
                invalidate();
            }

        };
        mDragHelper = ViewDragHelper.create(this, callback);
        // 觸發(fā)邊緣為下邊緣
        mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_BOTTOM);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // 假設(shè)第一個子 view 是內(nèi)容區(qū)域，第二個是菜單
        mContent = getChildAt(0);
        mBottomMenu = getChildAt(1);
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mDragHelper != null && mDragHelper.continueSettling(true)) {
            invalidate();
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return mDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (mBottomMenu != null && mContent != null) {
            mBottomMenu.layout(0, getHeight(), mBottomMenu.getMeasuredWidth(),
                    getHeight() + mBottomMenu.getMeasuredHeight());
            mContent.layout(0, 0, mContent.getMeasuredWidth(), mContent.getMeasuredHeight());
        }
    }
}

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<com.testcollection.viewdrag.BottomMenuLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.enhao.testcollection.views.viewdrag.BottomMenuActivity">

    <TextView
        android:id="@+id/content_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="內(nèi)容區(qū)域"/>

    <TextView
        android:id="@+id/menu_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:alpha="0.4"
        android:textColor="@android:color/black"
        android:text="底部菜單區(qū)域"/>

</com.testcollection.viewdrag.BottomMenuLayout>

在tryCaptureView中，捕捉到的是底部菜單的 View，內(nèi)容區(qū)域的 View 不需要捕捉：

@Override
public boolean tryCaptureView(View child, int pointerId) {
    return child == mBottomMenu;
}

在onEdgeDragStarted中，手動捕獲底部菜單的 View，調(diào)用 ViewDragHelper 的 captureChildView 方法。onEdgeDragStarted 表示用戶開始從邊緣拖拽。而 onEdgeTouched 表示開始觸摸到 ViewGroup 的邊緣，此時并不一定開始有拖拽的動作。

@Override
public void onEdgeDragStarted(int edgeFlags, int pointerId) {
    Log.d(TAG, "onEdgeDragStarted");
    mDragHelper.captureChildView(mBottomMenu, pointerId);
}

此處在 tryCaptureView 和 onEdgeDragStarted 中都捕獲了底部菜單的 mBottomMenu，是不是重復(fù)了？答案不是的，這兩個地方都要捕獲。可以試驗一下，假設(shè) tryCaptureView 中直接返回 false，當(dāng)然這個 mBottomMenu 還是能從底部邊緣滑出來，但是當(dāng)滑出來之后，就不能再滑動回去了，因為滑出來之后再往下滑動，就不是執(zhí)行 onEdgeDragStarted 而是執(zhí)行 tryCaptureView 了，所以 tryCaptureView 要也要捕獲到 BottomMenu，即返回 child == mBottomMenu 才行。

在 clampViewPositionVertical 中，返回豎直方向上要到達的位置。
在 onViewReleased 中，判斷y方向的速速，如果<=0，即往上滑，就把菜單完全展現(xiàn)出來，如果往下滑動，就把菜單隱藏。利用 mDragHelper.settleCapturedViewAt 來設(shè)置菜單的位置。

@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
    if (yvel <= 0) {
        mDragHelper.settleCapturedViewAt(0,
                getHeight() - releasedChild.getHeight());
    } else {
        mDragHelper.settleCapturedViewAt(0, getHeight());
    }
    invalidate();

通過 mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_BOTTOM); 來設(shè)置要監(jiān)測的邊緣拖拽。

還有一個方法 onEdgeLock(int edgeFlags) 沒有使用到，這個方法返回 true 會鎖住當(dāng)前的邊界。

3. getViewHorizontalDragRange(View child) 和 getViewVerticalDragRange(View child)

這兩個方法分別返回子 View 在水平和豎直方向可以被拖拽的范圍，返回值的單位是 px。
假設(shè)在前面的方塊（即TextView） 設(shè)置 android:clickable="true"，則再運行程序，會發(fā)現(xiàn)方塊拖不動了，為什么呢？因為觸摸事件被 TextView 消耗掉了。

這篇文章（Android自定義ViewGroup神器-ViewDragHelper）解釋的很清楚：

子View是可被點擊的，那么會觸發(fā)ViewGroup的onInterceptTouchEvent方法。默認情況下，事件會被子View消耗掉，這顯然是有問題的，因為這樣ViewGroup的onTouch方法就不會被調(diào)用，而onTouch方法中正是我們的關(guān)鍵方法：dragHelper.processTouchEvent。

在 ViewDragHelper 的 shouldInterceptTouchEvent 的源碼中

public boolean shouldInterceptTouchEvent(MotionEvent ev) {
    final int action = MotionEventCompat.getActionMasked(ev);
    switch (action) {
        case MotionEvent.ACTION_MOVE: {          
            final int pointerCount = ev.getPointerCount();
            for (int i = 0; i < pointerCount; i++) {           
                final int horizontalDragRange = mCallback.getViewHorizontalDragRange(
                            toCapture);
                final int verticalDragRange = mCallback.getViewVerticalDragRange(toCapture);
                // 如果getViewHorizontalDragRange和getViewVerticalDragRange的返回值都為0，則break
                if (horizontalDragRange == 0 && verticalDragRange == 0) {
                    break;
                }
                
                // tryCaptureViewForDrag方法中會設(shè)置mDragState=STATE_DRAGGING
                if (pastSlop && tryCaptureViewForDrag(toCapture, pointerId)) {
                    break;
                }
            }
            break;
        }
    }
    return mDragState == STATE_DRAGGING;
}

shouldInterceptTouchEvent 返回true的條件是 mDragState == STATE_DRAGGING，然而 mDragState 是在 tryCaptureViewForDrag 方法中被設(shè)置為STATE_DRAGGING的。

所以，如果horizontalDragRange == 0 && verticalDragRange == 0 這個條件一直為true的話，tryCaptureViewForDrag 方法就得不到調(diào)用了。

而 horizontalDragRange 和 verticalDragRange 分別是 Callback 的 getViewHorizontalDragRange 和 getViewVerticalDragRange 方法返回的值，這兩個方法默認情況下都返回 0。

重寫這兩個方法：

@Override
public int getViewHorizontalDragRange(View child) {
    Log.d(TAG, "getViewHorizontalDragRange");
    return getMeasuredWidth() - child.getMeasuredWidth();
}
@Override
public int getViewVerticalDragRange(View child) {
    Log.d(TAG, "getViewVerticalDragRange");
    return getMeasuredHeight() - child.getMeasuredHeight();
}

方塊（即TextView） 就能拖拽并且能響應(yīng)點擊事件了。

參考鏈接：

  1. Android自定義ViewGroup神器-ViewDragHelper

  2. Android ViewDragHelper完全解析 自定義ViewGroup神器

  3. Each Navigation Drawer Hides a ViewDragHelper

  4. 神奇的 ViewDragHelper，讓你輕松定制擁有拖拽能力的 ViewGroup

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容