自定义ToolBar的样式

Toolbar我在之前的一篇文章中介绍过相关的一些用法，今天详细给大家说一下配置toolbar的具体细节。

当你选择深色主题是时候android默认给我们配上的是浅色的toolbar样式，具体是toolbar上的图标还有溢出菜单（右侧三个小圆点）都是白色的，如果整个项目的主题是浅色的，那android为我们配上的则是深色的toolbar样式，可能你的项目是浅色的主题，但是你还想配上浅色的toolbar来为用户导航，这时候也不是没有办法的，强大的android总是充分的为开发者考虑。这时候你可以自定义toolbar的样式，然后在toolbar控件中，使用自定义的style即可

下面我为大家贴上一段代码供大家参考：

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#00aacc</item>
        <item name="colorPrimaryDark">#00aacc</item>
        <!--设置溢出菜单（三个小圆点）跟bar上图标的颜色-->
        <item name="android:textColorSecondary">#FFFFFF</item>
        <item name="colorAccent">#ef0b904f</item>

    </style>

    <!--自定义溢出菜单的主题，一定要继承自“Widget.AppCompat.PopupMenu.Overflow”-->
    <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
        <!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <!-- 弹出层背景颜色 -->
        <item name="android:popupBackground">#FFFFFF</item>
        <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
        <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">0dp</item>
    </style>

    <style name="mytoolbar" parent="@style/Widget.AppCompat.PopupMenu.Overflow">

        <item name="colorPrimaryDark">#00aacc</item>
        <item name="colorAccent">#FFFFFF</item>
    </style>
</resources>

在toolbar.xml文件中使用自定义的style

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/OverflowMenuStyle"
        android:background="?attr/colorPrimary">

        <!--自定义控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:padding="5dp"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold|italic"
            />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

在你的主activity中的onCreat()方法中简单配置下就OK了

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
//使用溢出菜单（三个小圆点）
        mToolbar.inflateMenu(R.menu.menu_main);

        initView();
    }

动手做一下是不是也觉得自己定制toolbar的样式也没那么难哇!

附上一张图，加深大家对toolba上各个位置的理解