适合Material Dsign的新抽屉---Navigation View介绍

一、常规引入简介

        在Google I/O 2015大会上，Google带来了Android M，同时还有Android支持库的新一轮更新，其中更是增加一个全新的支持库Android Design Support Library，包含了数个重要的Material Design组件，用于将Material Design适配到Android 2.1(API 7)。

Android Design Support Library

        可以通过官方文档 ，和Demo示例来快速了解。Design Support Library现在包含NavigationView，TextInputLayout，FloatingActionButton，Snackbar，TabLayout，CoordinatorLayout。
要使用Design Support Library，请先更新SDK中的Android Support Repository到最新版，然后在工程中添加依赖

compile 'com.android.support:design:23.0.1

二、正题---如何使用

首先，创建菜单。菜单元素是放在group标签之下，同时声明每次只能有一个item被选中：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  
    <group
        android:checkableBehavior="single">
  
        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>
  
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
        ...
  
        <item
            android:id="@+id/drawer_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings"/>
  
    </group>
</menu>

当然 理论上，我们还可以通过为item添加子菜单来实现带有头部的分组效果，代码类似于：

<item
    android:id="@+id/section"
    android:title="@string/section_title">
    <menu>
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
  
        <item
            android:id="@+id/drawer_downloaded"
            android:icon="@drawable/ic_file_download_black_24dp"
            android:title="@string/downloaded"/>
    </menu>
</item>

每添加一个分组，都会在该组的最上面添加一根分割线，以和普通的item区分

然后，我们可以添加一个navigation view到activity布局中了，在navigation view里设置好菜单和头部。头部我就不讲了，它可以是任意的布局。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
  
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
  
    ...
  
    </FrameLayout>
  
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
  
</android.support.v4.widget.DrawerLayout>

接下来就是java代码：

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
  
if (actionBar != null) {
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
    actionBar.setDisplayHomeAsUpEnabled(true);
}

接下来，初始化navigation drawer。当一个item被选中的时候，显示一个snackbar，设置该item为被选中状态同时关闭drawer：

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  
NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override public boolean onNavigationItemSelected(MenuItem menuItem) {
        Snackbar.make(content, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
        menuItem.setChecked(true);
        drawerLayout.closeDrawers();
        return true;
    }
});

那么如何打开呢？在home菜单被点击的时候，打开drawer（这一步和navigation view其实没啥关系）：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
    }
  
    return super.onOptionsItemSelected(item);
}

最后上一张效果图