ItemTouchHelper 實(shí)現(xiàn)可拖拽和側(cè)滑的列表

前言

話不多說(shuō)，直接上圖：

image

筆者使用 RecyclerView 的 ItemTouchHelper 來(lái)實(shí)現(xiàn)這個(gè)效果，過(guò)程非常簡(jiǎn)單。

實(shí)現(xiàn)功能：

  • 按住 item 左側(cè)的按鈕可以上下拖動(dòng) item

  • 向右側(cè)滑刪除 item

  • item 拖動(dòng)或側(cè)滑時(shí)有陰影效果

實(shí)現(xiàn)基本功能

循序漸進(jìn)學(xué)習(xí)，這里我們先實(shí)現(xiàn)基本的功能：

  • 長(zhǎng)按 item 實(shí)現(xiàn)上下拖拽

  • 向右側(cè)滑刪除

布局文件

很簡(jiǎn)單，不多說(shuō)，直接上代碼：

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/main_recyclerView"

        android:scrollbars="none"

        android:background="#F2F8FC">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

item_list.xml


<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="60dp"

    android:background="#ffffff">



    <ImageView

        android:id="@+id/item_list_menu_imageView"

        android:layout_width="30dp"

        android:layout_height="25dp"

        android:layout_marginBottom="8dp"

        android:layout_marginStart="15dp"

        android:layout_marginTop="8dp"

        android:src="@drawable/imageview_menu"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />



    <TextView

        android:id="@+id/item_list_text_textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="8dp"

        android:layout_marginStart="15dp"

        android:layout_marginTop="8dp"

        android:textColor="#000000"

        android:textSize="18sp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toEndOf="@+id/item_list_menu_imageView"

        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.v7.widget.SwitchCompat

        android:id="@+id/item_list_switchCompat"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="8dp"

        android:layout_marginEnd="15dp"

        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        />



</android.support.constraint.ConstraintLayout>

ItemTouchHelper

官方的API解釋：

This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.

這是一個(gè)給 RecyclerView 添加側(cè)滑刪除和拖拽的工具類。有了它，我們就可以很方便的實(shí)現(xiàn)上面的效果。

從構(gòu)造器： ItemTouchHelper(ItemTouchHelper.Callback callback) 可以看出，我們需要一個(gè) ItemTouchHelper.Callback 去構(gòu)造 ItemTouchHelper 。

ItemTouchHelper.Callback 官方提供了一個(gè)實(shí)現(xiàn)類 ItemTouchHelper.SimpleCallback() ，它的使用很簡(jiǎn)單，但為了得到更高的定制性，這里我們不使用它，有興趣的朋友可以去嘗試一下。

新建一個(gè) MyItemTouchHelperCallback 類繼承 ItemTouchHelper.Callback ，這里我們關(guān)注它其中的三個(gè)方法:

  • getMovementFlags() 定義 item 的可以拖拽和滑動(dòng)的方向。

  • onMove() 當(dāng) item 想要上下拖拽時(shí)會(huì)調(diào)用此方法。

  • onSwiped 當(dāng) item 想要左右側(cè)滑時(shí)會(huì)調(diào)用此方法。

在寫 MyItemTouchHelperCallback 之前我們先創(chuàng)建一個(gè) IItemTouchHelperAdapter 接口，讓 RecyclerViewAdapter 實(shí)現(xiàn)這個(gè)接口。用于 RecyclerViewAdapter 回調(diào)。


public interface IItemTouchHelperAdapter {

    /**

    * 當(dāng)item被移動(dòng)時(shí)調(diào)用

    *

    * @param fromPosition 被操作的item的起點(diǎn)

    * @param toPosition  被操作的item的終點(diǎn)

    */

    void onItemMove(int fromPosition, int toPosition);

    /**

    * 當(dāng)item被側(cè)滑時(shí)調(diào)用

    *

    * @param position 被側(cè)滑的item的position

    */

    void onItemDismiss(int position);

}

在 RecyclerViewAdapter 中實(shí)現(xiàn)剛剛繼承的兩個(gè)方法:


  @Override

    public void onItemMove(int fromPosition, int toPosition) {

        Collections.swap(mList, fromPosition, toPosition);

        notifyItemMoved(fromPosition, toPosition);

    }

    @Override

    public void onItemDismiss(int position) {

        mList.remove(position);

        notifyItemRemoved(position);

    }

之后我們就可以開(kāi)始編寫 MyItemTouchHelperCallback ，注釋很清楚，就不多說(shuō)了。


public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {

    private IItemTouchHelperAdapter mAdapter;

    public MyItemTouchHelperCallback(IItemTouchHelperAdapter mAdapter) {

        this.mAdapter = mAdapter;

    }

    @Override

    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

        //上下拖拽，若有其他需求同理

        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;

        //向右側(cè)滑，若有其他需求同理

        int swipeFlags = ItemTouchHelper.RIGHT;

        return makeMovementFlags(dragFlags, swipeFlags);

    }

    @Override

    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {

        //通知Adapter更新數(shù)據(jù)和視圖

        mAdapter.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());

        //若返回false則表示不支持上下拖拽

        return true;

    }

    @Override

    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {

        //通知Adapter更新數(shù)據(jù)和視圖

        mAdapter.onItemDismiss(viewHolder.getAdapterPosition());

    }



    @Override

    public boolean isItemViewSwipeEnabled() {

        //是否可以左右側(cè)滑，默認(rèn)返回true

        return true;

    }

    @Override

    public boolean isLongPressDragEnabled() {

        //是否可以長(zhǎng)按上下拖拽，默認(rèn)返回false

        return true;

    }

}

最后，在 Acivity 中將 ItemTouchHelper 和 RecyclerView 關(guān)聯(lián)起來(lái)


    mItemTouchHelper = new ItemTouchHelper(new MyItemTouchHelperCallback(adapter));

    mItemTouchHelper.attachToRecyclerView(recyclerView);

運(yùn)行效果：

image

完善

我們實(shí)現(xiàn)的的基本效果與文章開(kāi)頭給出的效果還是有一點(diǎn)差距的，還需要實(shí)現(xiàn)的效果：

  • 通過(guò)按住 item 左邊按鈕才能上下拖拽。

  • 側(cè)滑或拖拽時(shí)被操作的 item Z軸高度增加，有明顯的陰影。

通過(guò)按住 item 左邊按鈕才能上下拖拽

首先修改 MyItemTouchHelperCallback 的 isLongPressDragEnabled()


@Override

    public boolean isLongPressDragEnabled() {

        //禁止長(zhǎng)按item可以上下拖拽，因?yàn)槲覀円远x開(kāi)啟拖拽的時(shí)機(jī)

        return false;

    }

其次新建一個(gè)OnStartDragListener接口，用于回調(diào)


public interface OnStartDragListener {

    /**

    * 當(dāng)View需要拖拽時(shí)回調(diào)

    *

    * @param viewHolder The holder of view to drag

    */

    void onStartDrag(RecyclerView.ViewHolder viewHolder);

}

讓 Activity 繼承這個(gè)類，實(shí)現(xiàn) onStartDrag() 方法


@Override

    public void onStartDrag(RecyclerView.ViewHolder viewHolder) {

        //通知ItemTouchHelper開(kāi)始拖拽

        mItemTouchHelper.startDrag(viewHolder);

    }

在 RecyclerViewAdapter 的構(gòu)造方法中傳入 OnStartDragListener 的實(shí)例（即實(shí)現(xiàn)了該接口的Activity），給 item 左側(cè)的按鈕添加

事件監(jiān)聽(tīng)


public class RecyclerViewAdapter extends

        RecyclerView.Adapter<RecyclerViewAdapter.ItemViewHolder> implements IItemTouchHelperAdapter {

    //構(gòu)造方法

    public RecyclerViewAdapter(List<ItemEntity> list, OnStartDragListener mDragListener) {

        mList = list;

        this.mDragListener = mDragListener;

    }



    ...



    @Override

    public void onBindViewHolder(final IItemViewHolder holder, @SuppressLint("RecyclerView") final int position) {

        ...

        holder.menu.setOnTouchListener(new View.OnTouchListener() {

            @Override

            public boolean onTouch(View view, MotionEvent motionEvent) {

                if (motionEvent.getAction()

                        == MotionEvent.ACTION_DOWN) {

                    //通知ItemTouchHelper開(kāi)始拖拽   

                    mDragListener.onStartDrag(holder);

                }

                return false;

            }

        });

    }



    ...

}

側(cè)滑或拖拽時(shí)被操作的 item Z軸高度增加，有明顯的陰影

要實(shí)現(xiàn)這個(gè)效果，筆者使用 ItemTouchHelper.Callback 提供的兩個(gè)回調(diào)方法：

  • onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) ：當(dāng) ViewHolder (即 item )滑動(dòng)或拖動(dòng)時(shí)被調(diào)用。

  • clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) ：當(dāng) ViewHolder 滑動(dòng)和拖拽結(jié)束時(shí)被調(diào)用

首先新建一個(gè) IItemTouchHelperViewHolder 接口用于回調(diào)，讓 RecyclerViewAdapter 的 ViewHolder 繼承它。


public interface IItemTouchHelperViewHolder {

    /**

    * item被選中，在側(cè)滑或拖拽過(guò)程中更新?tīng)顟B(tài)

    */

    void onItemSelected();

    /**

    * item的拖拽或側(cè)滑結(jié)束，恢復(fù)默認(rèn)的狀態(tài)

    */

    void onItemClear();

}

然后讓ViewHolder重寫上述的兩個(gè)方法：


class ItemViewHolder extends RecyclerView.ViewHolder implements IItemTouchHelperViewHolder {

        private TextView text;

        private ImageView menu;

        private SwitchCompat 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

        public void onItemSelected() {

            itemView.setTranslationZ(10);

        }

        @Override

        public void onItemClear() {

            itemView.setTranslationZ(0);

        }

}

這里通過(guò) setTranslationZ() 來(lái)改變 itemView 的高度。

之前筆者嘗試通過(guò) setElevation() 來(lái)改變高度，但是行不通，后來(lái)查資料發(fā)現(xiàn) View 的Z軸陰影

Z = elevation + translationZ 其中：

  • elevation 是靜態(tài)值，是 View 在Z軸上的初始值

  • translationZ 是動(dòng)態(tài)值，是Z上的偏移變化

所以我們這里應(yīng)該使用 setTranslationZ() 來(lái)改變 View 的Z軸高度而不是使用 setElevation() ，讀者們可以自行嘗試一下。

最后修改 MyItemTouchHelperCallback ，重寫上述的兩個(gè)方法，過(guò)程很簡(jiǎn)單，直接看代碼：


@Override

    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {

        if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {

            //不為空閑狀態(tài)，即為拖拽或側(cè)滑狀態(tài)

            if (viewHolder instanceof IItemTouchHelperViewHolder) {

                IItemTouchHelperViewHolder itemTouchHelperViewHolder =

                        (IItemTouchHelperViewHolder) viewHolder;

                itemTouchHelperViewHolder.onItemSelected();

            }

        }

        super.onSelectedChanged(viewHolder, actionState);

    }

    @Override

    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

        super.clearView(recyclerView, viewHolder);

        if (viewHolder instanceof IItemTouchHelperViewHolder) {

            IItemTouchHelperViewHolder itemTouchHelperViewHolder =

                    (IItemTouchHelperViewHolder) viewHolder;

            itemTouchHelperViewHolder.onItemClear();

        }

    }

最后

這里是【源碼】

如果文章中有什么錯(cuò)誤或值得改進(jìn)的地方，歡迎到評(píng)論區(qū)中給我留言

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容