相信技术的力量

DrawerLayout-空白区域点击穿透问题

最近的项目里需要使用到侧滑布局,SlidingMenu 、自定义侧滑布局、 DrawerLayout都可以实现,前两种都已经尝试过了,最近1年多时间做项目都是使用底部导航栏,没有用到侧滑布局,DrawerLayout也一直没有去尝试,正好借此机会用一下。

mainlayout 和 drawerlayout如下图:

DrawerLayout.png

可以发现,drawerlayout打开时,drawerlayout的A区域(空白区域)正好覆盖在了mainlayout 的ViewPager区域,C区域(空白区域)正好覆盖在了mainlayout 的左下方Button区域。

问题

当drawerlayout打开时,在drawerlayout上空白区域的点击事件,会穿透(向下传递)到底层mainlayout布局上,比如点击drawerlayout的A区域时,mainlayout的ViewPager会相应;点击drawerlayout的C区域时,mainlayout的Button会响应。

原因分析

很明显,这是一个事件分发的问题,位于上层的drawerlayout布局不处理点击事件,所以事件得以传递到底层的mainlayout,而底层的mainlayout在该点击位置刚好有可以处理点击事件的控件,比如ViewPager和Button,所以这些控件就处理了。

由于drawerlayout处于打开状态时,在事件分发上处于上层,所以由它来决定事件是否分发,自己是否处理。刚才说的是空白区域,没有处理,所以才往下传递,真正自己已经处理的区域,比如B区域的RecyclerView,它的事件就不会往下传递。

那么除了B区域的RecyclerView以外,这些drawerlayout的空白区域本来就没控件来处理点击事件,注定要向下传递,怎么办呢?再自己定义DrawerLayout吗?

解决方案

当drawerlayout处于打开状态时,让drawerlayout整体可以处理点击事件即可,也就是说先把事件拦截下来,具体如何处理,由drawerlayout里的具体控件来定。

具体步骤也非常简单,就是设置一个监听:

定义DrawLayout监听

private DrawerLayout.SimpleDrawerListener mSimpleDrawerListener = new DrawerLayout.SimpleDrawerListener(){
    @Override
    public void onDrawerOpened(View drawerView) {
        //档DrawerLayout打开时,让整体DrawerLayout布局可以响应点击事件
        drawerView.setClickable(true);
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
    }
};

在相应位置添加和移除监听

@Override
protected void initListener() {
    mDrawerLayout.addDrawerListener(mSimpleDrawerListener);
}

@Override
protected void onDestroy() {
    super.onDestroy();
    mDrawerLayout.removeDrawerListener(mSimpleDrawerListener);
}

再运行,就不会出现穿透问题了,完事!

⬆️