DrawerLayout、Toolbar 的详细用法

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

1. toolbar 的设置

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

布局颜色.png

---

• 在 activity_main 中添加 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 之后才会生效。

Toolbar 中的控件

---

• 设置上一步中的 onCreateOptionsMenu

• 先在 res/menu/ 下创建一个 toolbar_menu.xml 文件

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

    @Override
    public 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 的小缺点

小缺点布局

• 首先修改 toolbar_menu.xml 的内容

    
         //设置成 never 会自动在 Toolbar 的右侧生成一个小缺点图标
    
    

但自动生成的缺点图标是官方自带的小黑点，需要在另外一些设置 (有两种方法)：

方法一：

• 在 styles.xml 下创建一个 toolbar_style

    
    
```language

• 在 Toolbar 的设置中添加 Theme

方法二：

在 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 是 Google 在 5.0 后退出的菜单栏布局，包括头部（headerLayout）和菜单 （menu）两部分
    

---

• 给 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);

---

• 点击导航按钮打开侧边栏

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

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