Android---Toolbar

news2024/11/26 2:44:35

Toolbar 设置 Theme

完整 Demo

Toolbar 是在 Android 5.0 开始推出的一个 Materal Design 风格的导航控件，Google 非常推荐大家使用 Toobar 来作为 Android 客户端的导航栏，以此来取代之前的 Actionbar。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在 Activity 的顶部，而是可以放到界面的任意位置。

注意：在使用 Toolbar 时，整个 App 的 Theme 必须是 NoActionBar, 不然应用会出错。

除此之外，在设计 Toolbar 的时候，Google 也留给了开发者很多可定制修改的余地，这些可定制修改的属性在 API 文档中都有详细介绍，如：

$\bullet$ 设置导航栏图标；

$\bullet$ 设置 APP 的logo；

$\bullet$ 支持设置标题合子标题；

$\bullet$ 支持 Action Menu；

在布局文件中的属性：

$\bullet$ app:navigationIcon 设置 navigation button

app:navigationIcon="@mipmap/back_icon"

$\bullet$ app:logo 设置 logo 图标

app:logo="@drawable/ic_tool_logo"

$\bullet$ app:title 设置标题(正标题)

$\bullet$ app:titleTextColor 设置正标题文字颜色

$\bullet$ app:subtitle 设置副标题

$\bullet$ app:subtitleTextColor 设置副标题文字颜色

$\bullet$ app:theme 主题

$\bullet$ app:popupTheme 设置点击右上角''..." 的主题，改变 UI 展示效果

app:popupTheme="@style/ToolBarPopupTheme"

TollBarPopupTheme 内容如下。放在了 values --> Thems --> Themes.xml 里。

<!-- 设置”...“ 点击时的主题(即右上角的那个menu) -->
    <style name="ToolBarPopupTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">#616161</item><!--设置背景颜色的-->
        <item name="android:textColorPrimary">@android:color/white</item><!--设置文字颜色的-->
        <item name="android:textSize">16sp</item><!--设置文字大小的-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--设置弹出位置的主题-->
        <item name="android:paddingEnd">-5dp</item><!--设置点击”...“弹出的菜单的位置 ，负数是往右移-->
    </style>

$\bullet$ android:backgroundTint 应用于background 的色彩。而background是一个可绘制的背景，可以是一个完全可绘制资源的引用（例如图片、可调整大小位图9-patch、XML状态列表描述、etc），或者是纯色如黑色。backgroundTint只能用颜色，而background有引用、图片和颜色。如果你只是要给背景上纯色的话，建议用backgroundTint，如果你要用背景图片的话，就用background，可以分别提高对应的执行效率！

android:backgroundTint="#afbfff"

$\bullet$ android:backgroundTindMode 当我们既设置了 android:background 又设置了 android:backgroundTint 时，那么就会将 android:backgroundTint 设置的颜色与背景进行一个叠加，叠加的常用模式如下：

1. PorterDuff.Mode.SRC_OVER 正常绘制显示，上下层绘制叠盖。

2. PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层

3. PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分

4. PorterDuff.Mode.SCREEN 取两图层全部区域，交集部分变为透明色

android:backgroundTintMode="src_over"

如下图，当我们设置完 toolbar 时，并没有右侧的 menu ？

我们可以给 Toolbar 加上右侧的 menu (那三个"...")，在 toolbar 所在的 activity 中重写 onCreateOptionMenu() 方法即可实现。

/**
     * menu 与 toolbar 绑定
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.toolbar, menu);
        // TODO 拿到 toolbar 里的 item
        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) searchItem.getActionView();

        searchItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                return true;
            }
        });

        return super.onCreateOptionsMenu(menu);
    }

toolbar.xml 如下

<?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/action_favorite"
        android:icon="@drawable/nav_selector"
        android:title="@string/favorite"
        app:showAsAction="never" />

    <!-- Settings, should always be in the overflow -->
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_baseline_settings_64"
        android:title="@string/settings"
        app:showAsAction="never" />

    <item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_baseline_search_64"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />


</menu>

加上 menu 的效果

给 menu 的 item 设置点击事件，重写 onOptionsItemSelected() 方法。这里简单的进行了一个 Toast 弹窗，你可以进行丰富的其它设置。

/**
     *  menu 里 item 点击事件监听
     * @param item menu 里的 菜单
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                Toast.makeText(MainActivity.this, R.string.settings, Toast.LENGTH_SHORT).show();
                return true;
            case R.id.action_favorite:
                Toast.makeText(MainActivity.this, R.string.favorite, Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

Toolbar 设置 Theme

细心的朋友可以发现，上面 toolbar 与我们开始演示的 UI 还是有些区别，比如正副标题的颜色，menu 是横着的且是绿色的等。这时我们可以通过给 Toolbar 设置 Theme 来完成。

可以通过 textColorPrimary 来设置正标题字体颜色，textColorSecond 设置副标题字体颜色，同时必须实现 windowActionBar 和 windowNoTitle 。

<!--    使用ToolBar, 在 AndroidManifest 里的activity添加该 theme-->
    <style name="ToolBarAppTheme" parent="MaterialAppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- 修改右侧溢出菜单,副标题,navigation 的颜色-->
        <item name="android:textColorSecondary">@color/purple_500</item>
        <!-- 不能在这里修改弹出框的右边距-->
        <!--        <item name="android:paddingEnd">-5dp</item>-->
        <!-- 设置文字颜色的-->
        <item name="android:textColorPrimary">@color/Green700</item>
        <!-- 设置文字大小的-->
        <item name="android:textSize">16sp</item>
        <!-- 注意设置的位置  -->
        <item name="actionOverflowButtonStyle">@style/OverflowTheme</item>
        <item name="toolbarStyle">@style/NoSpaceActionBarTheme</item>
    </style>

actionOverflowButtonStyle 可以用来设置 menu 的样式，让右上角的 ”...“ 横着显示，且设置它的颜色，OverflowTheme 内容如下：

    <style name="OverflowTheme" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_tool_more_horiz_24</item>
    <item name="android:paddingStart">12dp</item>
    <item name="android:paddingEnd">12dp</item>

最后完成上面的 Theme 设置，那么我们要在哪里用 ToolBarAppTheme 呢？答案是 AndroidMnifest 里，加在 Toolbar 所在 activity 上。这样就可以显示我们想要的效果了。