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

博文出处:RecyclerView实现拖拽排序和侧滑删除,欢迎大家关注我的博客,谢谢!

在平时开发应用的时候,经常会遇到列表排序、滑动删除的需求。如果列表效果采用的是 ListView 的话,需要经过自定义 View 才能实现效果;但是如果采用的是 RecyclerView 的话,系统 API 就已经为我们提供了相应的功能。

接下来,我们就来看一下怎么用系统 API 来实现排序和删除的效果。

创建 ItemTouchHelper

创建一个 ItemTouchHelper 对象,然后其调用 attachToRecyclerView 方法:

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
RecyclerViewAdapter adapter = new RecyclerViewAdapter();
ItemTouchHelper helper = new ItemTouchHelper(new MyItemTouchCallback(adapter));
helper.attachToRecyclerView(recyclerView);

在创建 ItemTouchHelper 对象时候,需要我们传入一个实现了 ItemTouchHelper.Callback 接口的对象。而排序和删除的逻辑都封装在了这个 ItemTouchHelper.Callback 的对象里面了。

实现 ItemTouchHelper.Callback 接口

创建 MyItemTouchCallback 类,实现 ItemTouchHelper.Callback 接口:

public class MyItemTouchCallback extends ItemTouchHelper.Callback {

    private final RecyclerViewAdapter adapter;

    public MyItemTouchCallback(RecyclerViewAdapter adapter) {
        this.adapter = adapter;
    }

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return 0;
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        return false;
    }

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

}

实现 ItemTouchHelper.Callback 接口后有三个方法需要重写:

  1. getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) :设置滑动类型的标记。需要设置两种类型的 flag ,即 dragFlagsswipeFlags ,分别代表着拖拽标记和滑动标记。最后需要调用 makeMovementFlags(dragFlags, swipeFlags) 方法来合成返回。
  2. onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) :当用户拖拽列表某个 item 时会回调。很明显,拖拽排序的代码应该在这个方法中实现。
  3. onSwiped(RecyclerView.ViewHolder viewHolder, int direction) :当用户滑动列表某个 item 时会回调。所以侧滑删除的代码应该在这个方法中实现。

重写方法

我们先来看看 getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 方法:

@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    int dragFlag;
    int swipeFlag;
    RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
    if (layoutManager instanceof GridLayoutManager) {
        dragFlag = ItemTouchHelper.DOWN | ItemTouchHelper.UP
                | ItemTouchHelper.RIGHT | ItemTouchHelper.LEFT;
        swipeFlag = 0;
    } else {
        dragFlag = ItemTouchHelper.DOWN | ItemTouchHelper.UP;
        swipeFlag = ItemTouchHelper.END;
    }
    return makeMovementFlags(dragFlag, swipeFlag);
}

代码中根据 layoutManager 分为了两种情况:

  1. 如果是 GridLayoutManager ,那么拖拽排序就可以细分为上下左右四个方向了,而且 GridLayoutManager 没有侧滑删除的功能;
  2. 若是其他的 LayoutManager ,比如说 LinearLayoutManager ,那么拖拽排序就只有上下两个方向了,并且设置 swipeFlagItemTouchHelper.END 类型;
  3. 对于其他自定义类型的 LayoutManager 可以自己根据自身情况补充。

下面就是 onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) 方法:

@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    int fromPosition = viewHolder.getAdapterPosition();
    int toPosition = target.getAdapterPosition();
    if (fromPosition < toPosition) {
        for (int i = fromPosition; i < toPosition; i++) {
            Collections.swap(adapter.getDataList(), i, i + 1);
        }
    } else {
        for (int i = fromPosition; i > toPosition; i--) {
            Collections.swap(adapter.getDataList(), i, i - 1);
        }
    }
    recyclerView.getAdapter().notifyItemMoved(fromPosition, toPosition);
    return true;
}

之前说过了,onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) 方法是用户在拖拽 item 的时候会回调。所以关于列表排序的代码应该写在这里。方法参数中的 viewHolder 代表的是用户当前拖拽的 item ,而 target 代表的是被用户拖拽所覆盖的那个 item 。所以在 onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) 方法中的逻辑就是把 fromPositiontoPosition 为止改变它们的位置。

最后就是 onSwiped(RecyclerView.ViewHolder viewHolder, int direction) 方法了:

@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
    int position = viewHolder.getAdapterPosition();
    if (direction == ItemTouchHelper.END) {
        adapter.getDataList().remove(position);
        adapter.notifyItemRemoved(position);
    }
}

这个方法在用户进行侧滑删除操作的时候会回调,其中的逻辑就是得到当前用户进行侧滑删除操作的 item ,然后将其删除。

到了这里,大功告成了。那么来看看效果吧:

效果图

改善用户体验

我们发现还有一些不完美的地方:比如当用户在拖拽排序的时候,可以改变当前拖拽 item 的透明度,这样就可以和其他 item 区分开来了。那么,我们需要去重写 onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) 方法:

@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    super.onSelectedChanged(viewHolder, actionState);
    if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
        viewHolder.itemView.setBackgroundColor(Color.BLUE);
    }
}

相对应地,当用户手指从拖拽 item 中抬起的时候,我们需要把 item 的透明度复原。需要我们重写 clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 方法:

@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    super.clearView(recyclerView, viewHolder);
    viewHolder.itemView.setBackgroundColor(0);
}

好了,来看看改进之后的效果:

改进效果图

今天就这样吧,拜拜啦!!

源码下载:TestRV.rar

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容