今天來看一下 NavigationView 的使用，NavigationView 是一個標(biāo)準(zhǔn)的導(dǎo)航菜單，其菜單內(nèi)容由菜單資源文件來填充，NavigationView 一般和 DrawerLayout 一起搭配使用構(gòu)成抽屜菜單，分別由內(nèi)容頁和菜單頁組成。

基本布局

可以直接使用 DrawerLayout 作為根布局，里面依次是內(nèi)容布局和菜單布局，切記內(nèi)容布局一定是在菜單布局的前面，可以這樣理解菜單劃出的時候肯定應(yīng)該在內(nèi)容布局之上，如果兩者順序相反，則影響菜單 Item 的點擊事件以及菜單的滑動隱藏，當(dāng)然如果有 ToolBar 等，可以按需添加到內(nèi)容布局中，也可以 DrawerLayout 外，唯一區(qū)別是側(cè)換菜單是否遮擋 ToolBar，基本使用參考如下：

 <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">
     
     <!--內(nèi)容 -->
     
     <!--菜單-->
     <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" />
 </android.support.v4.widget.DrawerLayout>

常用屬性

下面是 NavigationView 的常用屬性，具體如下：

<!--菜單彈出方向-->
android:layout_gravity="start"
<!--菜單圖標(biāo)渲染的顏色-->
app:itemIconTint="@color/colorPrimary"
<!--菜單文字的顏色-->
app:itemTextColor="@color/colorNormal"
<!--菜單項背景顏色（組之間有間隔）-->
app:itemBackground="@color/colorBackground"
<!--菜單項-->
app:menu="@menu/menu_navigation_view" 
<!--NavigationView的頭部布局-->
app:headerLayout="@layout/head_navigation_layout"

文字選中效果

如果美工比較用心會告訴點擊時是那種顏色、按下是那種顏色或者是某種效果，此時就需要設(shè)置菜單項文字選中效果了，這里選擇創(chuàng)建在 color 資源文件的形式來實現(xiàn)文字選中效果了，定義 color 資源文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按下-->
    <item android:color="@color/colorPress" android:state_pressed="true"/>
    <!--選中-->
    <item android:color="@color/colorCheck" android:state_checked="true"/>
    <!--默認(rèn)-->
    <item android:color="@color/colorNormal"/>
</selector>

然后，設(shè)置 NavigationView 的 itemTextColor 屬性即可，具體如下：

<!--設(shè)置菜單項顏色-->
app:itemTextColor="@color/select_color_navigation"

當(dāng)然，也可以在代碼中設(shè)置，具體如下：

//設(shè)置菜單項顏色
ColorStateList colorStateList = getResources().getColorStateList(R.color.select_color_navigation);
navigationView.setItemTextColor(colorStateList);

然后，設(shè)置對 NavigationView 菜單項選中的事件監(jiān)聽，具體如下：

navigationView.setNavigationItemSelectedListener(this);

最后，在點擊完成要設(shè)置該菜單項已被選中，具體如下：

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    switch (item.getItemId()){
        case R.id.menu1:
            Toast.makeText(this,"menu1",Toast.LENGTH_SHORT).show();
            break;
        //...
    }
    //設(shè)置菜單項選中
    item.setCheckable(true);
    //關(guān)閉Drawer
//    navDrawLayout.closeDrawers();
    return true;
}

圖標(biāo)與文字間距

使用 NavigationView 之后發(fā)現(xiàn)，菜單圖標(biāo)與菜單文字之間有一定的間距，看著有點寬，有一點強(qiáng)迫癥必須稍微修改小一點，根據(jù)之前修改 FloatingActionButton 大小的經(jīng)驗，翻一下源碼找設(shè)置這個間距的位置，查看 NavigationView 源碼，最終在 NavigationMenuPresenter 中找到相關(guān)的 dimen 值，然后順藤摸瓜找到與 Navigation 相關(guān)的幾個 dimen 值，具體如下：

public static final int design_navigation_elevation = 0x7f060064;
public static final int design_navigation_icon_padding = 0x7f060065;
public static final int design_navigation_icon_size = 0x7f060066;
public static final int design_navigation_max_width = 0x7f060067;
public static final int design_navigation_padding_bottom = 0x7f060068;
public static final int design_navigation_separator_vertical_padding = 0x7f060069;

此時，在項目的 dimens 文件夾中創(chuàng)建名稱相同的值覆蓋即可，這里是修改 Menu 圖標(biāo)與文字之間的間距，所以我們只要設(shè)置：

<!--修改NavigationView菜單圖標(biāo)與文字之間的間距-->
<dimen name="design_navigation_icon_padding" tools:override="true">10dp</dimen>

至于其他相關(guān)的 dimen 值就不一一說明了，這樣就修改了 Menu 圖標(biāo)與文字之間的間距。

案例

下面是一個 NavigationView 結(jié)合 DrawerLayout 的使用案例，布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical">
    <!--ToolBar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/navToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/navDrawLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--內(nèi)容-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="@string/app_name"
                android:textSize="18sp" />
        </LinearLayout>
        <!--菜單-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigationView"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/head_navigation_layout"
            app:itemIconTint="@color/colorPrimary"
            app:itemTextColor="@color/select_color_navigation"
            app:menu="@menu/menu_navigation_view" />
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

顯示效果

下面是顯示效果，如下圖所示：

NavigationView