Android实现类似QQ的滑动删除效果

最新推荐文章于 2021-05-26 10:07:41 发布

weixin_34092370

最新推荐文章于 2021-05-26 10:07:41 发布

阅读量159

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/fightingmylife/blog/631056

版权

2019独角兽企业重金招聘Python工程师标准>>>

观察QQ的滑动删除效果，可以猜测可以滑动删除的部分主要包含两个部分，一个是内容区域（用于放置正常显示的view），另一个是操作区域（用于放置删除按钮）。默认情况下，操作区域是不显示的，内容区域的大小是填充整个容器，操作区域始终位于内容区域的右面。当开始滑动的时候，整个容器中的所有子 view都像左滑动，如果操作区域此时是不可见的，设置为可见。

我的实现思路就是自定义一个layout SwipeLayout继承自FrameLayout。SwipeLayout包含两个子view，第一个子view是内容区域，第二个子view是操作区域。滑动效果的控制，主要就是通过检测SwipeLayout的touch事件来实现，这里我不想自己去通过监听touch事件来实现滑动效果，那是一个很繁琐的过程。Android support库里其实已经提供了一个很好的工具类来帮我们做这件事情ViewDragHelper。如果你看过Android原生的 DrawerLayout的代码，就会发现DrawerLayout的滑动效果也是通过ViewDragHelper类实现的。

下面先介绍一下ViewDragHelper类的使用。

首先需要在容器中创建一个ViewDragHelper类的对象

mDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback());

接下来要把容器的事件处理委托给ViewDragHelper对象

@Override  
public boolean onInterceptTouchEvent(MotionEvent event) {  
    if (mDragHelper.shouldInterceptTouchEvent(event)) {  
            return true;  
    }  
    return super.onInterceptTouchEvent(event);  
}  
  
@Override  
public boolean onTouchEvent(MotionEvent event) {  
    mDragHelper.processTouchEvent(event);  
    return true;  
}

ViewDragHelper对象来决定motion event是否是属于拖动过程。如果motion event属于拖动过程，那么触摸事件就交给ViewDragHelper来处理，ViewDragHelper在处理拖动过程的时候，会调用 ViewDragHelper.Callback对象的一系列方法。
我们可以通过ViewDragHelper.Callback来监听以下几种事件：
1.拖动的状态改变
2.被拖动的view的位置改变
3.被拖动的view被放开的时间和位置

ViewDragHelper.Callback还提供了几个方法用来影响拖动过程。
1.控制view可以拖动的范围
2.确定某个view是否可以拖动

好了，直接看代码分析吧。

在SwipeLayout的inflate事件中，获取到contentView和actionView。

@Override  
    protected void onFinishInflate() {  
        contentView = getChildAt(0);  
        actionView = getChildAt(1);  
        actionView.setVisibility(GONE);  
    }

在SwipeLayout的measure事件中，设置拖动的距离为actionView的宽度。

@Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  
        dragDistance = actionView.getMeasuredWidth();  
    }

定义DragHelperCallback extends ViewDragHelper.Callback
DragHelperCallback的tryCaptureView方法，用来确定contentView和actionView是可以拖动的

@Override  
    public boolean tryCaptureView(View view, int i) {  
        return view == contentView || view == actionView;  
    }

DragHelperCallback的onViewPositionChanged在被拖动的view位置改变的时候调用，如果被拖动的view是contentView，我们需要在这里更新actionView的位置，反之亦然。

@Override  
    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {  
        draggedX = left;  
        if (changedView == contentView) {  
            actionView.offsetLeftAndRight(dx);  
        } else {  
            contentView.offsetLeftAndRight(dx);  
        }  
        if (actionView.getVisibility() == View.GONE) {  
            actionView.setVisibility(View.VISIBLE);  
        }  
        invalidate();  
    }

DragHelperCallback的clampViewPositionHorizontal用来限制view在x轴上拖动，要实现水平拖动效果必须要实现这个方法，我们这里因为仅仅需要实现水平拖动，所以没有实现clampViewPositionVertical方法。

@Override  
  public int clampViewPositionHorizontal(View child, int left, int dx) {  
      if (child == contentView) {  
          final int leftBound = getPaddingLeft();  
          final int minLeftBound = -leftBound - dragDistance;  
          final int newLeft = Math.min(Math.max(minLeftBound, left), 0);  
          return newLeft;  
      } else {  
          final int minLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() - dragDistance;  
          final int maxLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() + getPaddingRight();  
          final int newLeft = Math.min(Math.max(left, minLeftBound), maxLeftBound);  
          return newLeft;  
      }  
  }

DragHelperCallback的getViewHorizontalDragRange方法用来限制view可以拖动的范围

@Override  
    public int getViewHorizontalDragRange(View child) {  
        return dragDistance;  
    }

DragHelperCallback的onViewReleased方法中，根据滑动手势的速度以及滑动的距离来确定是否显示actionView。smoothSlideViewTo方法用来在滑动手势之后实现惯性滑动效果

@Override  
    public void onViewReleased(View releasedChild, float xvel, float yvel) {  
        super.onViewReleased(releasedChild, xvel, yvel);  
        boolean settleToOpen = false;  
        if (xvel > AUTO_OPEN_SPEED_LIMIT) {  
            settleToOpen = false;  
        } else if (xvel < -AUTO_OPEN_SPEED_LIMIT) {  
            settleToOpen = true;  
        } else if (draggedX <= -dragDistance / 2) {  
            settleToOpen = true;  
        } else if (draggedX > -dragDistance / 2) {  
            settleToOpen = false;  
        }  
  
        final int settleDestX = settleToOpen ? -dragDistance : 0;  
        viewDragHelper.smoothSlideViewTo(contentView, settleDestX, 0);  
        ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);  
    }

完整代码：

public class SwipeLayout extends LinearLayout {

    private ViewDragHelper viewDragHelper;
    private View contentView;
    private View actionView;
    private int dragDistance;
    private final double AUTO_OPEN_SPEED_LIMIT = 800.0;
    private int draggedX;

    public SwipeLayout(Context context) {
        this(context, null);
    }

    public SwipeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        viewDragHelper = ViewDragHelper.create(this, new DragHelperCallback());
    }

    @Override
    protected void onFinishInflate() {
        contentView = getChildAt(0);
        actionView = getChildAt(1);
        actionView.setVisibility(GONE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        dragDistance = actionView.getMeasuredWidth();
    }

    private class DragHelperCallback extends ViewDragHelper.Callback {

        @Override
        public boolean tryCaptureView(View view, int i) {
            return view == contentView || view == actionView;
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            draggedX = left;
            if (changedView == contentView) {
                actionView.offsetLeftAndRight(dx);
            } else {
                contentView.offsetLeftAndRight(dx);
            }
            if (actionView.getVisibility() == View.GONE) {
                actionView.setVisibility(View.VISIBLE);
            }
            invalidate();
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            if (child == contentView) {
                final int leftBound = getPaddingLeft();
                final int minLeftBound = -leftBound - dragDistance;
                final int newLeft = Math.min(Math.max(minLeftBound, left), 0);
                return newLeft;
            } else {
                final int minLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() - dragDistance;
                final int maxLeftBound = getPaddingLeft() + contentView.getMeasuredWidth() + getPaddingRight();
                final int newLeft = Math.min(Math.max(left, minLeftBound), maxLeftBound);
                return newLeft;
            }
        }

        @Override
        public int getViewHorizontalDragRange(View child) {
            return dragDistance;
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            boolean settleToOpen = false;
            if (xvel > AUTO_OPEN_SPEED_LIMIT) {
                settleToOpen = false;
            } else if (xvel < -AUTO_OPEN_SPEED_LIMIT) {
                settleToOpen = true;
            } else if (draggedX <= -dragDistance / 2) {
                settleToOpen = true;
            } else if (draggedX > -dragDistance / 2) {
                settleToOpen = false;
            }

            final int settleDestX = settleToOpen ? -dragDistance : 0;
            viewDragHelper.smoothSlideViewTo(contentView, settleDestX, 0);
            ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if(viewDragHelper.shouldInterceptTouchEvent(ev)) {
            return true;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        viewDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
}

引用它：

<com.github.lzyzsd.swipelayoutexample.SwipeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#ffffff">

            <TextView android:text="@string/hello_world"
                android:textSize="20sp"
                android:paddingLeft="20dp"
                android:layout_gravity="center_vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="150dp"
            android:layout_height="50dp">
            <RelativeLayout
                android:id="@+id/delete_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/trash"/>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/view_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#c2c2c2">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/magnifier"/>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/star_button"
                android:clickable="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#aaffff">
                <View
                    android:layout_centerInParent="true"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:background="@drawable/star"/>
            </RelativeLayout>
        </LinearLayout>
    </com.github.lzyzsd.swipelayoutexample.SwipeLayout>

转载于:https://my.oschina.net/fightingmylife/blog/631056