仿 iOS 列表的編輯功能 – 排序篇

SouthernBox發表於2019-01-22

之前做過一個仿 iOS 列表的編輯刪除功能,在快做完的時候發現在 iOS 裡,編輯的時候還帶有排序的功能,所以這次把排序功能加上,並做了一些優化。現在的效果如下:

仿 iOS 列表的編輯功能 – 排序篇
怎麼變成灰色了

有興趣的可以先看一下之前刪除的那篇:

仿 iOS 列表的編輯功能 – 刪除篇

按鍵佈局

首先,我們需要在佈局中增加一個排序的按鍵,所以在 EditLayout 的成員變數增加:

private View mSortView;     //排序按鍵
private int mSortWidth;     //排序按鍵寬度複製程式碼

處於編輯狀態時,才會顯示編輯按鍵。

我把右邊的刪除按鈕固定在右側底部(感覺好看一點),為了讓它處於其它控制元件的底部,item 佈局檔案的控制元件擺放順序變成這樣:

<EditLayout...>

    <!--右側刪除按鍵-->
    <view.../>

    <!--內容區域-->
    <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);
    }
}複製程式碼

三種狀態

在增加了排序功能後,三個狀態也有了變化:

仿 iOS 列表的編輯功能 – 排序篇
哥用畫圖工具溜得飛起

可以看到,進入編輯狀態後,mContentView 的寬度發生了變化,那麼我們在哪裡改變它的寬度呢?

縮短 mContentView 寬度

在 ViewDragHelper.Callback 中,onViewPositionChanged 方法負責監聽控制元件的位置變化。我們在這裡判斷,當左側完全展開時,縮短 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 寬度

當結束編輯狀態時,就將控制元件的寬度復原。我們需要先將寬度復原,再讓它滑動到關閉的狀態。這裡會有兩種情況,左邊展開關閉和右邊展開關閉。關閉時會呼叫 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() {
        //禁止長按觸發拖拽
        return false;
    }
}複製程式碼

這幾個方法都很好理解:

  • getMovementFlags – 確定 item 是否可上下左右拖動,我們這裡只允許上下拖動
  • onMove – 上下拖動 item 到另一個位置的回撥
  • onSwiped – 左右拖動 item 的回撥,這裡不需要實現
  • isLongPressDragEnabled – 長按 item 是否會觸發可拖動,預設返回 true,這裡不需要

在 Activity 中,需要將 ItemTouchHelper 和 RecyclerView 繫結:

mItemTouchHelper = new ItemTouchHelper(new EditTouchHelperCallback());
mItemTouchHelper.attachToRecyclerView(mRecyclerView);複製程式碼

這樣,我們的 item 就已經支援上下拖動了,但是要如何觸發拖動以及交換控制元件位置呢?

OnItemSortListener

ItemTouchHelper 有兩種方式可以觸發拖動,一個是上面說到的長按,還有就是呼叫它的 startDrag 方法。

至於交換位置,ItemTouchHelper 是不支援的,畢竟它負責的是單個 item 的操作。但我們 RecyclerView 的 Adapter 支援啊,它的 notifyItemMoved 方法就是用來交換 item 位置的。

所以我們建立一個監聽器,用於監聽開始拖拽及位置交換:

/**
 * 排序監聽器
 */
public interface OnItemSortListener {

    void onStartDrags(RecyclerView.ViewHolder viewHolder);

    void onItemMove(int fromPosition, int toPosition);
}複製程式碼

這個監聽器由 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

觸發拖動的當然是排序按鍵。將 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 方法。建立 EditTouchHelperCallback 時,將 OnItemSortListener 傳入,然後在 onMove 里加一句程式碼:

@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    mOnItemSortListener.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());
    return true;
}複製程式碼

這樣就完成啦,妥妥的。目前的效果還是比較滿意的。

原始碼地址

相關文章