引言

原生的Toolbar的title是居右显示的，而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp，而设计图上面是按照 iOS 来设计，所以返回按钮是8dp，本篇就此进行适配。

正文

NavigationIcon间隙

先看看原来的样式，我这里为了演示，特地换了一个返回箭头。

修改BaseToolbarStyle

然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置：

8dp

8dp

8dp

0dp

?actionBarSize

?actionBarSize

@id/base_toolbar

match_parent

#000

新增ToolbarNavigationButtonStyle

再新增一个 ToolbarNavigationButtonStyle 作为返回按钮的样式：

16dp

AppTheme.ToolbarHeight

新建一个 AppTheme.ToolbarHeight 作为Activity的样式：

false

true

@style/ToolbarNavigationButtonStyle

@style/BaseToolbarStyle

修改AndroidManifest

最后将 AndroidManifest 中Activity的 them 替换成 AppTheme.ToolbarHeight 。

android:name=".module.example.DialogExampleActivity"

android:label="@string/title_activity_dialog_example"

android:theme="@style/AppTheme.ToolbarHeight" />

看看改进后的效果：

Title居中、BackText

清除默认Title

Toolbar在不设置Title的情况下默认是以 label 作为Title 的，所以第一步需要将Title设置为""，刚好前面我们封装了 initToolbar这个方法，我们在里面加上就行。

/**

* 初始化toolbar

*/

private void initToolbar() {

Toolbar mToolbar = findViewById(R.id.base_toolbar);

if (null != mToolbar) {

// 清除标题

mToolbar.setTitle("");

setSupportActionBar(mToolbar);

mToolbar.setBackgroundColor(getToolbarBackground());

//设置返回按钮

mToolbar.setNavigationIcon(getNavigationIcon());

mToolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

onNavigationOnClickListener();

}

});

isInitToolbar = true;

}

}

需要注意的是setTitle必需要在setSupportActionBar之前调用，否则将不起作用。

看看效果：

可以看到，原本的默认标题已经没有了。

新增Title和BackText

其实这一步比较简单，现在的Toolbar是继承至ViewGroup，这就意味着Toolbar能放子View，所以我们像以下这样写就行，为了后面方便，我已经将样式抽取出来了。

style="@style/BaseToolbarStyle"

app:popupTheme="@style/AppTheme.PopupOverlay">

style="@style/ToolBarNavTextStyle"

android:text="返回" />

style="@style/ToolBarTitleStyle"

android:text="Toast示例" />

另外两个样式：

wrap_content

match_parent

2dp

center

true

@color/ToolbarNavTextColor

@dimen/ToolbarNavTextSize

@id/toolbar_nav_text

wrap_content

wrap_content

@color/white

center

@null

18sp

true

@id/tv_toolbar_title

值得注意的是，BackText也是需要做点击事件的，所以我给他加了个id，然后再initToolbar中进行事件监听：

/**

* 初始化toolbar

*/

private void initToolbar() {

...

if (null != mToolbar) {

...

//返回文字按钮

View navText = findViewById(R.id.toolbar_nav_text);

if (null != navText) {

navText.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

onNavigationOnClickListener();

}

});

}

}

}

来看看效果吧：

结束

总结

本章的东西很少，基本上都是从style中进行配置，涉及的代码量并不是很多，起码初步达到了我们想要的效果。

问题

这种在 xml 中修改style的情况来适配会有一点问题，那就是每次我们新建Activity的时候都需要手动的更改 them、style，这比较繁琐、也没什么意义，所以下章我们就着手解决这个问题。

软广

一个痴心妄想想成为一个全屏(栈)工程师的程序猿。

来来，关注一下吧！