Toolbar爬坑历程

    xiaoxiao2026-05-24  1

    Toolbar的介绍我就不说了,最近没有什么事重新弄了一下Toolbar,毕竟之前没有使用过。不用不知道,一用吓一跳,出现了各种坑。网上查了各种文章、各种资料,一个个试了一遍终于实现了自己想要的效果。把网上的资料做个汇总。

    简单使用

    首先需要修改你的 Theme,去除Actionbar的主题。

    <!-- 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>

    其中属性 colorPrimary 、colorPrimaryDark 是可以修改 Toolbar 的背景,以及状态栏的背景颜色。这方面的资料网上已经很多,就不再这里啰嗦了。

    之后在布局文件中,引入Toolbar控件,为了兼容低级版本的系统,需要引用 V7 包中的 Toolbar 控件。Toolbar是继承 ViewGroup 的一个控件,也就意味着它能做其他控件的父控件。因此可以直接包含一个 TextView 实现文字居中的效果。代码如下:

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="qhh.toolbardemo.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:logo="@mipmap/ic_launcher" app:popupTheme="@style/ToolBarPopTheme" app:subtitle="subtitle" app:subtitleTextColor="@android:color/white" app:theme="@style/MyToolbarTheme" app:title="title" app:titleTextColor="@android:color/white"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="@color/white" android:text="标题"/> </android.support.v7.widget.Toolbar> </LinearLayout>

    今天在弄Toolbar的时候,就注意了这两个属性(因为坑了很久,真真的长了记性了)。

    app:popupTheme="@style/ToolBarPopTheme" app:theme="@style/MyToolbarTheme"

    首先说说 popupTheme,该属性是用来修改 Toolbar 弹出菜单的样式主题。

    <!--修改弹出框背景--> <!--<item name="android:actionOverflowButtonStyle">@style/OverFlowMenuStyle</item>--> <style name="ToolBarPopTheme" parent="@style/ThemeOverlay.AppCompat"> <item name="android:colorBackground">#71f475</item> <item name="actionOverflowMenuStyle">@style/OverFlowMenuStyle</item> </style> <!--修改弹出框出现位置--> <style name="OverFlowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item> </style>

    name=”android:colorBackground” 则是修改 menu 中的 item 的背景颜色。 name=”actionOverflowMenuStyle” 和 OverFlowMenuStyle 是将弹出的菜单框置于 Toolbar 之下。 这些都很容易就实现,但是在修改menu中的item的文字颜色的时候,则出现了问题。在网上找了很多方法,都没有能实现。最后发现修改 menu item的文字颜色,并不在 popupTheme 中进行设置。而是在app:Theme 中设置。

    <style name="MyToolbarTheme" parent="@style/ThemeOverlay.AppCompat"> <item name="actionMenuTextColor">@android:color/holo_blue_bright</item> <item name="android:textColorSecondary">@color/white</item> <item name="android:textColor">#0dccb9</item> </style>

    如果设置的是 actionMenuTextColor 还是会发现,在menu中的item 的属性是 app:showAsAction="never" 则会发现,所设置的颜色病不起作用,而属性为 app:showAsAction=”ifRoom” 则有效果。网上各种找之后,找到了答案。设置 never 的item 字体颜色 应该使用的是 android:textColor。

    android:textColorSecondary 这个属性则是设置,Toolbar 右边三个默认小点的颜色的。也可以通过 <item name="android:actionOverflowButtonStyle">@style/OverFlowMenuStyle</item> 对默认的右边图片进行更换。

    然而,在这里遇到了今天最大的坑。在设置 android:textColorSecondary 的时候,最好不要放在 AppTheme 中。

    <!-- Base application theme. --> <!--不应该 textColorSecondary 放在此段代码中--> <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>

    而应该将其放在 Toolbar 自己的 Theme 中

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:logo="@mipmap/ic_launcher" app:popupTheme="@style/ToolBarPopTheme" app:subtitle="subtitle" app:subtitleTextColor="@android:color/white" app:theme="@style/MyToolbarTheme" app:title="title" app:titleTextColor="@android:color/white"> <style name="MyToolbarTheme" parent="@style/ThemeOverlay.AppCompat"> <item name="actionMenuTextColor">@android:color/holo_blue_bright</item> <item name="android:textColorSecondary">@color/white</item> <item name="android:textColor">#0dccb9</item> </style>

    为什么呢?因为今天在使用 NavigationView 和Toolbar 一起联合使用的时候报错了,无法解析加载xml文件,功底浅,不明白具体的原理。最后在 stackoverflow 中找到问题所在, stackoverflow中有人提出,最好不要在 AppTheme 中设置类似的属性,在想是不是兼容性的问题呢?最后,经过尝试将其使用在 Toolbar的 Theme中就没有问题了,不知道哪位看官大神能详细的解释一下。

    转载请注明原文地址: https://ju.6miu.com/read-1310029.html
    最新回复(0)