自己使用ViewDragHelper撸一个类似与QQ的侧滑菜单

在前面的一篇文章我们了解到了ViewDragHelper的一些基本使用——http://www.jianshu.com/p/d296cfa2f902,知道通过调用他的api可以简单的实现一个浮动的屏幕上的控件,那么本篇文章我们玩点更有意思,实现一个类似与QQ的侧滑菜单。


首先,第一步,创建一个类继承View或者ViewGroup,这里继承哪个玩意呢,我们去解剖一下侧滑菜单。


残忍解剖图

残忍解剖之后发现我们应该是继承容器,我们常用的布局LinearLayout和RelativeLayout以及FramLayout他们都是继承自ViewGroup,这里的话我们继承FramLayout,就完成了第一步。

第二步:重写构造方法,在构造方法中做一些初始化操作。


为什么通常是重写三个构造方法呢,我写一个好不好,随你开心,不写都可以,关电脑睡觉!谢谢大家,本文到此结束~~


写三个当然是有原因的!!!!!重要的事情说三遍,重要的自定义写三个构造方法!!!!!!!!!!

1,在代码中直接new一个Custom View实例的时候,会调用第一个构造函数.这个没有任何争议.

2,在xml布局文件中调用Custom View的时候,会调用第二个构造函数.这个也没有争议.

3,在xml布局文件中调用Custom View,并且Custom View标签中还有自定义属性时,这里调用的还是第二个构造函数.

系统默认只会调用Custom View的前两个构造函数,至于第三个构造函数的调用,通常是我们自己在构造函数中主动调用的(例如,在第二个构造函数中调用第三个构造函数).

所以我们的写法是:


一目了然的层级调用


好了我们接下来就不按步骤了,毕竟思维不是固定的。


我们先想想,实现它大概需要那些属性,同样的我们画图来理解,更加简单。


卧槽,这波分析很有道理

这样的分析再给我来一份!!!!!!


说来就来的分析。


好了,分析的差不多了,思路异常情绪,该开始动手操作了。


private static final String TAG="SwipeLayout";

private ViewDragHelper dragHelper;//主角

private Status status= Status.CLOSE;//拖拽状态,默认关闭

private View backView;//侧滑所出现的菜单

private View frontView;//正常内容区域

private int height;//自定义控件高

private int width;//自定义控件宽

private int range;//可滑动范围

public Status getStatus() {

return status;

}

public void setStatus(Status status) {

this.status= status;

}

//枚举三种状态

public static enumStatus{

OPEN,CLOSE,DRAGING

}

我们的主角应该登场了,ViewDragHelper.CallBack,我们对于所有手势操作,监听处理等等都在其内部。



各种操作的回调函数


不要着急!!!!一步一步来实现,我们离胜利已经很近了,这里就不多啰嗦了,详细注释献上,用心去体会。这里先列出几个注意点:

1,在frontView向左拖动时,backView也需要通过offsetLeftAndRight或者Scroller等出现在滑动区域内(向右拖动关闭backView时同理)

2,使用computeScroll使得拖动效果更加平滑流畅

3,无论拖动距离为多少,swipeLayout始终只有三种状态,open,close,draging等

4,需要计算侧滑菜单(backView)的矩形区域和内容的矩形去区域(frontView),通过所占矩形坐标计算

5,需要创建OnSwipeChangeListener接口,用来做拖拽事件监听器,也要用在列表中,实现打开下一个时上一个自动关闭。

6,拦截事件交给ViewDragHelper处理

packagecom.example.xjf.swipedemo;

importandroid.content.Context;

importandroid.graphics.Rect;

importandroid.support.v4.view.ViewCompat;

importandroid.support.v4.widget.ViewDragHelper;

importandroid.util.AttributeSet;

importandroid.util.Log;

importandroid.view.MotionEvent;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.FrameLayout;

/**

* Created by xjf on 2017/10/13.

*/

public class SwipeLayout extends FrameLayout{

public static final String TAG="SwipeLayout";

private ViewDragHelper dragHelper;

private OnSwipeChangeListener swipeChangeListener;

private Status status=Status.CLOSE;//拖拽状态 默认关闭

public Status getStatus() {

return status;

}

public void setStatus(Status status) {

this.status= status;

}

public static enum Status {

OPEN,CLOSE,DRAGING

}

//拖拽事件监听器,为了更好的处理我们的滑动,需要监听各种状态

public static interface OnSwipeChangeListener {

void onDraging(SwipeLayout mSwipeLayout);

void onOpen(SwipeLayout mSwipeLayout);

void onClose(SwipeLayout mSwipeLayout);

void onStartOpen(SwipeLayout mSwipeLayout);

void onStartClose(SwipeLayout mSwipeLayout);

}

//重写三个构造方法

public SwipeLayout(Context context) {

this(context,null);

}

public SwipeLayout(Context context, AttributeSet attrs) {

this(context, attrs,0);

}

public SwipeLayout(Context context, AttributeSet attrs,int defStyleAttr) {

super(context, attrs, defStyleAttr);

dragHelper= ViewDragHelper.create(this,1.0f,callback);

}

private ViewDragHelper.Callbackcallback=new ViewDragHelper.Callback() {

//所有子View都可拖拽

public boolean tryCaptureView(View child,int pointerId) {

return true;

}

//水平拖拽后处理,return的值为child最后要到的位置,所以我们只需要分析好几种情况

public int clampViewPositionHorizontal(View child,int left,int dx) {

if(child ==frontView) {//当前触摸View为frontView时

if(left >0) {//left大于0表示的情景为frontView占满item,backView处于close状态时向右滑动的情景

return 0;

}else if(left < -range) {//left为负数表示的情景为backView处于open状态时向左滑动

return -range;

}

}else if(child ==backView) {//当前触摸View为backView时(只有backView处于open时才能触摸到哦)

if(left < width-range){

return width-range;

}

}

return left;

}

/**

* 子视图位置发生变化时,回调此函数,在此处移动控件位置来实现效果

* 必须弄清楚的一个概念,clampViewPositionHorizontal只能改变当然触摸的View,

* 意思就是当你触摸在frontView时,将frontView左移,那么我们的backView在frontView

* 左移的同时也应该更新其位置,不然的话我们的侧滑菜单就不会出现!!!

*@paramchangedView

*@paramleft

*@paramtop

*@paramdx

*@paramdy

*/

public void onViewPositionChanged(View changedView,int left,int top,int dx,int dy) {

if(changedView ==frontView) {

backView.offsetLeftAndRight(dx);

}else if(changedView ==backView) {

frontView.offsetLeftAndRight(dx);

}

//事件派发

dispatchSwipeEvent();

//兼容低版本,不停绘制屏幕

invalidate();

};

/**

* 在ACTION_UP后调用回调接口中的onViewReleased方法,此方法中一个重要的任务是在ACTION_UP

* 事件后实现view的自动滑动,这里主要是使用了ViewDragHelper中smoothSlideViewTo方法,

* start了ViewDragHelper=中的mScroller:

*@paramreleasedChild

*@paramxvelx轴方向的速率

*@paramyvely轴方向的速率

*/

public void onViewReleased(View releasedChild,float xvel,float yvel) {

if(xvel ==0&&frontView.getLeft() < -range*0.3f) {//调整灵敏度

open();

}else if(xvel <0) {

open();

}else{

close();

}

};

//子View如果是clickable,必须重写的方法,返回一个大于0的数

public int getViewHorizontalDragRange(View child) {

return1;

}

public int getViewVerticalDragRange(View child) {

return1;

}

};

//根据当前状态判断回调事件

protected void dispatchSwipeEvent() {

Status preStatus=status;//当前状态

status=updateStatus();

if(swipeChangeListener!=null){

swipeChangeListener.onDraging(this);

}

if(preStatus!=status&&swipeChangeListener!=null){

if(status==Status.CLOSE){

swipeChangeListener.onClose(this);

}else if(status==Status.OPEN){

swipeChangeListener.onOpen(this);

}else if(status==Status.DRAGING){

if(preStatus==Status.CLOSE){

swipeChangeListener.onStartOpen(this);

}else if(preStatus==Status.OPEN){

swipeChangeListener.onStartClose(this);

}

}

}

}

//更新状态

privateStatus updateStatus() {

intleft=frontView.getLeft();//获取到滑动距离

if(left==0){//为0表示关闭中

returnStatus.CLOSE;

}else if(left==-range){//观察clampViewPositionHorizontal,此时表示打开

returnStatus.OPEN;

}

returnStatus.DRAGING;

}

privateViewbackView;//侧滑菜单

privateViewfrontView;//内容区域

private intheight;//自定义控件布局高

private intwidth;//自定义控件布局宽

private intrange;//侧滑菜单可滑动范围

// 持续平滑动画 高频调用

public void computeScroll() {

// 如果返回true,动画还需要继续

if(dragHelper.continueSettling(true)) {

ViewCompat.postInvalidateOnAnimation(this);

}

};

public voidopen() {

open(true);

}

//打开backView

public void open(boolean isSmooth) {

intfinalLeft = -range;

if(isSmooth) {

//移动时平滑效果

if(dragHelper.smoothSlideViewTo(frontView, finalLeft,0)) {


ViewCompat.postInvalidateOnAnimation(this);

}

}else{

layoutContent(true);

}

}

public void close() {

close(true);

}

//关闭backView

public voidclose(boolean isSmooth) {

intfinalLeft =0;

if(isSmooth) {

if(dragHelper.smoothSlideViewTo(frontView, finalLeft,0)) {

ViewCompat.postInvalidateOnAnimation(this);

}

}else{

layoutContent(false);

}

}

//布局子View

protected void onLayout(boolean changed,int left,int top,int right,int bottom) {

super.onLayout(changed, left, top, right, bottom);

layoutContent(false);

}

/**

*@paramisOpen侧滑菜单是否打开

*/

private void layoutContent(boolean isOpen) {

Rect frontRect = computeFrontViewRect(isOpen);

frontView.layout(frontRect.left, frontRect.top, frontRect.right, frontRect.bottom);

Rect backRect = computeBackViewRect(frontRect);

backView.layout(backRect.left, backRect.top, backRect.right, backRect.bottom);

//调整顺序

//    bringChildToFront(frontView);

}

/**

* 通过内容区域所占矩形坐标计算侧滑菜单的矩形位置区域

*@paramfrontRect内容区域所占矩形

*@return

*/

private Rect computeBackViewRect(Rect frontRect) {

intleft = frontRect.right;

return new Rect(left,0, left +range,height);

}

/**

* 通过菜单打开与否isOpen计算内容区域的矩形区

*@paramisOpen

*@return

*/

private Rect computeFrontViewRect(boolean isOpen) {

intleft =0;

if(isOpen) {

left = -range;

Log.e(TAG,"left:"+left);

}

return new Rect(left,0, left +width,height);

}

//获取两个View

protected voidonFinishInflate() {

super.onFinishInflate();

intchildCount = getChildCount();

if(childCount <2) {

throw new IllegalStateException("you need 2 children view");

}

if(!(getChildAt(0) instanceof ViewGroup) || !(getChildAt(1)  instanceof ViewGroup)) {

throw new IllegalArgumentException("your children must be instance of ViewGroup");

}

backView= getChildAt(0);//侧滑菜单

frontView= getChildAt(1);//内容区域

}

//初始化布局的高height宽width以及可滑动的范围range

protected void onSizeChanged(int w,int h,into ldw,int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

height=frontView.getMeasuredHeight();

width=frontView.getMeasuredWidth();

range=backView.getMeasuredWidth();

}

public booleanonInterceptTouchEvent(android.view.MotionEvent ev) {

returndragHelper.shouldInterceptTouchEvent(ev);

};

@Override

public booleanonTouchEvent(MotionEvent event) {

dragHelper.processTouchEvent(event);

return true;

}

public voidsetSwipeChangeListener(OnSwipeChangeListener swipeChangeListener) {

this.swipeChangeListener= swipeChangeListener;

}

}



到此结束

对了,忘了把xml布局和activity以及适配器代码截图贴出来了。


以上时Activity和Adapter代码



布局代码

最后来个效果图,不知道怎么录制gif


比较尴尬的时每次在csdn上传资源时都默认必选要积分,如果有知道如何取消积分的朋友还望告知,谢谢

这里把源码的下载链接共享给大家:http://download.csdn.net/download/xxsyzszq/10020809

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,227评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,755评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,899评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,257评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,617评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,757评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,982评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,715评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,454评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,666评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,148评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,512评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,156评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,112评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,896评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,809评论 2 279
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,691评论 2 272

推荐阅读更多精彩内容

  • 没有找到自己想要的效果的侧滑菜单,花了些时间研究了一下能完成项目需求就行了。效果如下: 因为逻辑比较简单,总代码量...
    Kerry202阅读 769评论 0 4
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,663评论 0 33
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,296评论 18 399
  • 一. Java基础部分.................................................
    wy_sure阅读 3,731评论 0 11
  • 翻开手机相册,回忆着2015-2016年发生的点点滴滴,苦中有乐,喜忧参半。 欢喜的是我有一帮不离不弃的小...
    盖颖阅读 222评论 0 1