侧滑菜单栏使用DrawerLayout和NavigationView实现

DrawerLayout大家应该都不陌生，在实现侧滑菜单的时候回大量用到这个控件。

使用它来实现侧滑菜单只需要布局中设置好 侧滑菜单栏以及主要显示区域就可以

侧滑菜单栏可以是一个显示的布局，用RelativeLayout或者Linnerlayout等布局都可以写出左侧布局想要的效果,今天

要用的主角是NavigationView，实现侧滑菜单更加简单（因为他本身即是一个侧滑布局）

从布局中可以看出，一个DrawerLayout里面包含了两个布局，一个是主页面布局也就是Framlayout，另一个是support.design下的控件NavigationView，当布局完成之后可以看到如下的效果，这就是上面代码的布局效果，可以明显的看到侧滑菜单已经显示在了左侧位置

其中在NavigationView布局中，需要给NavigationView设置app:headerLayout和app:menu

• headerLayout就是给导航栏增加一个头部Layout。
• menu就是对应菜单项的选择条目。

在NavigationView中还有一些比较重要的属性，如下:

• itemBackground — 设置菜单项的背景
• itemIconTint — 设置菜单项的图标的着色
• itemTextColor — 这只菜单项目的文本颜色

因为 DrawerLayout本身已经具备了手势拉动出现和回弹的效果，所以只需要写一下左上角按钮的点击弹出和点击回弹的事件就可以了，然后在写NavigationView的点击事件全部代码如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //设置ToolBar
    final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mToolbar.setTitleTextColor(Color.WHITE);
    mToolbar.setTitle("我的标题");
    setSupportActionBar(mToolbar);
    //设置抽屉DrawerLayout
    final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
            R.string.drawer_open, R.string.drawer_close);
    mDrawerToggle.syncState();//初始化状态
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    //设置导航栏NavigationView的点击事件
    NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
    mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            switch (menuItem.getItemId())
            {
                case R.id.item_one:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentOne()).commit();
                    mToolbar.setTitle("标题1");
                    break;
                case R.id.item_two:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentTwo()).commit();
                    mToolbar.setTitle("标题2");
                    break;
                case R.id.item_three:
                    getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentThree()).commit();
                    mToolbar.setTitle("标题3");
                    break;
            }
            menuItem.setChecked(true);//点击了把它设为选中状态
            mDrawerLayout.closeDrawers();//关闭抽屉
            return true;
        }
    });
}

headerlayout布局如下：就是一个TextView而已

<?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="200dp"
    android:background="#30469b">
    <TextView
        android:id="@+id/header_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="HeaderLayout"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</RelativeLayout>

下面是menu布局：

这样整个使用DrawerLayout和NavigationView实现侧滑菜单就完成了，实现效果如下：

代码下载地址：http://download.csdn.net/detail/xiaoqiang_0719/9632830