自定义Toolbar的一些小技巧

目录

1、改变Toolbar高度（解决图标不垂直居中）

2、改变toolbar弹窗菜单样式

3、改变toolbar整体样式

4、改变searchview样式

---

1、改变Toolbar高度（解决图标不垂直居中）

背景：实际使用中，toolbar默认高度有些大，会挤压内容。想将toolbar高度改小，将layout_height从wrap_content改为固定值。

情况：toolbar的layout_height比默认高度小的时候，发现标题是居中的，但是两侧的图标不垂直居中而偏下了

调查：网上有很多方法，基本都是无效的。甚至有人利用反射直接修改图标的imageview的gravity，非常复杂且右侧图标无法实现。

解决方法：

自定义一个样式如下：

<style name="AppBar" parent="Base.Widget.AppCompat.Toolbar">
    <item name="android:minHeight">45dp</item>
    <item name="android:background">@color/appbar_bg</item>
</style>

其中minHeight修改为toolbar想要的高度，然后为toolbar设置这个样式，同时layout_height也改为该值。这样图标就可以正常居中显示了。如下：

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar"
    android:layout_height="45dp"
    android:layout_width="match_parent"
    style="@style/AppBar">
</android.support.v7.widget.Toolbar>

2、改变toolbar弹窗菜单样式

xml中为toolbar添加下面代码

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

两种主要样式Dark是黑底白字，Light是白底黑字

注意要添加

xmlns:app="http://schemas.android.com/apk/res-auto"

这样只要替换popupTheme的值就可以改变弹窗菜单样式。

而且也可以自定义样式。

3、改变toolbar整体样式

自定义一个样式如下：

<style name="AppBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="colorAccent">@color/white</item>
</style>

两种主要样式Dark是灰色字体白色图标，Light是黑色字体黑色图标

其中textColorPrimary改变字体颜色，包括toolbar标题颜色等；colorAccent改变searchview的光标颜色。

然后在xml中为toolbar添加这个样式

app:theme="@style/AppBarTheme"

注意要添加

xmlns:app="http://schemas.android.com/apk/res-auto"

这样只要替换popupTheme的值就可以改变弹窗菜单样式。

而且也可以自定义样式。

4、改变searchview样式

自定义一个searchview样式如下：

<style name="SearchView" parent="Widget.AppCompat.SearchView">
    <item name="submitBackground">@color/a</item>
    <item name="queryBackground">@color/b</item>
</style>

在这个样式中可以修改searchview的各个属性，所有属性如下：

<item name="layout">@layout/abc_search_view</item>
<item name="queryBackground">@drawable/abc_textfield_search_material</item>
<item name="submitBackground">@drawable/abc_textfield_search_material</item>
<item name="closeIcon">@drawable/abc_ic_clear_mtrl_alpha</item>
<item name="searchIcon">@drawable/abc_ic_search_api_mtrl_alpha</item>
<item name="searchHintIcon">@drawable/abc_ic_search_api_mtrl_alpha</item>
<item name="goIcon">@drawable/abc_ic_go_search_api_mtrl_alpha</item>
<item name="voiceIcon">@drawable/abc_ic_voice_search_api_mtrl_alpha</item>
<item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
<item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>

在问题3的基础上修改如下

<style name="AppBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="colorAccent">@color/white</item>
    <item name="searchViewStyle">@style/SearchView</item>
</style>

这样就可以自定义searchview样式