DrawerLayout实现双层Drawer​

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

DrawerLayout实现双层Drawer_ide 京东筛选面板

关键的交互就是, 打开第一层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_drawlayout_02 Demo效果

package customView;  import android.content.Context; import android.support.v4.view.GravityCompat; import android.support.v4.view.MotionEventCompat; import android.support.v4.view.ViewCompat; import android.support.v4.widget.DrawerLayout; import android.util.AttributeSet; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration;  /**  * 增强DrawerLayout  * 1. 支持右侧双层Drawer, 原本的DrawerLayout会报错  * 2. 支持第一层Drawer点击收起  * Created by assistne on 16/10/25.  */  public class AdvancedDrawerLayout extends DrawerLayout {      private float mInitialMotionX;     private float mInitialMotionY;     private View mRightBelowView;     private View mRightAboveView;     private int mTouchSlop;     public AdvancedDrawerLayout(Context context) {         this(context, null);     }      public AdvancedDrawerLayout(Context context, AttributeSet attrs) {         this(context, attrs, 0);     }      public AdvancedDrawerLayout(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);         final ViewConfiguration vc = ViewConfiguration.get(context);         mTouchSlop = vc.getScaledTouchSlop();     }      @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {         final int childCount = getChildCount();         // 双层Drawer, 原生会抛出异常         try {             super.onMeasure(widthMeasureSpec, heightMeasureSpec);         } catch (IllegalStateException e) {             /** 默认最后一个子View是第二层Drawer */             // 因为抛出异常, 所以手动测量第二层Drawer             final float density = getResources().getDisplayMetrics().density;             int minDrawerMargin = (int) (64 * density + 0.5f);             final View child = getChildAt(childCount - 1);             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, 用来处理点击收起Drawer问题         if (mRightBelowView == null || mRightAboveView == null) {             mRightBelowView = null;             mRightAboveView = null;             for (int i = 0; i < childCount; i ++) {                 final View child = getChildAt(i);                 if (checkDrawerViewAbsoluteGravity(child, Gravity.RIGHT)) {                     if (mRightBelowView == null) {                         mRightBelowView = child;                     } else {                         mRightAboveView = child;                     }                 }             }         }     }      @Override     public boolean onTouchEvent(MotionEvent ev) {         /** 双层Drawer时, 不能正常通过点击收起第一层Drawer, 所以在这里自己处理 */         final int action = ev.getAction();         switch (action & MotionEventCompat.ACTION_MASK) {             case MotionEvent.ACTION_DOWN: {                 final float x = ev.getX();                 final float y = ev.getY();                 mInitialMotionX = x;                 mInitialMotionY = y;                 break;             }              case MotionEvent.ACTION_UP: {                 if (mRightAboveView != null && mRightBelowView != null) {                     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);     }      int getDrawerViewAbsoluteGravity(View drawerView) {         final int gravity = ((LayoutParams) drawerView.getLayoutParams()).gravity;         return GravityCompat.getAbsoluteGravity(gravity, ViewCompat.getLayoutDirection(this));     }      boolean checkDrawerViewAbsoluteGravity(View drawerView, int checkFor) {         final int absGravity = getDrawerViewAbsoluteGravity(drawerView);         return (absGravity & checkFor) == checkFor;     } }