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

在 iOS 的设置里面,有一种编辑的效果,进入编辑状态后,列表左边推出圆形的删除按钮,点击后再出现右边确认删除按钮,相当于给用户二次确认。看下在 Android 上如何实现。

iOS 的效果如下:

我实现的效果是这样的:

下面说说我是怎么做的吧。

EditLayout

我们自定义了一个 EditLayout 继承 FrameLayout。 可以看出,这个控件由左中右三部分组成,对应的,我在 EditLsyout 里创建了以下成员变量:

private View mContentView;  //内容部分
private View mLeftView;     //左边圆形删除按键
private View mRightView;    //右边删除按键
private int mWidth;         //内容部分宽度
private int mHeight;        //内容部分高度
private int mLeftWidth;     //左边部分宽度
private int mRightWidth;    //右边部分宽度复制代码

获取控件及宽高

当 View 中所有的子控件 均被映射成 xml 后,会触发 onFinishInflate 方法,当 view 的大小发生变化时,会触发 onSizeChanged 方法,所以我们可以这样赋值:

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    mLeftView = getChildAt(0);
    mContentView = getChildAt(1);
    mRightView = getChildAt(2);
}

@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();
}

摆放控件位置

获取到控件和宽高,我们就可以摆放它们的位置了。我们知道,View 是通过 onLayout 方法来摆放控件位置的。这里有两种摆放方式,编辑状态和非编辑状态,代码如下:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    //判断是否为编辑模式,摆放每个子View的位置
    if (EditAdapter.isEdit) {
        mContentView.layout(mLeftWidth, 0, mLeftWidth + mWidth, mHeight);
        mRightView.layout(mWidth + mLeftWidth, 0, mRightWidth + mWidth + LeftWidth, mHeight);
        mLeftView.layout(0, 0, mLeftWidth, mHeight);
    } else {
        mContentView.layout(0, 0, mWidth, mHeight);
        mRightView.layout(mWidth, 0, mRightWidth + mWidth, mHeight);
        mLeftView.layout(-mLeftWidth, 0, 0, mHeight);
    }
}

滑动效果

滑动效果,我交给了 ViewDragHelper 处理。要使用 ViewDragHelper ,需要实现一个 ViewDragHelper.Callback,这是一个抽象类,我们这里只关注它的三个方法:

//返回值决定 child 是否可拖拽
public boolean tryCaptureView(View child, int pointerId)
//限定移动范围,返回值为对应控件的左边位置
public int clampViewPositionHorizontal(View child, int left, int dx)
//当 changedView 发生移动时的回调(可以用来更新其他子 View 的位置)
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy)

我实现的 Callback 代码如下:

ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {

    @Override
    public boolean tryCaptureView(View child, int pointerId) {
        return false;
    }

    @Override
    public int clampViewPositionHorizontal(View child, int left, int dx) {
        if (child == mContentView) {
            if (left < -mRightWidth) {
                left = -mRightWidth;
            } else if (left > mLeftWidth) {
                left = mLeftWidth;
            }
        } else if (child == mRightView) {
            if (left < mWidth - mRightWidth) {
                left = mWidth - mRightWidth;
            } else if (left > mWidth) {
                left = mWidth;
            }
        } else if (child == mLeftView) {
            if (left < mWidth - mRightWidth) {
                left = mWidth - mRightWidth;
            } else if (left > -mLeftWidth) {
                left = 0 - mLeftWidth;
            }
        }
        return left;
    }

    @Override
    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
        if (changedView == mContentView) {
            mRightView.offsetLeftAndRight(dx);
            mLeftView.offsetLeftAndRight(dx);
        } else if (changedView == mRightView) {
            mContentView.offsetLeftAndRight(dx);
            mLeftView.offsetLeftAndRight(dx);
        } else if (changedView == mLeftView) {
            mContentView.offsetLeftAndRight(dx);
            mRightView.offsetLeftAndRight(dx);
        }
        invalidate();
    }
};

mDragHelper = ViewDragHelper.create(this, mCallback);

对了,实现滑动还需要重写 computeScroll 方法:

@Override
public void computeScroll() {
    super.computeScroll();
    if (mDragHelper.continueSettling(true)) {
        ViewCompat.postInvalidateOnAnimation(this);
    }
}

三种状态

我们这个控件存在三种状态,分别是左边展开,右边展开,还有关闭。相应的,我们定义三个方法,用于滑动到不同的状态:

/**
 * 展开左侧
 */
public void openLeft() {
    if (mOnStateChangeListener != null) {
        mOnStateChangeListener.onLeftOpen(this);
    }
    mDragHelper.smoothSlideViewTo(mContentView, mLeftWidth, 0);
    invalidate();
}

/**
 * 展开右侧
 */
public void openRight() {
    if (mOnStateChangeListener != null) {
        mOnStateChangeListener.onRightOpen(this);
    }
    mDragHelper.smoothSlideViewTo(mContentView, -mRightWidth, 0);
    invalidate();
}

/**
 * 关闭
 */
public void close() {
    if (mOnStateChangeListener != null) {
        mOnStateChangeListener.onClose(this);
    }
    mDragHelper.smoothSlideViewTo(mContentView, 0, 0);
    invalidate();
}

mOnStateChangeListener 是一个监听器,会在 EditLayout 状态改变的时候调用。我在回调方法里保存了当前向右展开的 EditLayout。

到这里,EditLayout 就完成了。

EditAdapter

接下来看下适配器 EditAdapter。

item 布局

item 的 xml 文件里面,最外层用我们的 EditLayout 包裹,然后里面的三个子布局,按顺序,对应我们左中右三个部分。

切换编辑模式

这里需要定义一个 EditLayout 的集合 allItems,在 onBindViewHolder 的时候将布局添加进去。 然后我们定义两个公开方法,用于切换所有 item 的状态,在切换编辑模式的时候调用:

/**
 * 关闭所有 item
 */
public void closeAll() {
    for (EditLayout layout : allItems) {
        editLayout.close();
    }
}

/**
 * 将所有 item 向左展开
 */
public void openLeftAll() {
    for (EditLayout layout : allItems) {
        editLayout.openLeft();
    }
}

EditRecyclerView

当列表有某一项是右边展开了,我希望在滑动列表的时候能将它关闭,变回向左展开的状态,所以我自定义了一个 RecyclerView。

可以重写了 onTouchEvent 方法,实现上面说的效果:

@Override
public boolean onTouchEvent(MotionEvent e) {
    switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (getAdapter() instanceof EditAdapter) {
                rightOpenItem = ((EditAdapter) getAdapter()).getRightOpenItem();
            }
            if (EditAdapter.isEdit && rightOpenItem != null) {
                rightOpenItem.openLeft();
            }
    }
    return super.onTouchEvent(e);
}

当滑动列表的时候,先判断是否有向右展开项,有的话就将它变回向左展开。

这样就完成啦,妥妥的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券