MaterialDesign系列文章(十)NavigationView和DrawerLayout的使用

不怕跌倒，所以飞翔

今天我们看看NavigationView这个控件的使用方法(侧滑抽屉的效果)

使用NavigationView实现抽屉效果一定跳不过DrawerLayout这个控件,但是因为不是本文得重点,但是你错了,我也会讲的...

本文的知识点:

• DrawerLayout的使用
• NavigationView的使用

DrawerLayout的使用

简单的使用方法

• 先来说下布局文件吧!
  • 首先这个控件必须有一个子类,只有子类添加了android:layout_gravity="start/end"之后才能保证侧滑
  • 可以左右都有侧滑菜单,但是上下不可添加
    所以布局一般都是这个样子的

这里可以先不要去看NavigationView的设置,这里你随便换成一个其他控件都可以,但是layout_gravity这个属性要有,布局基本上也就这么多,讲到代码的时候还要讲一个类,后面再说

关联ToolBar

一般使用DrawerLayout都话连同ToolBar一起使用(但是不妨碍有特例,好比我...)下面是关联的代码:

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDL, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

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

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
            }
        };
        mDL.addDrawerListener(toggle);
        toggle.syncState();

其实ActionBarDrawerToggle其实就是一个监听,这么理解是不是好多了,这里一般都会重写这三个方法,很好理解,一个打开,一个关闭,一个滑动的时候调用(我觉得这个一般都是加一些动画的,嗯嗯嗯)

一些需要注意的地方

• 当你真的想关联ToolBar的时候,android:layout_gravity="start/end"这个属性一定要设置成start或者left斗则会报错(这个我真的不知道为什么?希望知道的告知小弟一声).
• 当你点击左边的侧边栏的时候,可能会存在刷新主页面ToolBar的操作(这里我的处理方法是从新写一遍ToolBar的设置,因为用到的是ToolBar,但是你要是使用ActionBar的话,一定要在开打或者关闭的时候调用getActivity().invalidateOptionsMenu(); 方法去刷新menu,因为menu是一直存在的)
• 还有几个方法注意下:(我为什么要说这两个方法呢?因为在按返回键的时候,你要判断抽屉是否打开,如果是打开的情况下,要先关闭抽屉的,这样用户体验才好)
  • DrawerLayout.isDrawerOpen(GravityCompat.START);这个方法是判断左边或者右边的抽屉是否打开的方法
  • DrawerLayout.closeDrawer(GravityCompat.START);这个方法是关闭左边或者右边的抽屉的.

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
  

  这个就是判断返回按钮的时候DrawerLayout是否打开的代码了

基本上能用到的内容我都讲了一遍,我基本上就用到这么多,等到以后要是用到了别的话在进行补充!

NavigationView的使用

一般用在侧滑面板上,也可以用到其他的地方,自己想吧!样子是什么样子的呢?就是上面一块放头像区域,下面是一堆条目布局,其实要是你自己想要去实现的话也是可以的,所以说这个控件没有太多好讲的

简单的使用方法:

这里要说的就以下这两个问题:

• app:headerLayout 这个是外部关联头像那部分的布局,其实就是一个正常的布局而已,但是我看官网的Demo上面的高度用的是@dimen/nav_header_height但是我点不进去(这个应该是一个固定高度),但是你要是使用wrap_content的话也是可以的
• app:menu 这个主要是关联底部条目的,这个menu文件的写法,可以参考ToolBar那篇文章,里面对这个介绍的很详细,这里呢,只贴一下代码吧!

一些常见的问题:

1.头像的点击事件:

这个点击事件没有具体的API去直接实现,所以我们只有通过另一种方法去实现:

解决方法:动态添加head,这样也确保了整个head中的控件都能实现点击事件

        View drawview = navigationView.inflateHeaderView(R.layout.nav_header_main);
        ImageVIewhead_iv = (ImageVIew) drawview.findViewById(R.id.head_iv);
        head_iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("Log:","头部被点击了！");
            }

2.底部menu的点击事件:

这个相对于头像的点击事件就简单多了

直接调用navigationView.setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener);这个API就可以了,在回调中区分Id就可以了(这里别忘了关闭DrawerLayout).

@Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

---

这一系列文章的地址,希望对大家有帮助

• MaterialDesign系列文章(一)转场动画

• MaterialDesign系列文章(二)Theme主题设置

• MaterialDesign系列文章(三)Palette库来获取图片的主要色彩

• MaterialDesign系列文章(四)RecealAnimation动画的使用

• MaterialDesign系列文章(五)ToolBar的使用

• MaterialDesign系列文章(六)沉浸式状态栏的使用

• MaterialDesign系列文章(七)TabLayout的使用

• MaterialDesign系列文章(八)CollapsingToolbarLayout的使用

• MaterialDesign系列文章(九)AppBarLayout的使用

• MaterialDesign系列文章(十)NavigationView和DrawerLayout的使用

• MaterialDesign系列文章(十一)NestedScrollView的使用

• MaterialDesign系列文章(十二)TextInputLayout的使用

• MaterialDesign系列文章(十三)FloatingActionButton的使用

• MaterialDesign系列文章(十四)SnackBar的使用

• MaterialDesign系列文章(十五)BottomSheet的使用

• MaterialDesign系列文章(十六)BottomNavigationView的使用

• MaterialDesign系列文章(十七)Behavior的相关问题

• CoordinatorLayout的分析

项目地址