引言
原生的Toolbar的title是居右显示的，而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp，而设计图上面是按照iOS来设计，所以返回按钮是8dp，本篇就此进行适配。
正文
NavigationIcon间隙
先看看原来的样式，我这里为了演示，特地换了一个返回箭头。
返回原始样式
修改BaseToolbarStyle
然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置：
<!--标题栏的样式-->
<style name="BaseToolbarStyle" parent="Widget.AppCompat.Toolbar">
<!--内容距离开始 边距-->
<item name="contentInsetStart">8dp</item>
<!--内容距离 导航按钮 边距-->
<item name="contentInsetStartWithNavigation">8dp</item>
<!--使自定义view可以贴左右的边，多数版本的系统不要下面两句也可以，但少量版本必须加下面的两句-->
<item name="android:paddingLeft">8dp</item>
<!--右内边距-->
<item name="android:paddingRight">0dp</item>
<!--最小高度-->
<item name="android:minHeight">?actionBarSize</item>
<!--高度-->
<item name="android:layout_height">?actionBarSize</item>
<!--id-->
<item name="android:id">@id/base_toolbar</item>
<!--宽度-->
<item name="android:layout_width">match_parent</item>
<item name="actionMenuTextColor">#000</item>
</style>
新增ToolbarNavigationButtonStyle
再新增一个ToolbarNavigationButtonStyle作为返回按钮的样式：
<!--标题栏返回按钮样式-->
<style name="ToolbarNavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:minWidth">16dp</item>
</style>
AppTheme.ToolbarHeight
新建一个AppTheme.ToolbarHeight作为Activity的样式：
<style name="AppTheme.ToolbarHeight">
<!--修改了标题栏默认样式的样式
修改了返回按钮的边距
-->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="toolbarNavigationButtonStyle">@style/ToolbarNavigationButtonStyle</item>
<!--NavigationIcon的宽度-->
<item name="toolbarStyle">@style/BaseToolbarStyle</item>
</style>
修改AndroidManifest
最后将AndroidManifest中Activity的them替换成AppTheme.ToolbarHeight。
<activity
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
可以看到，原本的默认标题已经没有了。
新增Title和BackText
其实这一步比较简单，现在的Toolbar是继承至ViewGroup，这就意味着Toolbar能放子View，所以我们像以下这样写就行，为了后面方便，我已经将样式抽取出来了。
<android.support.design.widget.AppBarLayout style="@style/BaseAppBarLayoutStyle">
<android.support.v7.widget.Toolbar
style="@style/BaseToolbarStyle"
app:popupTheme="@style/AppTheme.PopupOverlay">
<TextView
style="@style/ToolBarNavTextStyle"
android:text="返回" />
<TextView
style="@style/ToolBarTitleStyle"
android:text="Toast示例" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
另外两个样式：
<style name="ToolBarNavTextStyle">
<!--标题栏返回文字样式-->
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<!--返回按钮和返回文字之间的间隔-->
<item name="android:layout_marginLeft">2dp</item>
<item name="android:gravity">center</item>
<item name="android:layout_alignParentBottom">true</item>
<item name="android:textColor">@color/ToolbarNavTextColor</item>
<item name="android:textSize">@dimen/ToolbarNavTextSize</item>
<item name="android:id">@id/toolbar_nav_text</item>
</style>
<style name="ToolBarTitleStyle">
<!--标题栏 标题样式-->
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/white</item>
<item name="android:layout_gravity">center</item>
<item name="android:background">@null</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_centerInParent">true</item>
<item name="android:id">@id/tv_toolbar_title</item>
</style>
值得注意的是，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，这比较繁琐、也没什么意义，所以下章我们就着手解决这个问题。
微信公众号
来都来了，就给个关注吧，时不时会悄悄的推送一些小技巧的文章~~
AndroidRookie
