自定义ViewGroup+ViewDragHelper —— 侧滑菜单

上划版面 SlidingUpPanel 的教程网址
（http://blog.csdn.net/ocwvar/article/details/50682213 ）

首先是布局文件：

<com.ocwvar.surfacetest.QQSwipePanel.OCHorizontalSlidingPanel
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sli"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000">

    <ListView
        android:id="@+id/sli_menu_listview"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:divider="@null"
        android:background="#003470"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/listview2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:background="#58b7e7"/>

        <com.ocwvar.surfacetest.SlidingPanelTest.OCSlidingUpPanel
            android:id="@+id/tgp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </FrameLayout>

</com.ocwvar.surfacetest.QQSwipePanel.OCHorizontalSlidingPanel>

难点

这个侧滑菜单唯一的难点就是如何解决可滑动View中带有可滑动控件的问题 就像动态图中带有ListView的View既可以左右滑动展开侧滑菜单，也可以上下滑动ListView。

解决方法

我当初也是想了很久，后来想到了Google Play商店的侧滑菜单，也就是自带组件 NavigationView与DrawerLayout的组合 。我们不需要照顾整个可拖动View的触摸事件，怎么处理，看下面的图片

当触摸事件产生在 红色区域 的时候：
我们就认为当前用户的意图是要展开菜单，从而阻断到ListView的触摸事件。

当触摸事件产生在 剩余区域 的时候：
我们就认为当前用户是想要操作ListView，让触摸事件传递到ListView。

处理这些事件我们重写方法：
public boolean onInterceptTouchEvent(MotionEvent ev)

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    final float pointX = ev.getRawX();
    if (MotionEventCompat.getActionMasked(ev) == MotionEvent.ACTION_UP){
        openingMenu = false;
        return false;
    }
    if (status == 0){
        // On panel is closed
        if (pointX > 0 && pointX < dragSize){
            openingMenu = true;
        }
    }else if (status == 1){
        //On panel is opened
        if (pointX > getPaddingLeft()+menuView.getMeasuredWidth()){
            openingMenu = true;
        }
    }
    return openingMenu;
}

代码详解：
变量 dragSize 是触摸区域的宽度。

• Return true; —— 拦截事件
• Return false; —— 不拦截事件

● 当触摸事件的X坐标处于 0~dragSize 之间的时候我们就将当前行为确定是 正在滑动主版面

● 当 当前状态是菜单已打开 同时 触摸事件的X坐标位于ViewGroup的左Padding+菜单View宽度的距离（也就是在半边处于屏幕外边的主界面）的时候，我们就将当前行为确定是 正在滑动主版面

● 当用户手指抬起来的时候，就会触发ViewDragHelper.CallBack.onViewReleased() 事件，到时候会根据已滑动距离来判断菜单是否已经打开，或者需不需要执行滑动动画来完成打开动作。这我们下面会说到。

剩下的注意点

我们在布局文件里面就要放好 主版面mainView 和菜单版面menuView ，放在第一个的View是mainView，第二个的就是menuView，但是在代码中mainView的位置是第二个，menuView的位置是第一个。 看了代码大家就懂了。

重写 protected void onFinishInflate()

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    if (dragHelper == null){
        dragHelper = ViewDragHelper.create(this,1.0f,new DragHelperCallBack());
    }
    mainView = getChildAt(1);
    menuView = getChildAt(0);
}

重写 protected void onLayout(boolean changed, int l, int t, int r, int b)

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (mainView != null){
            mainView.layout(l, t, l + mainView.getMeasuredWidth(), b);
        }
        if (menuView != null){
            menuView.layout( l , t , l + menuView.getMeasuredWidth() , b);
        }
    }

我们先绘制最上层的mainView，再绘制底层的menuView

剩下的就是重写computeScroll()和onTouchEvent()了，和之前的一样，这里就不重新写了。

接下来是创建继承了ViewDragHelper.Callback的类

class DragHelperCallBack

private class DragHelperCallBack extends ViewDragHelper.Callback {

        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            //Only main panel can be drag
            return mainView != null && child == mainView;
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            final int leftEdge = getPaddingLeft();
            final int rightEdge = getPaddingLeft() + menuView.getMeasuredWidth();
            return Math.min(Math.max(left, leftEdge), rightEdge);
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            offset = left;
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            final int width = Math.abs(menuView.getMeasuredWidth() - getPaddingLeft());
            System.out.println("Width:"+width+" Offset:"+offset);
            if (offset == width && status == 0){
                openingMenu = false;
                status = 1;
            }else if (offset == 0 && status == 1){
                openingMenu = false;
                status = 0;
            }else if (offset >= width/2){
                scrollToMax();
            }else if (offset < width/2){
                scrollToClose();
            }
        }

感觉这里比之前的 SlidingUpPanel 更简单。。没啥好说的，稍微注意下的地方就是，用户拖动的时候有四种情况：

• 1.拖动到触发 展开动画scrollToMax() 的区域
• 2.拖动到触发 关闭动画scrollToClose() 的区域
• 3.直接拖动到完全展开
• 4.直接拖动到完全关闭

考虑完全就没啥了 =。=