QQ侧滑删除功能原理以及冲突解决

旧城等待， 2022-06-18 12:57 290阅读 0赞

## 侧滑概要 ##

前面几篇文章中已经学习了如何自定义 View / ViewGroup，学习了 View / ViewGroup 的事件分发机制，以及自定义 ViewGroup 的工具类 ViewDragHelper。那么今天，利用前面所学的，自己来做一个例子，仿QQ的侧滑删除功能。

先看看效果图

![侧滑删除效果图][SouthEast]

效果图中有几点需要说明  
1. 从右往左滑动的时候，当删除按钮全部显示出来的时候，整个 Item 会滑动到最左边。如果删除按钮没有全部显示，整个 Item 会返回到原来的位置。  
2. 在侧滑进行的时候，效果图中也进行了上下滑动，但是 RecyclerView 并没有上下滑动，因为我们解决了 Item 和 RecyclerView 的滑动冲突。

布局文件

<?xml version="1.0" encoding="utf-8"?>
    <com.ckt.viewdraghelperdemo.SwipeLinearLayout android:id="@+id/swipe_container" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="60dp">
    
        <TextView android:id="@+id/tv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="这是内容区域" android:textSize="18sp"/>
    
        <Button android:id="@+id/btn_delete" android:background="@color/colorAccent" android:layout_width="100dp" android:layout_height="match_parent" android:gravity="center" android:text="删除" android:textSize="18sp"/>
    
        <Button android:id="@+id/btn_unread" android:background="#9E9E9E" android:layout_width="100dp" android:layout_height="match_parent" android:gravity="center" android:text="未读" android:textSize="18sp"/>
    </com.ckt.viewdraghelperdemo.SwipeLinearLayout>

## 完成基本的侧滑实现 ##

public class SwipeLinearLayout extends LinearLayout { 
    
        private static final String TAG = "david";
        private ViewDragHelper mViewDragHelper;
    
        public SwipeLinearLayout(Context context) {
            this(context, null);
        }
    
        public SwipeLinearLayout(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        private void init() {
            // set orientation of LinearLayout always to be horizontal
            setOrientation(LinearLayout.HORIZONTAL);
            mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
                @Override
                public boolean tryCaptureView(View child, int pointerId) {
                    return child == getContentView();
                }
    
                @Override
                public int clampViewPositionHorizontal(View child, int left, int dx) {
                    int leftOffset = 0;
                    for (int i = 1; i < getChildCount(); i++) {
                        leftOffset += getChildAt(i).getWidth();
                    }
                    int leftBound = getPaddingLeft() - leftOffset;
                    int rightBound = getWidth() - getPaddingRight() - child.getWidth();
                    return Math.min(rightBound, Math.max(left, leftBound));
                }
    
                @Override
                public int clampViewPositionVertical(View child, int top, int dy) {
                    int topBound = getPaddingTop();
                    int bottomBound = getHeight() - getPaddingBottom() - child.getHeight();
                    return Math.min(bottomBound, Math.max(topBound, top));
                }
    
                @Override
                public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
                    if (changedView == getContentView()) {
                        for (int i = 1; i < getChildCount(); i++) {
                            View child = getChildAt(i);
                            child.layout(child.getLeft() + dx, 0, child.getRight() + dx, getHeight());
                        }
                    }
                }
    
                @Override
                public int getViewHorizontalDragRange(View child) {
                    int range = 0;
                    for (int i = 1; i < getChildCount(); i++) {
                        range += getChildAt(i).getWidth();
                    }
                    return range;
                }
            });
        }
    
        private View getContentView() {
            return getChildAt(0);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return mViewDragHelper.shouldInterceptTouchEvent(ev);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            mViewDragHelper.processTouchEvent(event);
            return true;
        }
    }

代码解析：  
1. 首先，SwipeLinearLayout 选择继承 LinearLayout，是因为我想让所有的 child view 水平排列，因此，在 init() 方法中，调用 setOrientation(LinearLayout.HORIZONTAL) 强制设置水平方向排列。  
2. 从 tryCaptureView() 回调实现中，可以看出我只想移动第一个 child view （布局中的 TextView），并且我在 clampViewPositionHorizontal() 和 clampViewPositionVertical() 回调中，让 TextView 只能水平向左滑动，并且滑动的距离只能是布局中两个 Button的宽度之和。  
3. 由于我们可能在后面代码中，对 TextView 调用 setOnClickListener() 方法，这样就会让 TextView 获取到 ACTION\_DOWN 以及以后的事件，那么如果我们要完成对 TextView 的滑动，就需要在 onInterceptTouchEvent() 中调用 mViewDragHelper.shouldInterceptTouchEvent(ev) 来截断 ACTION\_MOVE 事件，并且还要实现 getViewHorizontalDragRange()返回值大于0。  
4. 实现了前三个步骤后，我们是可以滑动 TextView 了，但是两个 Button 还没有一起移动，所以需要实现 onViewPositionChanged() 来让2个 Button 跟着 TextView 移动。

## 滑动冲突 ##

如果你运行上面的代码，你会发现，在侧滑 Item 的时候，你也可以上下滑动 RecyclerView，这很明显已经出现冲突了。那么现在我们来解决这个冲突。由之前的分析可以明白，当我们滑动 TextView 的时候，ACTION\_MOVE 事件是被 SwipeLinearLayout 截断的，这样所有的 ACTION\_MOVE 事件只会由 RecyclerView 的 onInterceptTouchEvent() 传入到 SwipeLinearLayout 的 onTouchEvent() 中来，而 RecylerView onInterceptTouchEvent() 对于 ACTION\_MOVE 事件，只会当我们滑动的时候，在 y 方向的距离明显大约 x 方向的距离的时候，才会截断事件，所以 SwipeLinearLayout 的 onTouchEvent() 方法中，需要判断在 x 方向的距离明显大于 y 方向的距离的时候，调用 requestDisallowInterceptTouchEvent(true) 来让 parent view 不要执行 onInterceptTouchEvent() 方法，从而 RecylerView 也就不会截断 SwipeLinearLayout 的后续事件了。

private float mLastX, mLastY;
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mLastX = x;
                    mLastY = y;
                    break;
    
                case MotionEvent.ACTION_MOVE:
                    float dx = x - mLastX;
                    float dy = y - mLastY;
                    float angel = (float) Math.toDegrees(Math.atan(Math.abs(dy / dx)));
                    if (angel < 30) {
                        getParent().requestDisallowInterceptTouchEvent(true);
                    }
                    break;
    
            }
            mViewDragHelper.processTouchEvent(event);
            return true;
        }

## 优化用户体验 ##

到此为止，你已经解决了滑动的冲突。现在我们来优化下用户体验，上面的实现中，侧滑不“智能”，它一定要我们滑动到底，才能看见2个Button，这就显得很僵硬了，所以我们可以让它滑动到 2个Button 宽度之和的一半的时候，就让他们自动显示，这个逻辑当然就是在 Callback 中的 onViewReleased() 实现。

private boolean mIsOpen;
                @Override
                public void onViewReleased(View releasedChild, float xvel, float yvel) {
                    if (releasedChild == getContentView()) {
                        int offsetLeft = Math.abs(releasedChild.getLeft());
                        int maxDistance = 0;
                        for (int i = 1; i < getChildCount(); i++) {
                            maxDistance += getChildAt(i).getWidth();
                        }
                        if (!mIsOpen) {
                            if (offsetLeft > maxDistance / 2) {
                                mViewDragHelper.settleCapturedViewAt(-maxDistance, 0);
                                mIsOpen = true;
                            } else {
                                mViewDragHelper.settleCapturedViewAt(0, 0);
                                mIsOpen = false;
                            }
                        } else {
                            mViewDragHelper.settleCapturedViewAt(0, 0);
                            mIsOpen = false;
                        }
                        postInvalidate();
                    }
                }

而因为我们调用的是 ViewDragHelper 的 settleCapturedViewAt() 方法，这是利用 Scroller 原理，所以我们还需要复写 ViewGroup 的 computeScroll() 方法

@Override
        public void computeScroll() {
            if (mViewDragHelper.continueSettling(true)) {
                postInvalidate();
            }
        }

## 源码 ##

到此，基本的侧滑实现已经完成。我现在贴出 SwipeLinearLayout 整个源码。

/** * Created by David Chow on 2017/4/6. */
    
    public class SwipeLinearLayout extends LinearLayout { 
    
        private static final String TAG = "david";
        private ViewDragHelper mViewDragHelper;
        private float mLastX, mLastY;
        private boolean mIsOpen;
    
        public SwipeLinearLayout(Context context) {
            this(context, null);
        }
    
        public SwipeLinearLayout(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        private void init() {
            // set orientation of LinearLayout always to be horizontal
            setOrientation(LinearLayout.HORIZONTAL);
            mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {
                @Override
                public boolean tryCaptureView(View child, int pointerId) {
                    return child == getContentView();
                }
    
                @Override
                public int clampViewPositionHorizontal(View child, int left, int dx) {
                    int leftOffset = 0;
                    for (int i = 1; i < getChildCount(); i++) {
                        leftOffset += getChildAt(i).getWidth();
                    }
                    int leftBound = getPaddingLeft() - leftOffset;
                    int rightBound = getWidth() - getPaddingRight() - child.getWidth();
                    return Math.min(rightBound, Math.max(left, leftBound));
                }
    
                @Override
                public int clampViewPositionVertical(View child, int top, int dy) {
                    int topBound = getPaddingTop();
                    int bottomBound = getHeight() - getPaddingBottom() - child.getHeight();
                    return Math.min(bottomBound, Math.max(topBound, top));
                }
    
                @Override
                public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
                    if (changedView == getContentView()) {
                        for (int i = 1; i < getChildCount(); i++) {
                            View child = getChildAt(i);
                            child.layout(child.getLeft() + dx, 0, child.getRight() + dx, getHeight());
                        }
                    }
                }
    
                @Override
                public int getViewHorizontalDragRange(View child) {
                    int range = 0;
                    for (int i = 1; i < getChildCount(); i++) {
                        range += getChildAt(i).getWidth();
                    }
                    return range;
                }
    
    
                @Override
                public void onViewReleased(View releasedChild, float xvel, float yvel) {
                    if (releasedChild == getContentView()) {
                        int offsetLeft = Math.abs(releasedChild.getLeft());
                        int maxDistance = 0;
                        for (int i = 1; i < getChildCount(); i++) {
                            maxDistance += getChildAt(i).getWidth();
                        }
                        if (!mIsOpen) {
                            if (offsetLeft > maxDistance / 2) {
                                mViewDragHelper.settleCapturedViewAt(-maxDistance, 0);
                                mIsOpen = true;
                            } else {
                                mViewDragHelper.settleCapturedViewAt(0, 0);
                                mIsOpen = false;
                            }
                        } else {
                            mViewDragHelper.settleCapturedViewAt(0, 0);
                            mIsOpen = false;
                        }
                        postInvalidate();
                    }
                }
            });
        }
    
        @Override
        public void computeScroll() {
            if (mViewDragHelper.continueSettling(true)) {
                postInvalidate();
            }
        }
    
        private View getContentView() {
            return getChildAt(0);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return mViewDragHelper.shouldInterceptTouchEvent(ev);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mLastX = x;
                    mLastY = y;
                    break;
    
                case MotionEvent.ACTION_MOVE:
                    float dx = x - mLastX;
                    float dy = y - mLastY;
                    float angel = (float) Math.toDegrees(Math.atan(Math.abs(dy / dx)));
                    if (angel < 30) {
                        getParent().requestDisallowInterceptTouchEvent(true);
                    }
                    break;
    
            }
            mViewDragHelper.processTouchEvent(event);
            return true;
        }
    
        /** * 这个方法作用是，当检测到 mIsOpen 为 true 的时候，可以不让 TextView 有点击事件 * @return */
        public boolean isOpen() {
            return mIsOpen;
        }
    }

## 侧滑库 ##

上面讲的例子只是一个引子，很多地方都没有完善。Github 上有个库 [AndroidSwipeLayout][]，可以非常方便实现这个功能，这里介绍下如何使用这个库。  
下面我只贴出使用 ListView，RecyclerView 中的 item.xml 的布局。

<?xml version="1.0" encoding="utf-8"?>
    <com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/swipe_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:attr/listPreferredItemHeightSmall">
    
        <LinearLayout android:id="@+id/bottom_wrapper" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal">
    
            <Button android:id="@+id/item_top" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@color/colorPrimary" android:text="置顶"/>
    
            <Button android:id="@+id/item_delete" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@color/colorAccent" android:text="删除"/>
    
        </LinearLayout>
    
        <LinearLayout android:id="@+id/content_wrapper" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff">
    
            <TextView android:id="@+id/item_content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"/>
        </LinearLayout>
    </com.daimajia.swipe.SwipeLayout>

SwipeLayout 是继承自 FrameLayout，布局中第一个 child view 是隐藏的侧滑需要显示的内容，而第二个 child view 就是要显示的界面。  
默认的效果，是产生如 QQ 一样的侧滑删除效果，从右到左拉出来，如下图

![默认滑动效果][SouthEast 1]

而如果我们让侧滑效果如 iphone 上的 QQ 侧滑效果一样，就需要为 SwipeLayout 加一个属性，show\_mode

<com.daimajia.swipe.SwipeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/swipe_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        app:show_mode="lay_down">

这里的 show\_mode 默认是 pull\_out 模式，现在设置为 lay\_down 默认，看看效果

![lay\_down模式][lay_down]

当然，我们也可以改变侧滑的方向，例如我要从左向右侧滑

drag\_edge 属性默认是 right，这里我选择 left （当然还有 top, bottom），看下效果

![drag\_edge 为 left 效果][drag_edge _ left]

还有一个属性 clickToClose，默认为 false，如果设置为 true ，就是说，点击下就会关闭侧滑效果，这个效果就不展示了。

当然，除了属性外，SwipeLayout 还有很多监听函数，例如，侧滑时候的监听函数 addSwipeListener。还有当我们子 View 需要使用监听手势的时候，可以使用 addSwipeDenier 函数，来不让 SwipeLayout 侧滑。还有当我们需要监听某个子 View 是否完全显示的时候，可以调用 addRevealListener。这里我就不一一去举例了，实战中我们知道有这些函数就知道怎么用了。

当然，这个库还不止如此，还针对 ListView，GridView，RecyclerView 设计了相应的 SwipeAdapter，例如 RecylerView 设计了 RecyclerSwipeAdapter.java，而这些 Adapter 是当用户滚动列表的时候，用来恢复 item 的侧滑开关的状态的。

## 结束 ##

本篇文章，通过自定义 ViewGroup 实现了基本的侧滑，同时也说明并解决了滑动的冲突。本文也引出了 AndroidSwipeLayout 这个优秀的库，如果是深入掌控侧滑，可以学习这个库的源码。

[SouthEast]: /images/20220618/6fe0f14c1ed24309bf994b98c2cae76f.png
[AndroidSwipeLayout]: https://github.com/daimajia/AndroidSwipeLayout
[SouthEast 1]: /images/20220618/3a86548b77cb4f469f103aedf6a12abc.png
[lay_down]: /images/20220618/5b239764f7cc460384d4489ac7ccd38b.png
[drag_edge _ left]: /images/20220618/6891f9cf029948fca07e409218e3e807.png