可拖拽和侧滑的列表

2018-06-12  本文已影响0人  清风笑_e92c

使用 RecyclerView 的 ItemTouchHelper 来实现这个效果

实现功能:

按住 item 左侧的按钮可以上下拖动 item

向右侧滑删除 item

item 拖动或侧滑时有阴影效果

实现基本功能

实现基本的功能:

长按 item 实现上下拖拽

向右侧滑删除

新建一个 MyItemTouchHelperCallback 类继承 ItemTouchHelper.Callback ,这里我们关注它其中的三个方法:

getMovementFlags() 定义 item 的可以拖拽和滑动的方向。

onMove() 当 item 想要上下拖拽时会调用此方法。

onSwiped 当 item 想要左右侧滑时会调用此方法。

在写 MyItemTouchHelperCallback 之前我们先创建一个 IItemTouchHelperAdapter 接口,让 RecyclerViewAdapter 实现这个接口。用于 RecyclerViewAdapter 回调。

publicinterfaceIItemTouchHelperAdapter {

  /**

   * 当item被移动时调用

   *

   * @param fromPosition 被操作的item的起点

   * @param toPosition  被操作的item的终点

   */

  voidonItemMove(intfromPosition, inttoPosition);

  /**

   * 当item被侧滑时调用

   *

   * @param position 被侧滑的item的position

   */

  voidonItemDismiss(intposition);

}

在 RecyclerViewAdapter 中实现刚刚继承的两个方法:

@Override

 publicvoidonItemMove(intfromPosition, inttoPosition) {

   Collections.swap(mList, fromPosition, toPosition);

   notifyItemMoved(fromPosition, toPosition);

 }

 @Override

 publicvoidonItemDismiss(intposition) {

   mList.remove(position);

   notifyItemRemoved(position);

 }

publicclassMyItemTouchHelperCallback extendsItemTouchHelper.Callback {

  privateIItemTouchHelperAdapter mAdapter;

  publicMyItemTouchHelperCallback(IItemTouchHelperAdapter mAdapter) {

    this.mAdapter = mAdapter;

  }

  @Override

  publicintgetMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

    //上下拖拽,若有其他需求同理

    intdragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;

    //向右侧滑,若有其他需求同理

    intswipeFlags = ItemTouchHelper.RIGHT;

    returnmakeMovementFlags(dragFlags, swipeFlags);

  }

  @Override

  publicbooleanonMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {

    //通知Adapter更新数据和视图

    mAdapter.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());

    //若返回false则表示不支持上下拖拽

    returntrue;

  }

  @Override

  publicvoidonSwiped(RecyclerView.ViewHolder viewHolder, intdirection) {

    //通知Adapter更新数据和视图

    mAdapter.onItemDismiss(viewHolder.getAdapterPosition());

  }

  @Override

  publicbooleanisItemViewSwipeEnabled() {

    //是否可以左右侧滑,默认返回true

    returntrue;

  }

  @Override

  publicbooleanisLongPressDragEnabled() {

    //是否可以长按上下拖拽,默认返回false

    returntrue;

  }

}

最后,在 Acivity 中将 ItemTouchHelper 和 RecyclerView 关联起来

mItemTouchHelper = new ItemTouchHelper(new MyItemTouchHelperCallback(adapter));

mItemTouchHelper.attachToRecyclerView(recyclerView);

通过按住 item 左边按钮才能上下拖拽。

侧滑或拖拽时被操作的 item Z轴高度增加,有明显的阴影。

通过按住 item 左边按钮才能上下拖拽

首先修改 MyItemTouchHelperCallback 的 isLongPressDragEnabled()

@Override

  publicbooleanisLongPressDragEnabled() {

    //禁止长按item可以上下拖拽,因为我们要自定义开启拖拽的时机

    returnfalse;

  }

其次新建一个OnStartDragListener接口,用于回调

publicinterfaceOnStartDragListener {

  /**

   * 当View需要拖拽时回调

   *

   * @param viewHolder The holder of view to drag

   */

  voidonStartDrag(RecyclerView.ViewHolder viewHolder);

}

让 Activity 继承这个类,实现 onStartDrag() 方法

@Override

  publicvoidonStartDrag(RecyclerView.ViewHolder viewHolder) {

    //通知ItemTouchHelper开始拖拽

    mItemTouchHelper.startDrag(viewHolder);

  }

在 RecyclerViewAdapter 的构造方法中传入 OnStartDragListener 的实例(即实现了该接口的Activity),给 item 左侧的按钮添加 事件监听

publicclassRecyclerViewAdapter extends

    RecyclerView.Adapter implementsIItemTouchHelperAdapter {

  //构造方法

  publicRecyclerViewAdapter(List list, OnStartDragListener mDragListener) {

    mList = list;

    this.mDragListener = mDragListener;

  }

  ...

   @Override

  publicvoidonBindViewHolder(finalIItemViewHolder holder, @SuppressLint("RecyclerView") finalintposition) {

    ...

    holder.menu.setOnTouchListener(newView.OnTouchListener() {

      @Override

      publicbooleanonTouch(View view, MotionEvent motionEvent) {

        if(motionEvent.getAction()

            == MotionEvent.ACTION_DOWN) {

          //通知ItemTouchHelper开始拖拽 

          mDragListener.onStartDrag(holder);

        }

        returnfalse;

      }

    });

  }

  ...

}

侧滑或拖拽时被操作的 item Z轴高度增加,有明显的阴影

要实现这个效果,笔者使用 ItemTouchHelper.Callback 提供的两个回调方法:

onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) :当 ViewHolder (即 item )滑动或拖动时被调用。

clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) :当 ViewHolder 滑动和拖拽结束时被调用

首先新建一个 IItemTouchHelperViewHolder 接口用于回调,让 RecyclerViewAdapter 的 ViewHolder 继承它。

publicinterfaceIItemTouchHelperViewHolder {

  /**

   * item被选中,在侧滑或拖拽过程中更新状态

   */

  voidonItemSelected();

  /**

   * item的拖拽或侧滑结束,恢复默认的状态

   */

  voidonItemClear();

}

然后让ViewHolder重写上述的两个方法:

classItemViewHolder extendsRecyclerView.ViewHolder implementsIItemTouchHelperViewHolder {

    privateTextView text;

    privateImageView menu;

    privateSwitchCompat switchCompat;

    ItemViewHolder(View itemView) {

      super(itemView);

      text = itemView.findViewById(R.id.item_list_text_textView);

      menu = itemView.findViewById(R.id.item_list_menu_imageView);

      switchCompat = itemView.findViewById(R.id.item_list_switchCompat);

    }

    @Override

    publicvoidonItemSelected() {

      itemView.setTranslationZ(10);

    }

    @Override

    publicvoidonItemClear() {

      itemView.setTranslationZ(0);

    }

}

通过 setTranslationZ() 来改变 itemView 的高度。

elevation 是静态值,是 View 在Z轴上的初始值

translationZ 是动态值,是Z上的偏移变化

所以我们这里应该使用 setTranslationZ() 来改变 View 的Z轴高度

最后修改 MyItemTouchHelperCallback ,重写上述的两个方法:

@Override

 publicvoidonSelectedChanged(RecyclerView.ViewHolder viewHolder, intactionState) {

   if(actionState != ItemTouchHelper.ACTION_STATE_IDLE) {

     //不为空闲状态,即为拖拽或侧滑状态

     if(viewHolder instanceofIItemTouchHelperViewHolder) {

       IItemTouchHelperViewHolder itemTouchHelperViewHolder =

           (IItemTouchHelperViewHolder) viewHolder;

       itemTouchHelperViewHolder.onItemSelected();

     }

   }

   super.onSelectedChanged(viewHolder, actionState);

 }

 @Override

 publicvoidclearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

   super.clearView(recyclerView, viewHolder);

   if(viewHolder instanceofIItemTouchHelperViewHolder) {

     IItemTouchHelperViewHolder itemTouchHelperViewHolder =

         (IItemTouchHelperViewHolder) viewHolder;

     itemTouchHelperViewHolder.onItemClear();

   }

 }

上一篇下一篇

猜你喜欢

热点阅读