Android开发在RecyclerView上面实现"拖放"和"滑动删除"-2

上篇给大家介绍了Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能

效果如下:

拖动手柄

在设计一个支持"拖放"的列表时, 通常提供一个在触摸时初始化拖拽的"拖动手柄". 因其可发现性和可用性而被Material Guidelines所推荐, 尤其是列表处于"可编辑模式"时.

首先更新item的布局(item_main.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/item"
 android:layout_width="match_parent"
 android:layout_height="?listPreferredItemHeight"
 android:clickable="true"
 android:focusable="true"
 android:foreground="?selectableItemBackground">
 <TextView
 android:id="@+id/text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_vertical"
 android:layout_marginLeft="16dp"
 android:textAppearance="?android:attr/textAppearanceMedium" />
 <ImageView
 android:id="@+id/handle"
 android:layout_width="?listPreferredItemHeight"
 android:layout_height="match_parent"
 android:layout_gravity="center_vertical|right"
 android:scaleType="center"
 android:src="@drawable/ic_reorder_grey_500_24dp" />
</FrameLayout>

用作"拖放手柄"的图片可以在Material Design Icon找到, 也可以方便地通过Android Material Design Icon Generator Plugin添加.

我们曾经提到过, 可以通过代码ItemTouchHelper.startDrag(RecyclerView.ViewHolder)来开启拖动. 所以我们要做的就是更新ViewHolder来包含新的手柄视图, 并设置一个简单的触摸事件接口, 以触发startDrag()方法.

我们需要定义一个接口来传递拖动事件.

public interface OnStartDragListener {
 /**
 * Called when a view is requesting a start of a drag.
 *
 * @param viewHolder The holder of the view to drag.
 */
 void onStartDrag(RecyclerView.ViewHolder viewHolder);
}

然后, 在ItemViewHolder中实现化手柄视图.

public final ImageView handleView;
public ItemViewHolder(View itemView) {
 super(itemView);
 // ...
 handleView = (ImageView) itemView.findViewById(R.id.handle);
}

并且更新Adapter.

private final OnStartDragListener mDragStartListener;
public RecyclerListAdapter(OnStartDragListener dragStartListener) {
 mDragStartListener = dragStartListener;
 // ...
}
@Override
public void onBindViewHolder(final ItemViewHolder holder,
 int position) {
 // ...
 holder.handleView.setOnTouchListener(new OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 if (MotionEventCompat.getActionMasked(event) ==
  MotionEvent.ACTION_DOWN) {
 mDragStartListener.onStartDrag(holder);
 }
 return false;
 }
 });
}

完整的Adapter应该看起来像这个.

剩下的是把OnStartDragListener添加到Fragment.

public class RecyclerListFragment extends Fragment implements
 OnStartDragListener {
 // ...
 @Override
 public void onViewCreated(View view, Bundle icicle) {
 super.onViewCreated(view, icicle);
 RecyclerListAdapter a = new RecyclerListAdapter(this);
 // ...
 }
 @Override
 public void onStartDrag(RecyclerView.ViewHolder viewHolder) {
 mItemTouchHelper.startDrag(viewHolder);
 }
}

但你运行之后, 可以看到这样的效果:

标示选中视图

在上一篇的基础示例中, 被拖拽的item事实上是被选中的, 但是没有可视化的标示. 由于显著的理由, 这是不受欢迎的, 但也很容易修复. 事实上, 在ItemTouchHelper的帮助下, 只要你的ViewHolder的itemView设置了background集合(selector), 就会得到相应的效果. 在Lollipop及之后的版本, item view的elevation在拖拽和滑动期间会增加. 而在之前的版本中, 滑动时会有fade效果. 看起来就像:

效果看起来不错, 但你可能想要更多的控制. 一种方法是, 无论任何时候ViewHolder被选中或者清空, 让item自己处理这种改变. 由此, ItemTouchHelper.Callback提供了两种回调.

onSelectedChanged(RecyclerView.ViewHolder, int). 每一次ViewHolder的状态, 变成drag(ACTION_STATE_DRAG)或者swipe(ACTION_STATE_SWIPE)时, 该方法就会被调用. 这时候是将ViewHolder的状态变成active的完美时刻.

clearView(RecyclerView, RecyclerView.ViewHolder). 在被拖拽的ViewHolder放下时, 或者是滑动操作取消或者完成时(ACTION_STATE_IDLE), 这里会是将ItemView状态设置为idle的最好的地方.

那么, 我们就把两者绑定在一起实现.

首先, 创建一个接口, 让目标ViewHolder实现:

/**
 * Notifies a View Holder of relevant callbacks from
 * {@link ItemTouchHelper.Callback}.
 */
public interface ItemTouchHelperViewHolder {
 /**
 * Called when the {@link ItemTouchHelper} first registers an
 * item as being moved or swiped.
 * Implementations should update the item view to indicate
 * it's active state.
 */
 void onItemSelected();
 /**
 * Called when the {@link ItemTouchHelper} has completed the
 * move or swipe, and the active item state should be cleared.
 */
 void onItemClear();
}

接着, 触发相应的回调方法:

@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder,
 int actionState) {
 // We only want the active item
 if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
 if (viewHolder instanceof ItemTouchHelperViewHolder) {
 ItemTouchHelperViewHolder itemViewHolder =
  (ItemTouchHelperViewHolder) viewHolder;
 itemViewHolder.onItemSelected();
 }
 }
 super.onSelectedChanged(viewHolder, actionState);
}
@Override
public void clearView(RecyclerView recyclerView,
 RecyclerView.ViewHolder viewHolder) {
 super.clearView(recyclerView, viewHolder);

 if (viewHolder instanceof ItemTouchHelperViewHolder) {
 ItemTouchHelperViewHolder itemViewHolder =
 (ItemTouchHelperViewHolder) viewHolder;
 itemViewHolder.onItemClear();
 }
}

现在, 剩下的是让ItemViewHolder实现ItemTouchHelperViewHolder:

public class ItemViewHolder extends RecyclerView.ViewHolder
 implements ItemTouchHelperViewHolder {
 // ...
 @Override
 public void onItemSelected() {
 itemView.setBackgroundColor(Color.LTGRAY);
 }
 @Override
 public void onItemClear() {
 itemView.setBackgroundColor(0);
 }
}

考虑到这仅仅是一个示例, 我们仅仅是在item处于active状态时设置了灰色背景, 当item被清空时, 把灰色背景删除了. 如果你的Adapter和ItemTouchHelper紧密结对的话, 轻易地放弃这个设置也行, 转而可以直接在ItemTouchHelper.Callback转变item的状态.

Grid布局

如果你想在本项目中转而使用GridLayoutManager, 你会发现并没有正常地起作用. 原因以及修复原因都很简单: 必须告诉ItemTouchHelper我们想要支持左右拖拽. 在SimpleTouchHelperCallback中, 我们已经声明:

@Override
public int getMovementFlags(RecyclerView recyclerView,
 RecyclerView.ViewHolder viewHolder) {
 int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
 int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END;
 return makeMovementFlags(dragFlags, swipeFlags);
}

支持Grid布局所要求的唯一改变是dragFlags中添加左右方向:

int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN |
 ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;

但是, 对于grid而言, "滑动删除"并不是一个天然的功能模式, 所以你也许会写一些如下的代码:

@Override
public int getMovementFlags(RecyclerView recyclerView,
 RecyclerView.ViewHolder viewHolder) {
 int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN |
  ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
 int swipeFlags = 0;
 return makeMovementFlags(dragFlags, swipeFlags);
}

Grid上面的上下左右"拖放"效果看起来如下:

自定义滑动动画

对我们而言, 在viewHolder拖拽和滑动的时候, ItemTouchHelper.Callback为我们提供了一个十分方便的方式来完全控制ViewHolder的动画. 因为ItemTouchHelper是一个ItemDecoration, 我们可以用类似的方式, 详细地了解视图的绘制(hook into the View drawing).

下面是一个简单的例子, 来覆盖默认的滑动动画, 来展示一个线性的fade效果.

@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView,
 ViewHolder viewHolder, float dX, float dY,
 int actionState, boolean isCurrentlyActive) {
 if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
 float width = (float) viewHolder.itemView.getWidth();
 float alpha = 1.0f - Math.abs(dX) / width;
 viewHolder.itemView.setAlpha(alpha);
 viewHolder.itemView.setTranslationX(dX);
 } else {
 super.onChildDraw(c, recyclerView, viewHolder, dX, dY,
  actionState, isCurrentlyActive);
 }
}

参数dX和dY代表选中视图的当前位置,

  • -1.0f表示完完全全的从ItemTouchHelper.END到ItemTouchHelper.START的滑动.
  • 1.0f表示完完全全的从ItemTouchHelper.START到ItemTouchHelper.END的滑动.

对于任何没有处理的actionState你都可以调用super的方法, 从而使用默认的动画.

总结

我们仅仅了解了自定义ItemTouchHelper所能做的事情中有趣的部分, 我希望能够在一篇文章中包含更多内容, 但是考虑到文章长度, 还是分开比较好.

以上所述是小编给大家介绍的Android开发在RecyclerView上面实现"拖放"和"滑动删除功能(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • android给RecyclerView加上折叠的效果示例

    RecyclerView有很高的自由度,可以说只有想不到没有做不到,真是越用越喜欢.这次用超简单的方法,让RecyclerView带上折叠的效果. 效果是这样的. 总结一下这个列表的特点,就是以下三点: 1. 重叠效果: 2. 层次感: 3. 首项的差动效果. 下面我们来一个个解决. 我们新建一个ParallaxRecyclerView,让它继承RecyclerView,并使用LinearLayoutManager作为布局管理器. 重叠效果 其实就是每一项都搭一部分在它前面那项而已.我们知道,R

  • Android中RecyclerView实现横向滑动代码

    RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.本文给大家介绍Android中RecyclerView实现横向滑动代码,一起看看吧. android.support.v7.widget.RecyclerView 功能:RecyclerView横向滑动 控件:<android.support.v7.widget.RecyclerView /> Java类:RecyclerView.GalleryAdap

  • Android中实现淘宝购物车RecyclerView或LIstView的嵌套选择的逻辑

    使用了RecyclerView嵌套RecyclerView的方案. 购物车的第一个界面为RecyclerView,每个Item里面包含一个店铺.在Item中使用RecyclerView包含店铺和店铺的多个商品. 实现思路: 使用接口回调将第二个adapter的商品选择的监听事件回调给第一个adapter后再在第一个adapter中回调给MainActivity. 使用接口回调将第一个adapter的商品选择的监听事件回调给MainActivity. 在MainActivity中处理第一个adap

  • Android RecyclerView打造自动循环效果

    先看效果图 主要处理的地方: 1.RecyclerView中Adapter的item个人可以无限轮询. 2.RecyclerView自动滑动 3.手指按下时滑动停止,手指抬起后继续自动滑动 public class AutoPollRecyclerView extends RecyclerView { private static final long TIME_AUTO_POLL = 16; AutoPollTask autoPollTask; private boolean running;

  • Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能

    先给大家展示下大概效果图: Android上面有许多的教程, 库和示例, 在RecyclerView上面实现"拖放"和"滑动删除"功能. 尽管有更新, 更好的方法可用, 但是大多数人依然使用旧的View.OnDragListener和Roman Nurik的SwipeToDismiss方式. 除了经常使用GestureDetector和onInterceptTouchEvent之外, 几乎很少有人使用新的API, 要不然的话, 实现就复杂. 事实上真的有十分简单的方

  • Android使用recyclerview打造真正的下拉刷新上拉加载效果

    前言 前段时间需要用到recyclerview,就想找个封装好的下拉刷新,上拉加载的库,结果愣是没找到,便自己写了一个. 注意:我说的是"上拉加载",不是滑到底部自动加载. 虽然现在自动加载是主流和趋势,但也不排除有时候就需要用到上拉加载啊,毕竟林子大了,什么样的产品经理都有对吧. 代码写好后,准备发布到bintray的时候,向同事征求这个项目的名字,同事说:"就叫DZTRecyclerview!" 不解,同事解释:"叼炸天Recyclerview!&qu

  • Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法

    RecyclerView 已经出来很久了,但是在项目中之前都使用的是ListView,最近新的项目上了都大量的使用了RecycleView.尤其是瀑布流的下拉刷新,网上吧啦吧啦没有合适的自己总结了一哈. 先贴图上来看看: 使用RecyclerView实现上拉加载更多和下拉刷新的功能我自己有两种方式: 1.使用系统自带的Android.support.v4.widget.SwipeRefreshLayout这个控价来实现. 2.自定义的里面带有RecyleView的控件. 使用RecycleVie

  • Android中RecyclerView嵌套滑动冲突解决的代码片段

    在纵向RecyclerView嵌套横向RecyclerView时,如果纵向RecyclerView有下拉刷新功能,那么内部的横向RecyclerView的横向滑动体验会很差.(只有纯横向滑动时,才能滑动内部的横向RecyclerView,否则滑动事件就会影响到下拉刷新),添加拦截判断. public class MySwipeRefreshLayout extends SwipeRefreshLayout { private boolean mIsVpDragger; private final

  • Android开发在RecyclerView上面实现"拖放"和"滑动删除"-2

    上篇给大家介绍了Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能 效果如下: 拖动手柄 在设计一个支持"拖放"的列表时, 通常提供一个在触摸时初始化拖拽的"拖动手柄". 因其可发现性和可用性而被Material Guidelines所推荐, 尤其是列表处于"可编辑模式"时. 首先更新item的布局(item_main.xml): <FrameLayout xmlns

  • Android开发在RecyclerView上面实现"拖放"和"滑动删除"-2

    上篇给大家介绍了Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能 效果如下: 拖动手柄 在设计一个支持"拖放"的列表时, 通常提供一个在触摸时初始化拖拽的"拖动手柄". 因其可发现性和可用性而被Material Guidelines所推荐, 尤其是列表处于"可编辑模式"时. 首先更新item的布局(item_main.xml): <FrameLayout xmlns

  • Android开发中RecyclerView模仿探探左右滑动布局功能

    我在此基础上优化了部分代码, 添加了滑动回调, 可自定义性更强. 并且添加了点击按钮左右滑动的功能. 据说无图都不敢发文章了. 看图: 1:这种功能, 首先需要自己管理布局 继承 RecyclerView.LayoutManager , 显示自己管理布局, 比如最多显示4个view, 并且都是居中显示. 底部的View还需要进行缩放,平移操作. public class OverLayCardLayoutManager extends RecyclerView.LayoutManager { p

  • Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能

    先给大家展示下大概效果图: Android上面有许多的教程, 库和示例, 在RecyclerView上面实现"拖放"和"滑动删除"功能. 尽管有更新, 更好的方法可用, 但是大多数人依然使用旧的View.OnDragListener和Roman Nurik的SwipeToDismiss方式. 除了经常使用GestureDetector和onInterceptTouchEvent之外, 几乎很少有人使用新的API, 要不然的话, 实现就复杂. 事实上真的有十分简单的方

  • Android开发使用RecyclerView添加点击事件实例详解

    目录 引言 一.RecyclerView基本使用 1. 添加适配器Adapter 2. 创建列表的每个项的item_layout.xml文件 3. 在activity中使用 二.RecyclerView点击事件详细步骤 1. 在RecyclerView对应的Adapter类里面新建接口 2. 在Adapter类里创建setOnItemClickListener方法 3. 在Adapter类的onBindViewHolder里给每个item设置回调 4. 在RecyclerView对应的Activ

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android:下拉刷新+加载更多+滑动删除实例讲解

    小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第一时间掌握最新消息,加载更多是什么nie,简单来说就是在网页上逛淘宝的时候,我们可以点击下一页来满足我们更多的需求,但是在手机端就不一样了,没有上下页,怎么办nie,方法总比困难多,细心的小伙伴可能会发现,在手机端中,有加载更多来满足我们的要求,其实加载更多也是分页的一种体现.小伙伴在使用手机版QQ

  • Android开发中RecyclerView组件使用的一些进阶技讲解

    RecyclerView的优势: 它自带ViewHolder来实现View的复用机制,再也不用ListView那样在getView()里自己写了 使用LayoutManager可以实现ListView,GridView以及流式布局的列表效果 通过setItemAnimator(ItemAnimator animator)可以实现增删动画(懒的话,可以使用默认的ItemAnimator对象,效果也不错) 控制item的间隔,可以使用addItemDecoration(ItemDecoration

  • Android开发之使用150行代码实现滑动返回效果

    今天带大家实现滑动返回效果.,具体内容如下所示: 先看看效果图: 因为没有具体内容,也没有简书的图片资源,所以稍微简陋了点. 但是依然不妨碍我们的效果展示~ OK,接下来惯例,通过阅读本文你能学习到: ViewDragHelper的使用(如果你想学习自定义View,那么ViewDragHelper你绝对不能错过) 好像也没有什么了.... 这个效果,难度不大,会ViewDragHelper的同学应该10分钟就能写出来了吧~ 如果不会也没关系~ 1. 我们自定义一个SwipeBackFrameLa

随机推荐