在 2014 年 Google IO 大会上,Google 推出了一套全新的设计规范 Material Design,这也为广大的 Android 开发者带来了福音,不用像以前一样照着 IOS 视觉稿来开发 Android APP,Material Design 的视觉风格本身就比较炫酷。请看 Material Design 中文版,而Google 也为我们提供符合Material Design 风格的一系列组件,这大大的提高了我们的开发效率。
二、概述官方介绍:A Toolbar is a generalization of action bars for use within application layouts.
意思就是 Toolbar 是应用内的 action bars 的一个归纳。来看一下 Toolbar 的类继承关系,如下图: 一个 Toolbar 从左到右包括了 一个 navigation button、一个 logo、一个 title 和 subtitle 、一个或多个自定义的 View 和一个 action menu 这5部分。也就是这个 ViewGroup 容器里面包含了这五部分内容,对应着一个界面看一下:
1. 常用属性
-
toolbar:navigationIcon 设置navigation button
-
toolbar:logo 设置logo 图标
-
toolbar:title 设置标题
-
toolbar:titleTextColor 设置标题文字颜色
-
toolbar:subtitle 设置副标题
-
toolbar:subtitleTextColor 设置副标题文字颜色
-
toolbar:popupTheme Reference to a theme that should be used to inflate popups shown by widgets in the toolbar.
-
toolbar:titleTextAppearance 设置title text 相关属性,如:字体,颜色,大小等等
-
toolbar:subtitleTextAppearance 设置subtitle text 相关属性,如:字体,颜色,大小等等
-
toolbar:logoDescription logo 描述
-
android:background Toolbar 背景
-
android:theme 主题
注意:开头是自定义命名空间 xmlns:toolbar="http://schemas.android.com/apk/res-auto"
, 而不是 android,如果使用android:navigationIcon 这种事无效的,必须使用 toolbar:navigationIcon):
2. 重要方法
//设置NavigationIcon
toolbar.setNavigationIcon(R.drawable.ic_book_list);
// 设置navigation button 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
// 设置 toolbar 背景色
toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
// 设置 Title
toolbar.setTitle(R.string.toolbar_title);
// 设置Toolbar title文字颜色
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
// 设置Toolbar subTitle
toolbar.setSubtitle(R.string.sub_title);
toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
// 设置logo
toolbar.setLogo(R.mipmap.ic_launcher);
// 设置 NavigationIcon 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置 Toolbar menu
toolbar.inflateMenu(R.menu.setting_menu);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//点击设置
break;
}
return false;
}
});
四、基本使用
1. 在清单文件中,修改 Theme 主题。
2. 在 Activity 的布局文件中添加 Toolbar
3. 在 Fragment 中对 Toolbar 做一些相关的操作,如:设置标题,设置navigation button 点击事件,添加溢出菜单
public class BFragment extends BaseFragment {
@BindView(R.id.toolbar)
Toolbar mToolbar;
@Override
protected int layoutId() {
return R.layout.fragment_b;
}
@Override
protected void initView(View view) {
initToolbar();
}
private void initToolbar() {
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//TODO
}
});
//添加溢出菜单
mToolbar.inflateMenu(R.menu.setting_menu);
// 添加菜单点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//点击设置菜单
break;
}
return false;
}
});
}
@Override
protected void initData() {
}
}
4. 溢出菜单文件如下:
注意: app:showAsAction ,这个属性是设置菜单该怎么显示,取值有5种,主要应用的有 ifRoom、never、always 这三种, ifRoom 表示 如果 Toolbar 上有显示空间就显示在 Toolbar 上,如果没有空间就展示在溢出菜单里,never 表是总是显示在溢出菜单里,always 表示总是显示在Toolbar 上。
五、项目中特殊需求1. 更改溢出菜单文字的颜色和文字的大小 要更改溢出菜单文字的颜色,我们只需要为Toolbar 添加一个主题,在styles.xml 文件中添加一个主题:
@android:color/holo_red_dark
16sp
效果如下:
2. 更改显示在Toolbar 上的菜单文字颜色 显示在 Toolbar 上的 发布 菜单,默认显示是黑色,设计师肯定不干了,要你更改颜色。在 style 中添加如下代码:
@android:color/white
最后,贴出 Toolbar 主题的全部代码:
@style/OverFlowIcon
@android:color/holo_red_dark
@android:color/white
15sp
@drawable/abc_ic_menu_moreoverflow_mtrl_alpha
3. 在Toolbar 上添加 自定义 View 布局文件