RecyclerView拖拽排序和滑动删除实现

た入场券 2022-07-24 09:22 270阅读 0赞

### 效果图 ###

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1][]

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 1][]

### 如何实现 ###

那么是如何实现的呢？主要就要使用到ItemTouchHelper ，ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类，它能够让你非常容易实现侧滑删除、拖拽的功能。

实现的代码非常简单我们只需要两步：

实例化一个ItemTouchHelper  
关联到RecyclerView

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1][]

恩，就是这么简单。

构造方法中需要一个ItemTouchHelper.Callback，ItemTouchHelper会在拖拽的时候回调Callback中相应的方法，我们只需在Callback中实现自己的逻辑就可以了。

自定义一个类继承实现ItemTouchHelper.Callback接口，需要实现以下方法：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 1][]

getMovementFlags用于设置是否处理拖拽事件和滑动事件，以及拖拽和滑动操作的方向，有以下两种情况：

如果是列表类型的RecyclerView，拖拽只有UP、DOWN两个方向  
如果是网格类型的则有UP、DOWN、LEFT、RIGHT四个方向

该方法需要编写的代码如下：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 2][]

dragFlags 是拖拽标志，swipeFlags是滑动标志，我们把swipeFlags 都设置为0，暂时不考虑滑动相关操作。

如果我们设置了相关的dragFlags ，那么当我们长按item的时候就会进入拖拽并在拖拽过程中不断回调onMove()方法，我们就在这个方法里获取当前拖拽的item和已经被拖拽到所处位置的item的ViewHolder，有了这2个ViewHolder，我们就可以交换他们的数据集并调用Adapter的notifyItemMoved方法来刷新item。

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 3][]

这里的mDatas其实就是Adapter对应的数据集，我们在改变Item位置的同时当然不能忘了数据集需要同步的改变。

到这里，已经可以拖拽了，基本的效果如下：

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 2][]

是不是很神奇，这么复杂的特效，竟然写了几行代码就搞定了~

但是拖拽的时候我们拖拽的对象不能高亮显示，这是不友好的，我们希望拖拽的Item在拖拽的过程中背景颜色加深，这样就需要继续重写下面两个方法：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 4][]

我们在开始拖拽的时候给item添加一个背景色，然后在拖拽完成的时候还原：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 5][]

OK，这样就完成了Item的拖拽排序，简单看下现在的效果：

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 3][]

### 更加复杂的需求 ###

上面的代码完成了基本功能，但实际的产品需要往往可能会有些不一样，比如说，产品希望，有一些item可以拖拽，一些item无法拖拽，就如上图的“更多”是无法拖拽的。这个咋办呢？

其实在上面我们实现的Callback类中有一个方法我们没有重写：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 6][]

这个方法是为了告诉ItemTouchHelper是否需要RecyclerView支持长按拖拽，默认返回是ture（即支持），理所当然我们要支持，所以我们没有重写，因为默认true。但是这样做是默认全部的item都可以拖拽，怎么实现部分item拖拽呢，查阅isLongPressDragEnabled方法的源码发现，上面的注释上写着：

Default value returns true but you may want to disable this if you want to 
    start dragging on a custom view touch using 
    {@link #startDrag(ViewHolder)}.

意思是如果你想自定义触摸view，那么就使用startDrag(ViewHolder)方法。

原来如此，我们可以在item的长按事件中得到当前item的ViewHolder ，然后调用ItemTouchHelper.startDrag(ViewHolder vh)就可以实现拖拽了，那就这么办：

首先我们重写isLongPressDragEnabled返回false，我们要自己调用拖拽过程：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 7][]

接着我们给RecyclerView添加item长按事件，判断item是否是最后一个（最后一个是“更多”），不是则开始拖拽。

但是，我们都知道RecyclerView并没有提供OnItemLongClickListener，这个问题我们已经在上一篇推送的文章中给出了解决方案，就是使用OnItemTouchListener，然后识别触摸手势，这里给上传送门：[RecyclerView添加ItemClickListener的方案][RecyclerView_ItemClickListener]，我就直接使用上一篇的成果，不重复讲了（这里你可以使用直接的OnItemClickListener的方案）：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 8][]

### 额外的功能 ###

### 保存位置 ###

关闭页面以后再打开，又恢复到了初始化的位置，所以就需要保存调整的位置到本地，下次初始化的时候读取位置。

保存位置应该由开发者自己实现，因为每个人本地化数据的方式都不一样，我这里做一个简单的实现，使用了开源的ACache类，两个方法，搞定：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 9][]

在clearView方法（拖拽完成）中调用存储方法，在页面初始化数据是调用读取方法，具体代码文后会给出下载链接。

### 开始拖拽时震动 ###

支付宝的拖拽网格在长按后开始拖拽时会有一次短时间的震动提示用户开始拖拽了，很友好的交互，我们也加一个：

添加权限：

<uses-permission android:name="android.permission.VIBRATE" />

在开始拖拽时添加下面代码：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 10][]

### 滑动删除 ###

我看到接口里面还有个onSwipe方法，没有使用，没错，这个可用于滑动删除。

仅仅需要几行代码实现滑动删除：

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 11][]

恩，就这样就行了？

还不行，还有标志位没设置

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 12][]

我们针对非表格式的布局设置了swipeFlags为STRAT和END，那么LinearLayoutManager肯定是支持的，看下效果

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 4][]

### fragment中的onCreateView和onViewCreated的区别和联系 ###

onViewCreated在onCreateView执行完后立即执行。  
onCreateView返回的就是fragment要显示的view。

### 参考链接 ###

[fragment中的onCreateView和onViewCreated的区别和联系\_百度知道][fragment_onCreateView_onViewCreated]

### 源代码 ###

[http://download.csdn.net/detail/liaoinstan/9494601][http_download.csdn.net_detail_liaoinstan_9494601]

### 原文链接 ###

[使用ItemTouchHelper轻松实现RecyclerView拖拽排序和滑动删除][ItemTouchHelper_RecyclerView]

[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220722/78694f3640b14f8a971c504a54b1cc6a.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 1]: /images/20220722/833d00bc7b9e4fdfa60b71e42a7889ae.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220722/4493176bc96b4a15b5aca2d7681bdc13.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 1]: /images/20220722/3c88f8da68c54d7abd0f5e8222168358.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 2]: /images/20220722/981dcbb30f5f4f0cb7525ea4382255cc.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 3]: /images/20220722/5a02359e69d04f0680a42f0fe674bdb3.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 2]: /images/20220722/b228018f29154050974b9be57fc34581.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 4]: /images/20220722/3a50007ee514417c847bca7dbb15bbe5.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 5]: /images/20220722/9a19d35eef19420990c1f399f7488589.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 3]: /images/20220722/946064faaf57471fbbc8eaa65dec3ff3.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 6]: /images/20220722/29f9ca68d88249759a6298ad3f66ed5b.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 7]: /images/20220722/be99567066f94ab9a3abd6c0b37a4a7e.png
[RecyclerView_ItemClickListener]: http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820134&idx=1&sn=58103e352e5269159778d35dc36ed207&scene=21#wechat_redirect
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 8]: /images/20220722/edcddbdf8a44495e92c3d642c00680c5.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 9]: /images/20220722/2101b3962fc5421d961d5e5bce1c3f2c.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 10]: /images/20220722/2149465ab8944c13a21acdc06c37dc44.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 11]: /images/20220722/9ceb659cb52e405698f8f225d15aea7c.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1 12]: /images/20220722/ad326d82b46b47e281dd6506c1134e23.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 4]: /images/20220722/0566c13f33174a13ba00d9ad03be2459.png
[fragment_onCreateView_onViewCreated]: http://zhidao.baidu.com/link?url=VT0vbmRTIqvTsyGgMvKS8XjB57tzuP28im4hSt28sWFMu6iYpTtU6eV_cr8tFWFASKXtkdj9796EMj0xpd4GP8JFKcRLySbI_MylyxuvLK3
[http_download.csdn.net_detail_liaoinstan_9494601]: http://download.csdn.net/detail/liaoinstan/9494601
[ItemTouchHelper_RecyclerView]: http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820215&idx=1&sn=7a7da6210f7f0b975674422fa4b159ef&scene=0#wechat_redirect