RecyclerView 的拖動排序需要借助一下 ItemTouchHelper 這個類避咆,ItemTouchHelper 類是 Google 提供的一個支持 RecyclerView 滑動和拖動的一個使用類,下面使用該類實現(xiàn) RecyclerView 的滑動刪除和拖動排序功能。首先大概介紹一下 ItemTouchHelper 的一個內部抽象類 Callback 拗盒。
1闸与、ItemTouchHelper.Callback
該類是ItemTouchHelper類中的一個靜態(tài)抽象類,作用主要是將ItemTouchHelper 與自己的應用聯(lián)系在一起可岂,讓開發(fā)者通過 ViewHolder 控制每一個 View 的具體行為错敢,接收用戶的事件回調。該類里面有三個抽象方法:getMovementFlags、onMove稚茅、onSwiped纸淮。也是開發(fā)中經常要是用的。
1.1亚享、getMovementFlags
該方法返回一個 Flags 表示Item的三種狀態(tài)狀態(tài):idle(空閑)咽块、 swiping(滑動)、dragging(拖動)欺税,根據(jù) RecyclerView 不同的布局管理器侈沪,設置不同的滑動、拖動方向晚凿,一般使用 makeMovementFlags(int dragFlags, int swipeFlags)方法返回亭罪,dragFlags 表示拖動的方向,swipeFlags 表示滑動的方向歼秽。
public abstract int getMovementFlags(RecyclerView recyclerView, ViewHolder viewHolder);
1.2皆撩、onMove
當 ItemTouchHelper 拖動一個 Item 時該方法將會被回調,Item 將從舊的位置移動到新的位置哲银,如果不拖動這個方法將從來不會調用,返回 true 表示 Item 已經被移動到新的位置扛吞。
public abstract boolean onMove(RecyclerView recyclerView, ViewHolder viewHolder, ViewHolder target);
1.3、onSwiped
當 Item 滑動的時候調用荆责,如果不滑動該方法不會被調用滥比,可通過 direction 做相應的判斷執(zhí)行某些操作。
public abstract void onSwiped(ViewHolder viewHolder, int direction);
此外經常使用的方法有 onSelectedChanged做院、clearView等方法盲泛。
1.4、onSelectedChanged
當 item 由靜止狀態(tài)變?yōu)榛瑒踊蛲蟿訝顟B(tài)時調用此方法键耕,可通過 actionState 判斷 Item 在哪種狀態(tài)下執(zhí)行某些操作寺滚,重寫該方法時必須調用其父類的該方法。
public void onSelectedChanged(ViewHolder viewHolder, int actionState) {
if (viewHolder != null) {
sUICallback.onSelected(viewHolder.itemView);
}
}
1.5屈雄、clearView
當與用戶交互結束或相關動畫完成之后該方法被調用村视。
public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) {
sUICallback.clearView(viewHolder.itemView);
}
2、RecyclerView實現(xiàn)拖動排序
RecyclerView的拖動排序需要借助一個 android.support.v7.widget.helper.ItemTouchHelper 這個類來實現(xiàn)酒奶,拖動排序重點是在接口里面的 onMove(int fromPosition, int toPosition) 方法蚁孔,其在 ItemTouchHelperAdapter中的具體實現(xiàn)參考如下:
@Override
public void onMove(int fromPosition, int toPosition) {
String item = mDatas.get(fromPosition);
mDatas.remove(fromPosition);
mDatas.add(toPosition, item);
notifyItemMoved(fromPosition, toPosition);
}
3、RecyclerView 實現(xiàn)側滑刪除
RecyclerView 的拖動排序需要借助一個 android.support.v7.widget.helper.ItemTouchHelper 這個類來實現(xiàn)惋嚎,側滑刪除重點是在接口中的 onSwiped(int position)杠氢,其在 ItemTouchHelperAdapter中的具體實現(xiàn)參考如下
@Override
public void onSwiped(int position) {
list.remove(position);
notifyItemRemoved(position);
}
如果想要在滑動刪除過程中實現(xiàn)如下效果,就需要重寫ItemTouchHelper.Callback的onChildDraw方法另伍,在其中實現(xiàn)相應的效果鼻百。
在重寫onChildDraw方法之前,先來修改下item的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#ffffff"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
app:cardCornerRadius="1dp"
app:elevation="1dp"
app:contentPadding="1dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<TextView
android:id="@+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:padding="4dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<FrameLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:background="#f33213">
<ImageView
android:id="@+id/iv_img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="@mipmap/ic_eye_72"
android:visibility="invisible"/>
<TextView
android:id="@+id/tv_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左滑刪除"
android:textSize="18sp"
android:textColor="#ffffff"
android:layout_gravity="center"/>
</FrameLayout>
</LinearLayout>
布局文件修改后,我們嘗試來滑動一下温艇,發(fā)現(xiàn)后面的刪除方塊并不會出現(xiàn)因悲,這是因為默認的滑動方式是setTranslationX(int),即是對整個View的滑動中贝,所以無論我們怎樣滑動,都不會出現(xiàn)刪除方塊臼朗。因此邻寿,我們要改變一個種滑動方式,比如使用scrollTo(int,int)视哑,這種是對View的內容的滑動绣否,所以隨著左滑,item會向左滑去挡毅,而位于右方的方塊自然也就出現(xiàn)了蒜撮。
接著,我們考慮該“刪除眼睛”的圖標是怎樣從小變大的跪呈,這個實現(xiàn)也比較簡單段磨,只要根據(jù)滑動的距離對該ImageView的LayoutParams.width進行改變就行了,不過要注意限制大小耗绿,否則過大會造成圖片的失真苹支。當滑動距離等于RecyclerView寬度的一半時,此時松開手會使Item刪除误阻,那么我們可以在該滑動距離達到該值時時“眼睛”變得最大债蜜,此時可以達到良好的交互效果,提示了用戶無需繼續(xù)滑動即可刪除該Item了究反。
最后我們要考慮的是:在刪除了Item或者沒刪除而滑回原來的位置后寻定,我們要把所做的改變重置一下,否則精耐,會由于RecyclerView的復用而導致其他位置的ViewHolder與當前的ViewHolder所做的改變一樣狼速,即造成顯示的錯誤。我們可以在clearView()方法內重置改變卦停,這樣就能解決因復用而導致的顯示問題了唐含。
最后我們來看看SimpleItemTouchHelperCallback的代碼:
public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback{
private ItemTouchHelperAdapter mAdapter;
public SimpleItemTouchHelperCallback(ItemTouchHelperAdapter adapter){
mAdapter = adapter;
}
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
int swipeFlags = ItemTouchHelper.LEFT;
return makeMovementFlags(dragFlags,swipeFlags);
}
@Override
public boolean isLongPressDragEnabled() {
return true;
}
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
mAdapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition());
return true;
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
mAdapter.onItemDissmiss(viewHolder.getAdapterPosition());
}
//限制ImageView長度所能增加的最大值
private double ICON_MAX_SIZE = 50;
//ImageView的初始長寬
private int fixedWidth = 150;
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
super.clearView(recyclerView, viewHolder);
//重置改變,防止由于復用而導致的顯示問題
viewHolder.itemView.setScrollX(0);
((MyAdapter.NormalItem)viewHolder).tv.setText("左滑刪除");
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
params.width = 150;
params.height = 150;
((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.INVISIBLE);
}
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//僅對側滑狀態(tài)下的效果做出改變
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
//如果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;
((MyAdapter.NormalItem)viewHolder).tv.setText(""); //把文字去掉
((MyAdapter.NormalItem) viewHolder).iv.setVisibility(View.VISIBLE); //顯示眼睛
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) ((MyAdapter.NormalItem) viewHolder).iv.getLayoutParams();
params.width = (int) (fixWidth + diff);
params.height = (int) (fixWidth + diff);
((MyAdapter.NormalItem) viewHolder).iv.setLayoutParams(params);
}
}else {
//拖拽狀態(tài)下不做改變专执,需要調用父類的方法
super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
}
}
/**
* 獲取刪除方塊的寬度
*/
public int getSlideLimitation(RecyclerView.ViewHolder viewHolder){
ViewGroup viewGroup = (ViewGroup) viewHolder.itemView;
return viewGroup.getChildAt(1).getLayoutParams().width;
}
}
ItemTouchHelperAdapter 的代碼如下
public interface ItemTouchHelperAdapter {
//數(shù)據(jù)交換
void onItemMove(int fromPosition,int toPosition);
//數(shù)據(jù)刪除
void onItemDissmiss(int position);
}
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements ItemTouchHelperAdapter {
//數(shù)據(jù)
private List<String> mData;
...
@Override
public void onItemMove(int fromPosition, int toPosition) {
//交換位置
String item = mDatas.get(fromPosition);
mDatas.remove(fromPosition);
mDatas.add(toPosition, item);
notifyItemMoved(fromPosition, toPosition);
}
@Override
public void onItemDissmiss(int position) {
//移除數(shù)據(jù)
mData.remove(position);
notifyItemRemoved(position);
}
}
上面我們修改了Adapter和新建了ItemTouchHelper.Callback的子類淮捆,接下來我們要為RecyclerView添加ItemTouchHelper:
//先實例化Callback
ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(myAdapter);
//用Callback構造ItemtouchHelper
ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
//調用ItemTouchHelper的attachToRecyclerView方法建立聯(lián)系
touchHelper.attachToRecyclerView(mRecyclerView);
到此為止,我們已經熟悉了ItemTouchHelper的簡單使用了,下面看下幾個小問題攀痊。
- 默認情況下滑動到item的寬或者高一半時會觸發(fā)刪除桐腌,可以通過getSwipeThreshold方法修改,該方法默認返回0.5f苟径。
public float getSwipeThreshold(ViewHolder viewHolder) {
return .5f;
}
- 如果滑動過快時你會發(fā)現(xiàn)案站,刪除的提示可能不會顯示完全,這時因為快速滑動時dx或dy會突變棘街,可能在刪除提示完全顯示前就超出了你在onChildDraw方法中的判斷條件蟆盐。拿我們上面的處理舉個例子。
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//僅對側滑狀態(tài)下的效果做出改變
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
//如果dX小于等于刪除方塊的寬度遭殉,那么我們把該方塊滑出來
if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
viewHolder.itemView.scrollTo(-(int) dX,0);
}
//....
}
}else {
//拖拽狀態(tài)下不做改變石挂,需要調用父類的方法
super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
}
}
假設getSlideLimitation(viewHolder)
得到刪除提示的寬度為10,在滑動刪除時险污,dx的值可能為0痹愚、-5、-100....蛔糯、0拯腮,而當dx=-100時已經不滿足條件Math.abs(dX) <= getSlideLimitation(viewHolder)
了,故只顯示了一半蚁飒。
直到了原因解決起來就很簡單了疾瓮,這里給個簡單的思路:當條件不滿足時,調用viewHolder.itemView.scrollTo(刪除塊的寬度,0)
即可飒箭。
上面是通過ItemTouchHelper實現(xiàn)了側滑刪除狼电,但是無法實現(xiàn)側滑時顯示刪除提示,然后再通過點擊刪除提示部分再刪除item弦蹂。下面就通過自定義RecyclerView來實現(xiàn)肩碟。
4、通過自定義RecyclerView實現(xiàn)側滑刪除
自定義RecyclerView方式有三個關鍵點:
- 何時攔截事件
- 如何讓的Menu展開/隱藏
4.2凸椿、何時攔截事件
RecyclerView需要處理手勢事件削祈,內部的ItemVIew也需要處理事件,那在何時去攔截事件呢脑漫?分以下兩種情況:
- ACTION_DOWN時髓抑,如果已經有ItemView處于展開狀態(tài),并且這次點擊的對象不是已打開的那個ItemView优幸,則攔截事件吨拍,并將已展開的ItemView關閉。
- ACTION_MOVE時网杆,有倆判斷羹饰,滿足其一則認為是側滑:
- x方向速度大于y方向速度伊滋,且大于最小速度限制;
- x方向的側滑距離大于y方向滑動距離队秩,且x方向達到最小滑動距離笑旺;
public class SwipeDeleteRecyclerView extends RecyclerView {
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
...
switch (e.getAction()) {
// 第一種情況
case MotionEvent.ACTION_DOWN:
...
// 已經有ItemView處于展開狀態(tài),并且這次點擊的對象不是已打開的那個ItemView
if (view != null && mFlingView != view && view.getScrollX() != 0) {
// 將已展開的ItemView關閉
view.scrollTo(0, 0);
// 則攔截事件
return true;
}
break;
// 第二種情況
case MotionEvent.ACTION_MOVE:
mVelocityTracker.computeCurrentVelocity(1000);
// 此處有倆判斷馍资,滿足其一則認為是側滑:
// 1.如果x方向速度大于y方向速度筒主,且大于最小速度限制;
// 2.如果x方向的側滑距離大于y方向滑動距離鸟蟹,且x方向達到最小滑動距離乌妙;
float xVelocity = mVelocityTracker.getXVelocity();
float yVelocity = mVelocityTracker.getYVelocity();
if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
|| Math.abs(x - mFirstX) >= mTouchSlop
&& Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
mIsSlide = true;
return true;
}
break;
...
}
...
}
}
攔截了事件以后就該處理事件了,接著往下看戏锹。
4.2冠胯、如何讓的Menu展開/隱藏
接著在onTouchEvent中處理事件火诸,控制Menu的隱藏與展開锦针。
- 首先是在ACTION_MOVE中,如果處于側滑狀態(tài)則讓目標ItemView通過scrollBy()跟著手勢移動置蜀,注意判斷邊界
- 在ACTION_UP中奈搜,此時會產生兩個結果:一個是繼續(xù)展開菜單,另一個是關閉菜單盯荤。這兩個結果又都分了兩種情況:
1馋吗,當松手時向左的滑動速度超過了閾值,就讓目標ItemView保持松手時的速度繼續(xù)展開秋秤。
2宏粤,當松手時向右的滑動速度超過了閾值,就讓目標ItemView關閉灼卢。
3绍哎,當松手時移動的距離超過了隱藏的寬度的一半(也就是最大可以移動的距離的一半),則讓ItemVIew繼續(xù)展開鞋真。
4崇堰,當松手時移動的距離小于隱藏的寬度的一半,則讓ItemVIew關閉涩咖。
public boolean onTouchEvent(MotionEvent e) {
obtainVelocity(e);
switch (e.getAction()) {
case MotionEvent.ACTION_MOVE:
float dx = mLastX - x;
// 判斷邊界
if (mFlingView.getScrollX() + dx <= mMenuViewWidth
&& mFlingView.getScrollX() + dx > 0) {
// 隨手指滑動
mFlingView.scrollBy((int) dx, 0);
}
break;
case MotionEvent.ACTION_UP:
int scrollX = mFlingView.getScrollX();
mVelocityTracker.computeCurrentVelocity(1000);
if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) { // 向左側滑達到側滑最低速度海诲,則打開
// 計算剩余要移動的距離
int delt = Math.abs(mMenuViewWidth - scrollX);
// 根據(jù)松手時的速度計算要移動的時間
int t = (int) (delt / mVelocityTracker.getXVelocity() * 1000);
// 移動
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(t));
} else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) { // 向右側滑達到側滑最低速度,則關閉
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
} else if (scrollX >= mMenuViewWidth / 2) { // 如果超過刪除按鈕一半檩互,則打開
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
} else { // 其他情況則關閉
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
}
invalidate();
releaseVelocity(); // 釋放追蹤
break;
}
return true;
}
4.3特幔、缺陷
在RecyclerView的Holder的onBindViewHolder()中給滑出來的菜單添加點擊事件即可響應刪除:
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.tvDelete.setOnClickListener {
onDelete(holder.adapterPosition)
}
}
但是由于RecyclerView的復用機制,需要在點了刪除菜單刪除Item后闸昨,讓Item關閉敬辣,不然就會出現(xiàn)刪除一個Item后往下滾動雪标,會再出來一個已展開的Item。
fun onDelete(it:Int){
mData.removeAt(it)
adapter.notifyItemRemoved(it)
// 調用closeMenu()關閉該item
mBinding.rvAll.closeMenu()
}
關閉的方法很簡單溉跃,只需要讓該Item scrollTo(0, 0)即可
public void closeMenu() {
if (mFlingView != null && mFlingView.getScrollX() != 0) {
// 關閉
mFlingView.scrollTo(0, 0);
}
}
因此該方式存在的缺陷是需要手動關閉已刪除的itemView村刨。