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