RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

红橙Darren
• 阅读 1217

1.概述


这是春节前的最后一篇分享技术的博客了,接下来的时间需要去完善视频讲解,至于今年都干了哪些事有什么成就吹牛的这里就不多说了,声明一下图片资源我是盗用的别人的。这是最后一期分享RecyclerView了,我们直接看这一期需要分享的效果:      

RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

这里写图片描述

  
  
  视频讲解http://pan.baidu.com/s/1jIlwl4E

相关文章:
  
  RecyclerView更全解析之 - 基本使用和分割线解析
  
  RecyclerView更全解析之 - 打造通用的万能Adapter
  
  RecyclerView更全解析之 - 为它优雅的添加头部和底部
  
  RecyclerView更全解析之 - 打造通用的下拉刷新上拉加载
  
  RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

2.基本思路


前面我们一直都是围着RecyclerView在转,发现这个控件让我们是又爱又恨,通过这几期的分享或者说是封装应该已经让我们喜欢上它了,那么今天我们在来看一个如此神奇的功能。我记得当初在做ListView的拖动排序的时候在网上找了各种资料,代码量还真不是一丁点,现在我们来看一下RecyclerView的拖动排序和侧滑删除需要怎么去实现,告诉你只需要简简单单的几行代码。
  实现这么个功能我们不需要再去继承RecyclerView,只需要去了解ItemTouchHelper这个类即可,接下来我们就去看看都有些什么。

3.基本实现


3.1 实现侧滑删除
  ItemTouchHelper这是google给我们写好的,专门用来处理Touch相关的一个类,我们先来实现一个简单的功能侧滑删除,先上代码再解释:

 // 实现左边侧滑删除
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
            @Override
            public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // 获取触摸响应的方向   包含两个 1.拖动dragFlags 2.侧滑删除swipeFlags
                // 代表只能是向左侧滑删除,当前可以是这样ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT
                int swipeFlags = ItemTouchHelper.LEFT;

                // 拖动暂不处理默认是0
                return makeMovementFlags(0, swipeFlags);
            }

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

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

            }
        });
        // 这个就不多解释了,就这么attach
        itemTouchHelper.attachToRecyclerView(mRecyclerView); 

ItemTouchHelper.Callback 默认需要实现三个方法:

  • getMovementFlags() 获取Touch的响应方向,包含两个 1.拖动dragFlags 2.侧滑删除swipeFlags,都可以是上下左右,上面事例没有处理拖动所以传的是0,侧滑给的是ItemTouchHelper.LEFT,所以待会效果是向左滑动删除;

  • onMove() 拖动的时候会不断的回调这个方法,拖动的时候肯定需要不断的更新列表数据,达到一边拖动列表不断更新当前数据;

  • onSwiped() 侧滑删除之后的回调方法。

RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

这里写图片描述

目前的效果可以侧滑删除但是发现列表不更新,而且侧滑的时候不高亮,当然如果你不想要高亮那就不处理,再来改改:

 // 实现左边侧滑删除
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
            @Override
            public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // 获取触摸响应的方向   包含两个 1.拖动dragFlags 2.侧滑删除swipeFlags
                // 代表只能是向左侧滑删除,当前可以是这样ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT
                int swipeFlags = ItemTouchHelper.LEFT;

                // 拖动暂不处理默认是0
                return makeMovementFlags(0, swipeFlags);
            }

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

            /**
             * 侧滑删除后会回调的方法
             */
            @Override
            public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
                // 获取当前删除的位置
                int position = viewHolder.getAdapterPosition();
                mItems.remove(position);
                // adapter 更新notify当前位置删除
                mAdapter.notifyDataSetChanged();
            }

            /**
             * 拖动选择状态改变回调
             */
            @Override
            public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
                if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
                    // ItemTouchHelper.ACTION_STATE_IDLE 看看源码解释就能理解了
                    // 侧滑或者拖动的时候背景设置为灰色
                    viewHolder.itemView.setBackgroundColor(Color.GRAY);
                }
            }

            /**
             * 回到正常状态的时候回调
             */
            @Override
            public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // 正常默认状态下背景恢复默认
                viewHolder.itemView.setBackgroundColor(0);
            }
        });
        // 这个就不多解释了,就这么attach
        itemTouchHelper.attachToRecyclerView(mRecyclerView); 

RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

这里写图片描述

3.2 实现拖动排序
  上面有两个方法onSelectedChanged(),clearView()不做过多的介绍,接下来实现拖动排序,还是我们在上面的代码基础山做一下修改,需要修改两个方法:
  getMovementFlags() 的dragFlags参数不能传0了,侧滑的时候没处理现在需要处理一下了;
  onMove() 在拖动的时候不断的回调改变列表的位置,不光要改变位置还要不断的改变数据集合的列表。

 // 实现左边侧滑删除 和 拖动排序
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
            @Override
            public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // 获取触摸响应的方向   包含两个 1.拖动dragFlags 2.侧滑删除swipeFlags
                // 代表只能是向左侧滑删除,当前可以是这样ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT
                int swipeFlags = ItemTouchHelper.LEFT;


                // 拖动
                int dragFlags = 0;
                if (recyclerView.getLayoutManager() instanceof GridLayoutManager) {
                    // GridView 样式四个方向都可以
                    dragFlags = ItemTouchHelper.UP | ItemTouchHelper.LEFT |
                            ItemTouchHelper.DOWN | ItemTouchHelper.RIGHT;
                } else {
                    // ListView 样式不支持左右,只支持上下
                    dragFlags = ItemTouchHelper.UP |
                            ItemTouchHelper.DOWN;
                }

                return makeMovementFlags(dragFlags, swipeFlags);
            }

            /**
             * 拖动的时候不断的回调方法
             */
            @Override
            public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
                // 获取原来的位置
                int fromPosition = viewHolder.getAdapterPosition();
                // 得到目标的位置
                int targetPosition = target.getAdapterPosition();
                if (fromPosition > targetPosition) {
                    for (int i = fromPosition; i < targetPosition; i++) {
                        Collections.swap(mItems, i, i + 1);// 改变实际的数据集
                    }
                } else {
                    for (int i = fromPosition; i > targetPosition; i--) {
                        Collections.swap(mItems, i, i - 1);// 改变实际的数据集
                    }
                }
                mAdapter.notifyItemMoved(fromPosition, targetPosition);
                return true;
            }

            /**
             * 侧滑删除后会回调的方法
             */
            @Override
            public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
                // 获取当前删除的位置
                int position = viewHolder.getAdapterPosition();
                mItems.remove(position);
                // adapter 更新notify当前位置删除
                mAdapter.notifyItemRemoved(position);
            }

            /**
             * 拖动选择状态改变回调
             */
            @Override
            public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
                if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
                    // ItemTouchHelper.ACTION_STATE_IDLE 看看源码解释就能理解了
                    // 侧滑或者拖动的时候背景设置为灰色
                    viewHolder.itemView.setBackgroundColor(Color.GRAY);
                }
            }

            /**
             * 回到正常状态的时候回调
             */
            @Override
            public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // 正常默认状态下背景恢复默认
                viewHolder.itemView.setBackgroundColor(0);
                ViewCompat.setTranslationX(viewHolder.itemView,0);
            }
        });
        // 这个就不多解释了,就这么attach
        itemTouchHelper.attachToRecyclerView(mRecyclerView); 

RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序

这里写图片描述

  
附视频地址:http://pan.baidu.com/s/1jHW1X10

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
红橙Darren 红橙Darren
2年前
RecyclerView更全解析之 - 为它优雅的添加头部和底部
1.概述上一期的,解决了几个坑。那么这一期我们来动态为RecyclerView去加载头部和底部,为上一期的RecyclerView列表数据添加广告轮播图,至于广告轮播大家可以看一下这一期,这里我就不多讲了,直接拿过来用。    视频讲解:相关文章:                        
红橙Darren 红橙Darren
2年前
打造炫酷通用的ViewPager指示器 - Adapter模式适配所有
1.概述上一期我们已经写了一篇可是这种效果虽然绚烂可以装装A和C之间,但是在实际的大多数效果中并不常见,只是在内涵段子中有这个效果而已,那么这一期我们就用Adapter适配器模式适配所有的效果,堪称终结者。附视频地址:    这里写图片描述2.效果实现我还是还是拿上一个实例来做演示吧。这里我贴几种常见的效果,首先声明Android自带的
红橙Darren 红橙Darren
2年前
RecyclerView更全解析之 - 打造通用的万能Adapter
1.概述离春节只有一个月,同时也在准备公司的节目所以每天有一段时间在练习吉他,刚刚群里有人问我什么时候开始分享仿内涵段子整个项目。算一下时间RecyclerView可能有4期左右的分享,自己又只能周末录讲解视频,所有可能会要等过完春节才能全部开始。  上一篇已经简单的讲解了一下。这一期我们来看一下怎么去打造一个万能的RecyclerView.Adap
红橙Darren 红橙Darren
2年前
RecyclerView更全解析之 - 基本使用和分割线解析
1.概述昨天跟自己群里的人唠嗑的时候发现还有人在用Eclipse,我相信可能还是有很多人在用ListView,这里介绍一个已经出来的n年了的控件RecyclerView,实现ListView,GridView,瀑布流的效果。还可以轻松的实现一些复杂的功能,如QQ的拖动排序,侧滑删除等等。相关文章:              
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
2年前
Android蓝牙连接汽车OBD设备
//设备连接public class BluetoothConnect implements Runnable {    private static final UUID CONNECT_UUID  UUID.fromString("0000110100001000800000805F9B34FB");
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_