RecyclerView 的拖动排序需要借助一下 ItemTouchHelper 这个类,ItemTouchHelper 类是 Google 提供的一个支持 RecyclerView 滑动和拖动的一个使用类,下面使用该类实现 RecyclerView 的滑动删除和拖动排序功能。首先大概介绍一下 ItemTouchHelper 的一个内部抽象类 Callback 。
1、ItemTouchHelper.Callback
该类是ItemTouchHelper类中的一个静态抽象类,作用主要是将ItemTouchHelper 与自己的应用联系在一起,让开发者通过 ViewHolder 控制每一个 View 的具体行为,接收用户的事件回调。该类里面有三个抽象方法:getMovementFlags、onMove、onSwiped。也是开发中经常要是用的。
1.1、getMovementFlags
该方法返回一个 Flags 表示Item的三种状态状态:idle(空闲)、 swiping(滑动)、dragging(拖动),根据 RecyclerView 不同的布局管理器,设置不同的滑动、拖动方向,一般使用 makeMovementFlags(int dragFlags, int swipeFlags)方法返回,dragFlags 表示拖动的方向,swipeFlags 表示滑动的方向。
public abstract int getMovementFlags(RecyclerView recyclerView, ViewHolder viewHolder);
1.2、onMove
当 ItemTouchHelper 拖动一个 Item 时该方法将会被回调,Item 将从旧的位置移动到新的位置,如果不拖动这个方法将从来不会调用,返回 true 表示 Item 已经被移动到新的位置。
public abstract boolean onMove(RecyclerView recyclerView, ViewHolder viewHolder, ViewHolder target);
1.3、onSwiped
当 Item 滑动的时候调用,如果不滑动该方法不会被调用,可通过 direction 做相应的判断执行某些操作。
public abstract void onSwiped(ViewHolder viewHolder, int direction);
此外经常使用的方法有 onSelectedChanged、clearView等方法。
1.4、onSelectedChanged
当 item 由静止状态变为滑动或拖动状态时调用此方法,可通过 actionState 判断 Item 在哪种状态下执行某些操作,重写该方法时必须调用其父类的该方法。
public void onSelectedChanged(ViewHolder viewHolder, int actionState) {
if (viewHolder != null) {
sUICallback.onSelected(viewHolder.itemView);
}
}
1.5、clearView
当与用户交互结束或相关动画完成之后该方法被调用。
public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) {
sUICallback.clearView(viewHolder.itemView);
}
2、RecyclerView实现拖动排序
RecyclerView的拖动排序需要借助一个 android.support.v7.widget.helper.ItemTouchHelper 这个类来实现,拖动排序重点是在接口里面的 onMove(int fromPosition, int toPosition) 方法,其在 ItemTouchHelperAdapter中的具体实现参考如下:
@Override
public void onMove(int fromPosition, int toPosition) {
String item = mDatas.get(fromPosition);
mDatas.remove(fromPosition);
mDatas.add(toPosition, item);
notifyItemMoved(fromPosition, toPosition);
}
3、RecyclerView 实现侧滑删除
RecyclerView 的拖动排序需要借助一个 android.support.v7.widget.helper.ItemTouchHelper 这个类来实现,侧滑删除重点是在接口中的 onSwiped(int position),其在 ItemTouchHelperAdapter中的具体实现参考如下
@Override
public void onSwiped(int position) {
list.remove(position);
notifyItemRemoved(position);
}
如果想要在滑动删除过程中实现如下效果,就需要重写ItemTouchHelper.Callback的onChildDraw方法,在其中实现相应的效果。
在重写onChildDraw方法之前,先来修改下item的布局
布局文件修改后,我们尝试来滑动一下,发现后面的删除方块并不会出现,这是因为默认的滑动方式是setTranslationX(int),即是对整个View的滑动,所以无论我们怎样滑动,都不会出现删除方块。因此,我们要改变一个种滑动方式,比如使用scrollTo(int,int),这种是对View的内容的滑动,所以随着左滑,item会向左滑去,而位于右方的方块自然也就出现了。
接着,我们考虑该“删除眼睛”的图标是怎样从小变大的,这个实现也比较简单,只要根据滑动的距离对该ImageView的LayoutParams.width进行改变就行了,不过要注意限制大小,否则过大会造成图片的失真。当滑动距离等于RecyclerView宽度的一半时,此时松开手会使Item删除,那么我们可以在该滑动距离达到该值时时“眼睛”变得最大,此时可以达到良好的交互效果,提示了用户无需继续滑动即可删除该Item了。
最后我们要考虑的是:在删除了Item或者没删除而滑回原来的位置后,我们要把所做的改变重置一下,否则,会由于RecyclerView的复用而导致其他位置的ViewHolder与当前的ViewHolder所做的改变一样,即造成显示的错误。我们可以在clearView()方法内重置改变,这样就能解决因复用而导致的显示问题了。
最后我们来看看SimpleItemTouchHelperCallback的代码:
public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback{
private ItemTouchHelperAdapter mAdapter;
public SimpleItemTouchHelperCallback(ItemTouchHelperAdapter adapter){
mAdapter = adapter;
}
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
int swipeFlags = ItemTouchHelper.LEFT;
return makeMovementFlags(dragFlags,swipeFlags);
}
@Override
public boolean isLongPressDragEnabled() {
return true;
}
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
mAdapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition());
return true;
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
mAdapter.onItemDissmiss(viewHolder.getAdapterPosition());
}
//限制ImageView长度所能增加的最大值
private double ICON_MAX_SIZE = 50;
//ImageView的初始长宽
private int fixedWidth = 150;
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
super.clearView(recyclerView, viewHolder);
//重置改变,防止由于复用而导致的显示问题
viewHolder.itemView.setScrollX(0);
((MyAdapter.NormalItem)viewHolder).tv.setText("左滑删除");
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
params.width = 150;
params.height = 150;
((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.INVISIBLE);
}
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//仅对侧滑状态下的效果做出改变
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
//如果dX小于等于删除方块的宽度,那么我们把该方块滑出来
if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
viewHolder.itemView.scrollTo(-(int) dX,0);
}
//如果dX还未达到能删除的距离,此时慢慢增加“眼睛”的大小,增加的最大值为ICON_MAX_SIZE
else if (Math.abs(dX) <= recyclerView.getWidth() / 2){
double distance = (recyclerView.getWidth() / 2 -getSlideLimitation(viewHolder));
double factor = ICON_MAX_SIZE / distance;
double diff = (Math.abs(dX) - getSlideLimitation(viewHolder)) * factor;
if (diff >= ICON_MAX_SIZE)
diff = ICON_MAX_SIZE;
((MyAdapter.NormalItem)viewHolder).tv.setText(""); //把文字去掉
((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.VISIBLE); //显示眼睛
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
params.width = (int) (fixWidth + diff);
params.height = (int) (fixWidth + diff);
((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
}
}else {
//拖拽状态下不做改变,需要调用父类的方法
super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
}
}
/**
* 获取删除方块的宽度
*/
public int getSlideLimitation(RecyclerView.ViewHolder viewHolder){
ViewGroup viewGroup = (ViewGroup) viewHolder.itemView;
return viewGroup.getChildAt(1).getLayoutParams().width;
}
}
ItemTouchHelperAdapter 的代码如下
public interface ItemTouchHelperAdapter {
//数据交换
void onItemMove(int fromPosition,int toPosition);
//数据删除
void onItemDissmiss(int position);
}
public class MyAdapter extends RecyclerView.Adapter implements ItemTouchHelperAdapter {
//数据
private List mData;
...
@Override
public void onItemMove(int fromPosition, int toPosition) {
//交换位置
String item = mDatas.get(fromPosition);
mDatas.remove(fromPosition);
mDatas.add(toPosition, item);
notifyItemMoved(fromPosition, toPosition);
}
@Override
public void onItemDissmiss(int position) {
//移除数据
mData.remove(position);
notifyItemRemoved(position);
}
}
上面我们修改了Adapter和新建了ItemTouchHelper.Callback的子类,接下来我们要为RecyclerView添加ItemTouchHelper:
//先实例化Callback
ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(myAdapter);
//用Callback构造ItemtouchHelper
ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
//调用ItemTouchHelper的attachToRecyclerView方法建立联系
touchHelper.attachToRecyclerView(mRecyclerView);
到此为止,我们已经熟悉了ItemTouchHelper的简单使用了,下面看下几个小问题。
- 默认情况下滑动到item的宽或者高一半时会触发删除,可以通过getSwipeThreshold方法修改,该方法默认返回0.5f。
public float getSwipeThreshold(ViewHolder viewHolder) {
return .5f;
}
- 如果滑动过快时你会发现,删除的提示可能不会显示完全,这时因为快速滑动时dx或dy会突变,可能在删除提示完全显示前就超出了你在onChildDraw方法中的判断条件。拿我们上面的处理举个例子。
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//仅对侧滑状态下的效果做出改变
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
//如果dX小于等于删除方块的宽度,那么我们把该方块滑出来
if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
viewHolder.itemView.scrollTo(-(int) dX,0);
}
//....
}
}else {
//拖拽状态下不做改变,需要调用父类的方法
super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
}
}
假设getSlideLimitation(viewHolder)
得到删除提示的宽度为10,在滑动删除时,dx的值可能为0、-5、-100....、0,而当dx=-100时已经不满足条件Math.abs(dX) <= getSlideLimitation(viewHolder)
了,故只显示了一半。
直到了原因解决起来就很简单了,这里给个简单的思路:当条件不满足时,调用viewHolder.itemView.scrollTo(删除块的宽度,0)
即可。
上面是通过ItemTouchHelper实现了侧滑删除,但是无法实现侧滑时显示删除提示,然后再通过点击删除提示部分再删除item。下面就通过自定义RecyclerView来实现。
4、通过自定义RecyclerView实现侧滑删除
自定义RecyclerView方式有三个关键点:
- 何时拦截事件
- 如何让的Menu展开/隐藏
4.2、何时拦截事件
RecyclerView需要处理手势事件,内部的ItemVIew也需要处理事件,那在何时去拦截事件呢?分以下两种情况:
- ACTION_DOWN时,如果已经有ItemView处于展开状态,并且这次点击的对象不是已打开的那个ItemView,则拦截事件,并将已展开的ItemView关闭。
- ACTION_MOVE时,有俩判断,满足其一则认为是侧滑:
- x方向速度大于y方向速度,且大于最小速度限制;
- x方向的侧滑距离大于y方向滑动距离,且x方向达到最小滑动距离;
public class SwipeDeleteRecyclerView extends RecyclerView {
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
...
switch (e.getAction()) {
// 第一种情况
case MotionEvent.ACTION_DOWN:
...
// 已经有ItemView处于展开状态,并且这次点击的对象不是已打开的那个ItemView
if (view != null && mFlingView != view && view.getScrollX() != 0) {
// 将已展开的ItemView关闭
view.scrollTo(0, 0);
// 则拦截事件
return true;
}
break;
// 第二种情况
case MotionEvent.ACTION_MOVE:
mVelocityTracker.computeCurrentVelocity(1000);
// 此处有俩判断,满足其一则认为是侧滑:
// 1.如果x方向速度大于y方向速度,且大于最小速度限制;
// 2.如果x方向的侧滑距离大于y方向滑动距离,且x方向达到最小滑动距离;
float xVelocity = mVelocityTracker.getXVelocity();
float yVelocity = mVelocityTracker.getYVelocity();
if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
|| Math.abs(x - mFirstX) >= mTouchSlop
&& Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
mIsSlide = true;
return true;
}
break;
...
}
...
}
}
拦截了事件以后就该处理事件了,接着往下看。
4.2、如何让的Menu展开/隐藏
接着在onTouchEvent中处理事件,控制Menu的隐藏与展开。
- 首先是在ACTION_MOVE中,如果处于侧滑状态则让目标ItemView通过scrollBy()跟着手势移动,注意判断边界
- 在ACTION_UP中,此时会产生两个结果:一个是继续展开菜单,另一个是关闭菜单。这两个结果又都分了两种情况:
1,当松手时向左的滑动速度超过了阈值,就让目标ItemView保持松手时的速度继续展开。
2,当松手时向右的滑动速度超过了阈值,就让目标ItemView关闭。
3,当松手时移动的距离超过了隐藏的宽度的一半(也就是最大可以移动的距离的一半),则让ItemVIew继续展开。
4,当松手时移动的距离小于隐藏的宽度的一半,则让ItemVIew关闭。
public boolean onTouchEvent(MotionEvent e) {
obtainVelocity(e);
switch (e.getAction()) {
case MotionEvent.ACTION_MOVE:
float dx = mLastX - x;
// 判断边界
if (mFlingView.getScrollX() + dx <= mMenuViewWidth
&& mFlingView.getScrollX() + dx > 0) {
// 随手指滑动
mFlingView.scrollBy((int) dx, 0);
}
break;
case MotionEvent.ACTION_UP:
int scrollX = mFlingView.getScrollX();
mVelocityTracker.computeCurrentVelocity(1000);
if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) { // 向左侧滑达到侧滑最低速度,则打开
// 计算剩余要移动的距离
int delt = Math.abs(mMenuViewWidth - scrollX);
// 根据松手时的速度计算要移动的时间
int t = (int) (delt / mVelocityTracker.getXVelocity() * 1000);
// 移动
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(t));
} else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) { // 向右侧滑达到侧滑最低速度,则关闭
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
} else if (scrollX >= mMenuViewWidth / 2) { // 如果超过删除按钮一半,则打开
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
} else { // 其他情况则关闭
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
}
invalidate();
releaseVelocity(); // 释放追踪
break;
}
return true;
}
4.3、缺陷
在RecyclerView的Holder的onBindViewHolder()中给滑出来的菜单添加点击事件即可响应删除:
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.tvDelete.setOnClickListener {
onDelete(holder.adapterPosition)
}
}
但是由于RecyclerView的复用机制,需要在点了删除菜单删除Item后,让Item关闭,不然就会出现删除一个Item后往下滚动,会再出来一个已展开的Item。
fun onDelete(it:Int){
mData.removeAt(it)
adapter.notifyItemRemoved(it)
// 调用closeMenu()关闭该item
mBinding.rvAll.closeMenu()
}
关闭的方法很简单,只需要让该Item scrollTo(0, 0)即可
public void closeMenu() {
if (mFlingView != null && mFlingView.getScrollX() != 0) {
// 关闭
mFlingView.scrollTo(0, 0);
}
}
因此该方式存在的缺陷是需要手动关闭已删除的itemView。