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

更新時(shí)間：2018年02月11日 15:18:49 作者：Lin_YT

本篇文章主要介紹了ItemTouchHelper實(shí)現(xiàn)可拖拽和側(cè)滑的列表的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

話不多說，直接上圖：

筆者使用 RecyclerView 的 ItemTouchHelper 來實(shí)現(xiàn)這個(gè)效果，過程非常簡(jiǎn)單。為了學(xué)習(xí)，這里順便實(shí)現(xiàn)了一下側(cè)滑刪除。

實(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)單，不多說，直接上代碼：

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);
  }

之后我們就可以開始編寫 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() {
    //是否可以長(zhǎng)按上下拖拽，默認(rèn)返回false
    return true;
  }
}

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

mItemTouchHelper = new ItemTouchHelper(new MyItemTouchHelperCallback(adapter));
mItemTouchHelper.attachToRecyclerView(recyclerView);

運(yùn)行效果：

完善

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

通過按住 item 左邊按鈕才能上下拖拽。
側(cè)滑或拖拽時(shí)被操作的 item Z軸高度增加，有明顯的陰影。

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

首先修改 MyItemTouchHelperCallback 的 isLongPressDragEnabled()

@Override
  public boolean isLongPressDragEnabled() {
    //禁止長(zhǎng)按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.IItemViewHolder> 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 )滑動(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è)滑或拖拽過程中更新狀態(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 是動(dòng)態(tài)值，是Z上的偏移變化

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

最后修改 MyItemTouchHelperCallback ，重寫上述的兩個(gè)方法，過程很簡(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();
    }
  }

最后

這里是【源碼】

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: