在 2014 年 Google IO 大会上，Google 推出了一套全新的设计规范 Material Design，这也为广大的 Android 开发者带来了福音，不用像以前一样照着 IOS 视觉稿来开发 Android APP，Material Design 的视觉风格本身就比较炫酷。
而 Google 也为我们提供符合 Material Design 风格的一系列组件，这大大的提高了我们的开发效率。由于 APP 改版在做 Material Design 化，所以后面会结合项目中的使用情况写几篇关于 Material Design 组件的文章，第一篇就从 Toolbar 开始吧。
一、ToolBar 介绍
Toolbar 是 Android5.0 中新引入的一个控件，其出现的目的就是为了取代 ActionBar。
而 Actionbar 在显示上应该算是应用 UI 的一部分，但是开发者又不能对其进行完全控制，因为它毕竟是由系统创建并对其进行相关参数的初始化。所以在实际开发中，很多开发者都是用布局生成一个模拟的 Actionbar 来代替系统的 Actionbar，基于这一点，Android 在 5.0 后推出一个新的控件 Toolbar 来取代 ActionBar。
二、ToolBar 属性
整理 Toolbar 比较常用的属性
1、toolbar:navigationIcon 设置 navigation button
2、toolbar:logo 设置 logo 图标
3、toolbar:title 设置标题
4、toolbar:titleTextColor 设置标题文字颜色
5、toolbar:subtitle 设置副标题
6、toolbar:subtitleTextColor 设置副标题文字颜色
7、toolbar:titleTextAppearance 设置 title text 相关属性，如：字体,颜色，大小等等
8、toolbar:subtitleTextAppearance 设置 subtitle text 相关属性，如：字体,颜色，大小等等
9、toolbar:logoDescription logo 描述
10、android:background Toolbar 背景
11、android:theme 主题
三、ToolBar 使用
本文是以最新的 androidx 环境下讲解，其实使用一模一样，就是包名有所变化。
使用 ToolBar 确保 Activity 继承的是 AppCompatActivity，
在应用清单中，将 application 元素设置为使用 appcompat 的其中一个 NoActionBar 主题。使用这些主题中的一个可以防止应用使用原生 ActionBar 类提供应用栏。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
xml 布局文件中添加 Toolbar 控件
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:subtitleTextColor="#FFF"
app:titleTextColor="#FFF"
tools:ignore="MissingConstraints" />
Activity 中初始化 Toolbar 相关属性
// 设置ToolBar标题
toolbar.setTitle("ToolBar");
// 设置ToolBar副标题
toolbar.setSubtitle("this is toolbar");
// 设置navigation button
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24,null));
// 设置Logo图标
toolbar.setLogo(getResources().getDrawable(R.drawable.ic_baseline_group_24,null));
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_baseline_more_vert_24,null));
// 设置Menu
toolbar.inflateMenu(R.menu.toolbar_menu);
// 设置Navigation Button监听
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
// 设置Menu监听
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.collect:
Toast.makeText(ToolBarActivity.this, "收藏", Toast.LENGTH_SHORT).show();
break;
case R.id.outLogin:
Toast.makeText(ToolBarActivity.this, "退出登录", Toast.LENGTH_SHORT).show();
break;
case R.id.appModel:
Toast.makeText(ToolBarActivity.this, "夜间模式", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
以上代码都是 Toolbar 的基础设置，这里附上 Menu 的布局文件
<?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/outLogin"
android:title="退出登录" />
<item
android:id="@+id/appModel"
android:title="夜间模式" />
<item
android:id="@+id/collect"
android:icon="@drawable/ic_baseline_stars_24"
android:title="收藏"
app:showAsAction="ifRoom" />
</menu>
menu 文件中我们设置了 3 个 item，但是根据上面图片看到，弹出气泡只显示 2 个，收藏按钮是以图片形式展示的。
所以需要注意的是：app:showAsAction 属性 ，这个属性是设置菜单该显示方式，取值有 5 种，主要应用的有 ifRoom、never、always 这三种，
- ifRoom 表示 如果 Toolbar 上有显示空间就显示在 Toolbar 上，如果没有空间就展示在溢出菜单里；
- never 表是总是显示在溢出菜单里；
- always 表示总是显示在 Toolbar 上；
四、ToolBar 案例
根据以上学习，我们实现一个开发中常见的效果：
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp"
app:subtitleTextColor="#FFF"
app:titleTextColor="#FFF"
tools:ignore="MissingConstraints">
<EditText
android:textSize="14dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_toolbar"
android:hint="请输入搜索关键字"
android:padding="5dp" />
</androidx.appcompat.widget.Toolbar>
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24, null));
toolbar.inflateMenu(R.menu.toolbar_case_menu);
注意：默认 NavigationIcon 和 Title 之间有一定间距，要想清除这个间距，很简单，只需要在 Toolbar 属性里加上一行：
app:contentInsetStartWithNavigation="0dp"
源码下载 ：https://github.com/jaynm888/MaterialDesign-master.git
源码包含 Material Design 系列控件集合，定时更新，敬请期待！
五、总结
Material Design 风格的控件，本人特别喜欢，感觉 android UI 界面现在越来越漂亮，很多朋友项目都已经重构，选择 Material Design 风格控件，希望本文对 android 初学者有所帮助，一起共勉！
我的微信：Jaynm888
欢迎点评，
诚邀 Android 程序员加入微信交流群，公众号回复加群或者加我微信邀请入群。
