ViewDragHelper详解

来源:互联网 发布:风量流量计软件专利 编辑:程序博客网 时间:2024/06/10 22:29

        在项目开发中经常用到很多效果,包含用户手指去拖动其内部的某个View,在实现过程中需要做到:多手指的处理、加速度检测等。在这种情况下可以使用v4包中提供了ViewDragHelper这样一个类。其实早在2013年谷歌i/o大会上就介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,他们的源码都使用了ViewDragHelper来处理拖动。ViewDragHelper是framework中不为人知却非常有用的一个工具

ViewDragHelper解决了android中手势处理过于复杂的问题,在DrawerLayout出现之前,侧滑菜单都是由第三方开源代码实现的,其中著名的当属MenuDrawer ,MenuDrawer重写onTouchEvent方法来实现侧滑效果,代码量很大,实现逻辑也需要很大的耐心才能看懂。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处理拖动事件的对象 。

用法:

下面部分内容基本是Each Navigation Drawer Hides a ViewDragHelper 一文的翻译。

1.ViewDragHelper的初始化

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

    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

    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.拖动行为的处理

处理横向的拖动:

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

同上,处理纵向的拖动:

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

    @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) {      return child == mDragView1;    }

滑动边缘:

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

    mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);

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

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


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

    @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

    <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    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

参考:泡在网上的日子  发表于2014-09-11 11:53