DrawerLayout实现双层Drawer

DrawerLayout是实现侧边抽屉(Drawer)最方便的方法, 但是它仅仅支持单层Drawer, 这应该是因为在Material Design里面仅提及使用单层Drawer. 不过实际中有些场景需要我们实现双层Drawer, 例如京东下面的这个功能.

京东筛选面板

关键的交互就是, 打开第一层Drawer后, 点击其中的按钮会打开第二层Drawer.

题外话: 虽然这里使用了京东的做示例, 但是京东这里应该不是用双层DrawerLayout实现, 因为第二层Drawer关闭后不会返回第一层Drawer, 不过也有可能是需求就是这样.

原生实现的问题

如果要用DrawerLayout实现, 当然想到的会是直接添加两个Gravity.Right的控件了, 不过很快你就会得到一个IllegalStateException异常, 提示

java.lang.IllegalStateException: Child drawer has absolute gravity RIGHT but this DrawerLayout already has a drawer view along that edge
at android.support.v4.widget.DrawerLayout.onMeasure(DrawerLayout.java:1100)
at android.view.View.measure(View.java:18417)
...

看错误提示就可以知道

DrawerLayout每个边缘只能添加一个Drawer.

双层Drawer解决办法

源码分析的过程就不说太多了, 只说关键的地方.
因为存在两个同侧的Drawer, 所以在遍历子控件发现第二个Drawer的时候就会抛出异常.从上面的异常信息就可以知道异常的从DrawerLayout#onMeasure方法中抛出的, 所以要想不报错

自定义View继承DrawerLayout并重写DrawerLayout#onMeasure方法, 处理它抛出的异常.

基本代码如下:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    // 双层Drawer, 原生会抛出异常 
    try { 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } catch (IllegalStateException e) { 
        // 捕获异常... 
    }
}

不过这样app是不错报错退出了, 但是因为抛出异常, 所以会导致一些方法没执行, 看DrawerLayout#onMeasure中异常抛出之后的代码可以知道, 如果没有抛出异常, 正常获取到一个Drawer之后, 会调用child.measure(drawerWidthSpec, drawerHeightSpec)来限定Drawer的宽高, 所以我们捕获异常之后需要手动做这部分的工作. 因为只会在遍历到第二个Drawer的时候才会抛出异常, 所以

在捕获异常时, 手动调用第二层Drawer的measure方法.

具体的逻辑直接从DrawerLayout#onMeasure复制出来就可以了, 代码如下:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    // 双层Drawer, 原生会抛出异常 
    try { 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } catch (IllegalStateException e) { 
        // 取第二层Drawer, demo里面最后一个子View就是第二层Drawer 
        final int childCount = getChildCount(); 
        final View child = getChildAt(childCount - 1); 
        // 源码的默认值是64dp, 为了方便直接写死 
        final float density = getResources().getDisplayMetrics().density; 
        int minDrawerMargin = (int) (64 * density + 0.5f); 
        // 以下代码直接取自DrawerLayout#onMeasure 
        final LayoutParams lp = (LayoutParams) child.getLayoutParams(); 
        final int drawerWidthSpec = getChildMeasureSpec(widthMeasureSpec, 
                minDrawerMargin + lp.leftMargin + lp.rightMargin, lp.width); 
        final int drawerHeightSpec = getChildMeasureSpec(heightMeasureSpec, 
                lp.topMargin + lp.bottomMargin, lp.height); 
        child.measure(drawerWidthSpec, drawerHeightSpec); 
    }
}

到这里就可以正常显示双层Drawer了.

问题

仔细测试之后会发现有一个小BUG, 第一层Drawer不能通过点击左侧的阴影来收起Drawer.
具体的debug过程就不说了, 当点击左侧阴影的时候确实会执行收起Drawer的相关代码, 但是相关的动画却不会起作用, 具体的原因超出本文范围就不探究了.

为了解决这个问题自然想到我们自己处理点击事件.
点击事件一般在onTouchEvent中处理ACTION_UP事件, 所以查看DrawerLayout#onTouchEvent源码, 可以知道当接收到ACTION_UP事件时会查找点击区域的控件, 如果该控件不是Drawer, 就会调用closeDrawers()来关闭Drawer.

所以我们针对上面出现的问题, 专门处理第一层Drawer的关闭问题. 思路是

接收到ACTION_UP事件后判断是不是第一层Drawer打开, 第二层Drawer关闭, 如果是就关闭第一层Drawer, 其他情况则交给原来的方法处理.

基本的代码如下:

@Override
public boolean onTouchEvent(MotionEvent ev) { 
    /** 双层Drawer时, 不能正常通过点击收起第一层Drawer, 所以在这里自己处理 */ 
    final int action = ev.getAction(); 
    switch (action & MotionEventCompat.ACTION_MASK) { 
        case MotionEvent.ACTION_DOWN: 
            // 记录坐标参数 
            break; 
        case MotionEvent.ACTION_UP: { 
            // mRightBelowView为第一层Drawer 
            // mRightAboveView为第二层Drawer 
            final float x = ev.getX(); 
            final float y = ev.getY(); 
            if (x < mRightBelowView.getLeft()) {
                // 判断点击的是阴影区域 
                final float dx = x - mInitialMotionX; 
                final float dy = y - mInitialMotionY; 
                final int slop = mTouchSlop; 
                if (dx * dx + dy * dy < slop * slop) {// 判断不是滑动 
                    // 当第二层Drawer没有打开而第一层Drawer打开时, 收起第一层Drawer 
                    if (!isDrawerOpen(mRightAboveView) &&  isDrawerOpen(mRightBelowView)) {
                        closeDrawer(mRightBelowView); 
                        // 直接返回不执行默认代码 
                        return true; 
                    } 
                } 
            } 
            break; 
        } 
    } 
    // 其他情况使用默认代码 
    return super.onTouchEvent(ev);
}

这样就解决点击关闭第一层Drawer的问题.

这里有一个小细节, 因为有双层Drawer, 所以不应该使用openDrawer(@EdgeGravity int gravity)等方法来操作Drawer, 而应该直接指定Drawer控件, 使用openDrawer(View drawerView)等方法.

实际效果如下:

DrawerLayout实现双层Drawer_第1张图片
Demo效果

完整的自定义View代码戳这里

你可能感兴趣的:(DrawerLayout实现双层Drawer)