高端操作！实现RecyclerView的上下拖拽

写在前面

最近工作强度好大，一天能敲10小时以上的代码，敲的我头疼。代码写多了，突然想起来，好像真的很久没发技术文了，原因有很多，就不说了。。都是借口，今天分享内容也是工作时遇上的一个小需求，觉得挺有意思，那就写篇文章吧！
 
需求描述大概是这样，一个页面有一个列表，列表里有很多item，需要支持用户拖拽其中item到不同的位置，来对列表项进行重新排序。

要实现的效果大概如下：

除去与业务相关的部分，我们只需关注如何让列表item支持上下拖拽就行，这也是这个需求的关键。

我们组安卓岗在半年前已经全部用kotlin进行开发了，所以后续我的文章也会以kotlin为主进行demo的编写。一些还没学过kotlin的朋友也不用担心，kotlin和java很像，只要你熟悉java，相信你也是可以看得懂的。

那么应该如何实现呢？我们需要写个接口去监听每个item的当前状态（是否被拖动）以及其当前所在的位置吗？不需要

得益于RecyclerView优秀的封装，系统内部默认提供了这样的接口给我们去调用。

ItemTouchHelper

简单介绍下这个类，系统将这些接口封装到了这个类里，看看这个类的描述，它继承自RecyclerView.ItemDecoration，实现了RecyclerView.OnChildAttachStateChangeListener接口。

public class ItemTouchHelper extends RecyclerView.ItemDecoration

        implements RecyclerView.OnChildAttachStateChangeListener {}

ItemDecoration这个类比较熟悉，它可以用来让不同的子View的四周拥有不同宽度/高度的offset，换句话说，可以控制子View显示的位置。

而OnChildAttachStateChangeListener这个接口，则是用来回调当子View Attach或Detach到RecyclerView时的事件。

那怎么使用这个ItemTouchHelper呢？

val callback = object : Callback {...}

val itemTouchHelper = ItemTouchHelperImpl(callback)

itemTouchHelper.attachToRecyclerView(mRecyclerView)

首先定义一个callback，然后传给ItemTouchHelper生成实例，最后将实例与recyclerView进行绑定。

ItemTouchHelper只负责与recyclerView的绑定，剩下的操作都代理给了callback处理。

callback内部实现了许多方法，我们只需要关注里面几个比较重要的方法

getMovementFlags()

callback内部帮我们管理了item的两种状态，一个是用户长按后的拖拽状态，另一个是用户手指左右滑动的滑动状态（以竖向列表为例），这个方法返回允许用户拖拽或滑动时的方向。

override fun getMovementFlags(

    recyclerView: RecyclerView,

    viewHolder: RecyclerView.ViewHolder

): Int = makeMovementFlags(dragFlags, swipeFlags)

比如我们希望，竖向列表时，禁止用户的滑动操作，仅支持用户上、下方向的拖拽操作

因此我们可以这样定义：

val dragFlags = (ItemTouchHelper.UP or ItemTouchHelper.DOWN)

val swipeFlags = 0 // 0 表禁止用户各个方向的操作，即禁止用户滑动

然后传入makeMovementFlags()，这个方法是callback默认提供的，我们不需要关注它的内部实现。

onMove()

当用户正在拖动子View时调用，可以在这里进行子View位置的替换操作

onSwiped()

当用户正在滑动子View时调用，可以在这里进行子View的删除操作。

isItemViewSwipeEnabled(): Boolean

返回值表是否支持滑动

isLongPressDragEnabled(): Boolean

返回值表是否支持拖动

onSelectedChanged(ViewHolder viewHolder, int actionState)

当被拖动或者被滑动的ViewHolder改变时调用，actionState会返回当前viewHolder的状态，有三个值：

• 
  
• 
  

  ACTION_STATE_SWIPE：当View刚被滑动时返回

  
  
  
• 
  

  ACTION_STATE_DRAG：当View刚被拖动时返回

  
  
  
• 
  

  ACTION_STATE_IDLE：当View即没被拖动也没被滑动时或者拖动、滑动状态还没被触发时，返回这个状态

  
  
  

在这个方法我们可以对View进行一些UI的更新操作，例如当用户拖动时，让View高亮显示等。

clearView()

当View被拖动或滑动完后并且已经结束了运动动画时调用，我们可以在这里进行UI的复原，例如当View固定位置后，让View的背景取消高亮。

真正的开始

简单介绍完这个Callback，接下来写我们的代码

首先准备好我们的列表，列表不需要复杂，够演示就行，就放一行文字，代码我就不贴了，RecyclerVIew、Adapter、ViewHolder相信大家都很熟悉了，我们直接进入主题。

新建一个ItemTouchImpl类，继承自ItemTouchHelper

class ItemTouchHelperImpl(private val callback: Callback): ItemTouchHelper(callback)

不需要实现任何方法，ItemTouchHelper将工作代理给了Callback，所以我们接下来要实现这个Callback。

新建一个ItemTouchHelperCallback，继承自ItemTouchHelper.Callback，默认情况下，我们需要至少实现getMovementFlags()，onMove()，onSwiped() 三个方法。

在这个需求中，我们不需要滑动的效果，所以onSwiped()空实现就好了，同时让getMovementFlags()返回只允许上下拖拽的标志位就行。

如果我们直接在ItemTouchHelperCallback中实现相关逻辑，那么相当于这个Callback只会被用来处理上下拖拽的情况，是一个定制的Callback。下次遇上点别的场景，我们依然需要重新建个类去实现getMovementFlags()，太麻烦了，也不够通用。

为了方便后面的开发者，我决定把它做成一个通用的组件，对外暴露需要的接口，需要用到的时候只需要按需实现需要的接口就行了。

新建个ItemTouchDelegate接口，分别空实现onMove()，onSwiped()，uiOnSwiping()，uiOnDragging()，uiOnClearView()，其中getMovementFlags()我们默认实现，让ItemTouchHelper进支持上下方向的拖动、其他行为禁止，也即能满足我们的需求。

interface ItemTouchDelegate {

    fun getMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Array<Int> {

        val layoutManager = recyclerView.layoutManager

        var swipeFlag = 0

        var dragFlag = 0

        if (layoutManager is LinearLayoutManager) {

            if (layoutManager.orientation == LinearLayoutManager.VERTICAL) {

                swipeFlag = 0   // 不允许滑动

                dragFlag = (UP or DOWN)     // 允许上下拖拽

            } else {

                swipeFlag = 0

                dragFlag = (LEFT or RIGHT)  // 允许左右滑动

            }

        }


        return arrayOf(dragFlag, swipeFlag)

    }


    fun onMove(srcPosition: Int, targetPosition:Int): Boolean = true


    fun onSwiped(position: Int, direction: Int) {}


    // 刚开始滑动时，需要进行的UI操作

    fun uiOnSwiping(viewHolder: RecyclerView.ViewHolder?) {}


    // 刚开始拖动时，需要进行的UI操作

    fun uiOnDragging(viewHolder: RecyclerView.ViewHolder?) {}


    // 用户释放与当前itemView的交互时，可在此方法进行UI的复原

    fun uiOnClearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {}

}

然后，新建一个ItemTouchHelperCallback，把ItemTouchDelegate作为参数传进构造方法内，具体看代码：

class ItemTouchHelperCallback(@NotNull val helperDelegate: ItemTouchDelegate): ItemTouchHelper.Callback() {

    private var canDrag: Boolean? = null

    private var canSwipe: Boolean? = null


    fun setDragEnable(enable: Boolean) {

        canDrag = enable

    }


    fun setSwipeEnable(enable: Boolean) {

        canSwipe = enable

    }


    override fun getMovementFlags(

        recyclerView: RecyclerView,

        viewHolder: RecyclerView.ViewHolder

    ): Int {

        val flags = helperDelegate.getMovementFlags(recyclerView, viewHolder)

        return if (flags != null && flags.size >= 2) {

            makeMovementFlags(flags[0], flags[1])

        } else makeMovementFlags(0, 0)

    }


    override fun onMove(

        recyclerView: RecyclerView,

        viewHolder: RecyclerView.ViewHolder,

        target: RecyclerView.ViewHolder

    ): Boolean {

        return helperDelegate.onMove(viewHolder.bindingAdapterPosition, target.bindingAdapterPosition)

    }


    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {

        helperDelegate.onSwiped(viewHolder.bindingAdapterPosition, direction)

    }


    override fun isItemViewSwipeEnabled(): Boolean {

        return canSwipe == true

    }


    override fun isLongPressDragEnabled(): Boolean {

        return canDrag == true

    }


    /**

     * 更新UI

     */

    override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {

        super.onSelectedChanged(viewHolder, actionState)

        when(actionState) {

            ACTION_STATE_SWIPE -> {

                helperDelegate.uiOnSwiping(viewHolder)

            }

            ACTION_STATE_DRAG -> {

                helperDelegate.uiOnDragging(viewHolder)

            }

        }

    }


    /**

     * 更新UI

     */

    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {

        super.clearView(recyclerView, viewHolder)

        helperDelegate.uiOnClearView(recyclerView, viewHolder)

    }

}

看代码应该就一目了然了，在onSelectedChanged()里根据actionState，将具体的事件分发给uiOnSwiping()和uiOnDragging()，同时让它默认不支持拖动和滑动，按业务需要打开。

最后修改下ItemTouchHelperImpl，将ItemTouchHelperCallback传进去。

class ItemTouchHelperImpl(private val callback: ItemTouchHelperCallback): ItemTouchHelper(callback) {


}

怎么使用

只需在recyclerView初始化后加这样一段代码

// 实现拖拽

val itemTouchCallback = ItemTouchHelperCallback(object : ItemTouchDelegate{


    override fun onMove(srcPosition: Int, targetPosition: Int): Boolean {

        if (mData.size > 1 && srcPosition < mData.size && targetPosition < mData.size) {

            // 更换数据源中的数据Item的位置

            Collections.swap(mData, srcPosition, targetPosition);

            // 更新UI中的Item的位置

            mAdapter.notifyItemMoved(srcPosition, targetPosition);

            return true

        }

        return false

    }


    override fun uiOnDragging(viewHolder: RecyclerView.ViewHolder?) {

        viewHolder?.itemView?.setBackgroundColor(Color.parseColor("#22000000"))

    }


    override fun uiOnClearView(

        recyclerView: RecyclerView,

        viewHolder: RecyclerView.ViewHolder

    ) {

        viewHolder.itemView.setBackgroundColor(Color.parseColor("#FFFFFF"))

    }


})


val itemTouchHelper = ItemTouchHelperImpl(itemTouchCallback)

itemTouchHelper.attachToRecyclerView(mRecycler)

我们只需要实现onMove()，在onMove()主要是更新数据源的位置，以及UI界面的位置，在uiOnDragging()和uiOnClearView()里对item进行高亮显示和复原。剩下的onSwiped()滑动那些不在需求范围内，不需要实现。

但还是不能用，还记得我们的helper是默认不支持滑动和滚动的吗，我们要使用的话，还需要打开开关，就可以实现本文开头那样的效果了

itemTouchCallback.setDragEnable(true) 

如果你需要支持滑动，只需要修改下重新实现getMovementFlags()，onSwiped()，同时设置setSwipeEnable() = true即可。

源码在这里，有需要的朋友麻烦自取哈
 

兄dei，如果觉得我写的还不错，麻烦帮个忙呗 :-)

1. 
   
2. 给俺点个赞被，激励激励我，同时也能让这篇文章让更多人看见，(#^.^#)
   
3. 不用点收藏，诶别点啊，你怎么点了？这多不好意思！
   
4. 噢！还有，我维护了一个路由库。。没别的意思，就是提一下，我维护了一个路由库 =.= !！
   

拜托拜托，谢谢各位同学！