RecyclerView實現拖動排序和滑動刪除功能

RecyclerView 的拖動排序需要借助一下 ItemTouchHelper 這個類,ItemTouchHelper 類是 Google 提供的一個支持 RecyclerView 滑動和拖動的一個使用類,下面使用該類實現 RecyclerView 的滑動刪除和拖動排序功能。首先大概介紹一下 ItemTouchHelper 的一個內部抽象類 Callback 。

1、ItemTouchHelper.Callback

該類是ItemTouchHelper類中的一個靜態抽象類,作用主要是將ItemTouchHelper 與自己的應用聯系在一起,讓開發者通過 ViewHolder 控制每一個 View 的具體行為,接收用戶的事件回調。該類里面有三個抽象方法:getMovementFlags、onMove、onSwiped。也是開發中經常要是用的。

1.1、getMovementFlags

該方法返回一個 Flags 表示Item的三種狀態狀態:idle(空閑)、 swiping(滑動)、dragging(拖動),根據 RecyclerView 不同的布局管理器,設置不同的滑動、拖動方向,一般使用 makeMovementFlags(int dragFlags, int swipeFlags)方法返回,dragFlags 表示拖動的方向,swipeFlags 表示滑動的方向。

public abstract int getMovementFlags(RecyclerView recyclerView, ViewHolder viewHolder);

1.2、onMove

當 ItemTouchHelper 拖動一個 Item 時該方法將會被回調,Item 將從舊的位置移動到新的位置,如果不拖動這個方法將從來不會調用,返回 true 表示 Item 已經被移動到新的位置。

public abstract boolean onMove(RecyclerView recyclerView, ViewHolder viewHolder, ViewHolder target);

1.3、onSwiped

當 Item 滑動的時候調用,如果不滑動該方法不會被調用,可通過 direction 做相應的判斷執行某些操作。

public abstract void onSwiped(ViewHolder viewHolder, int direction);

此外經常使用的方法有 onSelectedChanged、clearView等方法。

1.4、onSelectedChanged

當 item 由靜止狀態變為滑動或拖動狀態時調用此方法,可通過 actionState 判斷 Item 在哪種狀態下執行某些操作,重寫該方法時必須調用其父類的該方法。

public void onSelectedChanged(ViewHolder viewHolder, int actionState) {
        if (viewHolder != null) {
            sUICallback.onSelected(viewHolder.itemView);
        }
}

1.5、clearView

當與用戶交互結束或相關動畫完成之后該方法被調用。

public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) {
        sUICallback.clearView(viewHolder.itemView);
}

2、RecyclerView實現拖動排序

RecyclerView的拖動排序需要借助一個 android.support.v7.widget.helper.ItemTouchHelper 這個類來實現,拖動排序重點是在接口里面的 onMove(int fromPosition, int toPosition) 方法,其在 ItemTouchHelperAdapter中的具體實現參考如下:

@Override
public void onMove(int fromPosition, int toPosition) {
    String item = mDatas.get(fromPosition);
    mDatas.remove(fromPosition);
    mDatas.add(toPosition, item);
    notifyItemMoved(fromPosition, toPosition);
}

3、RecyclerView 實現側滑刪除

RecyclerView 的拖動排序需要借助一個 android.support.v7.widget.helper.ItemTouchHelper 這個類來實現,側滑刪除重點是在接口中的 onSwiped(int position),其在 ItemTouchHelperAdapter中的具體實現參考如下

 @Override
 public void onSwiped(int position) {
     list.remove(position);
    notifyItemRemoved(position);
 } 

如果想要在滑動刪除過程中實現如下效果,就需要重寫ItemTouchHelper.Callback的onChildDraw方法,在其中實現相應的效果。


效果

在重寫onChildDraw方法之前,先來修改下item的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#ffffff"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        app:cardCornerRadius="1dp"
        app:elevation="1dp"
        app:contentPadding="1dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff">
            <TextView
                android:id="@+id/item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="22sp"
                android:padding="4dp"
                android:layout_centerInParent="true"/>

        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:background="#f33213">

        <ImageView
            android:id="@+id/iv_img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:src="@mipmap/ic_eye_72"
            android:visibility="invisible"/>
        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左滑刪除"
            android:textSize="18sp"
            android:textColor="#ffffff"
            android:layout_gravity="center"/>
    </FrameLayout>
</LinearLayout>

布局文件修改后,我們嘗試來滑動一下,發現后面的刪除方塊并不會出現,這是因為默認的滑動方式是setTranslationX(int),即是對整個View的滑動,所以無論我們怎樣滑動,都不會出現刪除方塊。因此,我們要改變一個種滑動方式,比如使用scrollTo(int,int),這種是對View的內容的滑動,所以隨著左滑,item會向左滑去,而位于右方的方塊自然也就出現了。

接著,我們考慮該“刪除眼睛”的圖標是怎樣從小變大的,這個實現也比較簡單,只要根據滑動的距離對該ImageView的LayoutParams.width進行改變就行了,不過要注意限制大小,否則過大會造成圖片的失真。當滑動距離等于RecyclerView寬度的一半時,此時松開手會使Item刪除,那么我們可以在該滑動距離達到該值時時“眼睛”變得最大,此時可以達到良好的交互效果,提示了用戶無需繼續滑動即可刪除該Item了。

最后我們要考慮的是:在刪除了Item或者沒刪除而滑回原來的位置后,我們要把所做的改變重置一下,否則,會由于RecyclerView的復用而導致其他位置的ViewHolder與當前的ViewHolder所做的改變一樣,即造成顯示的錯誤。我們可以在clearView()方法內重置改變,這樣就能解決因復用而導致的顯示問題了。
最后我們來看看SimpleItemTouchHelperCallback的代碼:

public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback{

     private ItemTouchHelperAdapter mAdapter;

    public SimpleItemTouchHelperCallback(ItemTouchHelperAdapter adapter){
        mAdapter = adapter;
    }

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

    @Override
    public boolean isLongPressDragEnabled() {
        return true;
    }

    @Override
    public boolean isItemViewSwipeEnabled() {
        return true;
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        mAdapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition());
        return true;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.onItemDissmiss(viewHolder.getAdapterPosition());
    }

    //限制ImageView長度所能增加的最大值
    private double ICON_MAX_SIZE = 50;
    //ImageView的初始長寬
    private int fixedWidth = 150;

    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);
        //重置改變,防止由于復用而導致的顯示問題
        viewHolder.itemView.setScrollX(0);
        ((MyAdapter.NormalItem)viewHolder).tv.setText("左滑刪除");
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
        params.width = 150;
        params.height = 150;
        ((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
        ((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.INVISIBLE);
    }

    @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小于等于刪除方塊的寬度,那么我們把該方塊滑出來
            if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
                viewHolder.itemView.scrollTo(-(int) dX,0);
            }
            //如果dX還未達到能刪除的距離,此時慢慢增加“眼睛”的大小,增加的最大值為ICON_MAX_SIZE
            else if (Math.abs(dX) <= recyclerView.getWidth() / 2){
                double distance = (recyclerView.getWidth() / 2 -getSlideLimitation(viewHolder));
                double factor = ICON_MAX_SIZE / distance;
                double diff =  (Math.abs(dX) - getSlideLimitation(viewHolder)) * factor;
                if (diff >= ICON_MAX_SIZE)
                    diff = ICON_MAX_SIZE;
                ((MyAdapter.NormalItem)viewHolder).tv.setText("");   //把文字去掉
                ((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.VISIBLE);  //顯示眼睛
                FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
                params.width = (int) (fixWidth + diff);
                params.height = (int) (fixWidth + diff);
                ((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
            }
        }else {
            //拖拽狀態下不做改變,需要調用父類的方法
            super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
        }
    }

    /**
     * 獲取刪除方塊的寬度
     */
    public int getSlideLimitation(RecyclerView.ViewHolder viewHolder){
        ViewGroup viewGroup = (ViewGroup) viewHolder.itemView;
        return viewGroup.getChildAt(1).getLayoutParams().width;
    }
}

ItemTouchHelperAdapter 的代碼如下

public interface ItemTouchHelperAdapter {
    //數據交換
    void onItemMove(int fromPosition,int toPosition);
    //數據刪除
    void onItemDissmiss(int position);
}

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements ItemTouchHelperAdapter {
    //數據
    private List<String> mData;
    ...
     @Override
    public void onItemMove(int fromPosition, int toPosition) {
        //交換位置
        String item = mDatas.get(fromPosition);
       mDatas.remove(fromPosition);
       mDatas.add(toPosition, item);
       notifyItemMoved(fromPosition, toPosition);
    }

    @Override
    public void onItemDissmiss(int position) {
        //移除數據
        mData.remove(position);
        notifyItemRemoved(position);
    }

}

上面我們修改了Adapter和新建了ItemTouchHelper.Callback的子類,接下來我們要為RecyclerView添加ItemTouchHelper:

    //先實例化Callback
    ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(myAdapter);
    //用Callback構造ItemtouchHelper
    ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
    //調用ItemTouchHelper的attachToRecyclerView方法建立聯系
    touchHelper.attachToRecyclerView(mRecyclerView);

到此為止,我們已經熟悉了ItemTouchHelper的簡單使用了,下面看下幾個小問題。

  • 默認情況下滑動到item的寬或者高一半時會觸發刪除,可以通過getSwipeThreshold方法修改,該方法默認返回0.5f。
public float getSwipeThreshold(ViewHolder viewHolder) {
    return .5f;
}
  • 如果滑動過快時你會發現,刪除的提示可能不會顯示完全,這時因為快速滑動時dx或dy會突變,可能在刪除提示完全顯示前就超出了你在onChildDraw方法中的判斷條件。拿我們上面的處理舉個例子。
@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小于等于刪除方塊的寬度,那么我們把該方塊滑出來
        if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
            viewHolder.itemView.scrollTo(-(int) dX,0);
        }
        //....
        }
    }else {
        //拖拽狀態下不做改變,需要調用父類的方法
        super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
    }
}

假設getSlideLimitation(viewHolder)得到刪除提示的寬度為10,在滑動刪除時,dx的值可能為0、-5、-100....、0,而當dx=-100時已經不滿足條件Math.abs(dX) <= getSlideLimitation(viewHolder)了,故只顯示了一半。
直到了原因解決起來就很簡單了,這里給個簡單的思路:當條件不滿足時,調用viewHolder.itemView.scrollTo(刪除塊的寬度,0)即可。

上面是通過ItemTouchHelper實現了側滑刪除,但是無法實現側滑時顯示刪除提示,然后再通過點擊刪除提示部分再刪除item。下面就通過自定義RecyclerView來實現。

4、通過自定義RecyclerView實現側滑刪除

自定義RecyclerView方式有三個關鍵點:

  • 何時攔截事件
  • 如何讓的Menu展開/隱藏

4.2、何時攔截事件

RecyclerView需要處理手勢事件,內部的ItemVIew也需要處理事件,那在何時去攔截事件呢?分以下兩種情況:

  • ACTION_DOWN時,如果已經有ItemView處于展開狀態,并且這次點擊的對象不是已打開的那個ItemView,則攔截事件,并將已展開的ItemView關閉。
  • ACTION_MOVE時,有倆判斷,滿足其一則認為是側滑:
  1. x方向速度大于y方向速度,且大于最小速度限制;
  2. x方向的側滑距離大于y方向滑動距離,且x方向達到最小滑動距離;
public class SwipeDeleteRecyclerView extends RecyclerView {
    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        ...
        switch (e.getAction()) {
            // 第一種情況
            case MotionEvent.ACTION_DOWN:
                ...
                // 已經有ItemView處于展開狀態,并且這次點擊的對象不是已打開的那個ItemView
                if (view != null && mFlingView != view && view.getScrollX() != 0) {
                    // 將已展開的ItemView關閉
                    view.scrollTo(0, 0);
                    // 則攔截事件
                    return true;
                }
                break;
             // 第二種情況
             case MotionEvent.ACTION_MOVE:
                mVelocityTracker.computeCurrentVelocity(1000);
                // 此處有倆判斷,滿足其一則認為是側滑:
                // 1.如果x方向速度大于y方向速度,且大于最小速度限制;
                // 2.如果x方向的側滑距離大于y方向滑動距離,且x方向達到最小滑動距離;
                float xVelocity = mVelocityTracker.getXVelocity();
                float yVelocity = mVelocityTracker.getYVelocity();
                if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
                        || Math.abs(x - mFirstX) >= mTouchSlop
                        && Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {

                    mIsSlide = true;
                    return true;
                }
                break;
                ...
        }
        ...
    }
}

攔截了事件以后就該處理事件了,接著往下看。

4.2、如何讓的Menu展開/隱藏

接著在onTouchEvent中處理事件,控制Menu的隱藏與展開。

  • 首先是在ACTION_MOVE中,如果處于側滑狀態則讓目標ItemView通過scrollBy()跟著手勢移動,注意判斷邊界
  • 在ACTION_UP中,此時會產生兩個結果:一個是繼續展開菜單,另一個是關閉菜單。這兩個結果又都分了兩種情況:

1,當松手時向左的滑動速度超過了閾值,就讓目標ItemView保持松手時的速度繼續展開。
2,當松手時向右的滑動速度超過了閾值,就讓目標ItemView關閉。
3,當松手時移動的距離超過了隱藏的寬度的一半(也就是最大可以移動的距離的一半),則讓ItemVIew繼續展開。
4,當松手時移動的距離小于隱藏的寬度的一半,則讓ItemVIew關閉。

public boolean onTouchEvent(MotionEvent e) {
    obtainVelocity(e);
    switch (e.getAction()) {
        case MotionEvent.ACTION_MOVE:
            float dx = mLastX - x;
            // 判斷邊界
            if (mFlingView.getScrollX() + dx <= mMenuViewWidth
                    && mFlingView.getScrollX() + dx > 0) {
                // 隨手指滑動
                mFlingView.scrollBy((int) dx, 0);
            }
            break;
        case MotionEvent.ACTION_UP:
            int scrollX = mFlingView.getScrollX();
            mVelocityTracker.computeCurrentVelocity(1000);
            
            if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) {    // 向左側滑達到側滑最低速度,則打開
                // 計算剩余要移動的距離
                int delt = Math.abs(mMenuViewWidth - scrollX);
                // 根據松手時的速度計算要移動的時間
                int t = (int) (delt / mVelocityTracker.getXVelocity() * 1000);
                // 移動
                mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(t));
            } else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) {  // 向右側滑達到側滑最低速度,則關閉
                mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
            } else if (scrollX >= mMenuViewWidth / 2) { // 如果超過刪除按鈕一半,則打開
                mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
            } else {    // 其他情況則關閉
                mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
            }
            invalidate();
            releaseVelocity();  // 釋放追蹤
            break;
    }
    return true;
}

4.3、缺陷

在RecyclerView的Holder的onBindViewHolder()中給滑出來的菜單添加點擊事件即可響應刪除:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

    holder.tvDelete.setOnClickListener {
        onDelete(holder.adapterPosition)
    }
}

但是由于RecyclerView的復用機制,需要在點了刪除菜單刪除Item后,讓Item關閉,不然就會出現刪除一個Item后往下滾動,會再出來一個已展開的Item。

fun onDelete(it:Int){
    mData.removeAt(it)
    adapter.notifyItemRemoved(it)
        // 調用closeMenu()關閉該item
    mBinding.rvAll.closeMenu()
}

關閉的方法很簡單,只需要讓該Item scrollTo(0, 0)即可

public void closeMenu() {
    if (mFlingView != null && mFlingView.getScrollX() != 0) {
        // 關閉
        mFlingView.scrollTo(0, 0);
    }
}

因此該方式存在的缺陷是需要手動關閉已刪除的itemView。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,572評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,071評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,409評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,569評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,360評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,895評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,979評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,123評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,643評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,559評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,742評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,250評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,981評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,363評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,622評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,354評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,707評論 2 370