前言
RecyclerView是一個(gè)用來替換之前的ListView和GridView的控件，使用的時(shí)候，雖然比以前的ListView看起來麻煩，但是其實(shí)作為一個(gè)高度解耦的控件，復(fù)雜一點(diǎn)點(diǎn)換來極大的靈活性，豐富的可操作性，何樂而不為呢。不過今天主要說說它的一個(gè)輔助類ItemTouchHelper來實(shí)現(xiàn)列表的拖動(dòng)和滑動(dòng)刪除。
1.什么是ItemTouchHelper
ItemTouchHelper是一個(gè)工具類，可實(shí)現(xiàn)側(cè)滑刪除和拖拽移動(dòng)，使用這個(gè)工具類需要RecyclerView和Callback。同時(shí)根據(jù)需要重寫onMove和onSwiped方法。接下來就來講述ItemTouchHelper的使用方法。
2.ItemTouchHelper基本使用方法
2.1新建一個(gè)拖拽、刪除回調(diào)接口，
從解耦的角度考慮，我們需要一個(gè)接口來實(shí)現(xiàn)Adapter和ItemTouchHelper之間涉及數(shù)據(jù)的操作，因?yàn)镮temTouchHelper在完成觸摸的各種動(dòng)畫后，就要對(duì)Adapter的數(shù)據(jù)進(jìn)行操作，比如側(cè)滑刪除操作，最后需要調(diào)用Adapter的notifyItemRemove()方法來移除該數(shù)據(jù)。因此我們可以把數(shù)據(jù)操作的部分抽象成一個(gè)接口方法，讓ItemTouchHelper.Callback調(diào)用該方法即可。具體如下：
新建接口ItemTouchMoveListener:
public interface ItemTouchMoveListener {
/**
* 當(dāng)拖拽的時(shí)候回調(diào)
* 可以在方法里面實(shí)現(xiàn):拖拽條目并實(shí)現(xiàn)刷新效果
* @param fromPosition 從什么位置拖
* @param toPosition 到什么位置
* @return 是否執(zhí)行了move
*/
boolean onItemMove(int fromPosition,int toPosition);
/**
* 當(dāng)條目被移除時(shí)回調(diào)
* @param position 移除的位置
* @return
*/
boolean onItemRemove(int position);
}
讓我們的Adapter實(shí)現(xiàn)該接口：
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.數(shù)據(jù)交換 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);
}
}
}
那么我們?cè)贗temTouchHelper.Callback內(nèi)直接調(diào)用接口的方法即可。
2.2新建類繼承自ItemTouchHelper.Callback
public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
/**
* Callback回調(diào)監(jiān)聽時(shí)先調(diào)用的，用來判斷當(dāng)前是什么動(dòng)作，比如判斷方向
* 作用：哪個(gè)方向的拖動(dòng)
*
* @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
//我要監(jiān)聽的拖拽方向是哪個(gè)方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要監(jiān)聽的swipe側(cè)滑方向是哪個(gè)方向
int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打開長(zhǎng)按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
//當(dāng)上下移動(dòng)的時(shí)候回調(diào)的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽過程中不斷地調(diào)用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的過程中不斷調(diào)用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//側(cè)滑的時(shí)候回調(diào)的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//監(jiān)聽側(cè)滑，1.刪除數(shù)據(jù) 2.調(diào)用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//設(shè)置滑動(dòng)item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判斷選中狀態(tài)
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑動(dòng)item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢復(fù)
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出現(xiàn)復(fù)用問題 而導(dǎo)致條目不顯示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//設(shè)置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
super.clearView(recyclerView, viewHolder);
}
//設(shè)置滑動(dòng)時(shí)item的背景透明度
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//dX:水平方向移動(dòng)的增量(負(fù)：往左；正：往右) 0-view.getWidth()
float alpha = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
//透明度動(dòng)畫
viewHolder.itemView.setAlpha(alpha);//1-0
//設(shè)置滑出大小
// viewHolder.itemView.setScaleX(alpha);
// viewHolder.itemView.setScaleY(alpha);
}
// //防止出現(xiàn)復(fù)用問題 而導(dǎo)致條目不顯示 方式二
// if(alpha==0){
// viewHolder.itemView.setAlpha(1);//1-0
// //設(shè)置滑出大小
//// viewHolder.itemView.setScaleX(1);
//// viewHolder.itemView.setScaleY(1);
// }
//此super方法自動(dòng)處理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.自定義側(cè)滑動(dòng)畫
有時(shí)候我們對(duì)默認(rèn)的動(dòng)畫效果可能不滿意，需要自己實(shí)現(xiàn)想要的動(dòng)畫效果，ItemTouchHelper.Callback提供的onChildDraw方法可以讓我們很方便地實(shí)現(xiàn)想要的效果。
該效果是比較常見的，用戶向左滑動(dòng)Item的時(shí)候，一開始提示的是“左滑刪除”，滑動(dòng)到一定距離后，顯示刪除的圖標(biāo)，并且隨著滑動(dòng)距離的增加該圖標(biāo)不斷變大，達(dá)到最大后用戶松開手指，該Item被刪除。
接下來我們來分析一下怎樣實(shí)現(xiàn)以上的效果：
首先，要想左滑出現(xiàn)一個(gè)刪除的方塊，可以在LinearLayout放一個(gè)這樣的“方塊”，讓它與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>
布局文件修改后，我們嘗試來滑動(dòng)一下，發(fā)現(xiàn)后面的刪除方塊并不會(huì)出現(xiàn)，這是因?yàn)槟J(rèn)的滑動(dòng)方式是setTranslationX(int)，即是對(duì)整個(gè)View的滑動(dòng)，所以無論我們?cè)鯓踊瑒?dòng)，都不會(huì)出現(xiàn)刪除方塊。因此，我們要改變一個(gè)種滑動(dòng)方式，比如使用scrollTo(int,int)，這種是對(duì)View的內(nèi)容的滑動(dòng)，所以隨著左滑，item會(huì)向左滑去，而位于右方的方塊自然也就出現(xiàn)了。
接著，我們考慮該“刪除眼睛”的圖標(biāo)是怎樣從小變大的，這個(gè)實(shí)現(xiàn)也比較簡(jiǎn)單，只要根據(jù)滑動(dòng)的距離對(duì)該ImageView的LayoutParams.width進(jìn)行改變就行了，不過要注意限制大小，否則過大會(huì)造成圖片的失真。當(dāng)滑動(dòng)距離等于RecyclerView寬度的一半時(shí)，此時(shí)松開手會(huì)使Item刪除，那么我們可以在該滑動(dòng)距離達(dá)到該值時(shí)時(shí)“眼睛”變得最大，此時(shí)可以達(dá)到良好的交互效果，提示了用戶無需繼續(xù)滑動(dòng)即可刪除該Item了。
最后我們要考慮的是：在刪除了Item或者沒刪除而滑回原來的位置后，我們要把所做的改變重置一下，否則，會(huì)由于RecyclerView的復(fù)用而導(dǎo)致其他位置的ViewHolder與當(dāng)前的ViewHolder所做的改變一樣，即造成顯示的錯(cuò)誤。我們可以在clearView()方法內(nèi)重置改變，這樣就能解決因復(fù)用而導(dǎo)致的顯示問題了。
最后我們來看看SimpleItemTouchHelperCallback的代碼：
public class MyItemTouchHelperCallback3 extends ItemTouchHelper.Callback {
//限制ImageView長(zhǎng)度所能增加的最大值
private double ICON_MAX_SIZE = 40;
//ImageView的初始長(zhǎng)寬
private int fixedWidth = 120;
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback3(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
// /**
// * 設(shè)置滑動(dòng)類型標(biāo)記
// *
// * @param recyclerView
// * @param viewHolder
// * @return
// * 返回一個(gè)整數(shù)類型的標(biāo)識(shí)，用于判斷Item那種移動(dòng)行為是允許的
// */
// @Override
// public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// //START 右向左 END左向右 LEFT 向左 RIGHT向右 UP向上
// //如果某個(gè)值傳0，表示不觸發(fā)該操作
// return makeMovementFlags(ItemTouchHelper.UP|ItemTouchHelper.DOWN,ItemTouchHelper.END );
// }
/**
* Callback回調(diào)監(jiān)聽時(shí)先調(diào)用的，用來判斷當(dāng)前是什么動(dòng)作，比如判斷方向
* 作用：哪個(gè)方向的拖動(dòng)
*
* @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
//我要監(jiān)聽的拖拽方向是哪個(gè)方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要監(jiān)聽的swipe側(cè)滑方向是哪個(gè)方向
int swipeFlags = ItemTouchHelper.LEFT ;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打開長(zhǎng)按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
/**
* Item是否支持滑動(dòng)
*
* @return
* true 支持滑動(dòng)操作
* false 不支持滑動(dòng)操作
*/
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
//當(dāng)上下移動(dòng)的時(shí)候回調(diào)的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽過程中不斷地調(diào)用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的過程中不斷調(diào)用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//側(cè)滑的時(shí)候回調(diào)的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//監(jiān)聽側(cè)滑，1.刪除數(shù)據(jù) 2.調(diào)用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//設(shè)置滑動(dòng)item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判斷選中狀態(tài)
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑動(dòng)item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢復(fù)
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出現(xiàn)復(fù)用問題 而導(dǎo)致條目不顯示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//設(shè)置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
QQAdapter.MyViewHolder myViewHolder = (QQAdapter.MyViewHolder)viewHolder;
//重置改變，防止由于復(fù)用而導(dǎo)致的顯示問題
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);
}
//設(shè)置滑動(dòng)時(shí)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;
//僅對(duì)側(cè)滑狀態(tài)下的效果做出改變
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
Log.d("http","4444");
//如果dX小于等于刪除方塊的寬度，那么我們把該方塊滑出來
if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
viewHolder.itemView.scrollTo(-(int) dX,0);
}
//如果dX還未達(dá)到能刪除的距離，此時(shí)慢慢增加“眼睛”的大小，增加的最大值為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 {
//拖拽狀態(tài)下不做改變，需要調(diào)用父類的方法
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;
}
}
自定義側(cè)滑動(dòng)畫
