使用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。其他的操作都是一样的。

时间: 2024-07-29 14:59:57

使用RecylerView完成拖动排序高仿qq侧滑删除功能的相关文章

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

 最近使用到Recylerview完成拖动排序,侧滑删除,在此记录一下. 需要使用到:ItemTouchHelper.Callback这个类. 效果图: 在有RecylerView的Activity中,除了设置Adapter还需要做的事情有: MyItemTouchHelperCallback callback = new MyItemTouchHelperCallback(adapter); //此类继承ItemTouchHelper.Callback,这是帮助处理RecylerView拖动侧

Android使用Item Swipemenulistview实现仿QQ侧滑删除功能

大家都用过QQ,肯定有人好奇QQ滑动删除Item的效果是怎样实现的,其实我们使用Swipemenulistview就可以简单的实现.先看看我们项目中的效果: 使用的时候可以把Swipemenulistview作为一个library,也可以把Swipemenulistview的源码拷贝到我们的项目中来,使用步骤大致可以分为三步:1.在布局中配置:2.在Java代码中初始化配置:3.按钮点击事件的处理 1.在布局中配置 xml布局文件中只需要简单使用这个自定义的ListView就行了,需要注意的是必

Android 高仿QQ滑动弹出菜单标记已读、未读消息

  在上一篇博客<Android 高仿微信(QQ)滑动弹出编辑.删除菜单效果,增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接下来,将进一步学习,如何为不同的list item呈现不同的菜单,此处我们做一个实例:Android 高仿QQ滑动弹出菜单标记已读.未读消息,看下效果图: 1. 创建项目,并导入SwipeMenuListView类库 2. 创建消息实体bean: public class Msg { public int

Android 高仿QQ图片选择器_Android

当做一款APP,需要选择本地图片时,首先考虑的无疑是系统相册,但是Android手机五花八门,再者手机像素的提升,大图无法返回等异常因数,导致适配机型比较困难,微信.QQ都相继的在自己的APP里集成了图片选择功能,放弃了系统提供的图片选择器,这里仿造QQ做了一个本地图片选择器,PS:之前有人说"仿"写成"防"了,今儿特意注意了下,求不错. 先上一张效果图,无图无真相啊~~~ 实现的效果大概是这样的: 1.单选:跳转到本地图片选择文件夹,选择文件夹后,进入到该文件夹下

将不定期开放“人人都说Swing丑,唯我独爱它—Swing高仿QQ” 源码

问题描述 从今天开始将会在CSDN上开放Swing高仿QQ的源码.所有信息第一时间在群里公布一起探讨java方面的问题.本群位置有限先来先得所以加群时请注名信息来源地packageclient.login;importjava.awt.EventQueue;importjava.awt.Image;importjava.awt.SplashScreen;importjava.awt.Window;importjava.awt.event.ActionEvent;importjava.awt.ev

Android 高仿QQ 沉浸式状态栏_Android

前言: 在进入今天正题前,还是老样子先谈谈感想吧,最近感觉整个都失去了方向感,好迷茫!找工作又失败了,难道Android真的饱和了?这两天我一直没出门,除了下楼哪外卖就是宅宿舍了,静想了许久,我还是不能忘了初心,我相信我找不到工作的原因有很多,最关键的还是要技术够硬才行啊,奔跑吧孩子!接下来我就给大家介绍怎样快速打造沉浸式状态栏吧,虽然感觉有点相见恨晚,但其实不完! 一:何为沉浸式状态栏? 沉浸式状态栏是Google从Android 4.4开始,给我们开发者提供的一套能透明的系统ui样式,这样样

Android 高仿QQ图片选择器

当做一款APP,需要选择本地图片时,首先考虑的无疑是系统相册,但是Android手机五花八门,再者手机像素的提升,大图无法返回等异常因数,导致适配机型比较困难,微信.QQ都相继的在自己的APP里集成了图片选择功能,放弃了系统提供的图片选择器,这里仿造QQ做了一个本地图片选择器,PS:之前有人说"仿"写成"防"了,今儿特意注意了下,求不错. 先上一张效果图,无图无真相啊~~~ 实现的效果大概是这样的: 1.单选:跳转到本地图片选择文件夹,选择文件夹后,进入到该文件夹下

Android 高仿QQ 沉浸式状态栏

前言: 在进入今天正题前,还是老样子先谈谈感想吧,最近感觉整个都失去了方向感,好迷茫!找工作又失败了,难道Android真的饱和了?这两天我一直没出门,除了下楼哪外卖就是宅宿舍了,静想了许久,我还是不能忘了初心,我相信我找不到工作的原因有很多,最关键的还是要技术够硬才行啊,奔跑吧孩子!接下来我就给大家介绍怎样快速打造沉浸式状态栏吧,虽然感觉有点相见恨晚,但其实不完! 一:何为沉浸式状态栏? 沉浸式状态栏是Google从Android 4.4开始,给我们开发者提供的一套能透明的系统ui样式,这样样

Android_UI 仿QQ侧滑菜单效果的实现

相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级 2.在布