Android框架之路——NavigationView的使用（结合ToolBar）

参考博客：

• Android框架之路——ToolBar的使用
• Android5.0之NavigationView的使用

NavigationView简介：

Android Design Support Library 给开发者带来了一些重要的 Material Design 组件，并且向下兼容到 Android 2.1， Navigation View 就是其中之一，可用于方便地创建导航抽屉。

NavigationView在很多App上都已经可以看到其效果图，国内的比如知乎（侧拉菜单滑出来的那一部分属于NavigationView），还有Google自己的那些app，也基本全都采用了NavigationView。

实现效果

使用流程

1. NavigationView要放在一个DrawerLayout中，现在给出我的activity_main.xml，LinearLayout就是一打开app显示出的布局，这里我是接着Android框架之路——RecyclerView的demo继续使用的，所以里面放了一个RecyclerView，同时也要加上ToolBar。其中android:layout_gravity="left"是让NavigationView收进左侧;

   
   <android.support.v4.widget.DrawerLayout
       android:id="@+id/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.ping.recyclerview.MainActivity">
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical">
   
           <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@color/colorPrimary"
               app:navigationIcon="@drawable/navigation"
               app:title="Navigation"
               app:titleTextColor="#fff">
   
           android.support.v7.widget.Toolbar>
   
           <android.support.v7.widget.RecyclerView
               android:id="@+id/recyclerView"
               android:layout_width="match_parent"
               android:layout_height="match_parent"/>
   
       LinearLayout>
   
       <android.support.design.widget.NavigationView
           android:id="@+id/navigationView"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_gravity="left"
           android:fitsSystemWindows="true"
           app:headerLayout="@layout/navigation_header"
           app:menu="@menu/na_menu">
   
       android.support.design.widget.NavigationView>
   android.support.v4.widget.DrawerLayout>
   

2. 在NavigationView中，app:headerLayout="@layout/navigation_header"、app:menu="@menu/na_menu"的navigation_header.xml和na_menu.xml如下,na_menu.xml中group与group之间会有横线。这里给大家分享一个网站https://materialdesignicons.com/，里面的图标可以右键选择View Vector Drawable方式，然后再资源文件夹下新建drawable用就好了，非常好用；

   navigation_header.xml

   
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:app="http://schemas.android.com/apk/res-auto"
                 android:orientation="vertical"
                 android:layout_width="match_parent"
                 android:background="@drawable/weixin"
                 android:layout_height="200dp">
   
       <ImageView
           android:layout_marginTop="20dp"
           android:layout_marginLeft="20dp"
           android:id="@+id/iv_header"
           android:layout_width="50dp"
           android:layout_height="50dp"
           app:srcCompat="@mipmap/ic_launcher"/>
   
       <TextView
           android:layout_marginTop="90dp"
           android:layout_marginLeft="20dp"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Navigation使用"
           android:textColor="#000"
           android:textSize="25dp"/>
   
   LinearLayout>
   

   na_menu.xml

   
   <menu xmlns:android="http://schemas.android.com/apk/res/android">
       <group
           android:id="@+id/group1"
           android:checkableBehavior="single">
           <item
               android:id="@+id/favorite"
               android:icon="@drawable/favourite"
               android:title="收藏"/>
           <item
               android:id="@+id/wallet"
               android:icon="@drawable/wallet"
               android:title="钱包"/>
           <item
               android:id="@+id/photo"
               android:icon="@drawable/photo"
               android:title="相册"/>
           <item
               android:id="@+id/file"
               android:icon="@drawable/file"
               android:title="文件"/>
       group>
   
       <group
           android:id="@+id/group2"
           android:checkableBehavior="single">
           <item
               android:id="@+id/about"
               android:icon="@drawable/about"
               android:title="关于"/>
           <item
               android:id="@+id/share"
               android:icon="@drawable/share"
               android:title="分享"/>
           <item
               android:id="@+id/setting"
               android:icon="@drawable/setting"
               android:title="设置"/>
       group>
   
   menu>
   

3. 在MainActivity.java中，需要去实现功能；

   • 点击头部事件；

     mNavigationView = (NavigationView) findViewById(R.id.navigationView);
     mNavigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Log.i("mNavigationView", "head is clicked!");
           }
       });
       ```
     

   • 设置条目点击事件；

     mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                 @Override
                 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                     switch (item.getItemId()){
                         case R.id.favorite:
                             Log.i("mNavigationView", "收藏 is clicked!");
                             break;
                         case R.id.wallet:
                             Log.i("mNavigationView", "钱包 is clicked!");
                             break;
                         case R.id.photo:
                             Log.i("mNavigationView", "相册 is clicked!");
                             break;
                         case R.id.file:
                             Log.i("mNavigationView", "文件 is clicked!");
                             break;
                         case R.id.about:
                             Log.i("mNavigationView", "关于 is clicked!");
                             break;
                         case R.id.share:
                             Log.i("mNavigationView", "分享 is clicked!");
                             break;
                         case R.id.setting:
                             Log.i("mNavigationView", "设置 is clicked!");
                             break;
                     }
                     return true;
                 }
             });
             ```
     

   • 设置toolbar的navigationIcon点击打开侧边栏事件；

     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
     
     mToolbar = (Toolbar) findViewById(R.id.toolbar);
     mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             mDrawerLayout.openDrawer(mNavigationView);
         }
     });
     

个人公众号：每日推荐一篇技术博客，坚持每日进步一丢丢…欢迎关注，想建个微信群，主要讨论安卓和Java语言，一起打基础、用框架、学设计模式，菜鸡变菜鸟，菜鸟再起飞，愿意一起努力的话可以公众号留言，谢谢…