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