仿QQ滑动删除消息效果

前段时间写了点关于滑动冲突的解决心得。今天来讲讲怎么实现QQ滑动删除item的效果。这个效果与滑动冲突的使用有关。

对于滑动冲突，之前写的已经很明白了，这里就不多说了。去网上找了找，关于仿QQ滑动删除的讲解和示例还是不少。

但是，我准备自己独立写一个，既为了学习，也为了找点成就感

我的思路是利用事件拦截机制来实现，同时使外层控件实现上下滑动，内层控件实现左右滑动删除的功能：

外层控件：

1.对于down事件，listview不拦截

2.move事件需要选择性拦截，也就是当在Y方向上滑动时，进行拦截，否则不拦截

内层控件

1.内层控件根据滑动的距离实现滑动删除功能，决定是否消费事件

对于外层控件，继承listview，覆盖onInterceptToucEvent方法。

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //velocityTracker.addMovement(ev);
        Boolean intercept = false;
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mX = (int)ev.getX();
                mY = (int)ev.getY();
                currentItemPosition=pointToPosition(mX,mY);
                currentItem = (ItemView)getChildAt(currentItemPosition - getFirstVisiblePosition());
                eventFlag = 0;
                return  super.onInterceptTouchEvent(ev);
            case MotionEvent.ACTION_MOVE:
                LogUtils.log_e("down");
                int x =(int)ev.getX();
                int y =(int)ev.getY();
                int dx = Math.abs(x - mX);
                int dy = Math.abs(y - mY);
                //
                mX = x;
                mY = y;

                if (eventFlag == 0){
                    Log.e("dx"+dx,"   dy"+dy);
                    if(dx > dy){
                        Log.e("2","zuoyou");
                        eventFlag = 1;//
                     }else{
                        if (dx ==dy && dx == 0){
                            return false;//没有滑动，不拦截，没有此处会导致左右滑动切换到上下滑动
                        }else {
                            eventFlag = 2;
                            return true;//上下滑动时拦截
                        }
                    }
                }else {
                    if (eventFlag == 1){
                        break;
                    }else {//=2
                        return  true;//
                    }
                }

            case MotionEvent.ACTION_UP:
                Log.e("listup"," up");
                if(eventFlag == 2 || eventFlag == 0){
                    return  super.onInterceptTouchEvent(ev);
                }
                break;
            default:
                break;
        }
        return false;
    }

对于item，我自己定义了一个容器控件，继承自linearlayout，有利于后面的扩展。linearlayout主要逻辑是onTouchevent方法。其次是滑动删除的功能部分。

@Override
    public boolean onTouchEvent(MotionEvent event) {

        velocityTracker.addMovement(event);
        Boolean consume = false;
        int x = (int)event.getX();
        int y = (int)event.getY();

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                currentItemPostion = ListViewEx.currentItemPosition;
                eventFlag = 0;
                maxDY = 0;
                consume = true;//
                break;

            case MotionEvent.ACTION_MOVE:
                //Log.e("iv","touch   move");
                dx = Math.abs(x - mX);
                dy = Math.abs(y - mY);
                Log.e("iv"+dx,"touch   move"+dy);
                //if判断导致左右滑动不连续，因为touchSlop太大，为12
                /*if(Math.sqrt(dx*dx+dy*dy)<touchSlop){
                    Log.e("iv","touch slop"+touchSlop);
                    if (eventFlag ==0){
                        consume =  false;
                        break;
                    }else {
                        consume =  true;
                        break;
                    }
                }*/

                if (dx < 1 && dy<1 && eventFlag == 0){//没有上下和左右滑动，不消费
                    consume = false;
                    break;
                }
                int scrollDistanceX = mX - x;
                scrollBy(scrollDistanceX,0);
                eventFlag = 1;//发生了shangxia滑动
                consume = true;
                maxDY = dy>maxDY?dy:maxDY;//记录Y方向发生的最大滑动距离，如果小于1；表示不肯能发生上下滑动
                break;

            case MotionEvent.ACTION_UP:
                Log.e("iv", "toch    up");
                if (eventFlag == 1){
                    deleteItem(velocityTracker);
                    consume = false;
                }else {
                    if (maxDY <= 1){//上下左右都不滑动，响应点击事件
                        myOnItemClickListenner.click(getChildAt(0),currentItemPostion);
                        consume = false;
                    }else {
                        consume = false;
                    }
                }
                break;
            default:
                if (eventFlag == 1){
                    deleteItem(velocityTracker);
                    consume = true;
                }else {
                    consume = false;
                }
                break;
        }
        mX = x;
        mY = y;
        Log.e("iv"+eventFlag,""+consume);
        return consume;
    }

    @Override
    public void computeScroll() {
        if(scroller.computeScrollOffset()){
            scrollTo(scroller.getCurrX(),scroller.getCurrY());
            postInvalidate();
        }else {
            if (deleteFlag == true){
                MainActivity.res.remove(currentItemPostion);
                MainActivity.myAdapter.notifyDataSetChanged();
                deleteFlag = false;
                scrollTo(0,getScrollY());
            }

        }
    }


    public   void smoothScrollTo(int destX,int destY){
        //getScrollX()就是当前view的左上角相对于母视图的左上角的X轴偏移量,会随着view内容的滚动而改变
        int scrollX = getScrollX();
        int scrollY = getScrollY();
        int deltaX = destX - scrollX;
        scroller.startScroll(scrollX, getScrollY(), deltaX, 0, 300);
        invalidate();
    }

    private void deleteItem(VelocityTracker velocity) {

        float scrollPosition = (float)getScrollX()/getWidth();
        Log.e("dlete", "true" + scrollPosition);
        if (Math.abs(scrollPosition) <0.75){
            velocity.computeCurrentVelocity(100);
            int vX=(int)velocity.getXVelocity();
            if (vX>=150){//zuo huadong
                smoothScrollTo(-getWidth(), 0);
                deleteFlag = true;
            }else {
                if (vX <= -150){
                    smoothScrollTo(getWidth(), 0);
                    deleteFlag = true; 
                }else {
                    smoothScrollTo(0,0);
                }
            }
        }else {
            if (getScrollX()>0){//移向左边
                smoothScrollTo(getWidth(), 0);
            }else{//移向右边
                smoothScrollTo(-getWidth(), 0);
            }
            deleteFlag = true;
        }
    }

其中，布局为

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context="com.example.zhangchao.extendedlistview.MainActivity">

    <com.example.zhangchao.extendedlistview.ListViewEx
        android:id="@+id/lv_ex"
        android:cacheColorHint="#00000000"
        android:listSelector="#00000000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

由于电脑比较垃圾，不能开模拟器，就不上效果了。

这里说明一点，我在写出了效果之后，与网上的实现方法进行了对比。

1.我的实现方法与网上的都使用Scroller来实现滑动效果。

2.都是根据滑动方向来分别滑动冲突

3.在滑动冲突的解决上，网上的方法更加简单，主要是因为我的滑动冲突需要事件的拦截机制来配合解决。网上的的方法只需要在外层控件中就可以解决滑动冲突。

4.我的方法有助于理解怎么解决父子控件间的滑动冲突和事件的传播机制。