记录使用Toolbar的过程中踩过的坑

一、menu文件设置icon后，菜单栏图标依然不可见

1、Toolbar设置menu文件

<androidx.appcompat.widget.Toolbar
        android:id="@+id/main_toolbar"
        style="@style/ToolbarStyle"
        app:menu="@menu/chat_main_menu"
        app:popupTheme="@style/PopupTheme"
        app:title="@string/chat" />

<?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"
    xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/black_seek_icon"
        android:title="@string/search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_create_group_chat"
        android:icon="@drawable/faqiqunliao_icon"
        android:title="@string/create_group_chat" />

    <item
        android:id="@+id/action_add_friend"
        android:icon="@drawable/tianjiahaoyou_icon"
        android:title="@string/add_friend" />

    <item
        android:id="@+id/action_try_scan"
        android:icon="@drawable/white_saoyisao_icon"
        android:title="@string/try_scan" />

</menu>

运行效果和想象的完全不一样啊，这可咋整。别着急，填坑之前先看看app:showAsAction这个属性的作用是什么（真不要脸，这是在强行安利知识点，毕竟这和填坑关系不大，如果已经懂了的码友可以忽略这份安利~）。

1. alaways：这个菜单项一定会显示在菜单栏上
2. ifRoom：如果有足够的空间，这个菜单项就会显示在菜单栏上
3. never：这个菜单项永远不会出现在菜单栏上
4. withText：还没用过，等我用过了再来BB。

大家可以自己测试一下这些属性的效果，那样更直观一些。好了言归正传，这里直接丢出解决方法，以后有时间再查看源码寻找问题的根源。

方法一

首先给Toolbar设置ActionBar支持，然后用ActionBar的方式来设置相关属性

    //第一步
    setSupportActionBar(mainToolbar);
    //第二步：设置menu文件
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.chat_main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }
    //第三步：使用反射修改控制图标显示的变量
    /**
     * 显示Toolbar 菜单图标
     *
     * @param menu
     * @return
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsMenu(menu);
    }

方法二（推荐使用这种方法）

直接通过Toolbar设置图标显示的变量

Menu menu = mainToolbar.getMenu();
//替换溢出按钮图标
mainToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.plus_icon));
//设置菜单项图标可见
if (menu instanceof MenuBuilder) {
    MenuBuilder menuBuilder = (MenuBuilder) menu;
    menuBuilder.setOptionalIconsVisible(true);  //这里设置的属性就是问题的根源所在
}

这样图标就显示出来了，还顺手设置了溢出按钮图标（那个带圈圈的加号）。分析源码的任务放到以后再进行，我们继续填坑。

二、菜单栏默认样式与产品经理的预期相差甚远

修改之前

默认样式确实不太美观呀！于是我们需要解决几个问题：

1. Toolbar被菜单栏遮挡
2. 菜单背景色与图标冲突
3. 字体太小

解决方法：为Toolbar定义app:popupTheme属性

 <androidx.appcompat.widget.Toolbar
        android:id="@+id/main_toolbar"
        style="@style/ToolbarStyle"
        app:menu="@menu/chat_main_menu"
        app:popupTheme="@style/PopupTheme"
        app:title="@string/chat" />

<!-- ToolBar菜单样式.-->
<style name="PopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
    <!--设置背景-->
<!--        <item name="android:background">@android:color/black</item>-->
    <!--设置字体颜色-->
    <item name="android:textColor">@color/white</item>
    <!--设置文字大小-->
    <item name="android:textSize">@dimen/sp_12</item>
    <!--设置不覆盖锚点，避免遮挡Toolbar-->
    <item name="overlapAnchor">false</item>
</style>

我们可以看到，Toolbar提供了一个“app:popupTheme”属性用来修改菜单栏样式，是不是很简单！修改菜单栏样式本来也不是多大的事儿，但是网上误导的文章太多了，于是硬生生把小问题变成了大坑。我也不知道当初我在网上看了些啥文章，为了修改菜单栏样式一顿胡乱修改Toolbar属性，到最后也没个有用的方案，当然这也只能怪自己基础不够扎实。

简单总结一下上面提到的坑：

• 菜单项icon无法显示
• 菜单覆盖在Toolbar上面
• 默认样式不美观
• 设置溢出按钮图标

三、修改标题样式

设置Toolbar的titleTextAppearance来修改标题样式

<androidx.appcompat.widget.Toolbar
    app:navigationIcon="@drawable/black_back_icon"
    app:title="@string/group_invitation"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    style="@style/ToolbarStyle"/>

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">16sp</item>
</style>

我目前遇到的基本上就是这些问题，以后有问题还会继续补充~