RecyclerView实现滑动删除和拖拽功能

  1. 云栖社区>
  2. 博客>
  3. 正文

RecyclerView实现滑动删除和拖拽功能

玄学酱 2017-08-02 15:56:00 浏览1271
展开阅读全文

前言

从Android 5.0开始,谷歌推出了新的控件RecyclerView,相对于早它之前的ListView,优点多多,功能强大,也给我们的开发着提供了极大的便利,今天自己学习一下RecyclerView轻松实现滑动删除及拖拽的效果,如下图。

相信研究过RecyclerView的同学,应该很清楚该怎么实现这样的效果,若是用ListView,这样的效果实现起来可能就有点麻烦,但是在强大的RecyclerView面前这样的的效果只需很少的代码,因为谷歌给我们提供了强大的工具类ItemTouchHelper,它已经处理了关于RecyclerView拖动和滑动的实现,并且我们可以在其中实现我们自己的动画,以及定制我们想要的效果。

ItemTouchHelper.Callback有几个重要的抽象方法,我们继承该抽象类,并重写抽象方法。它是我们实现滑动和拖拽重要的回调。


  1. int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 

该方法返回一个整数,用来指定拖拽和滑动在哪个方向是被允许的。在其中使用makeMovementFlags(int dragFlags, int swipeFlags)返回,该方法第一个参数用来指定拖动,第二个参数用来指定滑动。对于方向参数有6种


  1. ItemTouchHelper.UP  //滑动拖拽向上方向 
  2.  
  3. ItemTouchHelper.DOWN//向下 
  4.  
  5. ItemTouchHelper.LEFT//向左 
  6.  
  7. ItemTouchHelper.RIGHT//向右 
  8.  
  9. ItemTouchHelper.START//依赖布局方向的水平开始方向 
  10.  
  11. ItemTouchHelper.END//依赖布局方向的水平结束方向  

  1. boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) 

onMove方法是拖拽的回调,参数viewHolder是拖动的Item,target是拖动的目标位置的Item,该方法如果返回true表示切换了位置,反之返回false。


  1. void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) 

onSwiped方法为Item滑动回调,viewHolder为滑动的item,direction为滑动的方向。

上面三个方法是必须重写的方法,当然还有其它一些可供选择的方法。


  1. /** 
  2.  
  3.     * Item是否支持长按拖动 
  4.  
  5.     * 
  6.  
  7.     * @return 
  8.  
  9.     *          true  支持长按操作 
  10.  
  11.     *          false 不支持长按操作 
  12.  
  13.     */ 
  14.  
  15. oolean isLongPressDragEnabled() 
  16.  
  17.  
  18.  
  19.    /** 
  20.  
  21.     * Item是否支持滑动 
  22.  
  23.     * 
  24.  
  25.     * @return 
  26.  
  27.     *          true  支持滑动操作 
  28.  
  29.     *          false 不支持滑动操作 
  30.  
  31.     */ 
  32.  
  33. oolean isItemViewSwipeEnabled() 
  34.  
  35.  
  36.  
  37.    /** 
  38.  
  39.     * 移动过程中绘制Item 
  40.  
  41.     * 
  42.  
  43.     * @param c 
  44.  
  45.     * @param recyclerView 
  46.  
  47.     * @param viewHolder 
  48.  
  49.     * @param dX 
  50.  
  51.     *          X轴移动的距离 
  52.  
  53.     * @param dY 
  54.  
  55.     *          Y轴移动的距离 
  56.  
  57.     * @param actionState 
  58.  
  59.     *          当前Item的状态 
  60.  
  61.     * @param isCurrentlyActive 
  62.  
  63.     *          如果当前被用户操作为true,反之为false 
  64.  
  65.     */ 
  66.  
  67. nChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive)  

需要注意的是,如果我们想实现拖动或者滑动必须将上面是否支持拖动或者滑动的方法返回true,否则onMove或者onSwiped方法不会执行。

功能实现


  1. adapter=new CustomAdapter(getActivity(),strings); 
  2.  
  3.        recycleview.setAdapter(adapter); 
  4.  
  5.        ItemTouchHelper.Callback callback=new RecycleItemTouchHelper(adapter); 
  6.  
  7.        ItemTouchHelper itemTouchHelper=new ItemTouchHelper(callback); 
  8.  
  9.        itemTouchHelper.attachToRecyclerView(recycleview);  

对于ItemTouchHelper 构造方法接收一个ItemTouchHelper.Callback参数,而这个Callback就是我们在在上述讲到的工具类,初始化ItemTouchHelper 后通过其attachToRecyclerView(@Nullable RecyclerView recyclerView)方法将我们实现的ItemTouchHelper.Callback和RecyclerView关联,最终达到我们的效果,代码看起来是不是很简单,接下来我们看下我们自定义的Callback。


  1. package com.example.xh.adapter; 
  2.  
  3.   
  4.  
  5. import android.content.res.Resources; 
  6.  
  7. import android.graphics.Bitmap; 
  8.  
  9. import android.graphics.BitmapFactory; 
  10.  
  11. import android.graphics.Canvas; 
  12.  
  13. import android.graphics.Paint; 
  14.  
  15. import android.graphics.Rect; 
  16.  
  17. import android.support.v7.widget.RecyclerView; 
  18.  
  19. import android.support.v7.widget.helper.ItemTouchHelper; 
  20.  
  21. import android.util.Log; 
  22.  
  23. import android.view.View
  24.  
  25.   
  26.  
  27. import com.example.xh.R; 
  28.  
  29. import com.example.xh.utils.MyApplication; 
  30.  
  31.   
  32.  
  33. /** 
  34.  
  35. * Created by xiehui on 2017/2/23. 
  36.  
  37. */ 
  38.  
  39. public class RecycleItemTouchHelper extends ItemTouchHelper.Callback{ 
  40.  
  41.     private static final String TAG ="RecycleItemTouchHelper" ; 
  42.  
  43.     private final ItemTouchHelperCallback helperCallback; 
  44.  
  45.   
  46.  
  47.     public RecycleItemTouchHelper(ItemTouchHelperCallback helperCallback) { 
  48.  
  49.         this.helperCallback = helperCallback; 
  50.  
  51.     } 
  52.  
  53.   
  54.  
  55.     /** 
  56.  
  57.      * 设置滑动类型标记 
  58.  
  59.      * 
  60.  
  61.      * @param recyclerView 
  62.  
  63.      * @param viewHolder 
  64.  
  65.      * @return 
  66.  
  67.      *          返回一个整数类型的标识,用于判断Item那种移动行为是允许的 
  68.  
  69.      */ 
  70.  
  71.     @Override 
  72.  
  73.     public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
  74.  
  75.         Log.e(TAG, "getMovementFlags: " ); 
  76.  
  77.         //START  右向左 END左向右 LEFT  向左 RIGHT向右  UP向上 
  78.  
  79.         //如果某个值传0,表示不触发该操作,次数设置支持上下拖拽,支持向右滑动 
  80.  
  81.         return makeMovementFlags(ItemTouchHelper.UP|ItemTouchHelper.DOWN,ItemTouchHelper.END ); 
  82.  
  83.     } 
  84.  
  85.     /** 
  86.  
  87.      * Item是否支持长按拖动 
  88.  
  89.      * 
  90.  
  91.      * @return 
  92.  
  93.      *          true  支持长按操作 
  94.  
  95.      *          false 不支持长按操作 
  96.  
  97.      */ 
  98.  
  99.     @Override 
  100.  
  101.     public boolean isLongPressDragEnabled() { 
  102.  
  103.         return super.isLongPressDragEnabled(); 
  104.  
  105.     } 
  106.  
  107.     /** 
  108.  
  109.      * Item是否支持滑动 
  110.  
  111.      * 
  112.  
  113.      * @return 
  114.  
  115.      *          true  支持滑动操作 
  116.  
  117.      *          false 不支持滑动操作 
  118.  
  119.      */ 
  120.  
  121.     @Override 
  122.  
  123.     public boolean isItemViewSwipeEnabled() { 
  124.  
  125.         return super.isItemViewSwipeEnabled(); 
  126.  
  127.     } 
  128.  
  129.     /** 
  130.  
  131.      * 拖拽切换Item的回调 
  132.  
  133.      * 
  134.  
  135.      * @param recyclerView 
  136.  
  137.      * @param viewHolder 
  138.  
  139.      * @param target 
  140.  
  141.      * @return 
  142.  
  143.      *          如果Item切换了位置,返回true;反之,返回false 
  144.  
  145.      */ 
  146.  
  147.     @Override 
  148.  
  149.     public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { 
  150.  
  151.         Log.e(TAG, "onMove: " ); 
  152.  
  153.         helperCallback.onMove(viewHolder.getAdapterPosition(),target.getAdapterPosition()); 
  154.  
  155.         return true
  156.  
  157.     } 
  158.  
  159.     /** 
  160.  
  161.      * 滑动Item 
  162.  
  163.      * 
  164.  
  165.      * @param viewHolder 
  166.  
  167.      * @param direction 
  168.  
  169.      *           Item滑动的方向 
  170.  
  171.      */ 
  172.  
  173.     @Override 
  174.  
  175.     public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { 
  176.  
  177.         Log.e(TAG, "onSwiped: "); 
  178.  
  179.         helperCallback.onItemDelete(viewHolder.getAdapterPosition()); 
  180.  
  181.     } 
  182.  
  183.     /** 
  184.  
  185.      * Item被选中时候回调 
  186.  
  187.      * 
  188.  
  189.      * @param viewHolder 
  190.  
  191.      * @param actionState 
  192.  
  193.      *          当前Item的状态 
  194.  
  195.      *          ItemTouchHelper.ACTION_STATE_IDLE   闲置状态 
  196.  
  197.      *          ItemTouchHelper.ACTION_STATE_SWIPE  滑动中状态 
  198.  
  199.      *          ItemTouchHelper#ACTION_STATE_DRAG   拖拽中状态 
  200.  
  201.      */ 
  202.  
  203.     @Override 
  204.  
  205.     public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { 
  206.  
  207.         super.onSelectedChanged(viewHolder, actionState); 
  208.  
  209.     } 
  210.  
  211.     public interface ItemTouchHelperCallback{ 
  212.  
  213.         void onItemDelete(int positon); 
  214.  
  215.         void onMove(int fromPosition,int toPosition); 
  216.  
  217.     } 
  218.  
  219.  

在默认情况下是支持拖动和滑动的,也就是isLongPressDragEnabled()和isItemViewSwipeEnabled()是返回true的。在该类中我们创建了一个接口ItemTouchHelperCallback并创建两个抽象方法,分别表示拖拽和滑动。在onMove方法中回调创建我们创建的接口方法接口onMove(int fromPosition,int toPosition),并将拖拽和 Item 的posion和目标posion传入,posion通过ViewHolder的getAdapterPosition()获得,然后在滑动回调方法onSwiped中回调onItemDelete(int positon)。到这里我们自定义的ItemTouchHelper.Callback创建完成。

上面完成后我们只需要在我们自定义的Adapter中实现RecycleItemTouchHelper.ItemTouchHelperCallback接口,然后在回调方法中更新界面,如下Apdater中回调方法实现。


  1. @Override 
  2.  
  3.    public void onItemDelete(int positon) { 
  4.  
  5.        list.remove(positon); 
  6.  
  7.        notifyItemRemoved(positon); 
  8.  
  9.    } 
  10.  
  11.  
  12.  
  13.    @Override 
  14.  
  15.    public void onMove(int fromPosition, int toPosition) { 
  16.  
  17.        Collections.swap(list,fromPosition,toPosition);//交换数据 
  18.  
  19.        notifyItemMoved(fromPosition,toPosition); 
  20.  
  21.    }  

我们在onItemDelete方法中删除对应posion的数据,在onMove方法中通过Collections.swap方法交换对应项数据,然后分别调用notifyItemRemoved和notifyItemMoved通过适配器更新UI.

好了到这里功能已经实现了,是不是发现代码很少,当然啰嗦的比较多而已。

功能升级

通过上面简单代码的实现,已经可以滑动删除和拖拽了,当然不满足的你可能发现滑动删除的时候没有动画没有背景,但是我想更改下背景并且在滑动的过程会出现一个删除的图标,给用户反馈,让其明白该操作是删除数据的。当然你还会想再删除的过程中增加一个动画。其实实现这个效果也并不是很麻烦,接下来新的方法实现登场。哦,不对,前面提到过的。


  1. onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, fl 

该方法就是移动过程中绘制Item的回调。我们在actionState==ItemTouchHelper.ACTION_STATE_SWIPE时,即为滑动的时候绘制背景和删除图片。

初始化


  1. /** 
  2.  
  3.     * 移动过程中绘制Item 
  4.  
  5.     * 
  6.  
  7.     * @param c 
  8.  
  9.     * @param recyclerView 
  10.  
  11.     * @param viewHolder 
  12.  
  13.     * @param dX 
  14.  
  15.     *          X轴移动的距离 
  16.  
  17.     * @param dY 
  18.  
  19.     *          Y轴移动的距离 
  20.  
  21.     * @param actionState 
  22.  
  23.     *          当前Item的状态 
  24.  
  25.     * @param isCurrentlyActive 
  26.  
  27.     *          如果当前被用户操作为true,反之为false 
  28.  
  29.     */ 
  30.  
  31.    @Override 
  32.  
  33.    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { 
  34.  
  35.        //滑动时自己实现背景及图片 
  36.  
  37.        if (actionState==ItemTouchHelper.ACTION_STATE_SWIPE){ 
  38.  
  39.  
  40.  
  41.            //dX大于0时向右滑动,小于0向左滑动 
  42.  
  43.            View itemView=viewHolder.itemView;//获取滑动的view 
  44.  
  45.            Resources resources= MyApplication.getAppContext().getResources(); 
  46.  
  47.            Bitmap bitmap= BitmapFactory.decodeResource(resources, R.drawable.delete);//获取删除指示的背景图片 
  48.  
  49.            int padding =10;//图片绘制的padding 
  50.  
  51.            int maxDrawWidth=2*padding+bitmap.getWidth();//最大的绘制宽度 
  52.  
  53.            Paint paint=new Paint(); 
  54.  
  55.            paint.setColor(resources.getColor(R.color.btninvalid)); 
  56.  
  57.            int x=Math.round(Math.abs(dX)); 
  58.  
  59.            int drawWidth=Math.min(x,maxDrawWidth);//实际的绘制宽度,取实时滑动距离x和最大绘制距离maxDrawWidth最小值 
  60.  
  61.            int itemTop=itemView.getBottom()-itemView.getHeight();//绘制的top位置 
  62.  
  63.            //向右滑动 
  64.  
  65.            if(dX>0){ 
  66.  
  67.              //根据滑动实时绘制一个背景 
  68.  
  69.                c.drawRect(itemView.getLeft(),itemTop,drawWidth,itemView.getBottom(),paint); 
  70.  
  71.                //在背景上面绘制图片 
  72.  
  73.                if (x>padding){//滑动距离大于padding时开始绘制图片 
  74.  
  75.                    //指定图片绘制的位置 
  76.  
  77.                    Rect rect=new Rect();//画图的位置 
  78.  
  79.                    rect.left=itemView.getLeft()+padding; 
  80.  
  81.                    rect.top=itemTop+(itemView.getBottom()-itemTop-bitmap.getHeight())/2;//图片居中 
  82.  
  83.                    int maxRight=rect.left+bitmap.getWidth(); 
  84.  
  85.                    rect.right=Math.min(x,maxRight); 
  86.  
  87.                    rect.bottom=rect.top+bitmap.getHeight(); 
  88.  
  89.                    //指定图片的绘制区域 
  90.  
  91.                    Rect rect1=null
  92.  
  93.                    if (x  

经过上面的处理,发现此时滑动可以看到我们定制的蓝低的删除背景了,此时可能还有疑问,这样删除是不是很生硬,那就再给它加一个透明度的动画,如下。


  1. float alpha = 1.0f - Math.abs(dX) / (float) itemView.getWidth(); 
  2.  
  3.                 itemView.setAlpha(alpha);  

好了,到这里RecyclerView实现滑动删除和拖拽功能的已经介绍完毕了。有问题欢迎留言指出,Have a wonderful day .






本文作者:佚名
来源:51CTO

网友评论

登录后评论
0/500
评论
玄学酱
+ 关注