Android ViewDragHelper完全解析 自定义ViewGroup神器
一、概述
在自定义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 ~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 7大实用企业网站推广方法推荐
下一篇: Wing IDE建立项目的步骤