Material Design学习：DrawerLayout+NavigationView

接上篇ToolBar介绍的文章 Material Design学习：ToolBar 开发使用简介

简介

谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，在android-support-v4.jar这个包中。

使用理由

1. 是Google的亲儿子（推荐）
2. 向下兼容
3. 比较简洁，使用方便

另外，在侧滑菜单中都要有导航菜单，Google也为我们准备好了，那就是NavigationView。

NavigationView是Android M中提出一个新的MD风格的组件，它将自己一分为二，上面显示一个通用的布局，下面显示一组菜单。与DrawerLayout一起使用可以实现通用的侧滑菜单。

使用

DrawerLayout有两个子布局

• 第一个是主界面（使用FrameLayout，宽高都match_parent）
• 第二个就是侧滑菜单的布局了（使用NavigationView，通过设置layout_gravity为left 或是right 来确定菜单摆放的位置）。

打开抽屉： DrawerLayout .openDrawer();
关闭抽屉：DrawerLayout.closeDrawer( );

1. 添加依赖

build.gradle

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

2. 在布局中使用

1. 布局中添加DrawerLayout+NavigationView

2. 在layout文件夹中新建顶部布局 header.xml

3. 在menu文件夹中新建底部菜单menu_drawer.xml

3. 在代码中使用

设置ToolBar响应DrawerLayout的状态改变，通过ActionBarDrawerToggle实现DrawerLayout展开关闭的监听。

ActionBarDrawerToggle 的作用：

• 改变android.R.id.home返回图标。
• Drawer拉出、隐藏，带有android.R.id.home动画效果。
• 监听Drawer拉出、隐藏；

public class MainActivity extends AppCompatActivity {
 
    private DrawerLayout mDrawerLayout;
    private Toolbar mToolBar;
    private ActionBarDrawerToggle mDrawerToggle;
    private NavigationView nv_menu_left;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
 
        mToolBar = (Toolbar) findViewById(R.id.mToolBar);
        nv_menu_left= (NavigationView) findViewById(R.id.nv_menu_left);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
 
        mToolBar.setTitle("标题");  //设置主标题
        setSupportActionBar(mToolBar); //设置actionbar
 
        getSupportActionBar().setHomeButtonEnabled(true);  //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); //创建返回键，并实现打开关/闭监听
 
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.app_name, R.string.app_name){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();  //初始化状态
        mDrawerLayout.addDrawerListener(mDrawerToggle); //将DrawerLayout与DrawerToggle绑定
//        mDrawerLayout.setScrimColor(Color.TRANSPARENT);   //去除侧边阴影   
    }

给NavigationView设置点击事件

        nv_menu_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.navigation_item1:
                        mToolBar.setTitle("选项一");
                        break;
                    case R.id.navigation_item2:
                        mToolBar.setTitle("选项二");
                        break;
                    case R.id.navigation_item3:
                        mToolBar.setTitle("选项三");
                        break;
                    case R.id.navigation_sub_item1:
                        mToolBar.setTitle("简介");
                        break;
                    case R.id.navigation_sub_item2:
                        mToolBar.setTitle("详情");
                        break;
                    case R.id.navigation_sub_item3:
                        mToolBar.setTitle("更多");
                        break;
                }
 
                //将选中设为点击状态
                item.setChecked(true);
                //关闭抽屉
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

效果图

效果展示

这里是项目地址

参考文章
http://www.jianshu.com/p/6ec7e9f6a2fe#
http://www.geek99.com/blog/1412