RecyclerView实现条目Item拖拽排序与滑动删除

RecyclerView实现条目Item拖拽排序与滑动删除

版权声明：转载请注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003

效果演示

直播视频讲解：[http://pan.baidu.com/s/1miEOtwG1

推荐大家结合我直播的视频看效果更好。

本博客源码传送门。

需求和技术分析

  1. RecyclerView Item拖拽排序：：长按RecyclerView的Item或者触摸Item的某个按钮。
  2. RecyclerView Item滑动删除：RecyclerView Item滑动删除：RecyclerView的Item滑动删除。

实现方案与技术

利用ItemTouchHelper绑定RecyclerView、ItemTouchHelper.Callback来实现UI更新，并且实现动态控制是否开启拖拽功能和滑动删除功能。

实现步骤

  1. 继承抽象类ItemTouchHelper，并在构造方法传入实现的ItemTouchHelper.Callback。
  2. recyclerView绑定ItemTouchHelper：itemTouchHelper.attachToRecyclerView(recyclerView)。
  3. 自定义ItemTouchHelper.Callback的实现接口OnItemTouchCallbackListener，由外部更新RecyclerView的Item。

几个主要的布局

activity_main.xml

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

这个没啥好说的了吧，就是一个RecyclerView啦。

接下来是RecyclerView的Item的布局item.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:listPreferredItemHeight"
    android:background="?selectableItemBackground">

    <ImageView
        android:id="@+id/iv_touch"
        style="@style/ItemStyle"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:src="@android:drawable/alert_dark_frame" />

    <CheckBox
        android:id="@+id/cb_item_check"
        style="@style/ItemStyle"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/tv_name"
        style="@style/ItemStyle"
        android:layout_toEndOf="@id/cb_item_check"
        android:layout_toRightOf="@id/cb_item_check" />

    <TextView
        android:id="@+id/tv_sex"
        style="@style/ItemStyle"
        android:layout_marginLeft="@dimen/dp_10"
        android:layout_marginStart="@dimen/dp_10"
        android:layout_toEndOf="@id/tv_name"
        android:layout_toRightOf="@id/tv_name" />

</RelativeLayout>

这个也不用解释了，到时候下载看源码，就是普通item，展示数据而已。

实现自己的DefaultItemTouchHelper：继承ItemTouchHelper

public class DefaultItemTouchHelper extends ItemTouchHelper {
    public DefaultItemTouchHelper(ItemTouchHelp.Callback callback) {
        super(callback);
    }
}

好嘛，这个太简单了，基本上一行代码都不用写。但是这里需要一个ItemTouchHelp.Callback啊，所以我们还是要实现一个ItemTouchHelp.Callback，客观且看下文分解。

实现自己的ItemTouchHelper.Callback：继承ItemTouchHelper.Callback

这里是全文最重要的部分啦，要认真点看噢，先上代码，后解释，其他看注释和视频。

public class DefaultItemTouchHelpCallback extends ItemTouchHelper.Callback {

    /**
     * Item操作的回调
     */
    private OnItemTouchCallbackListener onItemTouchCallbackListener;

    /**
     * 是否可以拖拽
     */
    private boolean isCanDrag = false;
    /**
     * 是否可以被滑动
     */
    private boolean isCanSwipe = false;

    public DefaultItemTouchHelpCallback(OnItemTouchCallbackListener onItemTouchCallbackListener) {
        this.onItemTouchCallbackListener = onItemTouchCallbackListener;
    }

    /**
     * 设置Item操作的回调，去更新UI和数据源
     *
     * @param onItemTouchCallbackListener
     */
    public void setOnItemTouchCallbackListener(OnItemTouchCallbackListener onItemTouchCallbackListener) {
        this.onItemTouchCallbackListener = onItemTouchCallbackListener;
    }

    /**
     * 设置是否可以被拖拽
     *
     * @param canDrag 是true，否false
     */
    public void setDragEnable(boolean canDrag) {
        isCanDrag = canDrag;
    }

    /**
     * 设置是否可以被滑动
     *
     * @param canSwipe 是true，否false
     */
    public void setSwipeEnable(boolean canSwipe) {
        isCanSwipe = canSwipe;
    }

    /**
     * 当Item被长按的时候是否可以被拖拽
     *
     * @return
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return isCanDrag;
    }

    /**
     * Item是否可以被滑动(H：左右滑动，V：上下滑动)
     *
     * @return
     */
    @Override
    public boolean isItemViewSwipeEnabled() {
        return isCanSwipe;
    }

    /**
     * 当用户拖拽或者滑动Item的时候需要我们告诉系统滑动或者拖拽的方向
     *
     * @param recyclerView
     * @param viewHolder
     * @return
     */
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
        if (layoutManager instanceof GridLayoutManager) {// GridLayoutManager
            // flag如果值是0，相当于这个功能被关闭
            int dragFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT | ItemTouchHelper.UP | ItemTouchHelper.DOWN;
            int swipeFlag = 0;
            // create make
            return makeMovementFlags(dragFlag, swipeFlag);
        } else if (layoutManager instanceof LinearLayoutManager) {// linearLayoutManager
            LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
            int orientation = linearLayoutManager.getOrientation();

            int dragFlag = 0;
            int swipeFlag = 0;

            // 为了方便理解，相当于分为横着的ListView和竖着的ListView
            if (orientation == LinearLayoutManager.HORIZONTAL) {// 如果是横向的布局
                swipeFlag = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
                dragFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            } else if (orientation == LinearLayoutManager.VERTICAL) {// 如果是竖向的布局，相当于ListView
                dragFlag = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
                swipeFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            }
            return makeMovementFlags(dragFlag, swipeFlag);
        }
        return 0;
    }

    /**
     * 当Item被拖拽的时候被回调
     *
     * @param recyclerView     recyclerView
     * @param srcViewHolder    拖拽的ViewHolder
     * @param targetViewHolder 目的地的viewHolder
     * @return
     */
    @Override
    public boolean onMove(RecyclerView recyclerView, ViewHolder srcViewHolder, ViewHolder targetViewHolder) {
        if (onItemTouchCallbackListener != null) {
            return onItemTouchCallbackListener.onMove(srcViewHolder.getAdapterPosition(), targetViewHolder.getAdapterPosition());
        }
        return false;
    }

    @Override
    public void onSwiped(ViewHolder viewHolder, int direction) {
        if (onItemTouchCallbackListener != null) {
            onItemTouchCallbackListener.onSwiped(viewHolder.getAdapterPosition());
        }
    }

    public interface OnItemTouchCallbackListener {
        /**
         * 当某个Item被滑动删除的时候
         *
         * @param adapterPosition item的position
         */
        void onSwiped(int adapterPosition);

        /**
         * 当两个Item位置互换的时候被回调
         *
         * @param srcPosition    拖拽的item的position
         * @param targetPosition 目的地的Item的position
         * @return 开发者处理了操作应该返回true，开发者没有处理就返回false
         */
        boolean onMove(int srcPosition, int targetPosition);
    }
}

好，其实上面最重要的就是五个方法：

/**
 * 是否可以长按拖拽排序。
 */
@Override
public boolean isLongPressDragEnabled() {}
/**
 * Item是否可以被滑动(H：左右滑动，V：上下滑动)
 */
@Override
public boolean isItemViewSwipeEnabled() {}
/**
 * 当用户拖拽或者滑动Item的时候需要我们告诉系统滑动或者拖拽的方向
 */
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {}
/**
 * 当Item被拖拽的时候被回调
 */
@Override
public boolean onMove(RecyclerView r, ViewHolder rholer, ViewHolder tholder) {}

/**
 * 当View被滑动删除的时候
 */
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {}

isItemViewSwipeEnabled()返回值是否可以拖拽排序，true可以，false不可以，isItemViewSwipeEnabled()是否可以滑动删除，true可以，false不可以；这两个方法都是配置是否可以操作的。我们上面的代码中返回了一个成员变量值，并且这个值通过外部可以修改，所以提供了外部控制的方法。

onMove()当Item被拖拽排序移动到另一个Item的位置的时候被回调，onSwiped()当Item被滑动删除到不见；这两个方法是当用户操作了，来回调我们，我们就该去更新UI了。这里我们提供了一个Listener去通知外部，并且返回出去了必要的值，来降低代码耦合度。

getMovementFlags()说明一：是当用户拖拽或者滑动Item的时候需要我们告诉系统滑动或者拖拽的方向，那我们又知道支持拖拽和滑动删除的无非就是LinearLayoutManager和GridLayoutManager了，相当于我们老早的时候用的ListView和GridView了。所以我们根据布局管理器的不同做了响应的区分。

getMovementFlags()说明二：其他都好理解，就是这里的return makeMovementFlags(dragFlag, swipeFlag);这句话是最终的返回值，也就是它决定了我们的拖拽或者滑动的方法。第一个参数是拖拽flag，第二个是滑动的flag。

重新定义DefaultItemTouchHelper

我们记得上面定义了一个DefaultItemTouchHelper，它的构造中需要传一个ItemTouchHelper.Callback，既然我们实现礼了，我们再把DefaultItemTouchHelper做个封装，使使用者更傻瓜式的调用。

public class DefaultItemTouchHelper extends YolandaItemTouchHelper {

    private DefaultItemTouchHelpCallback itemTouchHelpCallback;

    public DefaultItemTouchHelper(DefaultItemTouchHelpCallback.OnItemTouchCallbackListener onItemTouchCallbackListener) {
        super(new DefaultItemTouchHelpCallback(onItemTouchCallbackListener));
        itemTouchHelpCallback = (DefaultItemTouchHelpCallback) getCallback();
    }

    /**
     * 设置是否可以被拖拽
     *
     * @param canDrag 是true，否false
     */
    public void setDragEnable(boolean canDrag) {
        itemTouchHelpCallback.setDragEnable(canDrag);
    }

    /**
     * 设置是否可以被滑动
     *
     * @param canSwipe 是true，否false
     */
    public void setSwipeEnable(boolean canSwipe) {
        itemTouchHelpCallback.setSwipeEnable(canSwipe);
    }
}

现在我们看到已经不需要传ItemTouchHelper.Callback给ItemTouchHelper了，只需要传我们在DefaultItemTouchHelpCallback中定义好的OnItemTouchCallbackListener就好了，而且提供了设置是否可以滑动和是否可以拖拽的方法，而OnItemTouchCallbackListener只是通知外部滑动了、删除了，你去更新UI吧。

这里可以有的同学会有疑问，上面原来不是继承ItemTouchHelper吗？这里咋就变成了YolandaItemTouchHelper了呢？因为我们看到这里多了一句itemTouchHelpCallback = getCallback();，这个getCallback();这个方法是没有的，是我们在YolandaItemTouchHelper中自定义的，因为我们想在DefaultItemTouchHelper中提供外部设置是否可以拖拽和滑动删除的方法，就得拿到这个Callback，所以我看了下源码，我们在ItemTouchHelper构造中把Callback穿进去，它保存的时候一个package级别的成员变量，所以我在android.support.v7.widget.helper包下新建了一个YolandaItemTouchHelper类：

public class YolandaItemTouchHelper extends ItemTouchHelper {
    public YolandaItemTouchHelper(Callback callback) {
        super(callback);
    }

    public Callback getCallback() {
        return mCallback;
    }
}

如何投入使用

好扯淡也扯完了，封装也封装完了，那么接下来就来在Activity中使用下咯：

recyclerView绑定ItemTouchHelper

没啥好说的用itemTouchHelper.attachToRecyclerView(recyclerView)绑定recyclerView和ItemTouchHelper，并且只是允许拖拽和滑动删除Item：

DefaultItemTouchHelper itemTouchHelper = new DefaultItemTouchHelper(onItemTouchCallbackListener);
itemTouchHelper.attachToRecyclerView(recyclerView);
itemTouchHelper.setDragEnable(true);
itemTouchHelper.setSwipeEnable(true);

看到上面还缺少一个onItemTouchCallbackListener吧，这个也比较重要。

使用Callback自定义的OnItemTouchCallbackListener刷新UI

我们在自定义Callback的时候不是在onMove()和onSwiped()方法中回调OnItemTouchCallbackListener去更新UI吗？这里就是OnItemTouchCallbackListener如何更新UI的操作了，完成这个操作，那么我们的目的就达到了：

private DefaultItemTouchHelpCallback.OnItemTouchCallbackListener onItemTouchCallbackListener = new DefaultItemTouchHelpCallback.OnItemTouchCallbackListener() {
    @Override
    public void onSwiped(int adapterPosition) {
        // 滑动删除的时候，从数据源移除，并刷新这个Item。
        if (userInfoList != null) {
            userInfoList.remove(adapterPosition);
            mainAdapter.notifyItemRemoved(adapterPosition);
        }
    }

    @Override
    public boolean onMove(int srcPosition, int targetPosition) {
        if (userInfoList != null) {
            // 更换数据源中的数据Item的位置
            Collections.swap(userInfoList, srcPosition, targetPosition);
            // 更新UI中的Item的位置，主要是给用户看到交互效果
            mainAdapter.notifyItemMoved(srcPosition, targetPosition);
            return true;
        }
        return false;
    }
};

到这里就结束了，不信你去试试，源码传送门。

版权声明：转载请注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003

时间： 2024-08-02 06:57:35

RecyclerView实现条目Item拖拽排序与滑动删除的相关文章

Android基础控件——RecyclerView实现拖拽排序侧滑删除效果

RecyclerView实现拖拽排序侧滑删除效果 事先说明: RecyclerView是ListView的升级版,使用起来比ListView更规范,而且功能和动画可以自己添加,极容易扩展,同样也继承了ListView复用convertView和ViewHolder的优点.   思路分析: 1.导包.在布局中使用RecyclerView 2.需要一个JavaBean用来存储展示信息 3.需要一个填充RecyclerView的布局文件 4.在代码中找到RecyclerView,并为其绑定Adapte

自定义控件——可拖拽排序的ListView

前言 最经研究了一下拖拽排序的ListView,跟酷狗里的播放列表排序一样,但因为要添加自己特有的功能,所以研究了好长时间.一开始接触的是GitHub的开源项目--DragSortListView,实现的效果和流畅度都很棒.想根据他的代码自己写一个,但代码太多了,实现的好复杂,看别人的代码你懂的了,就去尝试寻找其他办法.最后还是找到了更简单的实现方法,虽然跟开源项目比要差一点,但对我来说可以了,最重要的是完全可以自定义. 实现的效果如下: 主要问题 如何根据触摸的位置确定是哪个条目? ListV

ListView列表拖拽排序

ListView列表拖拽排序可以参考Android源代码下的Music播放列表,他是可以拖拽的,源码在[packages/apps/Music下的TouchInterceptor.java下]. 首先是搭建框架,此处的ListView列表类似于QQ消息列表,当然数据只是模拟,为了简单起见,没有把ListView的条目的所有的属性全部写上.首先是消息的实体类Msg.java: package me.chenfuduo.mymsgdrag; public class Msg { private in

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jquery -- 拖拽排序分析

今天应一个朋友的委托,研究一下拖拽排序,我记得我上次写拖拽排序,因为方法太死板,效果我一直不是很满意,一直想再从写一个,一直没机会(懒),这次因为公司部门变动所以有了一些时间(无聊)来写,本来准备使用Vue写,奈何功夫不到家在自定义指令的时候,问题卡住了,研究了一段时间之后,还是决定放弃,研究一下Vue再来写过,所以本次还是用了Jquery来写. 直接上代码 这是CSS部分 1 *{/*Css*/ 2 margin: 0px; 3 padding: 0px; 4 list-style: none

PagedDragDropGrid拖拽排序

PagedDragDropGrid拖拽排序 长按界面上某个item,item会抖动,并且可以拖动item,重新排列位置. 下载地址:http://www.devstore.cn/code/info/881.html 运行截图:

【Android】可拖拽排序的ListView

[Android]可拖拽排序的ListView 实现Item的拖拽排序效果 下载地址:http://www.devstore.cn/code/info/746.html 运行截图:

GridView实现拖拽排序以及数据交互

在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效果需要考虑的事情: ① 这个UI整体的构建以及事件的传递 ② 如何实现View的共享,穿过边界 二.实现思路: 对于单个GridView的拖拽效果实现是参考网上的一篇文章,很抱歉没能及时保存地址,所以这里就不贴了. 整体实现: 一个容器(DragChessView)里放置两个DragView(可拖拽

react 拖拽排序

react 拖拽排序.项目中用到了,记一笔.没有用react-dnd, 没有用react-beautiful-dnd, 因为需求简单,所以就自己撸了一个. 代码很简单 定义css, 两个动画 .drag-up { -webkit-animation: dragup ease 0.2s 1; animation: dragup ease 0.2s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; bac