使用RecylerView完成拖动排序高仿qq侧滑删除功能
最近使用到recylerview完成拖动排序,侧滑删除,在此记录一下。
需要使用到:itemtouchhelper.callback这个类。
效果图:
在有recylerview的activity中,除了设置adapter还需要做的事情有:
myitemtouchhelpercallback callback = new myitemtouchhelpercallback(adapter); //此类继承itemtouchhelper.callback,这是帮助处理recylerview拖动侧滑操作的辅助类 itemtouchhelper helper = new itemtouchhelper(callback); //用上面实例化的callback实例化一个itemtouchhelper对象。套路代码,没啥好说的,固定做法 helper.attachtorecyclerview(recyclerview); //让help帮助处理recylerview的滑动,侧滑操作
activity中的操作就这么简单。
接下来定义一个接口,这个接口是为了解除耦合,因为我看到有一些文章在activity中处理了onmove和onswipe,抽象出来更好理解。
public interface onmoveandswipelistener { public boolean onitemmove(int fromposition, int toposition); //注意返回boolean哦 public void onitemdismiss(int position); }
在recylerview的adapter中实现此接口,
复写上面的两个方法,
@override public boolean onitemmove(int fromposition, int toposition) { if (fromposition < toposition) { //往下移动时,做数据交换 for (int i = fromposition; i < toposition; i++) { collections.swap(list,i,i+1); } }else{ //往上移动,做数据交换 for (int i = fromposition; i >toposition ; i--) { collections.swap(list,i,i-1); } } notifyitemmoved(fromposition,toposition); return true; } @override public void onitemdismiss(int position) { //此例没有对侧滑做操作,如果需要就在此模仿onitemmove方法,删除对应位置的数据,并且刷新界面就可以了 }
这样adapter的工作也就完成了,一样也很简单,都有固定的套路,注意大家看到的demo都是有个默认的动画,这个动画效果是你在设置recylerview时,recylerview.setitemanimator(参数);设置进去的,如果你没有调用此方法,则就是默认动画效果。
除了设置adapter还需要做的事情有:
写一个类继承itemtouchhelper.callback,这就是最后一步了,也是本文最开始在activity中实例化的类,
代码也不多:
public class myitemtouchhelpercallback extends itemtouchhelper.callback { myadapter adapter; public myitemtouchhelpercallback(myadapter adapter) { this.adapter = adapter; } @override public int getmovementflags(recyclerview recyclerview, recyclerview.viewholder viewholder) { //复写此方法用来设置我需要处理哪些操作 //我要处理上下拖动,就设置up down,如果是gridview类型的recylerview,up,down,left,right都可以处理 final int movemode = itemtouchhelper.up | itemtouchhelper.down; //本例没有处理侧滑,如果需要处理侧滑,就把注释取消掉 //final int swipemode = itemtouchhelper.start | itemtouchhelper.end; log.e("getmovementflags","getmovementflags"); return makemovementflags(movemode, 0);//不处理什么,就传0 } @override public boolean onmove(recyclerview recyclerview, recyclerview.viewholder viewholder, recyclerview.viewholder target) { //当你拖动时就会触发此回调,然后调用在adapter中复写的onitemmove方法,去交换数据 return adapter.onitemmove(viewholder.getadapterposition(),target.getadapterposition()); } @override public void onswiped(recyclerview.viewholder viewholder, int direction) { //如果你要处理侧滑就取消注释,逻辑和上面的onmove一样 // adapter.onitemdismiss(viewholder.getadapterposition()); } @override public void onselectedchanged(recyclerview.viewholder viewholder, int actionstate) { //此方法在你选中一个item拖动时触发,所以你可以在这里给选中的item设置一个背景色,用于高亮提示你选中了这个背景色 super.onselectedchanged(viewholder, actionstate); if (actionstate!= itemtouchhelper.action_state_idle){ viewholder.itemview.setbackgroundcolor(color.ltgray); } } @override public void clearview(recyclerview recyclerview, recyclerview.viewholder viewholder) { //因为你设置了背景色,所以在你不选中的时候,要取消掉这个背景色。 super.clearview(recyclerview, viewholder); viewholder.itemview.setbackgroundcolor(0); } }
到此为止,一个简单的拖动和侧滑就完成了,其实拖动和侧滑的逻辑都是一样的,按着上面的步骤来,效果就出来了。
上面只是一个简单的效果。把上面的效果实现了,接下来看更进阶一点的效果:
recycleviewswipedismiss
要做到上述的效果,先说一下上面的逻辑:
首先他的每个item的布局是两层:
<?xml version="1.0" encoding="utf-8"?> <!--背景view,用于提示用户操作结果--> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_background" android:layout_width="match_parent" android:layout_height="wrap_content"> <imageview android:id="@+id/iv_done" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="16dp" android:layout_marginstart="16dp" android:src="@mipmap/bt_ic_done_white_24" /> <imageview android:id="@+id/iv_schedule" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_centervertical="true" android:layout_marginend="16dp" android:layout_marginright="16dp" android:src="@mipmap/bt_ic_schedule_white_24" /> <!--滑动操作的view--> <linearlayout android:id="@+id/ll_item" android:layout_width="match_parent" android:layout_height="64dp" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="vertical" android:paddingleft="16dp" android:paddingright="16dp"> <textview android:id="@+id/tv_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textappearance="?android:attr/textappearancemedium" tools:text="item" /> </linearlayout> <view android:layout_width="match_parent" android:layout_height="1dp" android:layout_below="@id/ll_item" android:background="#b2b2b2" /> </relativelayout>
原理:全屏的linearlayout负责侧滑效果,而根布局是有颜色有图片的那一层,因为linearlayout被滑走了,所以根布局以及上面的图片就出来了。
需要在myitemtouchhelpercallback中重新复写的几个方法,以及多复写的几个方法:
<span style="white-space:pre"> </span> @override public void clearview(recyclerview recyclerview, recyclerview.viewholder viewholder) { // 释放view时回调,清除背景颜色,隐藏图标 // 默认是操作viewholder的itemview,这里调用itemtouchuiutil的clearview方法传入指定的view getdefaultuiutil().clearview(((sampleadapter.itemviewholder) viewholder).vitem); ((sampleadapter.itemviewholder) viewholder).vbackground.setbackgroundcolor(color.transparent); ((sampleadapter.itemviewholder) viewholder).ivschedule.setvisibility(view.gone); ((sampleadapter.itemviewholder) viewholder).ivdone.setvisibility(view.gone); } @override public void onselectedchanged(recyclerview.viewholder viewholder, int actionstate) { // 当viewholder的滑动或拖拽状态改变时回调 if (viewholder != null) { // 默认是操作viewholder的itemview,这里调用itemtouchuiutil的clearview方法传入指定的view getdefaultuiutil().onselected(((sampleadapter.itemviewholder) viewholder).vitem); } } @override public void onchilddraw(canvas c, recyclerview recyclerview, recyclerview.viewholder viewholder, float dx, float dy, int actionstate, boolean iscurrentlyactive) { // itemtouchhelper的ondraw方法会调用该方法,可以使用canvas对象进行绘制,绘制的图案会在recyclerview的下方 // 默认是操作viewholder的itemview,这里调用itemtouchuiutil的clearview方法传入指定的view getdefaultuiutil().ondraw(c, recyclerview, ((sampleadapter.itemviewholder) viewholder).vitem, dx, dy, actionstate, iscurrentlyactive); if (dx > 0) { // 向左滑动是的提示 ((sampleadapter.itemviewholder) viewholder).vbackground.setbackgroundresource(r.color.colordone); ((sampleadapter.itemviewholder) viewholder).ivdone.setvisibility(view.visible); ((sampleadapter.itemviewholder) viewholder).ivschedule.setvisibility(view.gone); } if (dx < 0) { // 向右滑动时的提示 ((sampleadapter.itemviewholder) viewholder).vbackground.setbackgroundresource(r.color.colorschedule); ((sampleadapter.itemviewholder) viewholder).ivschedule.setvisibility(view.visible); ((sampleadapter.itemviewholder) viewholder).ivdone.setvisibility(view.gone); } } @override public void onchilddrawover(canvas c, recyclerview recyclerview, recyclerview.viewholder viewholder, float dx, float dy, int actionstate, boolean iscurrentlyactive) { // itemtouchhelper的ondrawover方法会调用该方法,可以使用canvas对象进行绘制,绘制的图案会在recyclerview的上方 // 默认是操作viewholder的itemview,这里调用itemtouchuiutil的clearview方法传入指定的view getdefaultuiutil().ondrawover(c, recyclerview, ((sampleadapter.itemviewholder) viewholder).vitem, dx, dy, actionstate, iscurrentlyactive); } });
用getdefaultuiutil()的方法指定滑动操作的是linearlayout,所以每次被滑走的只有linearlayout。其他的操作都是一样的。