仿 iOS 列表的编辑功能 - 排序篇

时间 2019-11-16

标签 ios 列表编辑功能排序栏目 iOS 繁體版

原文原文链接

以前作过一个仿 iOS 列表的编辑删除功能，在快作完的时候发如今 iOS 里，编辑的时候还带有排序的功能，因此此次把排序功能加上，并作了一些优化。如今的效果以下：java

有兴趣的能够先看一下以前删除的那篇：git

仿 iOS 列表的编辑功能 - 删除篇github

按键布局

首先，咱们须要在布局中增长一个排序的按键，因此在 EditLayout 的成员变量增长：ide

private View mSortView;     //排序按键
private int mSortWidth;     //排序按键宽度复制代码

处于编辑状态时，才会显示编辑按键。工具

我把右边的删除按钮固定在右侧底部（感受好看一点），为了让它处于其它控件的底部，item 布局文件的控件摆放顺序变成这样：布局

<EditLayout...>

    <!--右侧删除按键-->
    <view.../>

    <!--内容区域-->
    <view.../>

    <!--左侧预删除按键-->
    <view.../>

    <!--排序按键-->
    <view.../>

</EditLayout>复制代码

相应的，获取及摆放控件改为这样：post

@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);
    }
}复制代码

三种状态

在增长了排序功能后，三个状态也有了变化：优化

能够看到，进入编辑状态后，mContentView 的宽度发生了变化，那么咱们在哪里改变它的宽度呢？this

缩短 mContentView 宽度

在 ViewDragHelper.Callback 中，onViewPositionChanged 方法负责监听控件的位置变化。咱们在这里判断，当左侧彻底展开时，缩短 mContentView 的宽度：spa

@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;
}复制代码

这样就完成啦，妥妥的。目前的效果仍是比较满意的。

源码地址