可拖拽和侧滑的列表

使用 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();

   }

 }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容