Android Toolbar详解

Toolbar简介

Toolbar 是 Android 5.0 推出的一个 Material Design 风格的导航控件 ,用来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置；

Toolbar使用

首先我们来看一下Toolbar的效果：

 

从上图中我们可以看到Toolbar有以下几部分组成：
1、返回按钮（左侧返回icon）
2、标题、子标题
3、溢出菜单（用户icon、设置icon、其他）
4、溢出菜单按钮（+号）

 

 

 ok接下来我们一步一步来介绍，如何实现这样的Toolbar

Toolbar的基本使用

1、布局中代码

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints" />

2、主题改为Theme.MaterialComponents.NoActionBar.Bridge

<!-- Base application theme. -->
 <style name="Theme.MyApplication14" parent="Theme.MaterialComponents.NoActionBar.Bridge">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

3、activity中的代码

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

这是Toolbar的效果为：

 

接下来我们给Toolbar设置背景色

android:background="#5C6BC0"

并设置标题、子标题，并设置标题子标题颜色；

 android:background="#5C6BC0"
 app:title="标题"
 app:titleTextColor="#EC407A"
 app:subtitle="子标题"
 app:subtitleTextColor="@color/white"

整个XML代码为：

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="#5C6BC0"
        app:title="标题"
        app:titleTextColor="#EC407A"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints" />

显示效果为：

 是不是还是看着很别扭，接下来我们把左侧返回按钮弄出来，因此，我们在activity中加入以下代码

toolbar.setNavigationIcon(R.drawable.ic_baseline_arrow_back);

注：R.drawable.ic_baseline_arrow_back 图标文件来自于android studio 自带的 Vector Asset 功能。

显示效果：

 

 

 

ok，返回按钮我们搞出来了，接下来我们把右侧的溢出菜单搞出来：
首先我们在res的menu目录中创建一个menu资源文件

<?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_user"
        android:icon="@drawable/ic_baseline_person_outline"
        android:title="用户"
        app:showAsAction="always" />

    <item
        android:id="@+id/toolbar_setting"
        android:icon="@drawable/ic_baseline_settings"
        android:title="设置"
        app:showAsAction="always" />

    <item
        android:id="@+id/toolbar_other"
        android:icon="@drawable/ic_baseline_add"
        android:title="其他"
        app:showAsAction="never" />
</menu>

然后在布局中添加代码

 app:menu="@menu/toolbar_menu"

这样我们就创建了右侧的溢出菜单，显示效果如下

 

那么，如何将溢出菜单的一些菜单按钮显示在Toolbar上呢，这里注意我们在定义menu菜单的时候

   <item
        android:id="@+id/toolbar_user"
        android:icon="@drawable/ic_baseline_person_outline"
        android:title="用户"
        app:showAsAction="never" />

有个showAsAction属性，showAsAction属性共有三个值：ifRoom、never、always
1.always：总是显示在界面上
2.never：不显示在Toolbar上，只出现溢出菜单中
3.ifRoom：如果有位置就显示在Toolbar上，不然就出现溢出菜单中

故而，如果我们把menu菜单中的 app:showAsAction="always" 属性这样设置的话，就会把该menu按钮显示在toolbar上，我们把其中两个menu的属性改成always后效果如下：

 

 

好了，到此，Toolbar的所有元素组件都搞出来了，

接下来我们接着说如何自定义Toolbar，比如自由设置左侧返回标签的icon，标题子标题的文字大小，溢出菜单的背景字体颜色等；

自定义Toolbar

设置标题和子标题的字体大小

我们需在style文件中定义

    <!-- toolbar标题文字大小 -->
    <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
    </style>

    <!-- toolbar子标题文字大小 -->
    <style name="ToolbarSubTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">12sp</item>
    </style>

并在布局文件中Toolbar下设置

 app:subtitleTextAppearance="@style/ToolbarSubTitleSize"
 app:titleTextAppearance="@style/ToolbarTitleSize"

效果如下

 

 

 

溢出菜单自定义，设置溢出菜单icon自定义，背景，字体颜色等

溢出菜单icon自定义在style中添加如下代码

  <!-- toolbar溢出菜单图标自定义 -->
    <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_baseline_add</item>
        <item name="android:scaleType">centerInside</item>
    </style>

溢出菜单字体颜色自定义

 <!--toolbar溢出菜单文字颜色-->
    <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
        <item name="android:textColor">#A5D6A7</item>
    </style>

然后将这两个style引入到Toolbar的style中

<style name="Theme.MyApplication14" parent="Theme.MaterialComponents.NoActionBar.Bridge">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

<!-- 溢出菜单图标颜色-->
        <item name="colorControlNormal">@android:color/white</item>

<!-- 溢出菜单图标自定义--> 
　　　　<item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item> 

<!-- 溢出菜单文字颜色--> 
　　　　<item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item> 

</style>

这样就实现了溢出菜单icon的自定义和文字颜色的自定义

 溢出菜单背景自定义

 <!-- toolbar弹出菜单样式背景 -->
    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
        <item name="android:colorBackground">@color/background</item>
    </style>

将该style引入到布局文件Toolbar属性中

 app:popupTheme="@style/ToolbarPopupTheme"

设置完以上属性后效果如下

 

 

 

 

设置溢出菜单弹出位置

以上效果图看着很别扭，溢出菜单弹出的位置遮住了Toolbar，因此我们可以将溢出菜单弹出到Toolbar下面
定义style属性

 <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
        <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <item name="android:dropDownWidth">wrap_content</item>
        <item name="android:paddingRight">5dp</item>
        <!-- 弹出层背景颜色 -->
        <item name="android:colorBackground">#EF9A9A</item>
        <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
        <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">0dp</item>
        <!-- 设置弹出菜单文字颜色 -->
        <item name="android:textColor">#A5D6A7</item>
    </style>

并将该属性引入到布局文件中的Toolbar中

app:popupTheme="@style/OverflowMenuStyle"

运行效果如下

 

 

 

 

至此，我们就实现了开头我们Toolbar的效果，Toolbar的各部分如何使用以及自定义Toolbar我们就都介绍完毕了，
接下来我们接着说一下各个按钮的事件如何监听触发；

Toolbar各事件监听

左侧返回按钮监听

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

        toolbar.setNavigationIcon(R.drawable.ic_baseline_arrow_back);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点了一下返回", Toast.LENGTH_SHORT).show();
            }
        });

溢出菜单监听

我们在menu中定义Toolbar的menu菜单时定义了每个menu的id，所以我们只需要在setOnMenuItemClickListener中监听即可，代码如下

 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getGroupId()){
                    case 0:
                    case 1:
                    case 2:
                    case 3:{
                        Toast.makeText(MainActivity.this, "点了一下"+item.getTitle(), Toast.LENGTH_SHORT).show();
                        break;
                    }
                }
                return false;
            }
        });

至此Toolbar的相关知识就介绍到这里了，相信大家看完本篇对Toolbar的使用有了更新的认识，Toolbar使用起来更将得心应手；


自制的demo：https://github.com/17396743/Android_Toolbar

日后谈： 

敲这篇文章，花了我一上午的时间去测试，所使用的的android studio的版本是4.1.1，主要是为了以后回忆起来会更快上手。