Android - 基于Toolbar的Navigation Drawer(Material Design)

搬运于博客园：http://www.cnblogs.com/Syun0929/p/4293085.html
介绍下基于Toolbar的Navigation Drawer

image.png

实现过程：

1. 在 activity_asdemo.xml 中加入 DrawerLayout

2.toolbar.xml代码

3.在ASDemoActivity.java中添加DrawerLayout，部分代码如下：

private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
 
       ……
 
        // 打開 up button
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 
        mDrawerLayout = (DrawerLayout) findViewById(R.id.mydrawer);
        //drawer toggle 放入 toolbar
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                mToolbar, R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

完成后，就会实现下面的交互效果。
　　完整代码：https://github.com/Syun0929/MyASDemo
最终实现的交互效果：

一些需要注意的细节

1.有一些需要注意的地方需要补充下，目前实现了的效果中，DrawerLayout是覆盖status bar的，这样的好处是DrawerLayou有了更多的空间来展现内容。这个也是google官方推荐的效果，google官方的app也在逐步替换成这种效果。

　　

　　

　　2.设置statusBar颜色
　　A. 在 root 层的 drawer layout 跟 side drawer 的 layout 各別加上android:fitsSystemWindows="true" 属性；

 
    
    ……
 
    
 
    
    
 

B. 在 v21/styles.xml中给android:statusBarColor属性添加一个带透明度的颜色值。

3.如果想让DrawerLayout的区域只在toolbar下方，就要在xml中把toolbar放到DrawerLayout之外，效果图就不放了，代码如下：

 
  
 
  
 
    
    
 
      ...