MaterialDesign系列文章(二)NavigationView和DrawerLayout实现侧滑功能

大家在开发中可能会遇到这样的需求,实现一个侧滑菜单,以前(long long ago)我们都是用SlidingMenu实现的!那个时候处理策划还基本上都是自己判断滑动距离的,后来MaterialDesign的时候使用NavigationView和DrawerLayout就能很简单的实现侧滑的功能。闲话就说到这里。。。

本文的知识点

  • NavigationView和DrawerLayout实现侧滑效果(UI层面)
  • 一些布局文件和API的说明
  • 一些常见的错误处理

1.NavigationView和DrawerLayout实现侧滑效果(UI层)

其实如果你比较懒的话,在创建Activity的时候,你可以不选择那个空页面的Activity,而像这样选择

这样就可以直接创建一个相应的侧滑页面,不用去自己实现了。由于本文主要是为了讲解关于怎么去实现,所以这里就自己去实现吧!

1.1 布局文件的实现

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    "@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toTopOf="@id/dl_content"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="@mipmap/back_icon"
        app:title="导航菜单的展示"
        app:titleTextColor="@android:color/white" />

    "@+id/dl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        "wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/menu_navation_drawer" />

        "match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            "match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="假装这里有内容" />
        

    

复制代码

简单说明一下:因为一会要演示返回按钮的问题,所以这里的布局是把DrawerLayout放在了Toolbar的下面,如果你直接创建的话,侧滑出来的菜单会把Toolbar盖住。

  • 这里要注意一个属性,android:layout_gravity="left" 代表侧滑的方向是从左侧出来,这里你可以左右各加一个,但是不能上下加。。。否则会出异常的!
  • app:headerLayout="@layout/nav_header" NavigationView顶部显示的布局,这里主要是为了处理相应的头像什么的
  • app:menu="@menu/menu_navation_drawer" Navigation底部显示的条目

别的就没有什么好说的了和其他控件的属性都差不多。

1.2 顶部头文件的实现

这个和写平时的布局都是一样的。没有什么区别

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="#198672"
    android:minHeight="150dp"
    android:orientation="vertical">

    "wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round" />

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:layout_marginTop="10dp"
        android:text="假装这里有一个标题" />

    "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:text="假装这里又有一个标题" />

复制代码

1.3 底部条目的布局

这里需要有关menu的知识了?如果你不懂可以看看我简书的Android中menu的使用集锦,这里就不讲了。。。

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android">

    "single">
        "@+id/nav_camera"
            android:icon="@mipmap/ic_call_white_24dp"
            android:title="打电话" />
        "@+id/nav_gallery"
            android:icon="@mipmap/ic_directions_bike_white_24dp"
            android:title="骑行" />
        "@+id/nav_slideshow"
            android:icon="@mipmap/ic_dialer_sip_white_24dp"
            android:title="又是打电话" />
        "@+id/nav_manage"
            android:icon="@mipmap/ic_chat_bubble_outline_white_24dp"
            android:title="消息" />
    

    "底部条目组">
        
            "@+id/nav_share"
                android:icon="@mipmap/ic_call_missed_outgoing_white_24dp"
                android:title="转弯" />
            "@+id/nav_send"
                android:icon="@mipmap/ic_import_export_white_24dp"
                android:title="好奇怪" />
        
    

复制代码

然后我们就可以'Run' app了。。。就会看到如下惊悚的场面!!!

2. 一些布局文件和API的说明

2.1 Navigation的一些属性

布局属性

  • app:itemBackground 指定菜单项的的背景颜色
  • app:itemTextColor 指定菜单项的文字颜色
  • app:itemTextAppearance 指定菜单项的文字样式,这里引用的是一种样式有关与样式的使用可以参考
 
复制代码
  • app:itemIconTint 指定菜单项的图标色彩

API

  • addHeaderView(View view) 添加一个头部,这个头部可以添加多个
  • getHeaderCount() 获取头目的数量
  • getHeaderView(int index) 根据索引获取头部的布局
  • getItemBackground() 获取头部的背景
  • getItemIconTintList() 获取条目的集合
  • getItemTextColor() 获取条目的颜色
  • getMenu() 获取底部的menu对象
  • removeHeaderView(View view) 溢出相应的头目
  • setCheckedItem(int id) 设置选择条目
  • setItemBackground(Drawable itemBackground) 设置条目的背景
  • setItemBackgroundResource(int resId) 设置背景图
  • setItemIconTintList(ColorStateList tint) 设置图标的集合
  • setItemTextAppearance(int resId) 设置图标的样式
  • setItemTextColor(ColorStateList textColor) 设置条目的颜色
  • setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener) 这里写监听的时候有一个注意事项,如果你设置了不起效果,请看后面的错误集锦。具体的写法就像下面这样:
        NavigationView nv_left = findViewById(R.id.nv_left);
        nv_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_camera://条目的ID
                        Log.e(TAG, "onNavigationItemSelected: ");
                        break;
                }
                return true;
            }
        });
复制代码

这里有个问题,设置了监听之后,条目会有点击效果,并且不会在关闭相应的NavigationView。如果你返回true的话,条目会有相应的选中效果,注意一下就可以了。

2.2 DrawerLayout的一些属性

API

  • openDrawer(@EdgeGravity int gravity) closeDrawer(@EdgeGravity int gravity);代表打开和关闭侧滑出来的布局,可选参数为:
    • Gravity.LEFT 左侧的
    • Gravity.RIGHT 右侧的
  • addDrawerListener(DrawerListener listener) 处理Drawer的状态的监听,这里主要有打开、关闭、状态改变的回调相应的回调写的很清楚,这里就不做过多讲解了。至于可以做什么就看你的思维了。。。
  • setDrawerLockMode(@LockMode int lockMode) 启用和禁用抽屉效果,可以调用这个方法操作相应的抽屉。有以下三种可选
    • LOCK_MODE_UNLOCKED 未知
    • LOCK_MODE_LOCKED_CLOSED 关闭
    • LOCK_MODE_LOCKED_OPEN 打开
  • getDrawerLockMode(@EdgeGravity int edgeGravity) 获取抽屉的状态
  • isDrawerOpen(@EdgeGravity int drawerGravity) 判断相应的抽屉是否是打开状态

基本上的API就这么多,如果感兴趣的可以研究以下DrawerView里面提供的API。这里就不多做解释了。

3. 一些细节的页面展示问题

3.1 DrawerLayout和Toolbar联动的效果

效果大概是这个样子的:

主要是看顶部左侧的那个按钮,主要是实现这个功能。这个功能主要是依托ActionBarDrawerToggle实现的,他联动了DrawerLayout和Toolbar的关联,看一下具体的代码实现吧!

        //这是带Home旋转开关按钮
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, dl_content,
                toolbar,
                R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        dl_content.addDrawerListener(toggle);
        toggle.syncState();
复制代码

加上上面的代码就可以实现联动了,但是你联动的时候可能顶部的颜色是黑色的。反正我刚开始显示的时候是黑色的。那么怎么把这个东西改成白色呢?只有修改相应的主题样式了。。。像这个样子

    
    

    
    
复制代码

3.2 处理返回按钮

其实不使用上面的方法,可以通过isDrawerOpen(@EdgeGravity int drawerGravity)的判断处理返回按钮的逻辑问题。

4. 一些常见的问题集锦

4.1 java.lang.RuntimeException: Unable to start activity ComponentInfo异常的处理

关于这个异常,网上的说法很多,有说必须是AppCompat的主题、有说必须有windowNoTitle属性,都没有解决这个异常,最后发现如果你在主题中设置了#ffffff属性的话,就会报这个异常。删了就好了!

4.2 setNavigationItemSelectedListener条目监听无效的处理方法

这里处理起来挺奇葩的,你只要把NavigationView放在DrawerLayout的最后面就可以了。监听方法就会生效了。。。可能是一个BUG吧(如此值汗颜)!


基本上关于两个控件的组合就这么多,如果有什么问题欢迎留言。

欢迎关注,你的支持是我最大的动力

你可能感兴趣的:(MaterialDesign系列文章(二)NavigationView和DrawerLayout实现侧滑功能)