DrawerLayout实现双层Drawer

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)等方法.

实际效果如下:

 
Demo效果

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

(对于国内可能需要梯子,为方便,直接把代码粘贴过来)

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;
    }
}

 

 

常用软件开发学习资料收藏: 

 

1.经典编程电子书 

 

2.C&C++编程学习资料  

 

3.算法及数据结构(有关c,c++,java)  

 

4.Java开发学习资料    

 

5.Android开发学习资料 

 

6.Python开发学习资料 

 

7.大数据,机器学习,人工智能资料

转载于:https://www.cnblogs.com/it-tsz/p/11382452.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android DrawerLayout是一种用于实现侧滑菜单的布局容器。它可以让用户通过滑动屏幕边缘或者点击导航按钮来打开或关闭侧滑菜单。以下是实现DrawerLayout的步骤: 1. 在XML布局文件中定义DrawerLayout作为根布局,通常包含两个子布局:主内容布局和侧滑菜单布局。 2. 在主内容布局中添加一个Toolbar或者ActionBar作为顶部导航栏。 3. 在侧滑菜单布局中添加菜单项,可以使用ListView、RecyclerView等控件来展示菜单选项。 4. 在Java代码中,通过findViewById方法获取DrawerLayout对象的引用。 5. 使用ActionBarDrawerToggle类来实现与Toolbar或者ActionBar的联动,该类可以监听DrawerLayout的打开和关闭事件,并更新导航按钮的状态。 6. 设置DrawerLayout的监听器,处理菜单项的点击事件。 下面是一个示例代码: XML布局文件: ```xml <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 主内容布局 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- Toolbar或者ActionBar --> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> <!-- 主内容 --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <!-- 侧滑菜单布局 --> <LinearLayout android:id="@+id/nav_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:orientation="vertical"> <!-- 菜单项 --> <ListView android:id="@+id/menu_list" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </androidx.drawerlayout.widget.DrawerLayout> ``` Java代码: ```java public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); drawerLayout = findViewById(R.id.drawer_layout); drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawerLayout.addDrawerListener(drawerToggle); drawerToggle.syncState(); ListView menuList = findViewById(R.id.menu_list); menuList.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // 处理菜单项的点击事件 } }); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值