簡介
NavigationView，中文譯為：導航視圖，主要用作應用的導航菜單。
先來看下 NavigationView 的官方文檔：
從文檔中可以看到，NavigationView 存在于 design 包中，且繼承于FrameLayout。它通常被放置在 DrawerLayout 內部，作為側滑導航菜單。
NavigationView 基本使用方法
NavigationView 的使用方式很簡單，因為它的布局可以說是固定的，如下圖所示：
可以看到，NavigationView 的布局主要包括兩大部分：
頭部布局：可通過
app:headerLayout設置頭部布局菜單布局：可通過
app:menu指定導航菜單的資源文件
現在，就讓我們動手實現上面那張圖顯示的內容：
布局如下：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="30sp" />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_drawer_header"
app:menu="@menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
其中，NavigationView 的app:headerLayout的布局詳情如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/girl" />
</LinearLayout>
NavigationView 的app:menu的布局詳情如下：
<?xml version="1.0" encoding="utf-8"?>
<!--res/menu/menu_navigation_drawer.xml-->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/item_one"
android:icon="@mipmap/ic_launcher_round"
android:title="Item 1" />
<item
android:id="@+id/item_two"
android:icon="@mipmap/ic_launcher_round"
android:title="Item 2" />
<item
android:id="@+id/item_three"
android:icon="@mipmap/ic_launcher_round"
android:title="Item 3" />
</group>
<item android:title="SubItem">
<menu>
<item
android:id="@+id/subitem_one"
android:icon="@mipmap/ic_launcher"
android:title="SubItem 1" />
<item
android:id="@+id/subitem_two"
android:icon="@mipmap/ic_launcher"
android:title="SubItem 2" />
<item
android:id="@+id/subitem_three"
android:icon="@mipmap/ic_launcher"
android:title="SubItem 3" />
</menu>
</item>
</menu>
<group>標簽的作用就是歸類菜單，可以為該組菜單選擇設置某種行為（如單選），布局效果上會顯示出一條分割線。
然后，我們先來看下效果：
可以看到，效果基本出來了，但是菜單圖片卻顯示灰色的，這個需要在代碼中調用：
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setItemIconTintList(null);
這樣菜單按鈕的顏色就會正常顯示了。
下面為頭部布局增加控件點擊事件，就比如我們要實現上面例子中，頭部布局的ImageView的點擊事件：
源碼如下：
View headerView = this.mNavigation.getHeaderView(0);
headerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "ImageView clicks", Snackbar.LENGTH_SHORT).show();
}
});
}
接下來為菜單增加點擊事件，那其實就更簡單了，源碼如下：
this.mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Snackbar.make(NavigationViewActivity.this.mNavigation, item.getTitle(), Snackbar.LENGTH_SHORT).show();
item.setCheckable(true);//設置選項可選
item.setChecked(true);//設置選型被選中
return true;
}
});
可以通過 MenuItem 的getItemId()方法得到點擊 Item 的控件 id，然后你就可以做對應的操作。我們這個例子只是簡單獲取菜單 Item 標題。
最終效果如下：
總結
其實，NavigationView 只是 Google 給我們提供的一個導航視圖控件，其實我們自己去寫一個類似的布局完全是能夠替換 NavigationView 的，只是自己需要耗費額外的布局時間。
NavigationView 可以很好地幫助我們完成常見的導航視圖布局，但是它對于個性化的定制上面支持的并不好，比如：
- 不能動態調整菜單項的個數與內容。雖然NavigationView提供了inflateMenu方法，但是該方法只能在現有菜單上增加新的菜單，并不能替換掉原有菜單。
- 無法設置菜單文字的大小。
- 每個菜單項只有圖標和文字，不能添加其他控件。
- 無法設置每個菜單項的間距。
因此，要想實現豐富可定制的導航菜單，還得自己定義一個導航視圖。
