RecyclerView 之使用 ItemTouchHelper 实现交互动画

时间  2019-12-01
标签 recyclerview 使用 itemtouchhelper 实现 交互 动画 繁體版
原文   原文链接

1、简述

RecyclerView默认就有item动画，例如在增长或删除item时，都会有一个条目间位移的动画，但本文要说的不是这个！！！本文的主角是v7包中的ItemTouchHelper，它跟RecyclerView结合后将会带来神奇的交互效果。示例以下：javascript

效果仍是比较酷炫的吧，上图中有四步操做：java

  1. 长按item后拖动，与其余item交换位置
  2. 按住item右面的图标后拖动，与其余item交换位置
  3. 左滑item变透明并缩小，超出屏幕后，其余item补上
  4. 右滑item变透明并缩小，超出屏幕后，其余item补上

下面将一一实现出这些效果android

2、初识ItemTouchHelper

一、建立ItemTouchHelper

// 建立ItemTouchHelper，并跟RecyclerView绑定
mItemTouchHelper = new ItemTouchHelper(mCallback);
mItemTouchHelper.attachToRecyclerView(mRv);复制代码

上面就是ItemTouchHelper在本例中出场的三行代码中的两行代码，但这并不能完成上面的效果，ItemTouchHelper只是一个中间人，它将ItemTouchHelper.Callback和RecyclerView链接起来，具体效果还须要由Callback实现。git

二、自定义ItemTouchHelper.Callback

1）建立一个本身的Callback

继承ItemTouchHelper.Callback后必须实现以下三个方法。github

public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return 0;
    }

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

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

    }
}复制代码

2）重写getMovementFlags()

getMovementFlags()是用来判断RecyclerView上的哪些方向操做交由ItemTouchHelper.Callback控制，详细介绍以下：ide

/** * 获取动做标识 * 动做标识分：dragFlags和swipeFlags * dragFlags：列表滚动方向的动做标识（如竖直列表就是上和下，水平列表就是左和右） * wipeFlags：与列表滚动方向垂直的动做标识（如竖直列表就是左和右，水平列表就是上和下） */
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    // 若是你不想上下拖动，能够将 dragFlags = 0
    int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;

    // 若是你不想左右滑动，能够将 swipeFlags = 0
    int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;

    //最终的动做标识（flags）必需要用makeMovementFlags()方法生成
    int flags = makeMovementFlags(dragFlags, swipeFlags);
    return flags;
}复制代码

上面我让item的上下左右都交由ItemTouchHelper.Callback控制，看下效果：布局

能够看到左右有效，但上下无效。仔细想一想也是，原本就是竖直滚动列表，若是上下都直接交给ItemTouchHelper.Callback控制了，那RecyclerView的列表滚动功能该怎么办？因此，要触发上下拖动的交互效果，确定有其余开启的方式。动画

3）开启长按item拖动效果

直接重写ItemTouchHelper.Callback的isLongPressDragEnabled()。ui

/** * 是否开启item长按拖拽功能 */
@Override
public boolean isLongPressDragEnabled() {
    return true;
}复制代码

默认返回是false，重写返回true。如今看下效果如何：this

长按后能够拖动了，可是这样不太方便，接下来实现按住item右图标进行拖动的效果。

4）开启按住图标拖动效果

ItemTouchHelper的startDrag(viewHolder)方法能够手动开启拖动效果，上面的ItemTouchHelper实例建立在Activity中，而图标实例在Adapter中，为了下降耦合，这里先写一个接口：

public interface ItemDragListener {
    void onStartDrags(RecyclerView.ViewHolder viewHolder);
}复制代码

接口由Activity实现，在Adapter建立时传入

public class ItemTouchHelperActivity extends AppCompatActivity implements ItemDragListener {

    private ItemTouchHelper mItemTouchHelper;
    ...

    private void setRecyclerView() {
        mAdapter = new ItemTouchHelperAdapter(mData, this);
        ...
    }

    @Override
    public void onStartDrags(RecyclerView.ViewHolder viewHolder) {
        mItemTouchHelper.startDrag(viewHolder);
    }
}复制代码

接口由Adapter的图标触摸时调用

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder> {

    private List<String> mData;
    private ItemDragListener mItemDragListener;

    public ItemTouchHelperAdapter(List<String> data, ItemDragListener itemDragListener) {
        mData = data;
        mItemDragListener = itemDragListener;
    }

    ...

    @Override
    public void onBindViewHolder(final ItemTouchHelperViewHolder viewHolder, int position) {
        ...
        viewHolder.mIvDrag.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                mItemDragListener.onStartDrags(viewHolder);
                return false;
            }
        });
    }
｝复制代码

这样在让图标在触摸时，间接的调用了mItemTouchHelper.startDrag(viewHolder)，看下效果：

3、深刻ItemTouchHelper

上面作到了item的上下拖动和左右滑动效果，但只是当前item的动画效果罢了，下面继续完成与其余item互动的效果吧。

一、上下拖动时与其余item进行位置交换

1）原理

其实ItemTouchHelper.Callback自己不具有将两个item互换位置的功能，但RecyclerView能够，咱们能够在item拖动的时候把当前item与另外一个item的数据位置交换，再调用RecyclerView的notifyItemMoved()方法刷新布局，同时，由于RecyclerView自带item动画，就能够完成上面的交互效果了。

2）实现

item拖动要在ItemTouchHelper.Callback中监听，而数据交换处理要在Adapter中进行，为了下降耦合，这里先写一个接口：

public interface ItemMoveListener {
    boolean onItemMove(int fromPosition, int toPosition);
}复制代码

接口由Adapter实现

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder> implements ItemMoveListener{

    ...

    @Override
    public boolean onItemMove(int fromPosition, int toPosition) {
        //一、交换数据
        Collections.swap(mData, fromPosition, toPosition);
        //二、刷新
        notifyItemMoved(fromPosition, toPosition);
        return true;
    }
}复制代码

接口在建立ItemTouchHelper.Callback时传入，在onMove()中调用

public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {

    ItemMoveListener mItemMoveListener;

    public MyItemTouchHelperCallback(ItemMoveListener itemMoveListener) {
        mItemMoveListener = itemMoveListener;
    }

    ...        

    /** * 当item拖拽移动时触发 * * @param recyclerView * @param viewHolder 当前被拖拽的item的viewHolder * @param targetViewHolder 当前被拖拽的item下方的另外一个item的viewHolder * @return */
    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder targetViewHolder) {
        return mItemMoveListener.onItemMove(viewHolder.getAdapterPosition(), targetViewHolder.getAdapterPosition());
    }
}复制代码

3）效果：

二、左右滑出屏幕时其余item补上

1）原理

相同的，只要在item滑出屏幕时，将对应的数据删掉，再调用RecyclerView的notifyItemRemoved()方法刷新布局便可。

2）实现

item滑动要在ItemTouchHelper.Callback中监听，而数据删除处理要在Adapter中进行，因此只须要加上面的接口中增长一个方法：

public interface ItemMoveListener {
    ...
    boolean onItemRemove(int position);
}复制代码

接口由Adapter实现

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder> implements ItemMoveListener{

    ...

    @Override
    public boolean onItemRemove(int position) {
        //一、删除数据
        mData.remove(position);
        //二、刷新
        notifyItemRemoved(position);
        return true;
    }
}复制代码

接口在ItemTouchHelper.Callback在onSwiped()中调用

/** * 当item侧滑出去时触发（竖直列表是侧滑，水平列表是竖滑） * * @param viewHolder * @param direction 滑动的方向 */
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
    mItemMoveListener.onItemRemove(viewHolder.getAdapterPosition());
}复制代码

3）效果：

如今大部分效果已经实现，接下来是细节处理。

三、交互时背景变化

1）原理

在item被拖拽或侧滑时修改背景色，当动做结束后将背景色恢复回来，而ItemTouchHelper.Callback中正好有对应这两个状态的方法，分别是：onSelectedChanged()、clearView()。

2）实现

/** * 当item被拖拽或侧滑时触发 * * @param viewHolder * @param actionState 当前item的状态 */
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    super.onSelectedChanged(viewHolder, actionState);
    //不论是拖拽或是侧滑，背景色都要变化
    if (actionState != ItemTouchHelper.ACTION_STATE_IDLE)
        viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(android.R.color.darker_gray));
}

/** * 当item的交互动画结束时触发 * * @param recyclerView * @param viewHolder */
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    super.clearView(recyclerView, viewHolder);
    viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(android.R.color.white));
}复制代码

3）效果

四、左右滑动时item渐变

1）分析及实现

在最开始的图中，当item被侧滑出去的过程当中，能够看到item的透明度在渐渐变浅，高度在渐渐变小，其实就是让item执行了两种属性动画而已，在ItemTouchHelper.Callback中有一个方法能够拿到item被拖拽或滑动时的位移变化，那就是onChildDraw()方法，这样就很好办了，看以下代码实现：

@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {

    //这句代码就是item拖拽和滑动效果的实现，因此这句不能省略
    super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);

    //咱们只须要在左右滑动时，将透明度和高度的值变小（1 --> 0）
    if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
        float value = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
        viewHolder.itemView.setAlpha(value);
        viewHolder.itemView.setScaleY(value);
    }
}复制代码

2）效果（有瑕疵）

能够看到，item在滑动过程当中渐渐透明并高度缩小了，可是，我明明是删除了两条，怎么结果列表中多出来两条空白的数据！这又是为何呢？

3）修复

其实上图中并非多出了两条空白数据，它们是正常的数据，只是看不到了，这是由于RecyclerView条目（itemView）覆用致使的，前面在onChildDraw()方法中对itemView设置了透明和缩小，而一个列表中固定只有几个itemView而已，当那两个透明缩小的itemView被再次使用时，以前设置的透明度和高度比例已是0，因此就出现了这种状况，解决方法也很简单，只要在item被移除后，将itemView的透明度和高度比例设置回来便可，代码以下：

/** * 当item的交互动画结束时触发 * * @param recyclerView * @param viewHolder */
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    super.clearView(recyclerView, viewHolder);
    ...

    viewHolder.itemView.setAlpha(1);
    viewHolder.itemView.setScaleY(1);
}复制代码

4）效果（完美）

到这里，最开始的全部交互效果都已经实现了。

最后附上Demo连接

github.com/GitLqr/Mate…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程