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中就没有问题了,不知道哪位看官大神能详细的解释一下。