Toolbar不能实现你的需求?

4,321 阅读5分钟

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,使用步骤如下:

  1. 项目中引入 com.android.support:appcompat-v7:version-code
  2. 主题要继承 Theme.AppCompat
  3. 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 的样式设置都有讲到,但基本列举出了开发中一些常用的需求场景,如果你还有其它设计需求不知道怎么实现或没找到实现方式,欢迎大家留言一起探讨。最后奉上一张图: