ViewDragHelper詳解

時間  2019-11-13
標籤 viewdraghelper 詳解 简体版
原文   原文鏈接

2013年穀歌i/o大會上介紹了兩個新的layout： SlidingPaneLayout和DrawerLayout，如今這倆個類被普遍的運用，其實研究他們的源碼你會發現這兩個類都運用了ViewDragHelper來處理拖動。ViewDragHelper是framework中鮮爲人知卻很是有用的一個工具。html

ViewDragHelper解決了Android中手勢處理過於複雜的問題，在DrawerLayout出現以前，側滑菜單都是由第三方開源代碼實現的，其中著名的當屬MenuDrawer ，MenuDrawer重寫onTouchEvent方法來實現側滑效果，代碼量很大，實現邏輯也須要很大的耐心才能看懂。若是每一個開發人員都從這麼原始的步奏開始作起，那對於安卓生態是至關不利的。因此說ViewDragHelper等的出現反映了安卓開發框架已經開始向成熟的方向邁進。java

本文先介紹ViewDragHelper的基本用法，而後介紹一個能真正體現ViewDragHelper實用性的例子。android

其實ViewDragHelper並非第一個用於分析手勢處理的類，gesturedetector也是，可是在和拖動相關的手勢分析方面gesturedetector只能說是勉爲其難。git

關於ViewDragHelper有以下幾點：github

ViewDragHelper.Callback是鏈接ViewDragHelper與view之間的橋樑（這個view通常是指擁子view的容器即parentView）；框架

   ViewDragHelper的實例是經過靜態工廠方法建立的；ide

   你可以指定拖動的方向；工具

   ViewDragHelper能夠檢測到是否觸及到邊緣；佈局

   ViewDragHelper並非直接做用於要被拖動的View，而是使其控制的視圖容器中的子View能夠被拖動，若是要指定某個子view的行爲，須要在Callback中想辦法；post

   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做爲成員變量：

  1. public class DragLayout extends LinearLayout {  
private final ViewDragHelper mDragHelper;  
private View mDragView;  
public DragLayout(Context context) {  
  this(context, null);  
}  
public DragLayout(Context context, AttributeSet attrs) {  
  this(context, attrs, 0);  
}  
public DragLayout(Context context, AttributeSet attrs, int defStyle) {  
  super(context, attrs, defStyle);  
}  

     

建立一個帶有回調接口的ViewDragHelper

  1. public DragLayout(Context context, AttributeSet attrs, int defStyle) {  
  super(context, attrs, defStyle);  
  mDragHelper = ViewDragHelper.create(this, 1.0f, new DragHelperCallback());  
}  

     

其中1.0f是敏感度參數參數越大越敏感。第一個參數爲this，表示該類生成的對象，他是ViewDragHelper的拖動處理對象，必須爲ViewGroup。

要讓ViewDragHelper可以處理拖動須要將觸摸事件傳遞給ViewDragHelper，這點和gesturedetector是同樣的：

@Override  
public boolean onInterceptTouchEvent(MotionEvent ev) {  
  final int action = MotionEventCompat.getActionMasked(ev);  
  if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {  
      mDragHelper.cancel();  
      return false;  
  }  
  return mDragHelper.shouldInterceptTouchEvent(ev);  
}  
@Override  
public boolean onTouchEvent(MotionEvent ev) {  
  mDragHelper.processTouchEvent(ev);  
  return true;  
}  

 

接下來，你就能夠在回調中處理各類拖動行爲了。

 

2.拖動行爲的處理

處理橫向的拖動：

在DragHelperCallback中實現clampViewPositionHorizontal方法， 而且返回一個適當的數值就能實現橫向拖動效果，clampViewPositionHorizontal的第二個參數是指當前拖動子view應該到達的x座標。因此按照常理這個方法原封返回第二個參數就能夠了，但爲了讓被拖動的view遇到邊界以後就不在拖動，對返回的值作了更多的考慮。

  1. @Override  
public int clampViewPositionHorizontal(View child, int left, int dx) {  
  Log.d("DragLayout", "clampViewPositionHorizontal " + left + "," + dx);  
  final int leftBound = getPaddingLeft();  
  final int rightBound = getWidth() - mDragView.getWidth();  
  final int newLeft = Math.min(Math.max(left, leftBound), rightBound);  
  return newLeft;  
}  

     

 

同上，處理縱向的拖動：

在DragHelperCallback中實現clampViewPositionVertical方法，實現過程同clampViewPositionHorizontal

  1. @Override  
public int clampViewPositionVertical(View child, int top, int dy) {  
  final int topBound = getPaddingTop();  
  final int bottomBound = getHeight() - mDragView.getHeight();  
  final int newTop = Math.min(Math.max(top, topBound), bottomBound);  
  return newTop;  
}  

     


 

clampViewPositionHorizontal 和 clampViewPositionVertical必需要重寫，由於默認它返回的是0。事實上咱們在這兩個方法中所能作的事情頗有限。 我的以爲這兩個方法的做用就是給了咱們從新定義目的座標的機會。

經過DragHelperCallback的tryCaptureView方法的返回值能夠決定一個parentview中哪一個子view能夠拖動，如今假設有兩個子views (mDragView1和mDragView2)  ，以下實現tryCaptureView以後，則只有mDragView1是能夠拖動的。

@Override

public boolean tryCaptureView(View child, int pointerId) {

  returnchild == mDragView1;

}


滑動邊緣:

分爲滑動左邊緣仍是右邊緣：EDGE_LEFT和EDGE_RIGHT，下面的代碼設置了能夠處理滑動左邊緣：

  1. mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);  

     

假如如上設置，onEdgeTouched方法會在左邊緣滑動的時候被調用，這種狀況下通常都是沒有和子view接觸的狀況。

  1. @Override  
public void onEdgeTouched(int edgeFlags, int pointerId) {  
    super.onEdgeTouched(edgeFlags, pointerId);  
    Toast.makeText(getContext(), "edgeTouched", Toast.LENGTH_SHORT).show();  
}  

     

若是你想在邊緣滑動的時候根據滑動距離移動一個子view，能夠經過實現onEdgeDragStarted方法，並在onEdgeDragStarted方法中手動指定要移動的子View

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

     

ViewDragHelper讓咱們很容易實現一個相似於YouTube視頻瀏覽效果的控件，效果以下：

 

代碼中的關鍵點：

1.tryCaptureView返回了惟一能夠被拖動的header view；

2.拖動範圍drag range的計算是在onLayout中完成的；

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

4.在computeScroll中使用continueSettling方法（由於ViewDragHelper使用了scroller）

5.smoothSlideViewTo方法來完成拖動結束後的慣性操做。

須要注意的是代碼仍然有很大改進空間。

activity_main.xml

  1. <FrameLayout  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent">  
    <ListView  
            android:id="@+id/listView"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:tag="list"  
            />  
    <com.example.vdh.YoutubeLayout  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:id="@+id/youtubeLayout"  
            android:orientation="vertical"  
            android:visibility="visible">  
        <TextView  
                android:id="@+id/viewHeader"  
                android:layout_width="match_parent"  
                android:layout_height="128dp"  
                android:fontFamily="sans-serif-thin"  
                android:textSize="25sp"  
                android:tag="text"  
                android:gravity="center"  
                android:textColor="@android:color/white"  
                android:background="#AD78CC"/>  
        <TextView  
                android:id="@+id/viewDesc"  
                android:tag="desc"  
                android:textSize="35sp"  
                android:gravity="center"  
                android:text="Loreum Loreum"  
                android:textColor="@android:color/white"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:background="#FF00FF"/>  
    </com.example.vdh.YoutubeLayout>  
</FrameLayout>  

     

YoutubeLayout.java

  1. public class YoutubeLayout extends ViewGroup {  
private final ViewDragHelper mDragHelper;  
private View mHeaderView;  
private View mDescView;  
private float mInitialMotionX;  
private float mInitialMotionY;  
private int mDragRange;  
private int mTop;  
private float mDragOffset;  
public YoutubeLayout(Context context) {  
  this(context, null);  
}  
public YoutubeLayout(Context context, AttributeSet attrs) {  
  this(context, attrs, 0);  
}  
@Override  
protected void onFinishInflate() {  
    mHeaderView = findViewById(R.id.viewHeader);  
    mDescView = findViewById(R.id.viewDesc);  
}  
public YoutubeLayout(Context context, AttributeSet attrs, int defStyle) {  
  super(context, attrs, defStyle);  
  mDragHelper = ViewDragHelper.create(this, 1f, new DragHelperCallback());  
}  
public void maximize() {  
    smoothSlideTo(0f);  
}  
boolean smoothSlideTo(float slideOffset) {  
    final int topBound = getPaddingTop();  
    int y = (int) (topBound + slideOffset * mDragRange);  
    if (mDragHelper.smoothSlideViewTo(mHeaderView, mHeaderView.getLeft(), y)) {  
        ViewCompat.postInvalidateOnAnimation(this);  
        return true;  
    }  
    return false;  
}  
private class DragHelperCallback extends ViewDragHelper.Callback {  
  @Override  
  public boolean tryCaptureView(View child, int pointerId) {  
        return child == mHeaderView;  
  }  
    @Override  
  public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {  
      mTop = top;  
      mDragOffset = (float) top / mDragRange;  
        mHeaderView.setPivotX(mHeaderView.getWidth());  
        mHeaderView.setPivotY(mHeaderView.getHeight());  
        mHeaderView.setScaleX(1 - mDragOffset / 2);  
        mHeaderView.setScaleY(1 - mDragOffset / 2);  
        mDescView.setAlpha(1 - mDragOffset);  
        requestLayout();  
  }  
  @Override  
  public void onViewReleased(View releasedChild, float xvel, float yvel) {  
      int top = getPaddingTop();  
      if (yvel > 0 || (yvel == 0 && mDragOffset > 0.5f)) {  
          top += mDragRange;  
      }  
      mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);  
  }  
  @Override  
  public int getViewVerticalDragRange(View child) {  
      return mDragRange;  
  }  
  @Override  
  public int clampViewPositionVertical(View child, int top, int dy) {  
      final int topBound = getPaddingTop();  
      final int bottomBound = getHeight() - mHeaderView.getHeight() - mHeaderView.getPaddingBottom();  
      final int newTop = Math.min(Math.max(top, topBound), bottomBound);  
      return newTop;  
  }  
}  
@Override  
public void computeScroll() {  
  if (mDragHelper.continueSettling(true)) {  
      ViewCompat.postInvalidateOnAnimation(this);  
  }  
}  
@Override  
public boolean onInterceptTouchEvent(MotionEvent ev) {  
  final int action = MotionEventCompat.getActionMasked(ev);  
  if (( action != MotionEvent.ACTION_DOWN)) {  
      mDragHelper.cancel();  
      return super.onInterceptTouchEvent(ev);  
  }  
  if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {  
      mDragHelper.cancel();  
      return false;  
  }  
  final float x = ev.getX();  
  final float y = ev.getY();  
  boolean interceptTap = false;  
  switch (action) {  
      case MotionEvent.ACTION_DOWN: {  
          mInitialMotionX = x;  
          mInitialMotionY = y;  
            interceptTap = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);  
          break;  
      }  
      case MotionEvent.ACTION_MOVE: {  
          final float adx = Math.abs(x - mInitialMotionX);  
          final float ady = Math.abs(y - mInitialMotionY);  
          final int slop = mDragHelper.getTouchSlop();  
          if (ady > slop && adx > ady) {  
              mDragHelper.cancel();  
              return false;  
          }  
      }  
  }  
  return mDragHelper.shouldInterceptTouchEvent(ev) || interceptTap;  
}  
@Override  
public boolean onTouchEvent(MotionEvent ev) {  
  mDragHelper.processTouchEvent(ev);  
  final int action = ev.getAction();  
    final float x = ev.getX();  
    final float y = ev.getY();  
    boolean isHeaderViewUnder = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);  
    switch (action & MotionEventCompat.ACTION_MASK) {  
      case MotionEvent.ACTION_DOWN: {  
          mInitialMotionX = x;  
          mInitialMotionY = y;  
          break;  
      }  
      case MotionEvent.ACTION_UP: {  
          final float dx = x - mInitialMotionX;  
          final float dy = y - mInitialMotionY;  
          final int slop = mDragHelper.getTouchSlop();  
          if (dx * dx + dy * dy < slop * slop && isHeaderViewUnder) {  
              if (mDragOffset == 0) {  
                  smoothSlideTo(1f);  
              } else {  
                  smoothSlideTo(0f);  
              }  
          }  
          break;  
      }  
  }  
  return isHeaderViewUnder && isViewHit(mHeaderView, (int) x, (int) y) || isViewHit(mDescView, (int) x, (int) y);  
}  
private boolean isViewHit(View view, int x, int y) {  
    int[] viewLocation = new int[2];  
    view.getLocationOnScreen(viewLocation);  
    int[] parentLocation = new int[2];  
    this.getLocationOnScreen(parentLocation);  
    int screenX = parentLocation[0] + x;  
    int screenY = parentLocation[1] + y;  
    return screenX >= viewLocation[0] && screenX < viewLocation[0] + view.getWidth() &&  
            screenY >= viewLocation[1] && screenY < viewLocation[1] + view.getHeight();  
}  
@Override  
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
    measureChildren(widthMeasureSpec, heightMeasureSpec);  
    int maxWidth = MeasureSpec.getSize(widthMeasureSpec);  
    int maxHeight = MeasureSpec.getSize(heightMeasureSpec);  
    setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, 0),  
            resolveSizeAndState(maxHeight, heightMeasureSpec, 0));  
}  
@Override  
protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  mDragRange = getHeight() - mHeaderView.getHeight();  
    mHeaderView.layout(  
            0,  
            mTop,  
            r,  
            mTop + mHeaderView.getMeasuredHeight());  
    mDescView.layout(  
            0,  
            mTop + mHeaderView.getMeasuredHeight(),  
            r,  
            mTop  + b);  
}  

     


代碼下載地址：https://github.com/flavienlaurent/flavienlaurent.com

 

不論是menudrawer 仍是本文實現的DragLayout都體現了一種設計哲學，便可拖動的控件都是封裝在一個自定義的Layout中的，爲何這樣作？爲何不直接將ViewDragHelper.create(this, 1f, new DragHelperCallback())中的this替換成任何已經佈局好的容器，這樣這個容器中的子View就能被拖動了，而每每是單獨定義一個Layout來處理?我的認爲若是在通常的佈局中去拖動子view並不會出現什麼問題，只是本來規則的世界被打亂了，而單獨一個Layout來完成拖動，無非是說，他原本就沒有什麼規則可言，拖動一下也無妨。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程