仿Android QQ左侧滑菜单右侧滑列表菜单——处理HorizontalScrollView和SwipeMenuListView滑动冲突

需求

最近项目需要一个仿QQ的界面，向右滑可以拉出菜单，向左滑则拉出列表菜单。

初步实现

这两个侧滑控件网上都有了，这里我用的是：
- 侧滑菜单XCSlideMenu（以下简称Slide），详见http://www.w2bc.com/Article/13213
- 列表侧滑SwipeMenuListView（以下简称Swipe），详见https://github.com/baoyongzhang/SwipeMenuListView

问题分析

如果单独使用这两个控件的话是没问题的，但是如果放到一起，在屏幕左右滑动时，Swipe无法正确响应。
因为Slide实则是个HorizontalScrollView，两控件的滑动响应都是水平方向的，这是Android典型的事件冲突。这样的话，事件应该进行分发，根据场景分配给相应的处理者。
这里只分析下思路，对事件传递不熟悉的童鞋可以学习http://www.cnblogs.com/jqyp/archive/2012/04/25/2469758.html。

处理

分析完问题的原因，可以想到一个处理办法：用一个变量来标志当前的状态。
由于Slide是父容器，所以我把标记放那里了，同时声明几种状态：

/** 普通状态 */public static final int STATUS_NORMAL = 0;/** 左边侧滑菜单操作中 */public static final int STATUS_SLIDE = 1;/** 列表侧滑菜单操作中 */public static final int STATUS_SWIPE = 2;/** 列表侧滑菜单已关上但手指还未离开 */public static final int STATUS_SWIPE_STICK = 4;/** 当前界面的状态 */public static int sStatus = STATUS_NORMAL;

1）界面的初始状态是STATUS_NORMAL，右滑则打开Slide，左滑则拉开Swpie。
那么先在父容器里拦截右滑，改变状态标记，在Slide里加上：

private float x1;@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {    boolean isIntercept = false;    float x2 = ev.getX();    if (ev.getAction() == MotionEvent.ACTION_DOWN) {        x1 = x2;        return super.onInterceptTouchEvent(ev);    } else if (ev.getAction() == MotionEvent.ACTION_MOVE) {        // 只有普通状态时右滑时才拦截事件        if (x2 > x1 && isMove(x1, x2) && sStatus == STATUS_NORMAL) {            isIntercept = true;            sStatus = sStatus | STATUS_SLIDE;        }    }    x1 = x2;    return isIntercept;}

x1用于记录按下时的x坐标，isMove方法用于判断手指的移动距离是不是大于某个临界值，true的话才算真正滑动了手指。isSlideOut后面会说。
运行下，发现有点成效了，原本不正常的Swipe可以拉开。然后Slide也能拉开，但是收不回去。

2）接下来处理状态STATUS_SLIDE。
Slide控件里有个isSlideOut成员变量，是标志菜单是否打开状态。可以借助这个变量，每当其改变值时，跟上我们的逻辑：

isSlideOut = true;sStatus = sStatus | STATUS_SLIDE;isSlideOut = false;sStatus = sStatus & ~STATUS_SLIDE;

继续完善Slide的onInterceptTouchEvent方法，加入了左滑的处理：

else if (ev.getAction() == MotionEvent.ACTION_MOVE) {    // 只有普通状态时右滑&侧滑菜单打开时左滑才拦截事件    if (x2 > x1 && isMove(x1, x2) && sStatus == STATUS_NORMAL) {        isIntercept = true;        sStatus = sStatus | STATUS_SLIDE;    } else if (x2 < x1 && isMove(x1, x2) && isSlideOut) {        isIntercept = true;    }}

同时我们想要实现跟QQ一样的，点击右边缩小的Swipe界面能关闭Slide，那么就不是MOVE事件了，修改onInterceptTouchEvent：

if (ev.getAction() == MotionEvent.ACTION_DOWN) {    x1 = x2;    // 只有侧滑菜单打开时点击右侧才拦截事件    if (x2 > mMenuWidth && isSlideOut) {        isIntercept = true;    } else {        return super.onInterceptTouchEvent(ev);    }}

也需要更新onTouchEvent方法：

float x2 = ev.getX();switch (action) {    case MotionEvent.ACTION_UP:        ...        } else if (!isMove(x1, x2) && x2 > mMenuWidth && isSlideOut) { // 侧滑菜单打开时，点击右侧将其关闭            slideInMenu();        } else{        ...}

运行下，Slide打开状态的各种事件也正确处理了。

3）再看下STATUS_SWIPE状态。
Swipe为我们提供了一个接口OnSwipeListener，包含了onSwipeStart和onSwipeEnd方法。故名思议，就是拉开或关闭Swipe的菜单时会触发的回调。那么我们只要在使用了Swipe控件的地方实现接口，跟上我们的逻辑即可：

mListView.setOnSwipeListener(new OnSwipeListener() {    @Override    public void onSwipeStart(int position) {        XCSlideMenu.sStatus = XCSlideMenu.STATUS_SWIPE;    }    @Override    public void onSwipeEnd(int position) {        if (position < 0) {            XCSlideMenu.sStatus = XCSlideMenu.STATUS_NORMAL;        }    }});

运行下，在Swipe某一项上左滑右滑等操作，结果是符合我们的预期的。
但是只拉开Swipe菜单，然后单击外部空白处，Swipe菜单是收回去了，但是Slide又拉不出来了。
只能回Swipe的源码查看，发现点击空白是不会回调onSwipeEnd的（坑啊……）。而且，处理点击空白这个行为时，在ACTION_DOWN方法里调用了ACTION_CANCEL，强行结束事件。这样会出现什么问题呢？我们先试一下。
为OnSwipeListener加上新方法：

void onSwipeCancel(int position);

在Swipe的onTouchEvent的ACTION_DOWN里加上：

if (mTouchView != null && mTouchView.isOpen()) {    ...    if (mOnSwipeListener != null) {        mOnSwipeListener.onSwipeCancel(oldPos);    }    return true;}

再完善回调：

mListView.setOnSwipeListener(new OnSwipeListener() {    ...    @Override    public void onSwipeCancel(int position) {        XCSlideMenu.sStatus = XCSlideMenu.STATUS_NORMAL;    }});

运行后拉开Swipe菜单，然后单击空白，再右滑，Slide可以拉出。
如果拉开Swipe菜单后按住空白处再右滑，发现Swipe是收回去了，但是Slide也跟着出来了，从用户体验角度来看，这不符合我们的预期。于是要加多一个状态STATUS_SWIPE_STICK。

4）新状态STATUS_SWIPE_STICK，指的是在已展开菜单的Swipe的空白处按下，但手指不离开屏幕。此时的焦点应该还是Swipe，所以要改下mListView的回调：

public void onSwipeCancel(int position) {    XCSlideMenu.sStatus = XCSlideMenu.STATUS_SWIPE_STICK;}

再为Slide的onInterceptTouchEvent添加：

} else if (ev.getAction() == MotionEvent.ACTION_UP) {    if (sStatus == STATUS_SWIPE_STICK) {        sStatus = STATUS_NORMAL;    }}

这意味着按住空白并左右滑动，事件还是交由Swipe处理，只有手指抬起，才把状态恢复到普通，Slide才能接收事件。再次运行，符合预期效果。

至此，已把两个控件的冲突解决了^.^