自定义Toolbar的一些小技巧

简介: 1、改变Toolbar高度(解决图标不垂直居中)背景:实际使用中,toolbar默认高度有些大,会挤压内容。想将toolbar高度改小,将layout_height从wrap_content改为固定值。情况:toolbar的layout_height比默认高度小的时候,发现标题是居中的,但是两侧的图标不垂直居中而偏下了调查:网上有很多方法,基本都是无效的。甚至有人利用反射直接修改图标的imageview的gravity,非常复杂且右侧图标无法实现。

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样式


目录
相关文章
|
6月前
自定义tablayout,好用
自定义tablayout,好用
32 0
|
6月前
自定义tablayout中的tab样式
自定义tablayout中的tab样式
27 0
|
5月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
61 7
【Android UI】自定义带按钮的标题栏
|
4月前
自定义Toolbar以及使用
自定义Toolbar以及使用
|
6月前
|
XML Java Android开发
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
686 1
|
Java Android开发 Kotlin
Android 自定义加载动画Dialog弹窗
Android 自定义加载动画Dialog弹窗
339 0
Android 自定义加载动画Dialog弹窗
|
XML Android开发 数据格式
自定义ProgressBar(一)
ProgressBar是一个非常重要组件。通常用于向用户显示耗时操作完成的百分比。主要包括水平和圆形两种类型。讲解之前首先来讲一下样式属性设置,这个在自定义里面是核心部分。
1158 0
|
Android开发 容器
Android动态修改ToolBar的Menu菜单
Android动态修改ToolBar的Menu菜单 效果图 实现 实现很简单,就是一个具有3个Action的Menu,在我们滑动到不同状态的时候,把对应的Action隐藏了。
1788 0
|
Windows
自定义Window标题栏titleBar
自定义Window标题栏titleBar
377 0
自定义Window标题栏titleBar
|
Android开发 容器 数据格式
TabLayout的自定义
TabLayout的自定义,主要是通过setCustomView方法来添加自定义布局实现。 自定义TabLayout的实现主要包含以下几个步骤 ●创建自定义布局(这里我加了一个动画控件,可以替换成其他控件) ...
2032 0