DrawerLayout、Toolbar 的详细用法

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

1. toolbar 的设置

  • 打开 res/value/styls.xml 文件,创建另一套 style 属性
    1
    2
    3
    4
    5
    6
    7
    8
    <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>

布局颜色.png


  • 在 activity_main 中添加 Toolbar
    1
    2
    3
    4
    5
    6
    <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
    1
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

  • 设置 Toolbar 中的控件
    1
    2
    3
    4
    5
    6
    7
          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 文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
       <?xml version="1.0" encoding="utf-8"?>
      <menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <item
      android:id="@+id/tooLbar_menu"
      android:icon="@drawable/search_24"
      app:showAsAction="always"
      android:title="搜索">
      </item>
      </menu>
    • 然后在 MainActivity 中通过 onCreateOptionsMenu 方法填充进去创建的布局文件

      1
      2
      3
      4
      5
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.toolbar_menu,menu);
      return true;
      }
    • 给该按钮添加点击事件 (需要设置在 setSupportActionBar 之后才有作用。)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      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 的内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <?xml version="1.0" encoding="utf-8"?>
      <menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <item
      android:id="@+id/tooLbar_menu"
      android:icon="@drawable/search_24"
      android:title="搜索"
      app:showAsAction="always"/>
      <item
      android:id="@+id/itema"
      android:title="item1"
      app:showAsAction="never" /> //设置成 never 会自动在 Toolbar 的右侧生成一个小缺点图标
      <item
      android:id="@+id/itemb"
      android:title="item1"
      android:orderInCategory="100"
      app:showAsAction="never" />
      <item
      android:id="@+id/itemc"
      android:title="item1"
      android:orderInCategory="200"
      app:showAsAction="never" />
      </menu>

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

方法一:

  • 在 styles.xml 下创建一个 toolbar_style

    1
    2
    3
    4
    5
    6
    <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

    1
    2
    3
    4
    5
    6
    7
    <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

1
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 布局

      1
      2
      3
      4
      5
      6
      <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/drawer_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      </android.support.v4.widget.DrawerLayout>
    • 在 DrawerLayout 中设置两个布局,第一个为主布局,第二个为滑动菜单的布局

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      <?xml version="1.0" encoding="utf-8"?>
      <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/drawer_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.nenguou.learnloading.MainActivity">

      <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>

      <TextView
      android:id="@+id/TextView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@+id/toolbar"
      android:text="Hello World!" />

      </RelativeLayout>

      //NavigationView 是 Google 在 5.0 后退出的菜单栏布局,包括头部(headerLayout)和菜单 (menu)两部分
      <android.support.design.widget.NavigationView
      android:id="@+id/navigationView_test"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="start" //设置菜单的出现位置,start/left 为左,end/right 为右
      android:background="?attr/colorPrimary" //设置菜单的背景颜色,不设置的话为透明效果
      app:headerLayout="@layout/header_layout" //设置头部
      app:menu="@menu/menu_main" //设置菜单(菜单中若想出现分割线,可以将一组 item 放在一个 group 里,并且每个 group 都有 id
      app:itemIconTint="#FFFFFF" //设置菜单里图标的统一颜色,另一种显示图标原始颜色的方法在下文介绍
      />

      </android.support.v4.widget.DrawerLayout>

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

      1
      private NavigationView navigationView;
    • 给 NavigationView 里的选项设置点击事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      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 代码里使每个选项的图片显示自己的颜色
    1
    navigationView.setItemIconTintList(null);

  • 点击导航按钮打开侧边栏
    1
    2
    3
    4
    5
    6
    7
    8
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
    case android.R.id.home:
    drawerLayout.openDrawer(GravityCompat.START);
    }
    return super.onOptionsItemSelected(item);
    }

欢迎关注我的博客简书CSDNGitHub