之前做過一個仿 iOS 列表的編輯刪除功能职辨，在快做完的時候發(fā)現在 iOS 里，編輯的時候還帶有排序的功能，所以這次把排序功能加上桃漾，并做了一些優(yōu)化。現在的效果如下：
有興趣的可以先看一下之前刪除的那篇：
按鍵布局
首先拟逮，我們需要在布局中增加一個排序的按鍵撬统，所以在 EditLayout 的成員變量增加：
private View mSortView; //排序按鍵
private int mSortWidth; //排序按鍵寬度
處于編輯狀態(tài)時，才會顯示編輯按鍵敦迄。
我把右邊的刪除按鈕固定在右側底部（感覺好看一點）恋追，為了讓它處于其它控件的底部，item 布局文件的控件擺放順序變成這樣：
<EditLayout...>
<!--右側刪除按鍵-->
<view.../>
<!--內容區(qū)域-->
<view.../>
<!--左側預刪除按鍵-->
<view.../>
<!--排序按鍵-->
<view.../>
</EditLayout>
相應的罚屋，獲取及擺放控件改成這樣：
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mRightView = getChildAt(0);
mContentView = getChildAt(1);
mLeftView = getChildAt(2);
mSortView = getChildAt(3);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
mRightWidth = mRightView.getMeasuredWidth();
mLeftWidth = mLeftView.getMeasuredWidth();
mSortWidth = mSortView.getMeasuredWidth();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
//判斷是否為編輯模式,擺放每個子View的位置
mRightView.layout(mWidth - mRightWidth, 0, mWidth, mHeight);
mSortView.layout(mWidth - mSortWidth, 0, mWidth, mHeight);
if (isEdit) {
mContentView.layout(mLeftWidth, 0, mWidth, mHeight);
mLeftView.layout(0, 0, mLeftWidth, mHeight);
mSortView.setVisibility(VISIBLE);
} else {
mContentView.layout(0, 0, mWidth, mHeight);
mLeftView.layout(-mLeftWidth, 0, 0, mHeight);
mSortView.setVisibility(INVISIBLE);
}
}
三種狀態(tài)
在增加了排序功能后苦囱，三個狀態(tài)也有了變化：
可以看到，進入編輯狀態(tài)后脾猛，mContentView 的寬度發(fā)生了變化撕彤，那么我們在哪里改變它的寬度呢？
縮短 mContentView 寬度
在 ViewDragHelper.Callback 中猛拴，onViewPositionChanged 方法負責監(jiān)聽控件的位置變化羹铅。我們在這里判斷，當左側完全展開時愉昆，縮短 mContentView 的寬度：
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
if (changedView == mContentView) {
mLeftView.offsetLeftAndRight(dx);
mSortView.offsetLeftAndRight(dx);
}
invalidate();
//左側展開時职员，修改 mContentView 寬度
if (left == mLeftWidth) {
mContentView.layout(mLeftWidth, 0, mWidth, mHeight);
mSortView.layout(mWidth - mSortWidth, 0, mWidth, mHeight);
mSortView.setVisibility(VISIBLE);
}
}
復原 mContentView 寬度
當結束編輯狀態(tài)時，就將控件的寬度復原跛溉。我們需要先將寬度復原焊切，再讓它滑動到關閉的狀態(tài)扮授。這里會有兩種情況，左邊展開關閉和右邊展開關閉蛛蒙。關閉時會調用 close() 方法糙箍，我們在這里做處理：
public void close() {
if (mOnStateChangeListener != null) {
mOnStateChangeListener.onClose(this);
}
//將 mContentView 寬度復原
if (mContentView.getLeft() > 0) {
//左邊展開復原
mContentView.layout(mLeftWidth, 0, mWidth + mLeftWidth, mHeight);
mLeftView.layout(0, 0, mLeftWidth, mHeight);
} else {
//右邊展開復原
mContentView.layout(-mRightWidth, 0, mWidth - mRightWidth, mHeight);
mLeftView.layout(-mLeftWidth - mRightWidth, 0, -mRightWidth, mHeight);
}
mSortView.setVisibility(INVISIBLE);
//滑動到關閉位置
mDragHelper.smoothSlideViewTo(mContentView, 0, 0);
invalidate();
}
UI 方面的改動就到這里。
排序
ItemTouchHelper 可以讓 RecyclerView 的 item 實現上下左右拖動牵祟，我們把排序的操作交給它處理深夯。
ItemTouchHelper.Callback
和 ViewDragHelper 類似铣耘，ItemTouchHelper 也有一個 Callback辆飘，我們自定義一個 EditTouchHelperCallback：
public class EditTouchHelperCallback extends ItemTouchHelper.Callback {
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 允許上下拖拽
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
// 禁止左右拖拽
int swipeFlags = 0;
return makeMovementFlags(dragFlags, swipeFlags);
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
return true;
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
}
@Override
public boolean isLongPressDragEnabled() {
//禁止長按觸發(fā)拖拽
return false;
}
}
這幾個方法都很好理解：
- getMovementFlags - 確定 item 是否可上下左右拖動，我們這里只允許上下拖動
- onMove - 上下拖動 item 到另一個位置的回調
- onSwiped - 左右拖動 item 的回調瓮具，這里不需要實現
- isLongPressDragEnabled - 長按 item 是否會觸發(fā)可拖動收奔，默認返回 true掌呜，這里不需要
在 Activity 中，需要將 ItemTouchHelper 和 RecyclerView 綁定：
mItemTouchHelper = new ItemTouchHelper(new EditTouchHelperCallback());
mItemTouchHelper.attachToRecyclerView(mRecyclerView);
這樣坪哄，我們的 item 就已經支持上下拖動了质蕉，但是要如何觸發(fā)拖動以及交換控件位置呢？
OnItemSortListener
ItemTouchHelper 有兩種方式可以觸發(fā)拖動翩肌，一個是上面說到的長按模暗，還有就是調用它的 startDrag 方法。
至于交換位置念祭，ItemTouchHelper 是不支持的兑宇，畢竟它負責的是單個 item 的操作。但我們 RecyclerView 的 Adapter 支持啊粱坤，它的 notifyItemMoved 方法就是用來交換 item 位置的隶糕。
所以我們創(chuàng)建一個監(jiān)聽器，用于監(jiān)聽開始拖拽及位置交換：
/**
* 排序監(jiān)聽器
*/
public interface OnItemSortListener {
void onStartDrags(RecyclerView.ViewHolder viewHolder);
void onItemMove(int fromPosition, int toPosition);
}
這個監(jiān)聽器由 Activity 實現:
@Override
public void onStartDrags(RecyclerView.ViewHolder viewHolder) {
mItemTouchHelper.startDrag(viewHolder);
}
@Override
public void onItemMove(int fromPosition, int toPosition) {
Collections.swap(mList, fromPosition, toPosition);
mAdapter.notifyItemMoved(fromPosition, toPosition);
}
這兩個方法在哪里調用站玄？
調用 Listener
觸發(fā)拖動的當然是排序按鍵枚驻。將 ItemTouchHelper 傳給 Adapter，然后給排序按鍵設置觸摸事件：
viewHolder.vSort.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (isEdit && mRightOpenItem != null) {
mRightOpenItem.openLeft();
} else {
mOnItemSortListener.onStartDrags(viewHolder);
}
return false;
}
});
至于位置交換株旷，不要忘了 ItemTouchHelper.Callback 里有個 onMove 方法再登。創(chuàng)建 EditTouchHelperCallback 時，將 OnItemSortListener 傳入灾常，然后在 onMove 里加一句代碼：
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
mOnItemSortListener.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());
return true;
}
這樣就完成啦霎冯，妥妥的铃拇。目前的效果還是比較滿意的钞瀑。
