转载

Android Material Design控件学习（二）——NavigationView的学习和使用

前言

上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign（简称MD）控件——NavigationView。

正如其名，NavigationView，导航View。一般我们用它和DrawerLayout实现抽屉式导航设计，效果如下图。

学习

文档地址: http://developer.android.com/reference/android/support/design/widget/NavigationView.html

Android Material Design控件学习（二）——NavigationView的学习和使用

通过学习官方文档，我们知道NavigationView继承自FrameLayout。一般用于应用的导航菜单，菜单的内容来自于menu文件。NavigationView通常放置在DrawerLayout内部。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      android:id="@+id/drawer_layout"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:fitsSystemWindows="true">       <!-- Your contents -->       <android.support.design.widget.NavigationView          android:id="@+id/navigation"          android:layout_width="wrap_content"          android:layout_height="match_parent"          android:layout_gravity="start"          app:menu="@menu/my_navigation_items"          app:headerLayout="@layout/nav_header_main" />  </android.support.v4.widget.DrawerLayout>

其中：

android:fitsSystemWindows 的值用于设置状态栏透明化与否。
android:layout_gravity 可设置抽屉，也就是NavigationView从左边或是右边打开。
app:menu 用于设置菜单内容的xml布局。
app:headerLayout 用于设置NavigationView的HeaderView的xml布局文件。

用法

下面我们通过模仿实现上图的效果来学习NavigationView的基本用法。

引用SupportDesign库

 compile 'com.android.support:design:23.1.1'

2.编写布局代码

首先编写Activity的布局代码：

<?xml version="1.0" encoding="utf-8"?> <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:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:openDrawer="start">    <!-- 内容布局 -->     <include         layout="@layout/app_bar_main"         android:layout_width="match_parent"         android:layout_height="match_parent" />    <!-- 菜单布局NavigationView headerLayout设置HeaderView menu设置菜单 -->     <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_main"         app:menu="@menu/activity_main_drawer" />  </android.support.v4.widget.DrawerLayout>

编写NavigationView中的menu的xml文件

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">      <group android:checkableBehavior="none">         <item             android:id="@+id/nav_me"             android:title="我"             android:icon="@mipmap/ic_mine_gray_24"/>         <item             android:id="@+id/nav_friend"             android:title="好友"             android:icon="@mipmap/ic_friends_gray_24"/>         <item             android:id="@+id/nav_notification"             android:title="通知"             android:icon="@mipmap/ic_notification_gray_24"/>         <item             android:id="@+id/nav_message"             android:title="私信"             android:icon="@mipmap/ic_messages_gray_24"             />     </group>     <group android:checkableBehavior="none"         android:id="@+id/group_manage">         <item             android:id="@+id/nav_manage"             android:title="应用管理"             android:icon="@mipmap/ic_app_management_gray_24"/>     </group>    <group        android:checkableBehavior="none"        android:id="@+id/group_settings">        <item android:id="@+id/nav_theme"            android:title="主题风格"/>        <item android:id="@+id/nav_night"            android:title="夜间模式"/>        <item android:id="@+id/nav_setting"            android:title="设置"/>        <item android:id="@+id/nav_suggestion"            android:title="意见反馈"/>        <item android:id="@+id/nav_about"            android:title="关于"/>     </group> </menu>

注意：需要给group设置id，才会出现分割线。参考 http://stackoverflow.com/questions/30625280/how-to-create-a-simple-divider-in-the-new-navigationview

3.实现onNavigationItemSelected接口来处理抽屉菜单项的选中事件。

       NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);         navigationView.setNavigationItemSelectedListener(this);          mTextView = (TextView) findViewById(R.id.textView);      @SuppressWarnings("StatementWithEmptyBody")     @Override     public boolean onNavigationItemSelected(MenuItem item) {         int id = item.getItemId();         String string = null;         switch (id){             case R.id.nav_me:                 string = "我";                 break;             case R.id.nav_about:                 string = "关于";                 break;             case R.id.nav_friend:                 string = "好友";                 break;             case R.id.nav_manage:                 string = "通知";                 break;             case R.id.nav_message:                 string = "私信";                 break;             case R.id.nav_night:                 string = "夜间模式";                 break;             case R.id.nav_notification:                 string = "通知";                 break;             case R.id.nav_setting:                 string= "设置";                 break;             case R.id.nav_suggestion:                 string = "意见反馈";                 break;             case R.id.nav_theme:                 string = "主题风格";                 break;         }         if (!TextUtils.isEmpty(string))             mTextView.setText("你点击了"+string);         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);         drawer.closeDrawer(GravityCompat.START);         return true;     }