Android ActionBar 转Toolbar 出现的一些问题总结

    前言：最近对公司的APP进行一些控件的升级（很久以前就想动，我已经忍了很久了），记录一下ActionBar 转 ToolBar 期间遇到的大大小小的坑，顺便做个笔记。

一、先说一开始的使用

1.在xml布局文件的头部添加Toolbar控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/AppTheme.Toolbar">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />

    </android.support.v7.widget.Toolbar>

</LinearLayout>

可以注意到Toolbar 里面有一个TextView 控件，这是为了设置标题居中显示。

2.因为要使用Toolbar替换ActionBar,我们就要把原本的ActionBar去掉,这时候就需要自定义主题了，自定义一个AppTheme

<resources>

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

    <style name="AppTheme.Toolbar" parent="Widget.AppCompat.ActionBar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="android:background">?attr/colorPrimary</item>
        <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>

</resources>

3.这时候在代码中调用下，就可以使用ToolBar了

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private TextView mtvTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        // 设置toolbar 自带的标题为空
        mToolbar.setTitle("");
        // 设置toolbar
        setSupportActionBar(mToolbar);
        // 自定义标题居中
        mtvTitle = (TextView) findViewById(R.id.tvTitle);
        mtvTitle.setText(getString(R.string.app_name));
        // 设置左边的图标  点击图标会执行 android.R.id.home 的监听
        mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.back));
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

}

效果图如下：

二、使用Toolbar 时的菜单问题

1.跟使用actionbar 一样，绑定一个菜单

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.config, menu);
        return super.onCreateOptionsMenu(menu);
    }

当然了，得给出config菜单文件的代码。。。

<?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/airlink_config"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="101"
        android:title="一键配置"
        app:showAsAction="never" />

    <item
        android:id="@+id/softap_config"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="103"
        android:title="热点配置"
        app:showAsAction="never" />

</menu>

菜单项的各个属性：

• android:icon：这个属性是指定每个菜单项左边的图标的
• android:id：菜单项的唯一标识
• android:orderInCategory：菜单项的优先级，也就是顺序，只能设置大于正整数，数值越大菜单项越靠前
• android:title：菜单描述，也就是菜单文字
• app:showAsAction：这个是控制菜单项的显示的

添加上以后跑一下，效果时这样的

2.发现设置的图标不见了，这时候需要重写onPrepareOptionsPanel(View view, Menu menu)方法，这样才能正常显示图标，代码如下：

@SuppressLint("RestrictedApi")
    @Override
    protected boolean onPrepareOptionsPanel(View view, 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.onPrepareOptionsPanel(view, menu);
    }

这时候图标就显示出来了

3.已正常的审美观来讲，菜单的位置以及样式感觉很丑，所以得自定义一个样式，让大家能够接受,代码如下：

<!--自定义toolbar菜单样式-->
    <style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
        <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <!-- 弹出层背景颜色 -->
        <item name="android:popupBackground">@android:color/white</item>
        <!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
        <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">-2dp</item>
        <!--文字颜色-->
        <item name="android:textColor">@android:color/black</item>
    </style>

在主题中引用这个样式

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--指定toolbar弹出菜单样式-->
        <item name="actionOverflowMenuStyle">@style/toolbarMenuStyle</item>
    </style>

最后还要在toolbar 中设置

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/AppTheme.Toolbar"
        app:popupTheme="@style/toolbarMenuStyle">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textColor="#FFFFFF"
            android:textSize="20sp" />

    </android.support.v7.widget.Toolbar>

OK，这时候就设置完成了，跑一下代码，效果如下：

三、关于ToolBar 其他问题

1.在使用ToolBar 的时候很明显的感受到高度很不符合当前界面的大小，其实要想自定义ToolBar 的高度很简单，只需要设置 AppTheme.Toolbar 里面的两个参数就可以了，代码如下：

    <style name="AppTheme.Toolbar" parent="Widget.AppCompat.ActionBar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/toolbar_hight</item>
        <item name="android:minHeight">@dimen/toolbar_hight</item>
        <item name="android:background">?attr/colorPrimary</item>
        <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>

这两个高度值都要设置，只设置一个是不行的，我设置的大小是50dp,效果不是太明显。

2.当菜单栏显示的不是图标，而是文字的时候，文字就会显得特别小，效果如下。

想要调整这个字体的大小及颜色也是要在主题里进行设置，我设置的大小更改为20sp,颜色为黑色，代码如下

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--指定toolbar弹出菜单样式-->
        <item name="actionOverflowMenuStyle">@style/toolbarMenuStyle</item>
        <item name="actionMenuTextColor">@android:color/black</item>
        <item name="actionMenuTextAppearance">@style/MenuTextStyle</item>
    </style>

    <style name="MenuTextStyle">
        <item name="android:textSize">20sp</item>
    </style>

跑一下代码，效果图：

        暂时遇到的情况就这些，再遇到以后再加以整理。ToolBar 功能确实是比ActionBar强大太多（汗，好像是句废话）。2018年了，22岁了，去年浪了一年，感觉自己基本上没有多大的进步。这是我一生中最好的年纪，不能再挥霍了，提升自己才能有更好的未来，加油！