Android Material Design控件學習（二）——NavigationView的學習和使用

前言

學習

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

通過學習官方文檔，我們知道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的基本用法。

1. 引用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>

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;
    }

運行效果

完整代碼我已經上傳到我的Github中，歡迎各位star&fork。

地址 https://github.com/JohnTsaiAndroid/NavigationViewDemo

如果你覺得這篇文章對你的學習有所幫助，不妨推薦一下，也可以關注我的Github https://github.com/JohnTsaiAndroid