前言
RecyclerView是一個用來替換之前的ListView和GridView的控件，使用的時候，雖然比以前的ListView看起來麻煩，但是其實作為一個高度解耦的控件，復雜一點點換來極大的靈活性，豐富的可操作性，何樂而不為呢。不過今天主要說說它的一個輔助類ItemTouchHelper來實現列表的拖動和滑動刪除。
1.什么是ItemTouchHelper
ItemTouchHelper是一個工具類，可實現側滑刪除和拖拽移動，使用這個工具類需要RecyclerView和Callback。同時根據需要重寫onMove和onSwiped方法。接下來就來講述ItemTouchHelper的使用方法。
2.ItemTouchHelper基本使用方法
2.1新建一個拖拽、刪除回調接口，
從解耦的角度考慮，我們需要一個接口來實現Adapter和ItemTouchHelper之間涉及數據的操作，因為ItemTouchHelper在完成觸摸的各種動畫后，就要對Adapter的數據進行操作，比如側滑刪除操作，最后需要調用Adapter的notifyItemRemove()方法來移除該數據。因此我們可以把數據操作的部分抽象成一個接口方法，讓ItemTouchHelper.Callback調用該方法即可。具體如下：
新建接口ItemTouchMoveListener:
public interface ItemTouchMoveListener {
/**
* 當拖拽的時候回調
* 可以在方法里面實現:拖拽條目并實現刷新效果
* @param fromPosition 從什么位置拖
* @param toPosition 到什么位置
* @return 是否執行了move
*/
boolean onItemMove(int fromPosition,int toPosition);
/**
* 當條目被移除時回調
* @param position 移除的位置
* @return
*/
boolean onItemRemove(int position);
}
讓我們的Adapter實現該接口：
public class QQAdapter extends RecyclerView.Adapter<QQAdapter.MyViewHolder> implements ItemTouchMoveListener {
private List<QQMessage> list;
public QQAdapter(List<QQMessage> list) {
this.list = list;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
QQMessage qqMessage = list.get(position);
holder.ivLogo.setImageResource(qqMessage.getLogo());
holder.tvName.setText(qqMessage.getName());
holder.tvLastMsg.setText(qqMessage.getLastMsg());
holder.tvTime.setText(qqMessage.getTime());
}
@Override
public int getItemCount() {
return list.size();
}
@Override
public boolean onItemMove(int fromPosition, int toPosition) {
//1.數據交換 2.刷新
Collections.swap(list, fromPosition, toPosition);
notifyItemMoved(fromPosition, toPosition);
return true;
}
@Override
public boolean onItemRemove(int position) {
list.remove(position);
notifyItemRemoved(position);
return true;
}
static class MyViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.iv_logo)
CircleImageView ivLogo;
@BindView(R.id.tv_name)
TextView tvName;
@BindView(R.id.tv_time)
TextView tvTime;
@BindView(R.id.tv_lastMsg)
TextView tvLastMsg;
@BindView(R.id.iv_detele)
ImageView ivDetele;
@BindView(R.id.tv_detele)
TextView tvDetele;
public MyViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
}
那么我們在ItemTouchHelper.Callback內直接調用接口的方法即可。
2.2新建類繼承自ItemTouchHelper.Callback
public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
/**
* Callback回調監聽時先調用的，用來判斷當前是什么動作，比如判斷方向
* 作用：哪個方向的拖動
*
* @param recyclerView
* @param viewHolder
* @return
*/
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
//方向：up，down，left，right
//常量
// ItemTouchHelper.UP 0x0001
// ItemTouchHelper.DOWN 0x0010
// ItemTouchHelper.LEFT
// ItemTouchHelper.RIGHT
//我要監聽的拖拽方向是哪個方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要監聽的swipe側滑方向是哪個方向
int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打開長按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
//當上下移動的時候回調的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽過程中不斷地調用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的過程中不斷調用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//側滑的時候回調的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//監聽側滑，1.刪除數據 2.調用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//設置滑動item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判斷選中狀態
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑動item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢復
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出現復用問題 而導致條目不顯示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//設置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
super.clearView(recyclerView, viewHolder);
}
//設置滑動時item的背景透明度
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//dX:水平方向移動的增量(負：往左；正：往右) 0-view.getWidth()
float alpha = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
//透明度動畫
viewHolder.itemView.setAlpha(alpha);//1-0
//設置滑出大小
// viewHolder.itemView.setScaleX(alpha);
// viewHolder.itemView.setScaleY(alpha);
}
// //防止出現復用問題 而導致條目不顯示 方式二
// if(alpha==0){
// viewHolder.itemView.setAlpha(1);//1-0
// //設置滑出大小
//// viewHolder.itemView.setScaleX(1);
//// viewHolder.itemView.setScaleY(1);
// }
//此super方法自動處理setTranslationX
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
}
}
2.3為RecycleView添加ItemTouchHelper
//條目觸目幫助類
ItemTouchHelper.Callback callback = new MyItemTouchHelperCallback(adapter);
itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recyclerView);
3.自定義側滑動畫
有時候我們對默認的動畫效果可能不滿意，需要自己實現想要的動畫效果，ItemTouchHelper.Callback提供的onChildDraw方法可以讓我們很方便地實現想要的效果。
該效果是比較常見的，用戶向左滑動Item的時候，一開始提示的是“左滑刪除”，滑動到一定距離后，顯示刪除的圖標，并且隨著滑動距離的增加該圖標不斷變大，達到最大后用戶松開手指，該Item被刪除。
接下來我們來分析一下怎樣實現以上的效果：
首先，要想左滑出現一個刪除的方塊，可以在LinearLayout放一個這樣的“方塊”，讓它與Item水平并排排列，以下是布局文件：
<?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="wrap_content"
android:background="#fff"
android:gravity="center_vertical"
android:orientation="horizontal">
<com.haocai.itemtouchhelper.view.CircleImageView
android:id="@+id/iv_logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="8dp"
android:src="@drawable/logo1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:orientation="vertical"
android:paddingRight="5dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="小王"
android:textColor="#000"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="14:31"
android:textColor="#a6a6a6"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_lastMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="一起吃飯"
android:textColor="#808080"
android:textSize="12sp" />
<ImageView
android:id="@+id/iv_pop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<FrameLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#f33213">
<ImageView
android:id="@+id/iv_detele"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:src="@drawable/delete"
android:visibility="invisible" />
<TextView
android:id="@+id/tv_detele"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="左滑刪除"
android:textColor="#ffffff"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>
布局文件修改后，我們嘗試來滑動一下，發現后面的刪除方塊并不會出現，這是因為默認的滑動方式是setTranslationX(int)，即是對整個View的滑動，所以無論我們怎樣滑動，都不會出現刪除方塊。因此，我們要改變一個種滑動方式，比如使用scrollTo(int,int)，這種是對View的內容的滑動，所以隨著左滑，item會向左滑去，而位于右方的方塊自然也就出現了。
接著，我們考慮該“刪除眼睛”的圖標是怎樣從小變大的，這個實現也比較簡單，只要根據滑動的距離對該ImageView的LayoutParams.width進行改變就行了，不過要注意限制大小，否則過大會造成圖片的失真。當滑動距離等于RecyclerView寬度的一半時，此時松開手會使Item刪除，那么我們可以在該滑動距離達到該值時時“眼睛”變得最大，此時可以達到良好的交互效果，提示了用戶無需繼續滑動即可刪除該Item了。
最后我們要考慮的是：在刪除了Item或者沒刪除而滑回原來的位置后，我們要把所做的改變重置一下，否則，會由于RecyclerView的復用而導致其他位置的ViewHolder與當前的ViewHolder所做的改變一樣，即造成顯示的錯誤。我們可以在clearView()方法內重置改變，這樣就能解決因復用而導致的顯示問題了。
最后我們來看看SimpleItemTouchHelperCallback的代碼：
public class MyItemTouchHelperCallback3 extends ItemTouchHelper.Callback {
//限制ImageView長度所能增加的最大值
private double ICON_MAX_SIZE = 40;
//ImageView的初始長寬
private int fixedWidth = 120;
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback3(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
// /**
// * 設置滑動類型標記
// *
// * @param recyclerView
// * @param viewHolder
// * @return
// * 返回一個整數類型的標識，用于判斷Item那種移動行為是允許的
// */
// @Override
// public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// //START 右向左 END左向右 LEFT 向左 RIGHT向右 UP向上
// //如果某個值傳0，表示不觸發該操作
// return makeMovementFlags(ItemTouchHelper.UP|ItemTouchHelper.DOWN,ItemTouchHelper.END );
// }
/**
* Callback回調監聽時先調用的，用來判斷當前是什么動作，比如判斷方向
* 作用：哪個方向的拖動
*
* @param recyclerView
* @param viewHolder
* @return
*/
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
//方向：up，down，left，right
//常量
// ItemTouchHelper.UP 0x0001
// ItemTouchHelper.DOWN 0x0010
// ItemTouchHelper.LEFT
// ItemTouchHelper.RIGHT
//我要監聽的拖拽方向是哪個方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要監聽的swipe側滑方向是哪個方向
int swipeFlags = ItemTouchHelper.LEFT ;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打開長按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
/**
* Item是否支持滑動
*
* @return
* true 支持滑動操作
* false 不支持滑動操作
*/
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
//當上下移動的時候回調的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽過程中不斷地調用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的過程中不斷調用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//側滑的時候回調的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//監聽側滑，1.刪除數據 2.調用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//設置滑動item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判斷選中狀態
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑動item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢復
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出現復用問題 而導致條目不顯示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//設置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
QQAdapter.MyViewHolder myViewHolder = (QQAdapter.MyViewHolder)viewHolder;
//重置改變，防止由于復用而導致的顯示問題
viewHolder.itemView.setScrollX(0);
myViewHolder.tvDetele.setText("左滑刪除");
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) myViewHolder.ivDetele.getLayoutParams();
params.width = 150;
params.height = 150;
myViewHolder.ivDetele.setLayoutParams(params);
myViewHolder.ivDetele.setVisibility(View.INVISIBLE);
super.clearView(recyclerView, viewHolder);
}
//設置滑動時item的背景透明度
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
QQAdapter.MyViewHolder myViewHolder = (QQAdapter.MyViewHolder)viewHolder;
//僅對側滑狀態下的效果做出改變
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
Log.d("http","4444");
//如果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;
myViewHolder.tvDetele.setText(""); //把文字去掉
myViewHolder.ivDetele.setVisibility(View.VISIBLE); //顯示眼睛
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) myViewHolder.ivDetele.getLayoutParams();
params.width = (int) (fixedWidth + diff);
params.height = (int) (fixedWidth + diff);
myViewHolder.ivDetele.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(2).getLayoutParams().width;
}
}
自定義側滑動畫
