Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件，用来代替以之前的ActionBar。尽管Google诚意满满，使用Toolbar依然是一部踩坑填坑的血泪史。
对于ToolbarGoogle给开发者留了很多可定制修改的余地。官方文档
- 设置导航按键
- 设置程序Logo
- 设置主/副标题
- 设置一个或多个自定义控件
- 支持acition menu
1. Toolbar的引入
Toolbar用来替代ActionBar,所以Activity的Theme设置成NoActionBar的例如Theme.AppCompat.Light.NoActionBar或者在代码中去掉导航栏在onCreate()中添加supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
1.1 添加兼容包依赖
Toolbar是向下兼容的，所以使用时添加support依赖包compile 'com.android.support:appcompat-v7:23.1.1'
1.2 在布局文件中引入Toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="@drawable/ic_drawer_home"//导航图标
app:logo="@mipmap/ic_launcher"//程序logo
app:title="Title"//主标题
app:subtitle="SubTitle"//副标题>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="custom view"
android:textColor="#fff"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
1.3 在代码中设置Toolbar替代ActionBar
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//Toolbar 代替ActionBar
}
程序预览
2. 标题字体样式的自定义
简单的引入了
Toolbar,但这并不能满足我们的开发要求。标题的字体样式我们总得按照设计稿来吧。
2.1 修改标题字体颜色
app:titleTextColor="@color/colorAccent"//修改主标题字体颜色
app:subtitleTextColor="@color/colorAccent"//修改副标题字体颜色
2.2 修改标题字体大小
修改字体大小就比较坑了，我没找到设置字体大小的直接属性。可能Toolbar的设计中会自动设置标题的字体大小为一个合适的值。其实用默认的大小基本ok。如果想要修改字体大小可以尝试下面的方法。
我在样式文件中定义了需要样式的父类样式，所以后面 的样式都没写parent,他们都自动继承这个样式
<!--Toolbar 样式-->
<style name="Theme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
</style>
2.2.1 在styles.xml定义标题的字体样式
<!--Toolbar 主标题的字体和颜色-->
<style name="Theme.Toolbar.Title">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/colorAccent</item>
</style>
<!--Toolbar 副标题的字体和颜色-->
<style name="Theme.Toolbar.SubTitle">
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/colorAccent</item>
</style>
2.2.2 在布局文件中使用样式
app:subtitleTextAppearance="@style/Theme.Toolbar.SubTitle"
app:titleTextAppearance="@style/Theme.Toolbar.Title"
3. Action Menu的添加
由于上面已经通过setSupportActionBar(toolbar)将Toolbar设置成了程序的ActionBar。菜单布局的渲染和菜单按键的监听可以直接在Activity的回调方法中实现
3.1 创建菜单布局文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu1"
android:icon="@drawable/ic_search"
android:title="menu1"
app:showAsAction="always" />
<item
android:id="@+id/menu2"
android:icon="@drawable/ic_notifications"
android:title="menu2"
app:showAsAction="never" />
</menu>
3.2 加载菜单布局文件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toobar, menu);
return super.onCreateOptionsMenu(menu);
}
3.3 设置菜单点击回调监听
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu1:
Toast.makeText(ToolbarActivity.this, "item1:" + item.getTitle().toString(), Toast.LENGTH_SHORT).show();
break;
case R.id.menu2:
Toast.makeText(ToolbarActivity.this, "item2" + item.getTitle().toString(), Toast.LENGTH_SHORT).show();
break;
}
return super.onOptionsItemSelected(item);
}
4. Action Menu样式的自定义
如图预览所示，这里会有下面几个问题：
- 显示更多菜单按键由系统生成和其他图标不符
- 菜单弹窗背景字体样式等的自定义
- 菜单弹窗中子菜单项图标没有显示（运行到手机也没显示）
4.1 显示更多菜单图标的替换
4.1.1 在styles.xml样式文件中定义Toolbar的样式
<!--Toolbar 样式-->
<style name="Theme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="actionOverflowButtonStyle">@style/Toolbar_action_menu</item>
</style>
<!--更多菜单图标-->
<style name="Toolbar_action_menu">
<item name="android:src">@drawable/ic_menu_more_overflow</item>
</style>
4.1.2 在布局文件中为Toolbar指定样式文件
android:theme="@style/Theme.Toolbar"
4.2 菜单弹窗背景、字体的自定义
4.2.1 在styles.xml样式文件中定义Toolbar菜单的样式
<!--菜单上文字的大小和颜色-->
<style name="Theme.Toolbar.PopMenu">
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/colorAccent</item>
<item name="android:background">@color/cl_1B2137</item>
</style>
4.1.2 在布局文件中为Toolbar弹窗菜单指定样式文件
app:popupTheme="@style/Theme.Toolbar.PopMenu"
4.3 菜单弹窗子菜单图标不显示解决方案
4.3.1 添加菜单显示的方法
//设置菜单选项图标是否显示
private void setIconEnable(Menu menu, boolean enable) {
if (menu != null) {
if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, enable);
} catch (Exception e) {
}
}
}
}
4.3.2 在创建菜单的时候设置图标是否显示
@Override
public boolean onCreateOptionsMenu(Menu menu) {
setIconEnable(menu, true);
getMenuInflater().inflate(R.menu.toobar, menu);
return super.onCreateOptionsMenu(menu);
}
在手机上运行显示截图如下
5. 关于主标题的显示问题
因为在代码中通过setSupportActionBar(toolbar);将Toolbar设置成了ActionBar,所以如果没有没置Toolbar的主标题，或者主标题设置为了空app:title=""，系统会获取Activity的lable字段设置为主标题。如果Activity的lable为空则会获取application的label字段设置title。解决这个问题需要在代码中添加getSupportActionBar().setDisplayShowTitleEnabled(false);
