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的内容。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 128,724评论 19 550
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 3,130评论 0 4
  • 9日火车票23.5元 11日两个耳钉,一个银饰项链100,浴帽12,头发精油45元,午饭13元 12日早餐8元,晚...
    惜真静雅阅读 29评论 0 0
  • 今天是树獭先生写作训练营日更三十天最后一天。开心啊,终于不用每天写一千字以上的文章了。 日更对我而言,真的挺困难的...
    杨咩咩YY阅读 19评论 0 0
  • (一) 懵逼的开始 作为一个文字功底很差的理科生来说要写一篇文章输出,我真不知从何说起,一脸懵逼,写...
    再笑阅读 165评论 0 1