类似支付宝应用管理界面——RecycleView+ItemTouchHelper实现拖拽滑动

Posted 2023-03-03

参考技术A

以下就是通过RecycleView+ItemTouchHelper实现拖拽滑动的效果图，看起来有没有很炫酷。其实实现起来很简单，我们接下来就开始介绍。

ItemTouchHelper是一个强大的工具，它处理好了关于在RecyclerView上添加拖动排序与滑动删除的所有事情。它是RecyclerView.ItemDecoration的子类，也就是说它可以轻易的添加到几乎所有的LayoutManager和Adapter中。它还可以和现有的item动画一起工作，提供受类型限制的拖放动画等等。

因为要使用RecycleView，同时ItemTouchHelper也是RecycleView中的类。

为了使用ItemTouchHelper，你需要实现ItemTouchHelper.Callback接口，通过这个接口，你可以监听“move”和 “swipe”事件，在这里你也可以控制View的选择状态和重写默认动画。

必须实现主要的回调方法：

具体解释这三个方法：

ItemTouchHelper允许你判断事件方向。但你必须覆写getMovementFlags()方法去指定支持哪些方向。使用ItemTouchHelper.makeMovementFlags(int, int)创建代表方向的Flag。这里我们同时支持drag和swipe。实现这个方法，ItemTouchHelper可以只能drag而不能swipe（反之亦然）,总之根据自己的需求指定。

当Item移动或者滑动时，会回调这两个方法，然后可以在这两个方法内部设置回调通知更新适配器或者页面显示的数据。

我们还将使用2个帮助方法：

实现isLongPressDragEnabled()方法返回true去支持长按RecyclerView的item时的drag事件。或者，也可以调用ItemTouchHelper.startDrag(RecyclerView.ViewHolder) 方法来开始一个拖动。

实现isItemViewSwipeEnabled()方法返回true开启触摸视图时的swipe功能。另外ItemTouchHelper.startSwipe(RecyclerView.ViewHolder)也开始swipe事件。

设置给RecycleView:
实现了以上的方法后，就会监听到拖拽和滑动的手势，并会处理相关操作。
接下来需要做的就是把实现的自定义ItemTouchHelper.Callback类设置给RecycleView。

以上就是关于RecycleView+ItemTouchHelper实现拖拽滑动的简单介绍，下面为实现上述效果图，具体讲解其实现过程。

一共用了两个RecyclerView来分别实现我的频道和更多频道的内容，其实可以使用一个RecyclerView通过判断类型来实现多布局类型，效果会更好，后续会尝试，暂时先这样了。感兴趣的可以参考我的 另一篇文章 来自行实现。

先来个简单的，就是点击Item后，我的频道和更多频道中，一个频道删除点击的频道，另一个频道增加该频道。

思路：设置Item的点击事件的监听

在Adaper类中，设置监听接口，并提供传入接口对象的方法让Activity调用

当点击Item后，出发监听，产生回调

在Activity中根据传入的数据进行操作

我的频道所对应的RecyclerView的操作

更多频道所对应的RecyclerView的操作

主要实现两个内容：
第一：RecyclerView中内容数据的修改更新，呈现点击后增删的效果。
第二：调用方法通知进行缓存处理，记录修改后的效果。同时通知新闻首页中频道的更新显示。关于第二部分的内容不详细介绍了，可以看最下方的源码地址。

先根据布局 判断支持的拖拽的方向 ，如果是GridLayoutManager 和StaggeredGridLayoutManager支持上下左右拖拽，如果是LinearLayoutManager支持上下拖拽，本例中不支持滑动操作。

监听移动事件，其中 mOnItemMoveListener.onItemMove 是对移动的监听的回调，判断是否可以移动并通知Adapter类数据更新。

两种情况：
第一：如果移动的是“头条”频道或者移动到“头条”频道，返回false，则不能进行移动。
第二：不是上面的情况。更新我的频道栏目中频道的显示顺序，同时通知数据缓存并通知新闻首页频道顺序的更新。关于这部分的详细内容，可以看最下方的源码。

是否允许拖拽，通过外部传入来开启。

在Adapter类中，根据触摸的Item的类型来判断是否开启长按拖拽。

如果触摸的对象是“头条”频道，则不开启拖拽，其他情况就会开启长按。

通过以上步骤就可以实现效果图中的效果，真实效果还是不错的。 源码地址 ，感兴趣的看一下，给个Star支持下，看项目中的NewsChannelActivity部分即可。