ToolBar随心定制

临近年末，项目没什么新需求了，主要做一些code review和代码重构的工作。有一个工作是将我们app中的TitleBar替换为Android的原生控件ToolBar，ToolBar出来这么久，相信大家都不会陌生了。替换的工作并不难，但因为我们App原来的TitleBar是一个相对布局中间放了一些ImageButton和TextView等控件组成的，并不符合ToolBar的原生风格，所以我一开始打算放弃替换，但经过一番Google，发现原来还是可以轻松实现的，不得不感叹ToolBar的定制性真得很强。

我需要替换的TitleBar样式 原生风格的ToolBar

关于ToolBar的基本用法网上一大堆，不会的童鞋可以自己去Google，我这里简单总结一下如何更自由的定制ToolBar。

一. Title居中

ToolBar默认的主Title是居左的，但是我们可以通过自定义ToolBar的子View来达到显示居中Title的效果。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="自定义标题"
        android:textColor="@color/black"
        android:textSize="@dimen/title_center_textsize" />

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

这样还可以单独控制中间标题的字体颜色和大小等。使用TextView作为title后，toolbar.setTitle(...)就可以设置为空或者不用设置了。

二. 在ToolBar左侧放置Menu

在ToolBar添加Menu时，默认都是出现在右侧的，但我的需求是在左侧放置两个Menu，本来想通过设置NavigationIcon和logo来解决，但如果这样，只能设置两个图标在左边，而且图标之间的间距没办法调整，所以灵活性很差。后来发现一个非常好用的控件ActionMenuView，以前它可以搭配ActionBar来使用，现在同样可以用来自定义ToolBar的菜单。

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/title_height"
        android:background="@color/title_background"
        android:minHeight="@dimen/title_height"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <android.support.v7.widget.ActionMenuView
            android:id="@+id/action_menu_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/toolbar_title"
            style="@style/TitleBar.Text.Center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />


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

将ActionMenuView放在ToolBar子布局中的第一个，它就会绘制在左侧，还需要注意给ToolBar设置下面的属性（而且需要注意，这里要使用"app:xxx"而不是"Android:xxx"，否则会有兼容性问题），因为当没有设置NavigationIcon和logo时，ToolBar左侧默认有一小段空白：

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

然后我们需要给ActionMenuView加载菜单，代码很简单：

ActionMenuView actionMenuView = (ActionMenuView) toolbar.findViewById(R.id.action_menu_view);
getMenuInflater().inflate(R.menu.menu_toolbar_left, actionMenuView.getMenu());
// 点击事件
actionMenuView.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        return false;
    }
});

R.menu.menu_toolbar_left.xml文件就是放置在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/left_back_btn"
        android:icon="@drawable/ic_titlebar_back"
        android:title="后退"
        app:showAsAction="always"/>

    <item
        android:id="@+id/left_text_btn"
        android:title=""
        app:actionLayout="@layout/menu_layout_text_btn"
        app:showAsAction="always"/>

    <item
        android:id="@+id/left_icon_btn"
        android:icon="@drawable/ic_launcher"
        android:title=""
        app:showAsAction="always"/>

</menu>

左边菜单显示效果

细心的同学应该看到我第二个id为left_text_btn的菜单使用了app:actionLayout属性，这是使当前菜单显示你指定的layout布局，也是非常方便的定制功能。因为ToolBar中所有菜单的颜色必须统一指定（通过在AppTheme中指定"android:actionMenuTextColor"属性），没办法分开设置，所以如果需要单独设置某个菜单的颜色，可以指定它的app:actionLayout，上面的"@layout/menu_layout_text_btn"布局为一个简单的TextView，就不贴了，也可以通过代码指定：

MenuItem menuItem = actionMenuView.getMenu().findItem(R.id.left_text_btn);
menuItem.setActionView(R.layout.menu_layout_text_btn);

还有一个细节可能也有人关注到，就是如果菜单按钮是通过icon属性设置的图标按钮，长按就会出现Toast文字（title属性设置的文字）提示这个图标按钮的作用，即便title设为空字符串，也还是会弹出Toast，这是Android系统的默认设置，无法取消，如果实在不想要这个提示，可以通过指定其app:actionLayout为一个自定义的ImageButton来实现。注意当使用app:actionLayout属性定制菜单时，点击事件就需要通过设置app:actionLayout指定的layout中的View的Click监听来实现了

// 此时menuItem.getActionView()获取的View就是自定义的ImageButton或TextView
menuItem.getActionView().setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        
    }
});

默认的MenuItem点击效果为一个小圆形的水波纹效果，查看自带style是通过下面的资源文件实现的，自定义时可以指定为它以保持点击效果一致：

android:background="?attr/actionBarItemBackground"

三. Menu的间距和文字属性设置

有时我们需要设置按钮文字的颜色以及大小，还需要调整相邻按钮之间的间距，比如上图中可能有人会觉得"<"后退按钮和“关闭”按钮之间的间距太大了，这要如何调整呢？都可以通过指定Theme中的属性来设置。

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:actionMenuTextColor">@color/primary</item>
        <item name="android:actionMenuTextAppearance">@style/ActionMenuTextAppearance</item>
        <item name="android:actionButtonStyle">@style/ActionButtonStyle</item>
    </style>

android:actionMenuTextColor属性用来指定菜单文字的颜色，android:actionMenuTextAppearance是用来指定菜单文字的大小等属性

    <style name="ActionMenuTextAppearance" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
        <item name="android:textSize">@dimen/title_right_textsize</item>
        <item name="android:textStyle">normal</item>
    </style>

android:actionButtonStyle可以修改按钮的大小和间距

    <style name="ActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">
        <item name="android:minWidth">44dp</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
    </style>

这里因为api17以下使用的是paddingLeft和paddingRight，而api17以上使用的是paddingStart和paddingEnd（通过查看Widget.AppCompat.Light.ActionButton的style源码也可以看到），所以这里需要新建values-v17文件夹，在其下新建styles.xml来专门指定api17以上的ActionButtonStyle：

    <style name="ActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">
        <item name="android:minWidth">44dp</item>
        <item name="android:paddingStart">10dp</item>
        <item name="android:paddingEnd">10dp</item>
    </style>

ActionButton默认的android:minWidth属性值为48dp，默认左右的padding值为12dp。

ActionButton默认的android:minWidth属性值

所以如果我们需要修改按钮的间距，可以修改以上三个属性值，改小之后可以明显看到间距减小

minWidth改为20dp，左右padding改为0dp的效果

四. 总结

以上就是这次替换的一小点经验总结，右边的菜单通过直接给ToolBar添加Menu就可以了，当然你也可以通过自定义的方式实现。通过以上几点，我们可以看到ToolBar的非常灵活的可定制性，不仅如此，如果你的菜单还有更不一样的地方，可以把ToolBar中的内容全部通过自定义布局来实现，也就是全部通过ToolBar的子View们来展示ToolBar的内容。