前言

話不多說，直接上圖：

image

筆者使用 RecyclerView 的 ItemTouchHelper 來實(shí)現(xiàn)這個(gè)效果茄茁，過程非常簡單。

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

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

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

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

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

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

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

• 向右側(cè)滑刪除

布局文件

很簡單裙顽，不多說，直接上代碼：

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() ，它的使用很簡單嗦嗡，但為了得到更高的定制性勋锤，這里我們不使用它，有興趣的朋友可以去嘗試一下侥祭。

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

• getMovementFlags() 定義 item 的可以拖拽和滑動的方向茄厘。

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

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

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

public interface IItemTouchHelperAdapter {

    /**

    * 當(dāng)item被移動時(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);

    }

之后我們就可以開始編寫 MyItemTouchHelperCallback ，注釋很清楚硝拧，就不多說了径筏。

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() {

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

        return true;

    }

}

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

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

    mItemTouchHelper.attachToRecyclerView(recyclerView);

運(yùn)行效果：

image

完善

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

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

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

通過按住 item 左邊按鈕才能上下拖拽

首先修改 MyItemTouchHelperCallback 的 isLongPressDragEnabled()

@Override

    public boolean isLongPressDragEnabled() {

        //禁止長按item可以上下拖拽，因?yàn)槲覀円远x開啟拖拽的時(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開始拖拽

        mItemTouchHelper.startDrag(viewHolder);

    }

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

事件監(jiān)聽

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開始拖拽   

                    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 )滑動或拖動時(shí)被調(diào)用。

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

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

public interface IItemTouchHelperViewHolder {

    /**

    * item被選中，在側(cè)滑或拖拽過程中更新狀態(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);

        }

}

這里通過 setTranslationZ() 來改變 itemView 的高度柠辞。

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

Z = elevation + translationZ 其中：

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

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

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

最后修改 MyItemTouchHelperCallback ，重寫上述的兩個(gè)方法夷都，過程很簡單眷唉，直接看代碼：

@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)的地方，歡迎到評論區(qū)中給我留言