Toolbar 是 Google 在安卓 5.0(LOLLIPOP) 推出的一个控件,在安卓 3.0 时代 Google 推出了 ActionBar,而 Toolbar 完全是用来替代 ActionBar 的。既然叫 Toolbar ,怎么会不能实现某些需求?
主题要继承
,这样我们的 Activity 的标题栏默认都是
- @android:style/Theme.Material
,如果需要在布局中使用 Toolbar,那么主题需要设置成
- android.widget.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)
- }
前面说到过,Toolbar 是 5.0 才推出的一个控件,5.0 以下系统是无法使用的,而 Google 推出了向下兼容库
,使用
- v7-compat
,使用步骤如下:
- android.support.v7.widget.Toolbar
- com.android.support:appcompat-v7:version-code
- Theme.AppCompat
- AppCompatActivity
这样我们的 Activity 的标题栏默认都是
,如果需要在布局中使用 Toolbar,那么主题需要设置成
- android.support.v7.widget.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,也可以直接在布局中为 Toolbar 标签中添加一个显示标题控件,然后实现居中。
- Toolbar.addView(View)
友情提醒:假如不用 Toolbar 组件内嵌显示标题的 TextView 时,一定要调用
方法禁止显示标题。
- ActionBar.setDisplayShowTitleEnabled(false)
此需求主要是会对使用 Toolbar 组件默认显示标题的方式时解决办法
- // 更改颜色
- Toolbar.setTitleTextColor(@ColorInt int color)
- // 更改颜色和大小
- Toolbar.setTitleTextAppearance(Context context, @StyleRes int resId)
直接设置属性,大小设置参考 系统版本 >= 5.0
- android:titleTextColor
直接设置属性主题采用非 NoActionBar 样式可更改颜色,大小设置参考下面两种情况
- android:textColorPrimary
设置属性主题采用 NoActionBar 样式(布局中使用 Toolbar ),然后在定义的
- android:actionBarStyle
样式中定义属性
- actionBarStyle
,此属性为 TextAppearance,可定义字体大小与颜色
- android:titleTextStyle
设置属性,,然后在字义的
- android:toolbarStyle
样式中定义属性
- toolbarStyle
,可定义字体大小与颜色
- android:titleTextAppearance
目前开发需要兼顾低版本,所以实际开发中,上面说的两种情况基本不会用到,所以采用此方式可以兼容上面提到的方案主题采用非 NoActionBar 样式
设置属性主题采用 NoActionBar 样式(布局中使用 Toolbar ),然后在定义的
- actionBarStyle
样式中定义属性
- actionBarStyle
,此属性为 TextAppearance,可定义字体大小与颜色
- titleTextStyle
设置属性,,然后在定义的
- toolbarStyle
样式中定义属性
- toolbarStyle
,可定义字体大小与颜色
- titleTextAppearance
请参考文章开头提到的 标题居中 处理方案
代码调用方法
- ActionBar.setDisplayHomeAsUpEnabled(true)
- ActionBar.setDisplayHomeAsUpEnabled(true);
调用
方法后默认显示的图标如下图拨所示:
- ActionBar.setDisplayHomeAsUpEnabled(true)
代码调用
方法自定义 icon,主题中设置属性
- Toolbar.setNavigationIcon()
- 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
首先普及下
是啥玩意,当我们使用 action menu 时,点击展开更多选项的那个按钮,如下图 icon :
- OverflowButton
见到这熟悉的三个黑点,是不是瞬间知道是什么东西了。那么怎么更改这个图标了?依然设置主题,设置属性
就可以更换你们设计师所设计的图标了。
- actionOverflowButtonStyle
相应大家都发现 Toolbar 默认的高度
并不是咱们设计师所设计的尺寸
- (56dp)
,老规矩,设置主题样式,属性
- (88px)
- actionBarSize
至此,虽然此文章并非把所有有关 Toolbar 的样式设置都有讲到,但基本列举出了开发中一些常用的需求场景,如果你还有其它设计需求不知道怎么实现或没找到实现方式,欢迎大家留言一起探讨。最后奉上一张图:
来源: https://juejin.im/post/5a31ec946fb9a044fc44c08d