RecyclerView实现拖动排序和滑动删除功能

RecyclerView 的拖动排序需要借助一下 ItemTouchHelper 这个类，ItemTouchHelper 类是 Google 提供的一个支持 RecyclerView 滑动和拖动的一个使用类，下面使用该类实现 RecyclerView 的滑动删除和拖动排序功能。首先大概介绍一下 ItemTouchHelper 的一个内部抽象类 Callback 。

1、ItemTouchHelper.Callback

该类是ItemTouchHelper类中的一个静态抽象类，作用主要是将ItemTouchHelper 与自己的应用联系在一起，让开发者通过 ViewHolder 控制每一个 View 的具体行为，接收用户的事件回调。该类里面有三个抽象方法：getMovementFlags、onMove、onSwiped。也是开发中经常要是用的。

1.1、getMovementFlags

该方法返回一个 Flags 表示Item的三种状态状态：idle(空闲)、 swiping(滑动)、dragging(拖动)，根据 RecyclerView 不同的布局管理器，设置不同的滑动、拖动方向，一般使用 makeMovementFlags(int dragFlags, int swipeFlags)方法返回，dragFlags 表示拖动的方向，swipeFlags 表示滑动的方向。

public abstract int getMovementFlags(RecyclerView recyclerView, ViewHolder viewHolder);

1.2、onMove

当 ItemTouchHelper 拖动一个 Item 时该方法将会被回调，Item 将从旧的位置移动到新的位置，如果不拖动这个方法将从来不会调用,返回 true 表示 Item 已经被移动到新的位置。

public abstract boolean onMove(RecyclerView recyclerView, ViewHolder viewHolder, ViewHolder target);

1.3、onSwiped

当 Item 滑动的时候调用，如果不滑动该方法不会被调用，可通过 direction 做相应的判断执行某些操作。

public abstract void onSwiped(ViewHolder viewHolder, int direction);

此外经常使用的方法有 onSelectedChanged、clearView等方法。

1.4、onSelectedChanged

当 item 由静止状态变为滑动或拖动状态时调用此方法，可通过 actionState 判断 Item 在哪种状态下执行某些操作，重写该方法时必须调用其父类的该方法。

public void onSelectedChanged(ViewHolder viewHolder, int actionState) {
        if (viewHolder != null) {
            sUICallback.onSelected(viewHolder.itemView);
        }
}

1.5、clearView

当与用户交互结束或相关动画完成之后该方法被调用。

public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) {
        sUICallback.clearView(viewHolder.itemView);
}

2、RecyclerView实现拖动排序

RecyclerView的拖动排序需要借助一个 android.support.v7.widget.helper.ItemTouchHelper 这个类来实现，拖动排序重点是在接口里面的 onMove(int fromPosition, int toPosition) 方法，其在 ItemTouchHelperAdapter中的具体实现参考如下：

@Override
public void onMove(int fromPosition, int toPosition) {
    String item = mDatas.get(fromPosition);
    mDatas.remove(fromPosition);
    mDatas.add(toPosition, item);
    notifyItemMoved(fromPosition, toPosition);
}

3、RecyclerView 实现侧滑删除

RecyclerView 的拖动排序需要借助一个 android.support.v7.widget.helper.ItemTouchHelper 这个类来实现，侧滑删除重点是在接口中的 onSwiped(int position)，其在 ItemTouchHelperAdapter中的具体实现参考如下

 @Override
 public void onSwiped(int position) {
     list.remove(position);
    notifyItemRemoved(position);
 }

如果想要在滑动删除过程中实现如下效果，就需要重写ItemTouchHelper.Callback的onChildDraw方法，在其中实现相应的效果。


效果

在重写onChildDraw方法之前，先来修改下item的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#ffffff"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        app:cardCornerRadius="1dp"
        app:elevation="1dp"
        app:contentPadding="1dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff">
            <TextView
                android:id="@+id/item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="22sp"
                android:padding="4dp"
                android:layout_centerInParent="true"/>

        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:background="#f33213">

        <ImageView
            android:id="@+id/iv_img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:src="@mipmap/ic_eye_72"
            android:visibility="invisible"/>
        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左滑删除"
            android:textSize="18sp"
            android:textColor="#ffffff"
            android:layout_gravity="center"/>
    </FrameLayout>
</LinearLayout>

布局文件修改后，我们尝试来滑动一下，发现后面的删除方块并不会出现，这是因为默认的滑动方式是setTranslationX(int)，即是对整个View的滑动，所以无论我们怎样滑动，都不会出现删除方块。因此，我们要改变一个种滑动方式，比如使用scrollTo(int,int)，这种是对View的内容的滑动，所以随着左滑，item会向左滑去，而位于右方的方块自然也就出现了。

接着，我们考虑该“删除眼睛”的图标是怎样从小变大的，这个实现也比较简单，只要根据滑动的距离对该ImageView的LayoutParams.width进行改变就行了，不过要注意限制大小，否则过大会造成图片的失真。当滑动距离等于RecyclerView宽度的一半时，此时松开手会使Item删除，那么我们可以在该滑动距离达到该值时时“眼睛”变得最大，此时可以达到良好的交互效果，提示了用户无需继续滑动即可删除该Item了。

最后我们要考虑的是：在删除了Item或者没删除而滑回原来的位置后，我们要把所做的改变重置一下，否则，会由于RecyclerView的复用而导致其他位置的ViewHolder与当前的ViewHolder所做的改变一样，即造成显示的错误。我们可以在clearView()方法内重置改变，这样就能解决因复用而导致的显示问题了。
最后我们来看看SimpleItemTouchHelperCallback的代码：

public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback{

     private ItemTouchHelperAdapter mAdapter;

    public SimpleItemTouchHelperCallback(ItemTouchHelperAdapter adapter){
        mAdapter = adapter;
    }

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
        int swipeFlags = ItemTouchHelper.LEFT;
        return makeMovementFlags(dragFlags,swipeFlags);
    }

    @Override
    public boolean isLongPressDragEnabled() {
        return true;
    }

    @Override
    public boolean isItemViewSwipeEnabled() {
        return true;
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        mAdapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition());
        return true;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.onItemDissmiss(viewHolder.getAdapterPosition());
    }

    //限制ImageView长度所能增加的最大值
    private double ICON_MAX_SIZE = 50;
    //ImageView的初始长宽
    private int fixedWidth = 150;

    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);
        //重置改变，防止由于复用而导致的显示问题
        viewHolder.itemView.setScrollX(0);
        ((MyAdapter.NormalItem)viewHolder).tv.setText("左滑删除");
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
        params.width = 150;
        params.height = 150;
        ((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
        ((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.INVISIBLE);
    }

    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        //仅对侧滑状态下的效果做出改变
        if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
            //如果dX小于等于删除方块的宽度，那么我们把该方块滑出来
            if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
                viewHolder.itemView.scrollTo(-(int) dX,0);
            }
            //如果dX还未达到能删除的距离，此时慢慢增加“眼睛”的大小，增加的最大值为ICON_MAX_SIZE
            else if (Math.abs(dX) <= recyclerView.getWidth() / 2){
                double distance = (recyclerView.getWidth() / 2 -getSlideLimitation(viewHolder));
                double factor = ICON_MAX_SIZE / distance;
                double diff =  (Math.abs(dX) - getSlideLimitation(viewHolder)) * factor;
                if (diff >= ICON_MAX_SIZE)
                    diff = ICON_MAX_SIZE;
                ((MyAdapter.NormalItem)viewHolder).tv.setText("");   //把文字去掉
                ((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.VISIBLE);  //显示眼睛
                FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
                params.width = (int) (fixWidth + diff);
                params.height = (int) (fixWidth + diff);
                ((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
            }
        }else {
            //拖拽状态下不做改变，需要调用父类的方法
            super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
        }
    }

    /**
     * 获取删除方块的宽度
     */
    public int getSlideLimitation(RecyclerView.ViewHolder viewHolder){
        ViewGroup viewGroup = (ViewGroup) viewHolder.itemView;
        return viewGroup.getChildAt(1).getLayoutParams().width;
    }
}

ItemTouchHelperAdapter 的代码如下

public interface ItemTouchHelperAdapter {
    //数据交换
    void onItemMove(int fromPosition,int toPosition);
    //数据删除
    void onItemDissmiss(int position);
}

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements ItemTouchHelperAdapter {
    //数据
    private List<String> mData;
    ...
     @Override
    public void onItemMove(int fromPosition, int toPosition) {
        //交换位置
        String item = mDatas.get(fromPosition);
       mDatas.remove(fromPosition);
       mDatas.add(toPosition, item);
       notifyItemMoved(fromPosition, toPosition);
    }

    @Override
    public void onItemDissmiss(int position) {
        //移除数据
        mData.remove(position);
        notifyItemRemoved(position);
    }

}

上面我们修改了Adapter和新建了ItemTouchHelper.Callback的子类，接下来我们要为RecyclerView添加ItemTouchHelper：

    //先实例化Callback
    ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(myAdapter);
    //用Callback构造ItemtouchHelper
    ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
    //调用ItemTouchHelper的attachToRecyclerView方法建立联系
    touchHelper.attachToRecyclerView(mRecyclerView);

到此为止，我们已经熟悉了ItemTouchHelper的简单使用了，下面看下几个小问题。

  • 默认情况下滑动到item的宽或者高一半时会触发删除，可以通过getSwipeThreshold方法修改，该方法默认返回0.5f。
public float getSwipeThreshold(ViewHolder viewHolder) {
    return .5f;
}
  • 如果滑动过快时你会发现，删除的提示可能不会显示完全，这时因为快速滑动时dx或dy会突变，可能在删除提示完全显示前就超出了你在onChildDraw方法中的判断条件。拿我们上面的处理举个例子。
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    //仅对侧滑状态下的效果做出改变
    if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
        //如果dX小于等于删除方块的宽度，那么我们把该方块滑出来
        if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
            viewHolder.itemView.scrollTo(-(int) dX,0);
        }
        //....
        }
    }else {
        //拖拽状态下不做改变，需要调用父类的方法
        super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
    }
}

假设getSlideLimitation(viewHolder)得到删除提示的宽度为10，在滑动删除时，dx的值可能为0、-5、-100....、0，而当dx=-100时已经不满足条件Math.abs(dX) <= getSlideLimitation(viewHolder)了，故只显示了一半。
直到了原因解决起来就很简单了，这里给个简单的思路：当条件不满足时，调用viewHolder.itemView.scrollTo(删除块的宽度,0)即可。

上面是通过ItemTouchHelper实现了侧滑删除，但是无法实现侧滑时显示删除提示，然后再通过点击删除提示部分再删除item。下面就通过自定义RecyclerView来实现。

4、通过自定义RecyclerView实现侧滑删除

自定义RecyclerView方式有三个关键点：

  • 何时拦截事件
  • 如何让的Menu展开/隐藏

4.2、何时拦截事件

RecyclerView需要处理手势事件，内部的ItemVIew也需要处理事件，那在何时去拦截事件呢？分以下两种情况：

  • ACTION_DOWN时，如果已经有ItemView处于展开状态，并且这次点击的对象不是已打开的那个ItemView，则拦截事件，并将已展开的ItemView关闭。
  • ACTION_MOVE时，有俩判断，满足其一则认为是侧滑：
  1. x方向速度大于y方向速度，且大于最小速度限制；
  2. x方向的侧滑距离大于y方向滑动距离，且x方向达到最小滑动距离；
public class SwipeDeleteRecyclerView extends RecyclerView {
    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        ...
        switch (e.getAction()) {
            // 第一种情况
            case MotionEvent.ACTION_DOWN:
                ...
                // 已经有ItemView处于展开状态，并且这次点击的对象不是已打开的那个ItemView
                if (view != null && mFlingView != view && view.getScrollX() != 0) {
                    // 将已展开的ItemView关闭
                    view.scrollTo(0, 0);
                    // 则拦截事件
                    return true;
                }
                break;
             // 第二种情况
             case MotionEvent.ACTION_MOVE:
                mVelocityTracker.computeCurrentVelocity(1000);
                // 此处有俩判断，满足其一则认为是侧滑：
                // 1.如果x方向速度大于y方向速度，且大于最小速度限制；
                // 2.如果x方向的侧滑距离大于y方向滑动距离，且x方向达到最小滑动距离；
                float xVelocity = mVelocityTracker.getXVelocity();
                float yVelocity = mVelocityTracker.getYVelocity();
                if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
                        || Math.abs(x - mFirstX) >= mTouchSlop
                        && Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {

                    mIsSlide = true;
                    return true;
                }
                break;
                ...
        }
        ...
    }
}

拦截了事件以后就该处理事件了，接着往下看。

4.2、如何让的Menu展开/隐藏

接着在onTouchEvent中处理事件，控制Menu的隐藏与展开。

  • 首先是在ACTION_MOVE中，如果处于侧滑状态则让目标ItemView通过scrollBy()跟着手势移动，注意判断边界
  • 在ACTION_UP中，此时会产生两个结果：一个是继续展开菜单，另一个是关闭菜单。这两个结果又都分了两种情况：

1，当松手时向左的滑动速度超过了阈值，就让目标ItemView保持松手时的速度继续展开。
2，当松手时向右的滑动速度超过了阈值，就让目标ItemView关闭。
3，当松手时移动的距离超过了隐藏的宽度的一半(也就是最大可以移动的距离的一半)，则让ItemVIew继续展开。
4，当松手时移动的距离小于隐藏的宽度的一半，则让ItemVIew关闭。

public boolean onTouchEvent(MotionEvent e) {
    obtainVelocity(e);
    switch (e.getAction()) {
        case MotionEvent.ACTION_MOVE:
            float dx = mLastX - x;
            // 判断边界
            if (mFlingView.getScrollX() + dx <= mMenuViewWidth
                    && mFlingView.getScrollX() + dx > 0) {
                // 随手指滑动
                mFlingView.scrollBy((int) dx, 0);
            }
            break;
        case MotionEvent.ACTION_UP:
            int scrollX = mFlingView.getScrollX();
            mVelocityTracker.computeCurrentVelocity(1000);
            
            if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) {    // 向左侧滑达到侧滑最低速度，则打开
                // 计算剩余要移动的距离
                int delt = Math.abs(mMenuViewWidth - scrollX);
                // 根据松手时的速度计算要移动的时间
                int t = (int) (delt / mVelocityTracker.getXVelocity() * 1000);
                // 移动
                mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(t));
            } else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) {  // 向右侧滑达到侧滑最低速度，则关闭
                mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
            } else if (scrollX >= mMenuViewWidth / 2) { // 如果超过删除按钮一半，则打开
                mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
            } else {    // 其他情况则关闭
                mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
            }
            invalidate();
            releaseVelocity();  // 释放追踪
            break;
    }
    return true;
}

4.3、缺陷

在RecyclerView的Holder的onBindViewHolder()中给滑出来的菜单添加点击事件即可响应删除：

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

    holder.tvDelete.setOnClickListener {
        onDelete(holder.adapterPosition)
    }
}

但是由于RecyclerView的复用机制，需要在点了删除菜单删除Item后，让Item关闭，不然就会出现删除一个Item后往下滚动，会再出来一个已展开的Item。

fun onDelete(it:Int){
    mData.removeAt(it)
    adapter.notifyItemRemoved(it)
        // 调用closeMenu()关闭该item
    mBinding.rvAll.closeMenu()
}

关闭的方法很简单，只需要让该Item scrollTo(0, 0)即可

public void closeMenu() {
    if (mFlingView != null && mFlingView.getScrollX() != 0) {
        // 关闭
        mFlingView.scrollTo(0, 0);
    }
}

因此该方式存在的缺陷是需要手动关闭已删除的itemView。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345