Android Design Support Library——Navigation View

前沿

　　Android 從5.0開始引入了Material design元素的設計，這種新的設計語言讓整個安卓的用戶體驗煥然一新，google在Android Design Support Library中封裝了一些重要的material design控制項，在這之前其實github上也已經出現了許多各種各樣的material design 控制項，只不過現在google把有些控制項標準化了，註意這個Android Design Support Library和Android Support Library是有區別的，Android Support Library 只是支持了一些基本控制項的封裝，而Android Design Support Library主要是一些Material design特效的實現，Android Design Support Library包括以下八種控制項：

　　Navigation View——抽屜導航

　　TextInputLayout——EditText懸浮標簽

　　Floating Action Button——懸浮操作按鈕

　　Snackbar——提示（類似Toast）

　　TabLayout——選項卡

　　CoordinatorLayout——滾動控制

　　CollapsingToolbarLayout——可摺疊的Toolbar（Google+、photos中的效果）

　　AppBarLayout——容器AppBar

　　本文分章對以上控制項主要做使用方式介紹，暫不分析源碼。首先看Navigation View

　　Navigation View——抽屜導航

　　非常實用的一種抽屜導航效果，支持直接通過菜單資源文件直接生成導航標簽，實現起來也非常簡單，效果如下圖所示：

　　使用步驟：

　　（1）app的build.gradle中引入design包本文design包版本以23.1.1為例

dependencies {
    compile 'com.android.support:design:23.1.1'
}

　　（2）xml佈局文件（activity_main.xml）和SlideMenu一樣需要使用到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">

    <include layout="@layout/include_list_viewpager" /><!-- 展示內容區域的佈局-->

    <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"
        app:menu="@menu/drawer_view" />

</android.support.v4.widget.DrawerLayout>

　　兩個重要的屬性

　　app:headerLayout ——導航頭佈局
　　app:menu——導航菜單佈局

　　layout_gravity——用來控制左滑和右滑的，start左滑，end右滑，其實這個是跟DrawerLayout有關的，具體可參考DrawerLayout的使用。

　　nav_header.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

　　drawer_view.xml（重點是看如何實現分組的）

<?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_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

　　(2)在代碼中聲明使用

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
        }

　　在onNavigationItemSelected（）方法中就可以獲取導航菜單中的每個Item進而實現相應的功能了。

　　擴展：如果你想讓你的導航菜單在status bar 上也顯示需要進行如下設置主要針對5.0及以上版本

　　../valuse-v21/styles.xml

<resources>

    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

　　同時在DrawerLayout中加入如下屬性

android:fitsSystemWindows="true"

　　如果你感覺Navigation View還不夠強大，可以看看MaterialDrawer，連接如下：https://github.com/mikepenz/MaterialDrawer