Material Design Library系列之NavigationView

       前言：以前，当我们使用侧滑导航抽屉的时候一般有两种方式，一种是DrawerLayout+ListView，另一种是开源项目SlidingMenu。现在，google官方推出了NavigationView用来取代第一种方式中的ListView，从而让第三方应用的开发更为规范化。

         接下来我们实现的效果是这样的：

       

         1.新建工程并添加依赖：

compile 'com.android.support:design:23.4.0'

        2.布局上主要分为两个部分，一个是主界面，一个是抽屉界面。这一步先在layout下新建一个drawer.xml，代码如下：

<?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"
    android:id="@+id/id_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主界面 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"/>

        <TextView
            android:id="@+id/id_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="This is Home!"
            android:textSize="30sp"
            android:gravity="center"/>
    </LinearLayout>

    <!-- 侧滑菜单 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/id_navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/navigation_menu">

    </android.support.design.widget.NavigationView>

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

这里最外层是DrawerLayout，主界面是LinearLayout，侧滑抽屉是NavigationView。

LinearLayout下垂直排布了Toolbar和TextView，TextView只是用来简单的显示文字。

NavigationView分为顶部和菜单两部分，这两部分下面会说明。

       因为这里我们使用了toolbar所以别忘了将styles.xml中将AppTheme设定为NoActionBar：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

       3.侧滑抽屉的顶部部分，在layout下新建navigation_header.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="@drawable/header_background"
    android:paddingStart="20dp"
    android:paddingEnd="15dp">

    <ImageView
        android:id="@+id/id_photo"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/photo"
        android:layout_above="@+id/id_header_text"
        android:layout_marginBottom="20dp"/>

    <TextView
        android:id="@+id/id_header_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="http://blog.csdn.net/chenhao0428"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:layout_marginBottom="2dp"/>

</RelativeLayout>

这里是侧滑抽屉的顶部布局，背景是一张图片，内容下有一张头像图片和下方的文字说明。

        4.侧滑抽屉的菜单部分，在menu下新建navigation_menu.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/id_navigation_home"
            android:icon="@mipmap/ic_home_black_24dp"
            android:title="Home"
            android:checked="true"
            android:checkable="true"/>

        <item
            android:title="分组1">

            <menu>
                <item
                    android:id="@+id/id_navigation_favorite"
                    android:icon="@mipmap/ic_favorite_black_24dp"
                    android:title="Favorite"
                    android:checkable="true"/>

                <item
                    android:id="@+id/id_navigation_download"
                    android:icon="@mipmap/ic_file_download_black_24dp"
                    android:title="Download"
                    android:checkable="true"/>
            </menu>
        </item>

        <item
            android:title="分组2">

            <menu>
                <item
                    android:id="@+id/id_navigation_more"
                    android:icon="@mipmap/ic_more_horiz_black_24dp"
                    android:title="More"
                    android:checkable="true"/>

                <item
                    android:id="@+id/id_navigation_settings"
                    android:icon="@mipmap/ic_settings_black_24dp"
                    android:title="Settings"
                    android:checkable="true"/>
            </menu>
        </item>

    </group>
</menu>

menu下可以直接item或者进行分组后再item。

group下的android:checkableBehavior设置为single，表示其下的item为单选。

每个item下的checkable设置为true，表示可被选中。

       5.到了这里我们已经将所有的布局编写完毕了，但别忘了所有的布局都是分散的模块化xml，我们还需要将这些布局运用到Activity的主布局中去，因此在activity_main.xml中include：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.navigationview.MainActivity">

    <include layout="@layout/drawer" />

</LinearLayout>

       6.将MainActivity.java代码改成如下：

import android.graphics.Color;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.id_drawer);
        final TextView textView = (TextView) findViewById(R.id.id_tv);

        //设置Toolbar
        toolbar.setTitle("主题栏");
        toolbar.setTitleTextColor(Color.parseColor("#FFFFFF"));
        setSupportActionBar(toolbar); //设置toolbar支持actionbar

        //使用ActionBarDrawerToggle,配合DrawerLayout和ActionBar,以实现推荐的抽屉功能
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);

        NavigationView navigationView = (NavigationView) findViewById(R.id.id_navigation);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            @Override
            public boolean onNavigationItemSelected(MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.id_navigation_home:
                        textView.setText("This is Home!");
                        break;

                    case R.id.id_navigation_favorite:
                        textView.setText("This is Favorite!");
                        break;

                    case R.id.id_navigation_download:
                        textView.setText("This is Download!");
                        break;

                    case R.id.id_navigation_more:
                        textView.setText("This is More!");
                        break;

                    case R.id.id_navigation_settings:
                        textView.setText("This is Settings!");
                        break;
                }

                item.setChecked(true); //点击了把它设为选中状态
                drawerLayout.closeDrawers(); //关闭抽屉
                return true;
            }
        });
    }
}

由于这部分代码较多，脱离代码难以叙述，因此基本上我都添加了注释便于理解。

为了让无关紧要的代码尽量精简，每个item的点击效果只是将TextView的文本修改一下。

       至此程序基本编写完毕了，让我们看一下效果：

       

       细心的童鞋可能发现了这并不是我们的最终效果，这里还有一个细节上的小瑕疵，那就是状态栏居然不是沉浸式的，这样看着确实感觉不够爽！

       为了方便对比，这里先给出这部分的代码，沉浸式状态栏修改后的代码放在整篇文章的末尾。

       源码地址：http://download.csdn.net/detail/chenhao0428/9551554

/*--------------------------------------- 沉浸式状态栏分割线 ------------------------------------------*/

沉浸式状态栏的原理主要是让toolbar顶部延伸至状态栏，延伸的长度正好为状态栏的高度，然后将状态栏透明化，这

样透明的状态栏覆盖在toolbar的顶部的延伸部分，当侧滑抽屉划出的时候覆盖的toolbar就自然而然地延伸到顶部了。

       1.给toolbar加上paddingTop：

<android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:paddingTop="@dimen/toolbar_padding_top"/>

其中toolbar_padding_top在values/dimens.xml中设为0dp，在values-v19/dimens.xml中设为25dp。至于为什么设为

25dp，那是因为google将statusbar的高度就是设定了25dp，让toolbar顶部延伸的25dp被状态栏透明化覆盖。

       2.在MainActivity.java的onCreate()方法中添加动态透明化代码：

        //将状态栏透明化
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);

            //android 4.4版本特殊处理
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                //将侧边栏顶部延伸至status bar
                drawerLayout.setFitsSystemWindows(true);
                drawerLayout.setClipToPadding(false);
            }
        }

这里需要说明的是如果只是5.0以上版本，第二个if下的代码是不会执行的，只通过上面两行代码即可实现沉浸式状态栏，第二个if只是为了更好地适配4.4，你也可以试着去掉这部分代码在4.4上执行后看看有什么变化。

       真机Nexus5上6.0的效果：

       

       AVD上4.4的效果：

       

深入了解沉浸式状态栏可以参考这篇文章：http://www.jianshu.com/p/34a8b40b9308

源码地址：http://download.csdn.net/detail/chenhao0428/9553081