NavigationView 的使用

From：http://laobie.github.io

NavigationView 的引入让 Android 侧边栏实现起来相当方便，最近公司项目中也使用这个新的控件完成了侧边栏的改版。在使用过程中遇到一些坑，写篇博文记录一下。

本文分为两大主要部分，第一部分是基本使用，第二部分是各种使用小细节（坑），如果你对其使用已经熟悉了，可以跳过第一部分。

基本使用

1. NavigationView 在 design 库中，添加依赖（最新的是 23.2.0）；

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

2. 然后在 DrawerLayout 布局中添加 NavigationView ；

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    android:id="@+id/drawer_layout"    xmlns:android="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">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <LinearLayout            android:id="@+id/main"            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="?attr/actionBarSize"                android:background="@color/colorPrimary"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>           ......                   </LinearLayout>    </FrameLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/nav_header"        app:menu="@menu/activity_main_drawer"/></android.support.v4.widget.DrawerLayout>

其中需要注意给 NavigationView 设置 android:layout_gravity="start" 属性。

3.然后注意到 NavigationView 其实是分两个部分的，一个是头部，一个是下面的菜单列表部分，如下图所示：

其中头部通过 app:headerLayout="@layout/nav_header" 属性添加，nav_header 的布局如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="match_parent"             android:layout_height="192dp"             android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/nav_header_bg"        android:scaleType="centerCrop"/>    <ImageView        android:layout_width="96dp"        android:layout_height="96dp"        android:layout_gravity="bottom"        android:layout_marginBottom="36dp"        android:padding="8dp"        android:src="@drawable/ic_avatar"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom"        android:padding="16dp"        android:text="Jaeger"        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/></FrameLayout>

下面的菜单列表部分是一个 menu 文件，通过 app:menu="@menu/activity_main_drawer"属性添加。

activity_main_drawer.xml 文件在 menu 文件夹下，内容为：

<?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>

4. 菜单列表的点击事件

菜单列表的点击事件设置代码如下：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {               switch (item.getItemId()){                   case R.id.nav_personal_info:                   // do something                       break;                   ...               }                return false;            }        });

至此，NavigationView 的基本使用就差不多搞定了，效果就是前面图片显示的效果。接下来是各种填坑环节。