当前位置： 移动技术网 > IT编程>移动开发>Android > Android ViewDragHelper完全解析 自定义ViewGroup神器

Android ViewDragHelper完全解析 自定义ViewGroup神器

2019年07月24日  | 移动技术网IT编程  | 我要评论

好哥哥 再深点,所向无敌的意思,壹周立波秀 韩寒

一、概述

在自定义viewgroup中，很多效果都包含用户手指去拖动其内部的某个view(eg:侧滑菜单等)，针对具体的需要去写好onintercepttouchevent和ontouchevent这两个方法是一件很不容易的事，需要自己去处理：多手指的处理、加速度检测等等。
好在官方在v4的支持包中提供了viewdraghelper这样一个类来帮助我们方便的编写自定义viewgroup。简单看一下它的注释：

viewdraghelper is a utility class for writing custom viewgroups. it offers a number
of useful operations and state tracking for allowing a user to drag and reposition
views within their parent viewgroup.

本篇博客将重点介绍viewdraghelper的使用，并且最终去实现一个类似drawerlayout的一个自定义的viewgroup。（ps:官方的drawerlayout就是用此类实现）

二、入门小示例

首先我们通过一个简单的例子来看看其快捷的用法，分为以下几个步骤：

  • 创建实例
  • 触摸相关的方法的调用
  • viewdraghelper.callback实例的编写

(一) 自定义viewgroup

package com.zhy.learn.view;

import android.content.context;
import android.support.v4.widget.viewdraghelper;
import android.util.attributeset;
import android.view.motionevent;
import android.view.view;
import android.widget.linearlayout;

/**
 * created by zhy on 15/6/3.
 */
public class vdhlayout extends linearlayout
{
 private viewdraghelper mdragger;

 public vdhlayout(context context, attributeset attrs)
 {
  super(context, attrs);
  mdragger = viewdraghelper.create(this, 1.0f, new viewdraghelper.callback()
  {
   @override
   public boolean trycaptureview(view child, int pointerid)
   {
    return true;
   }

   @override
   public int clampviewpositionhorizontal(view child, int left, int dx)
   {
    return left;
   }

   @override
   public int clampviewpositionvertical(view child, int top, int dy)
   {
    return top;
   }
  });
 }

 @override
 public boolean onintercepttouchevent(motionevent event)
 {
  return mdragger.shouldintercepttouchevent(event);
 }

 @override
 public boolean ontouchevent(motionevent event)
 {
  mdragger.processtouchevent(event);
  return true;
 }
}

可以看到，上面整个自定义viewgroup的代码非常简洁，遵循上述3个步骤：

1、创建实例

mdragger = viewdraghelper.create(this, 1.0f, new viewdraghelper.callback()
  {
  });

创建实例需要3个参数，第一个就是当前的viewgroup，第二个sensitivity，主要用于设置touchslop:

helper.mtouchslop = (int) (helper.mtouchslop * (1 / sensitivity));

可见传入越大，mtouchslop的值就会越小。第三个参数就是callback，在用户的触摸过程中会回调相关方法，后面会细说。

2、触摸相关方法

 @override
 public boolean onintercepttouchevent(motionevent event)
 {
  return mdragger.shouldintercepttouchevent(event);
 }

 @override
 public boolean ontouchevent(motionevent event)
 {
  mdragger.processtouchevent(event);
  return true;
 }

onintercepttouchevent中通过使用mdragger.shouldintercepttouchevent(event)来决定我们是否应该拦截当前的事件。ontouchevent中通过mdragger.processtouchevent(event)处理事件。

3、实现viewdraghelper.callcack相关方法

new viewdraghelper.callback()
  {
   @override
   public boolean trycaptureview(view child, int pointerid)
   {
    return true;
   }

   @override
   public int clampviewpositionhorizontal(view child, int left, int dx)
   {
    return left;
   }

   @override
   public int clampviewpositionvertical(view child, int top, int dy)
   {
    return top;
   }
  }


viewdraghelper中拦截和处理事件时，需要会回调callback中的很多方法来决定一些事，比如：哪些子view可以移动、对个移动的view的边界的控制等等。

上面复写的3个方法：

trycaptureview如何返回ture则表示可以捕获该view，你可以根据传入的第一个view参数决定哪些可以捕获

clampviewpositionhorizontal,clampviewpositionvertical可以在该方法中对child移动的边界进行控制，left , top 分别为即将移动到的位置，比如横向的情况下，我希望只在viewgroup的内部移动，即：最小>=paddingleft，最大<=viewgroup.getwidth()-paddingright-child.getwidth。就可以按照如下代码编写：

 @override
   public int clampviewpositionhorizontal(view child, int left, int dx)
   {
    final int leftbound = getpaddingleft();
    final int rightbound = getwidth() - mdragview.getwidth() - leftbound;

    final int newleft = math.min(math.max(left, leftbound), rightbound);

    return newleft;
   }

经过上述3个步骤，我们就完成了一个简单的自定义viewgroup，可以自由的拖动子view。

简单看一下布局文件

(二) 布局文件

<com.zhy.learn.view.vdhlayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent"
 >

 <textview
  android:layout_margin="10dp"
  android:gravity="center"
  android:layout_gravity="center"
  android:background="#44ff0000"
  android:text="i can be dragged !"
  android:layout_width="100dp"
  android:layout_height="100dp"/>

 <textview
  android:layout_margin="10dp"
  android:layout_gravity="center"
  android:gravity="center"
  android:background="#44ff0000"
  android:text="i can be dragged !"
  android:layout_width="100dp"
  android:layout_height="100dp"/>

 <textview
  android:layout_margin="10dp"
  android:layout_gravity="center"
  android:gravity="center"
  android:background="#44ff0000"
  android:text="i can be dragged !"
  android:layout_width="100dp"
  android:layout_height="100dp"/>

</com.zhy.learn.view.vdhlayout>

我们的自定义viewgroup中有三个textview。

当前效果：

可以看到短短数行代码就可以玩起来了~~~

有了直观的认识以后，我们还需要对viewdraghelper.callback里面的方法做下深入的理解。首先我们需要考虑的是：我们的viewdraghelper不仅仅说只能够去让子view去跟随我们手指移动，我们继续往下学习其他的功能。

三、功能展示

viewdraghelper还能做以下的一些操作：

  • 边界检测、加速度检测(eg：drawerlayout边界触发拉出)
  • 回调drag release（eg：drawerlayout部分，手指抬起，自动展开/收缩）
  • 移动到某个指定的位置(eg:点击button，展开/关闭drawerlayout)

那么我们接下来对我们最基本的例子进行改造，包含上述的几个操作。

首先看一下我们修改后的效果：

简单的为每个子view添加了不同的操作：

第一个view，就是演示简单的移动
第二个view，演示除了移动后，松手自动返回到原本的位置。（注意你拖动的越快，返回的越快）
第三个view，边界移动时对view进行捕获。

好了，看完效果图，来看下代码的修改：

修改后的代码

package com.zhy.learn.view;

import android.content.context;
import android.graphics.point;
import android.support.v4.widget.viewdraghelper;
import android.util.attributeset;
import android.view.motionevent;
import android.view.view;
import android.widget.linearlayout;

/**
 * created by zhy on 15/6/3.
 */
public class vdhlayout extends linearlayout
{
 private viewdraghelper mdragger;

 private view mdragview;
 private view mautobackview;
 private view medgetrackerview;

 private point mautobackoriginpos = new point();

 public vdhlayout(context context, attributeset attrs)
 {
  super(context, attrs);
  mdragger = viewdraghelper.create(this, 1.0f, new viewdraghelper.callback()
  {
   @override
   public boolean trycaptureview(view child, int pointerid)
   {
    //medgetrackerview禁止直接移动
    return child == mdragview || child == mautobackview;
   }

   @override
   public int clampviewpositionhorizontal(view child, int left, int dx)
   {
    return left;
   }

   @override
   public int clampviewpositionvertical(view child, int top, int dy)
   {
    return top;
   }


   //手指释放的时候回调
   @override
   public void onviewreleased(view releasedchild, float xvel, float yvel)
   {
    //mautobackview手指释放时可以自动回去
    if (releasedchild == mautobackview)
    {
     mdragger.settlecapturedviewat(mautobackoriginpos.x, mautobackoriginpos.y);
     invalidate();
    }
   }

   //在边界拖动时回调
   @override
   public void onedgedragstarted(int edgeflags, int pointerid)
   {
    mdragger.capturechildview(medgetrackerview, pointerid);
   }
  });
  mdragger.setedgetrackingenabled(viewdraghelper.edge_left);
 }


 @override
 public boolean onintercepttouchevent(motionevent event)
 {
  return mdragger.shouldintercepttouchevent(event);
 }

 @override
 public boolean ontouchevent(motionevent event)
 {
  mdragger.processtouchevent(event);
  return true;
 }

 @override
 public void computescroll()
 {
  if(mdragger.continuesettling(true))
  {
   invalidate();
  }
 }

 @override
 protected void onlayout(boolean changed, int l, int t, int r, int b)
 {
  super.onlayout(changed, l, t, r, b);

  mautobackoriginpos.x = mautobackview.getleft();
  mautobackoriginpos.y = mautobackview.gettop();
 }

 @override
 protected void onfinishinflate()
 {
  super.onfinishinflate();

  mdragview = getchildat(0);
  mautobackview = getchildat(1);
  medgetrackerview = getchildat(2);
 }
}

布局文件我们仅仅是换了下文本和背景色就不重复贴了。

第一个view基本没做任何修改。

第二个view，我们在onlayout之后保存了最开启的位置信息，最主要还是重写了callback中的onviewreleased，我们在onviewreleased中判断如果是mautobackview则调用settlecapturedviewat回到初始的位置。大家可以看到紧随其后的代码是invalidate();因为其内部使用的是mscroller.startscroll，所以别忘了需要invalidate()以及结合computescroll方法一起。

第三个view，我们在onedgedragstarted回调方法中，主动通过capturechildview对其进行捕获，该方法可以绕过trycaptureview，所以我们的trycaptureview虽然并为返回true，但却不影响。注意如果需要使用边界检测需要添加上mdragger.setedgetrackingenabled(viewdraghelper.edge_left);。

到此，我们已经介绍了callback中常用的回调方法了，当然还有一些方法没有介绍，接下来我们修改下我们的布局文件，我们把我们的textview全部加上clickable=true，意思就是子view可以消耗事件。再次运行，你会发现本来可以拖动的view不动了，（如果有拿button测试的兄弟应该已经发现这个问题了，我希望你看到这了，而不是已经提问了,哈~）。

原因是什么呢？主要是因为，如果子view不消耗事件，那么整个手势（down-move*-up）都是直接进入ontouchevent，在ontouchevent的down的时候就确定了captureview。如果消耗事件，那么就会先走onintercepttouchevent方法，判断是否可以捕获，而在判断的过程中会去判断另外两个回调的方法：getviewhorizontaldragrange和getviewverticaldragrange，只有这两个方法返回大于0的值才能正常的捕获。

所以，如果你用button测试，或者给textview添加了clickable = true ，都记得重写下面这两个方法：

@override
public int getviewhorizontaldragrange(view child)
{
  return getmeasuredwidth()-child.getmeasuredwidth();
}

@override
public int getviewverticaldragrange(view child)
{
  return getmeasuredheight()-child.getmeasuredheight();
}

方法的返回值应当是该childview横向或者纵向的移动的范围，当前如果只需要一个方向移动，可以只复写一个。

到此，我们列一下所有的callback方法，看看还有哪些没用过的：

onviewdragstatechanged

当viewdraghelper状态发生变化时回调（idle,dragging,setting[自动滚动时]）

onviewpositionchanged

当captureview的位置发生改变时回调

onviewcaptured

当captureview被捕获时回调

onviewreleased 已用

onedgetouched

当触摸到边界时回调。

onedgelock

true的时候会锁住当前的边界，false则unlock。

onedgedragstarted 已用

getorderedchildindex

改变同一个坐标（x,y）去寻找captureview位置的方法。（具体在：findtopchildunder方法中）

getviewhorizontaldragrange 已用

getviewverticaldragrange 已用

trycaptureview 已用

clampviewpositionhorizontal 已用

clampviewpositionvertical 已用

ok，至此所有的回调方法都有了一定的认识。

总结下，方法的大致的回调顺序：

shouldintercepttouchevent：

down:
  getorderedchildindex(findtopchildunder)
  ->onedgetouched

move:
  getorderedchildindex(findtopchildunder)
  ->getviewhorizontaldragrange & 
   getviewverticaldragrange(checktouchslop)(move中可能不止一次)
  ->clampviewpositionhorizontal&
   clampviewpositionvertical
  ->onedgedragstarted
  ->trycaptureview
  ->onviewcaptured
  ->onviewdragstatechanged

processtouchevent:

down:
  getorderedchildindex(findtopchildunder)
  ->trycaptureview
  ->onviewcaptured
  ->onviewdragstatechanged
  ->onedgetouched
move:
  ->state==dragging:dragto
  ->state!=dragging:
    onedgedragstarted
    ->getorderedchildindex(findtopchildunder)
    ->getviewhorizontaldragrange&
     getviewverticaldragrange(checktouchslop)
    ->trycaptureview
    ->onviewcaptured
    ->onviewdragstatechanged

ok，上述是正常情况下大致的流程，当然整个过程可能会存在很多判断不成立的情况。

从上面也可以解释，我们在之前textview(clickable=false)的情况下，没有编写getviewhorizontaldragrange方法时，是可以移动的。因为直接进入processtouchevent的down，然后就onviewcaptured、onviewdragstatechanged（进入dragging状态），接下来move就直接dragto了。

而当子view消耗事件的时候，就需要走shouldintercepttouchevent，move的时候经过一系列的判断（getviewhorizontaldragrange，clampviewpositionvertical等），才能够去trycaptureview。

ok，到此viewdraghelper的入门用法我们就介绍结束了，下一篇，我们将使用viewdraghelper去自己实现一个drawerlayout。
有兴趣的也可以根据本文，以及drawerlayout的源码去实现了~

参考链接



~~have a nice day ~~

源码点击下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网