一. 前言

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

  • 设置导航栏图标；
  • 设置App的logo；
  • 支持设置标题和子标题；
  • 支持添加一个或多个的自定义控件；
  • 支持Action Menu；

二. 简单的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--activity_main.xml，注意需要使用androidx包里面的ToolBar-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0099cc"
        />

</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolBar = findViewById(R.id.tool_bar);

        //设置标题 必须在setSupportActionBar之前设置
        toolBar.setTitle("首页");
        //toolBar.setTitleTextColor();      字体颜色
        //toolBar.setTitleTextAppearance(); 字体样式
        //toolBar.setTitleMargin();         边距

        //设置为ActionBar
        setSupportActionBar(toolBar);

        //设置logo
        toolBar.setLogo(R.drawable.setting);

        //设置副标题
        toolBar.setSubtitle("小首页");
        //toolBar.setSubtitleTextColor();      字体颜色
        //toolBar.setSubtitleTextAppearance(); 字体样式

        //返回按钮
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "back", Toast.LENGTH_SHORT).show();
            }
        });
    }

    //设置菜单按钮
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu,menu);

        return true;
    }

    //监听菜单

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_refresh:
                Toast.makeText(this, "Refresh", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_add:
                Toast.makeText(this, "Add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_setting:
                Toast.makeText(this, "Setting", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
      
        return true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!--menu.xml-->
<?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">
  
    <!--showAsAction属性
        always：永远显示在ActionBar中，如果屏幕空间不够则无法显示
        ifRoom：屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中
        never：永远显示在overflow中
        withText：这个值使菜单项和它的图标，文本一起显示
    -->
  
    <!--menuCategory
        同种菜单项的种类。该属性可取4个值
        container、system、secondary和alternative。
    -->

    <!--orderInCategor
        同种类菜单的排列顺序。该属性需要设置一个整数值
    -->

    <item
        android:id="@+id/action_refresh"
        android:icon="@drawable/refresh"
        android:title="Refresh"
        app:showAsAction="always"
        />

    <item
        android:id="@+id/action_add"
        android:icon="@drawable/add"
        android:title="Add"
        app:showAsAction="ifRoom"
        />

    <item
        android:id="@+id/action_setting"
        android:icon="@drawable/setting"
        android:title="Setting"
        app:showAsAction="never"
        />

</menu>

关于设置标题居中的问题：

Toolbar的父类是ViewGroup，我们常用的线性布局和相对布局的父类也是ViewGroup，所以Toolbar也同样可以添加子布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:popupTheme="@style/OverflowMenuStyle"
    app:collapseIcon="@mipmap/back">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:text="标题"
        android:layout_gravity="center"
        android:textSize="20sp"/>


</androidx.appcompat.widget.Toolbar>

参考文章

Toolbar基本使用

Android开发：最详细的 Toolbar 开发实践总结

Android ActionBar和ToolBar的使用

Android 沉浸式风格（为毛叫沉浸式这么唬人）