前言
從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 2 3 4 5 6 |
ItemTouchHelper.UP //滑動拖拽向上方向 ItemTouchHelper.DOWN//向下 ItemTouchHelper.LEFT//向左 ItemTouchHelper.RIGHT//向右 ItemTouchHelper.START//依賴佈局方向的水平開始方向 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 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** * Item是否支援長按拖動 * * @return * true 支援長按操作 * false 不支援長按操作 */ boolean isLongPressDragEnabled() /** * Item是否支援滑動 * * @return * true 支援滑動操作 * false 不支援滑動操作 */ boolean isItemViewSwipeEnabled() /** * 移動過程中繪製Item * * @param c * @param recyclerView * @param viewHolder * @param dX * X軸移動的距離 * @param dY * Y軸移動的距離 * @param actionState * 當前Item的狀態 * @param isCurrentlyActive * 如果當前被使用者操作為true，反之為false */ onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) |
需要注意的是，如果我們想實現拖動或者滑動必須將上面是否支援拖動或者滑動的方法返回true，否則onMove或者onSwiped方法不會執行。
功能實現
|
1 2 3 4 5 |
adapter=new CustomAdapter(getActivity(),strings); recycleview.setAdapter(adapter); ItemTouchHelper.Callback callback=new RecycleItemTouchHelper(adapter); ItemTouchHelper itemTouchHelper=new ItemTouchHelper(callback); itemTouchHelper.attachToRecyclerView(recycleview); |
對於ItemTouchHelper 構造方法接收一個ItemTouchHelper.Callback引數，而這個Callback就是我們在在上述講到的工具類，初始化ItemTouchHelper 後通過其attachToRecyclerView(@Nullable RecyclerView recyclerView)方法將我們實現的ItemTouchHelper.Callback和RecyclerView關聯，最終達到我們的效果，程式碼看起來是不是很簡單，接下來我們看下我們自定義的Callback。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
package com.example.xh.adapter; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.helper.ItemTouchHelper; import android.util.Log; import android.view.View; import com.example.xh.R; import com.example.xh.utils.MyApplication; /** * Created by xiehui on 2017/2/23. */ public class RecycleItemTouchHelper extends ItemTouchHelper.Callback{ private static final String TAG ="RecycleItemTouchHelper" ; private final ItemTouchHelperCallback helperCallback; public RecycleItemTouchHelper(ItemTouchHelperCallback helperCallback) { this.helperCallback = helperCallback; } /** * 設定滑動型別標記 * * @param recyclerView * @param viewHolder * @return * 返回一個整數型別的標識，用於判斷Item那種移動行為是允許的 */ @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { Log.e(TAG, "getMovementFlags: " ); //START 右向左 END左向右 LEFT 向左 RIGHT向右 UP向上 //如果某個值傳0，表示不觸發該操作，次數設定支援上下拖拽，支援向右滑動 return makeMovementFlags(ItemTouchHelper.UP|ItemTouchHelper.DOWN,ItemTouchHelper.END ); } /** * Item是否支援長按拖動 * * @return * true 支援長按操作 * false 不支援長按操作 */ @Override public boolean isLongPressDragEnabled() { return super.isLongPressDragEnabled(); } /** * Item是否支援滑動 * * @return * true 支援滑動操作 * false 不支援滑動操作 */ @Override public boolean isItemViewSwipeEnabled() { return super.isItemViewSwipeEnabled(); } /** * 拖拽切換Item的回撥 * * @param recyclerView * @param viewHolder * @param target * @return * 如果Item切換了位置，返回true；反之，返回false */ @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { Log.e(TAG, "onMove: " ); helperCallback.onMove(viewHolder.getAdapterPosition(),target.getAdapterPosition()); return true; } /** * 滑動Item * * @param viewHolder * @param direction * Item滑動的方向 */ @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { Log.e(TAG, "onSwiped: "); helperCallback.onItemDelete(viewHolder.getAdapterPosition()); } /** * Item被選中時候回撥 * * @param viewHolder * @param actionState * 當前Item的狀態 * ItemTouchHelper.ACTION_STATE_IDLE 閒置狀態 * ItemTouchHelper.ACTION_STATE_SWIPE 滑動中狀態 * ItemTouchHelper#ACTION_STATE_DRAG 拖拽中狀態 */ @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { super.onSelectedChanged(viewHolder, actionState); } public interface ItemTouchHelperCallback{ void onItemDelete(int positon); void onMove(int fromPosition,int toPosition); } } |
在預設情況下是支援拖動和滑動的，也就是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 2 3 4 5 6 7 8 9 10 11 |
@Override public void onItemDelete(int positon) { list.remove(positon); notifyItemRemoved(positon); } @Override public void onMove(int fromPosition, int toPosition) { Collections.swap(list,fromPosition,toPosition);//交換資料 notifyItemMoved(fromPosition,toPosition); } |
我們在onItemDelete方法中刪除對應posion的資料，在onMove方法中通過Collections.swap方法交換對應項資料，然後分別呼叫notifyItemRemoved和notifyItemMoved通過介面卡更新UI.
好了到這裡功能已經實現了，是不是發現程式碼很少，當然囉嗦的比較多而已。
功能升級
通過上面簡單程式碼的實現，已經可以滑動刪除和拖拽了，當然不滿足的你可能發現滑動刪除的時候沒有動畫沒有背景，但是我想更改下背景並且在滑動的過程會出現一個刪除的圖示，給使用者反饋，讓其明白該操作是刪除資料的。當然你還會想再刪除的過程中增加一個動畫。其實實現這個效果也並不是很麻煩，接下來新的方法實現登場。哦，不對，前面提到過的。
|
1 |
onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) |
該方法就是移動過程中繪製Item的回撥。我們在actionState==ItemTouchHelper.ACTION_STATE_SWIPE時，即為滑動的時候繪製背景和刪除圖片。
初始化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/** * 移動過程中繪製Item * * @param c * @param recyclerView * @param viewHolder * @param dX * X軸移動的距離 * @param dY * Y軸移動的距離 * @param actionState * 當前Item的狀態 * @param isCurrentlyActive * 如果當前被使用者操作為true，反之為false */ @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { //滑動時自己實現背景及圖片 if (actionState==ItemTouchHelper.ACTION_STATE_SWIPE){ //dX大於0時向右滑動，小於0向左滑動 View itemView=viewHolder.itemView;//獲取滑動的view Resources resources= MyApplication.getAppContext().getResources(); Bitmap bitmap= BitmapFactory.decodeResource(resources, R.drawable.delete);//獲取刪除指示的背景圖片 int padding =10;//圖片繪製的padding int maxDrawWidth=2*padding+bitmap.getWidth();//最大的繪製寬度 Paint paint=new Paint(); paint.setColor(resources.getColor(R.color.btninvalid)); int x=Math.round(Math.abs(dX)); int drawWidth=Math.min(x,maxDrawWidth);//實際的繪製寬度，取實時滑動距離x和最大繪製距離maxDrawWidth最小值 int itemTop=itemView.getBottom()-itemView.getHeight();//繪製的top位置 //向右滑動 if(dX>0){ //根據滑動實時繪製一個背景 c.drawRect(itemView.getLeft(),itemTop,drawWidth,itemView.getBottom(),paint); //在背景上面繪製圖片 if (x>padding){//滑動距離大於padding時開始繪製圖片 //指定圖片繪製的位置 Rect rect=new Rect();//畫圖的位置 rect.left=itemView.getLeft()+padding; rect.top=itemTop+(itemView.getBottom()-itemTop-bitmap.getHeight())/2;//圖片居中 int maxRight=rect.left+bitmap.getWidth(); rect.right=Math.min(x,maxRight); rect.bottom=rect.top+bitmap.getHeight(); //指定圖片的繪製區域 Rect rect1=null; if (x |
經過上面的處理，發現此時滑動可以看到我們定製的藍低的刪除背景了，此時可能還有疑問，這樣刪除是不是很生硬，那就再給它加一個透明度的動畫，如下。
|
1 2 |
float alpha = 1.0f - Math.abs(dX) / (float) itemView.getWidth(); itemView.setAlpha(alpha); |
好了，到這裡RecyclerView實現滑動刪除和拖拽功能的已經介紹完畢了。有問題歡迎留言指出，Have a wonderful day .
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
