簡介

SDK文檔：Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.

NavigationView可以用來快速的創建一個導航菜單。菜單的內容可以通過一個menu資源文件來配置。

使用示例

構建布局文件

NavigationView一般會以DrawerLayout做為容器，然后和Toolbar配合使用。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout android:id="@+id/dlyt_container"
    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:fitsSystemWindows="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/view_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <FrameLayout
            android:id="@+id/flyt_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/view_navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_main" />
</android.support.v4.widget.DrawerLayout>

下面我們分析一下幾個布局和View的具體作用：

• DrawerLayout
  這里以DrawerLayout做為最外層的容器，需要注意的是這里面android:fitsSystemWindows這個參數，這個參數的作用是根據系統的窗口調整布局，例如系統的狀態欄。關于這個參數的詳細說明可以參考fitsSystemWindows參數的詳解。一般情況下我們不會將這個參數設置為true，除非需要一些特定的效果，例如實現透明的系統狀態欄并且覆蓋在我們的布局之上。

• LinearLayout
  DrawerLayout里面的LinearLayout用以擺放我們要展示的內容，其中的Toolbar是一個頂端的action bar，用來擺放一個側邊抽屜的觸發按鈕。之后的FrameLayout才是我們展示真正的內容的地方，可以使用Fragment來填充這個Layout。

• NavigationView
  側邊抽屜控件，其中app:headerLayout="@layout/drawer_header"用于向側邊抽屜中添加添加一個Header布局，app:menu="@menu/menu_main"則是一個菜單文件，用于編輯菜單的內容。

drawer_header:

<?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="150dp"
    android:background="@android:color/holo_blue_dark"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

menu_main:

<?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/navi_item_moments"
            android:icon="@drawable/ic_public_white_24dp"
            android:title="@string/moments" />

        <item
            android:id="@+id/navi_item_settings"
            android:icon="@drawable/ic_settings_white_24dp"
            android:title="@string/settings" />
    </group>
</menu>

運行結果：

Snip20160713_5.png

在Activity中配置

public class MainActivity extends BaseActivity {

    private DrawerLayout mDlytContainer;
    private Toolbar mViewToolbar;
    private NavigationView mViewNavigation;
    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        mDrawerToggle = new ActionBarDrawerToggle(this, mDlytContainer, mViewToolbar, R.string.open,
                R.string.close);

        mViewNavigation.setCheckedItem(R.id.navi_item_moments);
        // 添加側邊菜單的點擊事件
        mViewNavigation.setNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.navi_item_moments:
                    ...
                    break;
                case R.id.navi_item_settings:
                    ...
                    break;
            }
            mDlytContainer.closeDrawers();
            return true;
        });
    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }
}

• ActionBarDrawerToggle是在action bar中側邊抽屜的觸發器，綁定了DrawerLayout和Toolbar。
• 在onPostCreate()方法中調用ActionBarDrawerToggle.syncState()是官方文檔中的建議。
• 如果要獲取在drawer_header布局中的控件，直接使用findViewById(int id)是不行的，需要使用NavigationView.getHeaderView(int index)獲取到Head View，然后使用View.findViewById(int id)方法來獲取。

總結

NavigationView的使用方法還是比較簡單的，也符合Material Design。