Toolbar 是 Google 在安卓 5.0(LOLLIPOP) 推出的一个控件,在安卓 3.0 时代 Google 推出了 ActionBar,而 Toolbar 完全是用来替代 ActionBar 的。既然叫 Toolbar,怎么会不能实现某些需求?
使用
系统版本 >= 5.0
主题要继承 @android:style/Theme.Material
,这样我们的 Activity 的标题栏默认都是 android.widget.Toolbar
,如果需要在布局中使用 Toolbar,那么主题需要设置成 NoActionBar
样式,并且代码中调用方法 setActionBar(android.widget.Toolbar)
,如:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_layout)
Toolbar toolbar = findViewById(R.id.toolbar)
setActionBar(toolbar)
}
系统版本 < 5.0
前面说到过,Toolbar 是 5.0 才推出的一个控件,5.0 以下系统是无法使用的,而 Google 推出了向下兼容库v7-compat
,使用android.support.v7.widget.Toolbar
,使用步骤如下:
- 项目中引入
com.android.support:appcompat-v7:version-code
- 主题要继承
Theme.AppCompat
- Activity 继承
AppCompatActivity
这样我们的 Activity 的标题栏默认都是 android.support.v7.widget.Toolbar
,如果需要在布局中使用 Toolbar,那么主题需要设置成 NoActionBar
样式,并且代码中调用方法 setSupportActionBar(android.support.v7.widget.Toolbar)
,如:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_layout)
Toolbar toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
}
下面列举不同需求场景的实现方式
标题居中
获取 Toolbar 中的第一个子 View,重置 LayoutParams,示例:
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Toolbar toolbar = findViewById(R.id.toolbar);
View titleView = toolbar.getChildAt(0);
Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams
(Toolbar.LayoutParams.WRAP_CONTENT,
Toolbar.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
titleView.setLayoutParams(layoutParams);
}
上面代码是将 Toolbar 组件内嵌显示标题的 TextView 重置 LayoutParams,当然也可直接调用 Toolbar.addView(View)
方法,添加自己创建的控件来显示标题。如果是在布局中使用了 Toolbar,也可以直接在布局中为 Toolbar 标签中添加一个显示标题控件,然后实现居中。
友情提醒:假如不用 Toolbar 组件内嵌显示标题的 TextView 时,一定要调用
ActionBar.setDisplayShowTitleEnabled(false)
方法禁止显示标题。
更改标题字体大小和颜色
此需求主要是会对使用 Toolbar 组件默认显示标题的方式时解决办法
代码设置
// 更改颜色
Toolbar.setTitleTextColor(@ColorInt int color)
// 更改颜色和大小
Toolbar.setTitleTextAppearance(Context context, @StyleRes int resId)
主题设置
-
系统版本 >= 6.0,主题采用 Theme.Material
直接设置属性
android:titleTextColor
,大小设置参考 系统版本 >= 5.0 -
系统版本 >= 5.0,主题采用 Theme.Material
直接设置属性
android:textColorPrimary
可更改颜色,大小设置参考下面两种情况主题采用非 NoActionBar 样式
设置属性
android:actionBarStyle
,然后在定义的actionBarStyle
样式中定义属性android:titleTextStyle
,此属性为 TextAppearance,可定义字体大小与颜色主题采用 NoActionBar 样式(布局中使用 Toolbar )
设置属性
android:toolbarStyle
,,然后在字义的toolbarStyle
样式中定义属性android:titleTextAppearance
,可定义字体大小与颜色 -
系统版本 < 5.0,主题采用 Theme.AppCompat
目前开发需要兼顾低版本,所以实际开发中,上面说的两种情况基本不会用到,所以采用此方式可以兼容上面提到的方案
主题采用非 NoActionBar 样式
设置属性
actionBarStyle
,然后在定义的actionBarStyle
样式中定义属性titleTextStyle
,此属性为 TextAppearance,可定义字体大小与颜色主题采用 NoActionBar 样式(布局中使用 Toolbar )
设置属性
toolbarStyle
,,然后在定义的toolbarStyle
样式中定义属性titleTextAppearance
,可定义字体大小与颜色
添加其它 View 并居中
请参考文章开头提到的 标题居中 处理方案
返回按钮
显示返回图标
代码调用方法 ActionBar.setDisplayHomeAsUpEnabled(true)
ActionBar.setDisplayHomeAsUpEnabled(true);
更改返回图标
调用ActionBar.setDisplayHomeAsUpEnabled(true)
方法后默认显示的图标如下图拨所示:
代码调用Toolbar.setNavigationIcon()
方法自定义 icon,主题中设置属性homeAsUpIndicator
监听返回按钮点击事件
直接上代码:
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// onBackPress()
}
});
或者
//重写 Activity 方法
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
// onBackPress()
return true;
}
return super.onOptionsItemSelected(item);
}
布局中使用,设置属性navigationIcon
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:navigationIcon="@drawable/ic_close_black_24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
右上角添加操作按钮
此场景依然可以参考场景 标题居中 中添加自定义 View 的方式,只是将方向改为 right 即可,这里不重点讲解,下面主要讲解一种优雅的方式
不管是图标按钮
还是文字按钮
,都可以通过给 Activity 设置 menu 实现,这里就不讲解 menu 的使用,这里主要讲解当按钮是纯文本时的样式修改(图标按钮能用)
主题中设置属性actionButtonStyle
即可定制外观样式,如果只是想修改文字颜色,设置属性actionMenuTextColor
即可,如果还要设置文字大小,找属性actionMenuTextAppearance
进行设置。
修改 OverflowButton 样式
首先普及下 OverflowButton
是啥玩意,当我们使用 action menu 时,点击展开更多选项的那个按钮,如下图 icon :
见到这熟悉的三个黑点,是不是瞬间知道是什么东西了。那么怎么更改这个图标了?依然设置主题,设置属性actionOverflowButtonStyle
就可以更换你们设计师所设计的图标了。
高度
相应大家都发现 Toolbar 默认的高度(56dp)
并不是咱们设计师所设计的尺寸(88px)
,老规矩,设置主题样式,属性actionBarSize
结语
至此,虽然此文章并非把所有有关 Toolbar 的样式设置都有讲到,但基本列举出了开发中一些常用的需求场景,如果你还有其它设计需求不知道怎么实现或没找到实现方式,欢迎大家留言一起探讨。最后奉上一张图: