Android Design Library之三: NavigationView

简介

要想实现抽屉式的效果，在之前我们大都是使用的SlidingMenu等第三方库。不过Google发布了DrawerLayout来实现相同的效果。各有优缺点吧。这里我们介绍NavigationView的使用。
先来看下最终的效果。

Demo

先看下实际运行的效果。感觉还是蛮不错的吧

<?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/drawer_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

   

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@color/main"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="Title"
            app:titleTextColor="@color/white"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_main"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/layout_nav_header"
        app:itemIconTint="@null"
        app:itemTextColor="#009688"
        app:menu="@menu/nav"/>
</android.support.v4.widget.DrawerLayout>

需要注意的是，需要按照官方文档中的说明将你的布局放在NagigationView的上方。不然会有一些意想不到的效果，就因为这个，之前吃了挺大的亏。
通过headerLayout设置menu的头视图。通过menu属性设置每一个item。
NavigationView有几个属性：

• itemBackground ： 设置每一个item的背景颜色。
• itemIconTint： 改变menu中的图标颜色
• itemTextAppearance：设置每个item的字体样式。
• itemTextColor：设置每个item的文字颜色。

Toggle

设置toggle和DrawerLayout进行联动。方法很简单。就几句代码。

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open, R.string.close);
 toggle.syncState();
 drawer.addDrawerListener(toggle);

item 点击时间。

通过设置NavigationItemSelectedListener来为每一个条目设置点击事件。

navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_music:
                        break;
                    case R.id.nav_movie:
                        break;
                    case R.id.nav_setting:
                        break;
                }
                return false;
            }
        });

监听back

当抽屉展开的时候，点击返回按钮收起收起，代码很简单。

  @Override
    public void onBackPressed() {
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

完成代码

GitHub地址