[笨笨的方法] 实现IOS列表的滑动删除效果

一、背景

在做项目的时候，有一个需求，在两级列表中，实现类似于IOS的滑动删除效果，大体如下图：



但有两点不太一样的地方：上层界面，是随手势滑动的；下层界面在上层被滑走后露出来。

老大让我实现这个功能时，我想这个功能应该很简单啊，我就准备这样来做了：

1.写一个对应每行的View类，本身支持滑动，这个应该不难写。

2.让ExpandableListVIew的使用上述的View作为childView。

这样很简单就实现了嘛。

万万没想到的是，这个类写好了，我把它放在一个ListView中先试了一下，每行左右滑动没有问题，但是每一行点不了！即使设置了onItemClickListener，也监听不到事件！

我回想了一下，发现我把这个问题想简单了：一个支持滑动的类，必然会重写onTouch()来处理对它的触摸事件，但是把这个View放到List里，就会带来这样的问题，onTouch都被View消耗（consume）了，ListView的点击事件就无法触发了。

我们这儿用到的触摸动作分为：DOWN, MOVE和UP，Android中触摸动作是层层传递的，并在某一层被消耗掉。

ListView的点击需要接收一个DOWN和一个UP，这样构成单击；而我自己的View，需要先接收一个DOWN，后续才会接收到MOVE和UP，这就形成了一个矛盾：把DOWN给List，我的View就滑不动；把DOWN给View，List就点不了，听上去真的有点蛋蛋的忧伤...

二、怎么解决这个问题呢？

通过看原来我们代码的实现和自己在网上查找方法，找到两种解决办法：

1. 参照SwipeListView（https://github.com/47deg/android-swipelistview）这一开源工程，它为ListView实现了滑动功能，解决方案是，对ListView和Item的onInterceptTouchEvent和onTouch事件进行了很详细地动作判定和操作（把笔者给看晕了），但笔者需要的是ExpandableListView（啊魂淡），而且看起代码来也有点力不从心，所以干脆就放弃了，有兴趣的同学可以直接使用，或参照修改后使用。

2. 受到一段代码的启发（这段代码的功能是，通过点击在ListView上的x,y，获得ListView对应的position），楼主就想，能不能通过点击在ExpandableListView上的x,y，获得ExpandableListView对应的groupPosition和childPosition呢，能获得这两个position，点击事件不就很easy了么？

三、动起手来骚年们

1. 通过x,y获得groupPosition和childPosition，新建一个类ExpandableListView2继承于ExpandableListView，并在其中添加方法：

/**
* 通过position，找到对应的groupPosition和childPosition
*/
private Positions getPositionsByPosition(ExpandableListAdapter adapter,
int position) {
Positions result = new Positions();
if (position >= 0) {
int p = position + 1;
for (int group = 0; group < adapter.getGroupCount(); group++) {
// 减去组
if (p - 1 <= 0) {
result.groupPos = group;
result.childPos = -1;
break;
} else {
p = p - 1;
}
// 减去组成员
int childrenCount = isGroupExpanded(group) ? adapter
.getChildrenCount(group) : 0;
if (p - childrenCount <= 0) {
result.groupPos = group;
result.childPos = p - 1;
break;
} else {
p = p - childrenCount;
}
}
}
return result;
}

/**
* 用于保存group和child的position的容器类
*/
public class Positions {
private int groupPos = -1;
private int childPos = -1;

public boolean isGroup() {
return groupPos != -1 && childPos == -1;
}

public boolean isChild() {
return groupPos != -1 && childPos != -1;
}

@Override
public String toString() {
return "(" + groupPos + ", " + childPos + ")";
}
}

2.什么时候获得x和y呢，当然要在ExpandableListView2的onInterceptTouchEvent中了

onInterceptTouchEvent的作用是intercept touchEvent，就是让父布局来决定，是否截断touchEvent向下传递。

以我们这个问题来说，父布局是不需要截断事件的，我们只在里面记录事件的x和y就可以了，所以代码是这样的：

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// 取得group/child position
if (ev.getAction() == MotionEvent.ACTION_DOWN
&& getExpandableListAdapter() != null) {
int x = (int) ev.getX();
int y = (int) ev.getY();
// 位置保存下来
mLastPosition = pointToPosition(x, y);
mAdapter = (ExpandableListAdapter) getExpandableListAdapter();
mLastGroupAndChildPosition = getPositionsByPosition(mAdapter,
mLastPosition);
Log.d("UERY", "mLastPosition=" + mLastPosition + " (group,child)="
+ mLastGroupAndChildPosition);
}
return super.onInterceptTouchEvent(ev);
}

每对ExpandableListView2进行点击，一个Positions对象就会被记录下来（保存于mLastGroupAndChildPosition），这个Positions对象中的group/child position，将作为我们处理Item点击事件的依据！

3.真正的点击事件

/**
* 执行一次点击事件，position取上次ACTION_DOWN所点到的位置
*/
public void performLastClick() {
if (mLastPosition != -1 && mLastGroupAndChildPosition.isChild()) {
if (mOnChildClickListener != null) {
mOnChildClickListener.onChildClick(this,
getChildAt(mLastPosition),
mLastGroupAndChildPosition.groupPos,
mLastGroupAndChildPosition.childPos, 0); // TODO id is
// invalid
}
}
}

mOnChildClickListener就是我们通过ExpandableListView.setOnChildClickListener()设置进来的监听器。

/***************************************** 至此ExpandableListView2准备就绪，只欠东风 *****************************************/

4.东风在哪？谁来调用ExpandableListView2的performLastClick()？ 当然是我们可滑动的View了！

滑动功能我们就不过多关注了，核心代码如下：

// 上次划动的X
private float mLastX;
// 本次划动开始的X
private float mStartX;
// 本次划动开始的时间
private long mStartTime;

@Override
public boolean onTouch(View v, MotionEvent event) {
// get touch event for upper layer
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// 开始手动划动
mManualSliding = true;
mAutoSliding = false;
mLastX = event.getRawX();
mStartX = event.getRawX();
mStartTime = System.currentTimeMillis();
return true;
}

case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
final int action = event.getAction();
// 完成划动
float endX = event.getRawX();
long costTime = System.currentTimeMillis() - mStartTime;
// 划动距离
int flingDistance = (int) (endX - mStartX);
// 划动速度
float velocityX = flingDistance / 0.001f / costTime;
mManualSliding = false;
finishSlide(action, flingDistance, costTime, velocityX);
return true;
}

case MotionEvent.ACTION_MOVE: {
if (mManualSliding) {
float nowRawX = event.getRawX();
float xDiff = nowRawX - mLastX;
mLastX = nowRawX;
LayoutParams lp = (LayoutParams) v.getLayoutParams();
int newRightMargin = (int) (lp.rightMargin - xDiff);
if (newRightMargin < 0) {
newRightMargin = 0;
} else if (newRightMargin > mMaxSlideDistance) {
newRightMargin = mMaxSlideDistance;
}
lp.setMargins((int) -newRightMargin, 0, (int) newRightMargin, 0);
v.setLayoutParams(lp);
}
return true;
}

default:
break;
}
return super.onTouchEvent(event);
}

其中，ACTION_DOWN时，记录点击事件的x,y，起始时间等；ACTION_MOVE时，滑动上层界面。

重点在于ACTION_UP/ACTION_CANCEL，在这儿，记录了滑动距离、速度和时间，交给了finishSlide()方法去处理，finishSlide()如下：

/**
* 处理划动动作事件完成
*
* @param startX
* @param endX
*/
private void finishSlide(int action, int flingDistance, long costTime, float velocityX) {
/*
* action System.out.println("action: " + action);
* System.out.println("flingDistance: " + flingDistance);
* System.out.println("velocityX: " + velocityX);
* System.out.println("costTime: " + costTime);
* System.out.println(" ");
*/
if (action == MotionEvent.ACTION_UP) {
if (Math.abs(flingDistance) <= mTouchSlop && costTime < DOUBLE_TAP_TIMEOUT) {
// 判定为单击
mParent.performLastClick();
} else if (Math.abs(velocityX) >= mMinimumFlingVelocity && Math.abs(velocityX) <= mMaximumFlingVelocity) {
// 判定为fling
if (velocityX < 0) {
autoSlide2Left();
} else {
autoSlide2Right();
}
}
}
// 手动拖动&其它情况
LayoutParams lp = (LayoutParams) mUpperLayer.getLayoutParams();
int rightMargin = lp.rightMargin;
if ((flingDistance < 0 && rightMargin >= mMaxSlideDistance / 3)
|| (flingDistance > 0 && rightMargin > mMaxSlideDistance / 3 * 2)) {
// 1.意图向左划，且已划出超过下层视图宽度1/3;
// 2.意图向右划，但未超出下层视图宽度1/3;
// 做左划处理
autoSlide2Left();
} else {
// 其它情况做右划处理
autoSlide2Right();
}
}

finishSlide()主要对三种情况做判断：单击、快速的滑动（fling）和其它情况。

单击我们调用父（ExpandableListView2）的performLastClick()。

滑动，我们根据方向和速度，决定是向左划还是向右划开上层界面。

其它情况下，我们根据上层界面距离哪边更近，让它自己完成划动。

其中一些临街值的确定（都是很科学的）

// 取得触摸事件判定临界值
final ViewConfiguration configuration = ViewConfiguration.get(getContext());
mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
mMinimumFlingVelocity = configuration.getScaledMinimumFlingVelocity();
mMaximumFlingVelocity = configuration.getScaledMaximumFlingVelocity();

至此，这问题算是得到了解决，大体总结一下：

我们定制了两个View :

1. ExpandableListView2，可以自己记录最后一次点击的groupPosition/childPosition，并提供一个点击功能。

2. 可滑动的ItemView，可以处理滑动、点击事件，如果判定为点击事件，则交给ExpandableListView2处理。

这种方法算是一种比较笨的方法，ExpandableListView2和ItemView之间耦合比较大，必须要配合使用，但也是无奈。

如果大家有更好更优雅的解决方案，不妨提出来共享，谢谢！

最后上一张效果图



相关代码下载链接：http://download.csdn.net/detail/ueryueryuery/7144855

没分的同学可以发邮件至ueryueryuery@163.com，说明需要哪份代码，LOL