DrawerLayout、Toolbar 的详细用法

利用 toolbar + drawerLayout 可以实现点击标题栏右上角按钮弹出侧滑菜单的功能，例如 网易云音乐 或者 Google Play

1. toolbar 的设置

• ##### 打开 res/value/styls.xml 文件，创建另一套 style 属性

<style name="AppTheme.base" parent="Theme.AppCompat">       <item name="windowActionBar">false</item>       <item name="colorPrimaryDark">#ff0000</item>       <item name="colorPrimary">#ff0000</item>       <item name="android:windowBackground">@color/colorPrimaryDark</item>       <item name="android:windowNoTitle">true</item>       <item name="windowNoTitle">true</item></style>

---

• ##### 在 activity_main 中添加 Toolbar

    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary">    </android.support.v7.widget.Toolbar>

设置 background 后才可以使 Toolbar 使用我们定义的颜色设置

---

• ##### 在 MainActivity 中声明 Toolbar

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

---

• ##### 设置 Toolbar 中的控件

        toolbar.setTitle("Test Title");        toolbar.setSubtitle("This is substitle");        //toolbar.setLogo(R.drawable.ic_launcher); 可以在 Navigation后 设置一个 logo        toolbar.setSubtitleTextColor(getResources().getColor(R.color.colorGray)); //设置二级标题的颜色        toolbar.setTitleTextColor(getResources().getColor(R.color.colorBlack)); //设置标题的颜色        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.drawable.menu_24);   //setNavigationIcon 需要放在 setSupportActionBar 之后才会生效。

---

• ##### 设置上一步中的 onCreateOptionsMenu
  
  • 先在 res/menu/ 下创建一个 toolbar_menu.xml 文件
    “`
    

 - 然后在 MainActivity 中通过 onCreateOptionsMenu 方法填充进去创建的布局文件

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.toolbar_menu,menu);        return true;}

 - 给该按钮添加点击事件 （需要设置在 setSupportActionBar 之后才有作用。）

    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {        @Override        public boolean onMenuItemClick(MenuItem item) {            String msg = "";            switch (item.getItemId()) {                case R.id.tooLbar_menu:                    msg += "Hello World!!!!!!!!!!!!";                    break;                default:                    break;            }            if(!msg.equals("")){                Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();            }            return true;        }    });

- - - + #####  设置 Toolbar 的小缺点![小缺点布局](http://upload-images.jianshu.io/upload_images/5264123-9098691bea00cdd9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) - 首先修改 toolbar_menu.xml 的内容

但自动生成的缺点图标是官方自带的小黑点，需要在另外一些设置 (有**两种方法**)：### 方法一： - 在 styles.xml 下创建一个 toolbar_style

<style name="toolbar_style" parent="AppTheme.base">    <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item></style><style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">    <item name="android:src">@drawable/setting_poing_white_24</item></style>

``` - 在 Toolbar 的设置中添加 Theme

    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:theme="@style/toolbar_style"        android:background="?attr/colorPrimary">    </android.support.v7.widget.Toolbar>

 ### 方法二： 在 Toolbar 中直接添加 **popupTheme**  ``` app:popupTheme="@drawable/setting_poing_white_24"

---

2. 设置 DrawerLayout

• 在 build.gradle 中添加 compile ‘com.android.support:design:25.3.1’ 并 Sync now

  ---

• 设置布局

  • 在 activity_main.xml 中创建一个 DrawerLayout 布局
    “`
    

 - 在 DrawerLayout 中设置两个布局，第一个为主布局，第二个为滑动菜单的布局

- - -+ ##### 给 NavigationView 里的选项设置点击事件 - 在MainActivity 中声明 NavigationView

private NavigationView navigationView;

 - 给 NavigationView 里的选项设置点击事件

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
String msg = “”;
switch (item.getItemId()){
case R.id.item1:
msg += “This is Item1!!!”;
drawerLayout.closeDrawers(); //关闭菜单栏
break;
case R.id.item2:
msg += “This is Item2”;
drawerLayout.closeDrawers();
break;
case R.id.item3:
msg += “This is Item3”;
drawerLayout.closeDrawers();
break;
case R.id.item4:
msg += “This is Item4”;
drawerLayout.closeDrawers();
break;
default:
break;
}
if(!msg.equals(“”)){
Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
}
//drawerLayout.closeDrawers(); 任何一个按钮被点击，都会通过 closeDrawers 方法关闭导航栏
return true;
}
});

 - 在 Java 代码里使每个选项的图片显示自己的颜色

    navigationView.setItemIconTintList(null);

- - -+ 点击导航按钮打开侧边栏

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

“`

欢迎关注我的博客、简书、CSDN、GitHub