MaterialDesign系列文章(十)NavigationV

2017-11-07 本文已影响43人笔墨Android

不怕跌倒，所以飞翔

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

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

本文的知识点:

DrawerLayout的使用
NavigationView的使用

DrawerLayout的使用

简单的使用方法

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

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hejin.materialdesign.activity.NavigationActivity">

    <!--主页面-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.design.widget.CoordinatorLayout>

    <!--侧边栏的页面-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_navigation_view"
        app:menu="@menu/activity_navigation_view_drawer"/>
</android.support.v4.widget.DrawerLayout>

这里可以先不要去看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的使用

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

简单的使用方法:

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_navigation_view"
        app:menu="@menu/activity_navigation_view_drawer"/>

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

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:checkableBehavior="single">
      <item
          android:id="@+id/nav_camera"
          android:icon="@drawable/ic_menu_camera"
          android:title="Import"/>
      <item
          android:id="@+id/nav_gallery"
          android:icon="@drawable/ic_menu_gallery"
          android:title="Gallery"/>
      <item
          android:id="@+id/nav_slideshow"
          android:icon="@drawable/ic_menu_slideshow"
          android:title="Slideshow"/>
      <item
          android:id="@+id/nav_manage"
          android:icon="@drawable/ic_menu_manage"
          android:title="Tools"/>
  </group>

  <item android:title="Communicate">
      <menu>
          <item
              android:id="@+id/nav_share"
              android:icon="@drawable/ic_menu_share"
              android:title="Share"/>
          <item
              android:id="@+id/nav_send"
              android:icon="@drawable/ic_menu_send"
              android:title="Send"/>
      </menu>
  </item>
</menu>

一些常见的问题:

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