在 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);
}
当滑动列表的时候，先判断是否有向右展开项，有的话就将它变回向左展开。
这样就完成啦，妥妥的。
网友评论