在前面的一篇文章我们了解到了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以及适配器代码截图贴出来了。
最后来个效果图,不知道怎么录制gif
比较尴尬的时每次在csdn上传资源时都默认必选要积分,如果有知道如何取消积分的朋友还望告知,谢谢
这里把源码的下载链接共享给大家:http://download.csdn.net/download/xxsyzszq/10020809