当前位置: 首页 > 编程笔记 >

使用RecylerView完成拖动排序高仿qq侧滑删除功能

谭景明
2023-03-14
本文向大家介绍使用RecylerView完成拖动排序高仿qq侧滑删除功能,包括了使用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。其他的操作都是一样的。

 类似资料:
  • 本文向大家介绍Android使用Item Swipemenulistview实现仿QQ侧滑删除功能,包括了Android使用Item Swipemenulistview实现仿QQ侧滑删除功能的使用技巧和注意事项,需要的朋友参考一下  大家都用过QQ,肯定有人好奇QQ滑动删除Item的效果是怎样实现的,其实我们使用Swipemenulistview就可以简单的实现。先看看我们项目中的效果:    使

  • 本文向大家介绍Android 模仿QQ侧滑删除ListView功能示例,包括了Android 模仿QQ侧滑删除ListView功能示例的使用技巧和注意事项,需要的朋友参考一下 需求: 1、listView可以侧滑item,展示删除按钮,点击删除按钮,删除当前的item 2、在删除按钮展示时,点击隐藏删除按钮,不响应item的点击事件 3、在删除按钮隐藏时,点击item响应点击事件 根据以上需求在网

  • 本文向大家介绍Android实现QQ侧滑(删除、置顶等)功能,包括了Android实现QQ侧滑(删除、置顶等)功能的使用技巧和注意事项,需要的朋友参考一下 实现类似QQ滑动出现可操作项的功能,在网上看到有人自定义LinearLayout实现这个效果,但是灵活性有限。此demo使用开源项目SwipeLayout实现该功能。关于SwipeLayout的常用设置和属性,这里都做介绍,下面进入正题。 一、

  • 本文向大家介绍Android高仿QQ6.0侧滑删除实例代码,包括了Android高仿QQ6.0侧滑删除实例代码的使用技巧和注意事项,需要的朋友参考一下 推荐阅读: 先给大家分享一下,侧滑删除,布局也就是前面一个item,然后有两个隐藏的按钮(TextView也可以),然后我们可以向左侧滑动,然后显示出来,然后对delete(删除键)实现监听,就可以了哈。好了那就来看看代码怎么实现的吧。 首先和之前

  • 本文向大家介绍Android实现3种侧滑效果(仿qq侧滑、抽屉侧滑、普通侧滑),包括了Android实现3种侧滑效果(仿qq侧滑、抽屉侧滑、普通侧滑)的使用技巧和注意事项,需要的朋友参考一下 自己实现了一下侧滑的三种方式(注释都写代码里了) 本文Demo下载地址:Andriod侧滑 本文实现所需框架:nineoldandroids下载地址:nineoldandroids 1.普通侧滑: 主要是基于

  • 本文向大家介绍Android滑动优化高仿QQ6.0侧滑菜单(滑动优化),包括了Android滑动优化高仿QQ6.0侧滑菜单(滑动优化)的使用技巧和注意事项,需要的朋友参考一下  推荐阅读:Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一) 但是之前的实现,只是简单的可以显示和隐藏左侧的菜单,但是特别生硬,而且没有任何平滑的趋势,那么今天就来优化一下吧,加上平滑效果,而且可

  • 本文向大家介绍RecycleView实现item侧滑删除与拖拽,包括了RecycleView实现item侧滑删除与拖拽的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了RecycleView实现item侧滑删除与拖拽的具体代码,供大家参考,具体内容如下 一、添加依赖 二、布局文件 这里使用的的控件是: com.yanzhenjie.recyclerview.SwipeRecyclerV

  • 本文向大家介绍Android使用DrawerLayout实现仿QQ双向侧滑菜单,包括了Android使用DrawerLayout实现仿QQ双向侧滑菜单的使用技巧和注意事项,需要的朋友参考一下 1、概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣;另一方面,这玩意