Toolbar爬坑历程

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

简单使用

猜你喜欢