滑动菜单DrawerLayout

滑动菜单DrawerLayout是Material Design中最常见的效果之一，借助谷歌提供的各种工具，可以很轻松的实现非常炫酷的菜单效果，上一篇Toolbar的基础上添加滑动菜单，效果如下：

1.先将库引入到项目中，打开app/build.gradle文件，在dependencies闭包中添加如下内容：
compile ‘com.android.support:design:25.3.1’
compile ‘de.hdodenhof:circleimageview:2.1.0’
这里添加了两行依赖关系，第一行就是Design Support库，第二行是一个开源项目CircleImageView，它可以用来轻松实现图片圆形化的功能，CircleImageview的项目主页地址是：https://github.com/hdodenhof/CircleImageView

2.activity_main中的代码做如下修改：

"1.0" encoding="utf-8"?>
.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">
    "match_parent"
        android:layout_height="match_parent">
        .support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#009999"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        .support.v7.widget.Toolbar>
    
    .support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">
    .support.design.widget.NavigationView>
.support.v4.widget.DrawerLayout>

可以看到，最外层的空间使用了DrawerLayout，DrawerLayout中放置了两个直接子控件，第一个子控件是FrameLayout，用于主屏幕中显示的内容，第二个子控件是NavigationView，用于作为滑动菜单中显示的内容。事实上可以在滑动菜单页面定义任意布局，不过谷歌给我们能提供了更好的方法，就是NavigationView。它是Design Support库中提供的一个控件，可以将滑动菜单的实现变得非常简单。NavigationView中设置了app:menu和app:headerLayout两个属性

首先准备menu，右击menu文件夹，新建nav_menu.xml文件，并编写如下代码：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@mipmap/nav_call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@mipmap/nav_friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@mipmap/nav_location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/nav_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@mipmap/nav_task"
            android:title="Tasks"/>
    group>
menu>

接下来准备headerLayout，这是一个可以随意定制的布局，右击layout文件夹，新建nav_header.xml文件，代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="[email protected]"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_above="@id/mail"
        android:text="yaoyanbao"
        android:textColor="#FFF"
        android:textSize="14sp"/>
RelativeLayout>

重新运行一下程序，然后在屏幕的左侧边缘向右拖动，就可以让滑动菜单显示出来了。但是用户并不知道可以拖动。Material Design建议的做法是在Toolbar的最左边加一个导航按钮的图标，代码如下：

public class MainActivity extends AppCompatActivity {
    @InjectView(R.id.toolbar)
    Toolbar toolbar;
    @InjectView(R.id.drawer_layout)
    DrawerLayout drawerLayout;
    @InjectView(R.id.nav_view)
    NavigationView navView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        //添加Toolbar
        setSupportActionBar(toolbar);
        //获取actionBar的实例，
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //显示滑动菜单导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置滑动菜单导航按钮图标
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu);
        }
        //默认选中的菜单项
        // navView.setCheckedItem(R.id.nav_call);
        //滑动菜单的点击事件
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                drawerLayout.closeDrawers();
                return true;
            }
        });

    }

    //给Toolbar添加菜单选项
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toorbar, menu);
        return true;
    }

    //Toolbar菜单选项的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this, "云同步", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "删除", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

代码中滑动菜单导航按钮的点击事件，以及滑动菜单里面的菜单项的点击事件也都实现了。