Material Design系列教程（1） - Toolbar

简介

Toolbar 主要作用：替换 ActionBar。

先看下 Toolbar 文档：

Toolbar

从其文档中可以看出，Toolbar 是一个ViewGroup，因此其内部可以添加其他子View。

对于 ActionBar 来说，它是固定在 Activity 装饰栏处，无法更改，而 Toolbar 灵活性更高，它可以放置于视图层任意位置；如果应用想把 Toolbar 作为 ActionBar 使用，需要调用 setSupportActionBar() 方法。

Color Palette（调色板）

如果说想把 Toolbar 作为 ActionBar 使用，那么可以先了解一下 Color Palette，如下图所示：

Color Palette

因此，如果我们想修改应用导航栏，状态栏或者上图所示其他位置颜色样式，只需修改res/values/styles.xml

使用 Toolbar

1. 使用 Toolbar 作为 ActionBar，需要先把原本的 ActionBar 隐藏掉，方法：res/values/styles.xml增加如下两行内容：

   
   false
   true

当然，也可以通过代码或其他方式进行 ActionBar 隐藏。

2. 布局添加 Toolbar：

一般想将 Toolbar 作为 Action Bar 使用时，建议增加如下两个属性配置：

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

3. 代码设置 Toolbar：

public class ToolbarActivity extends AppCompatActivity {
    private Toolbar mToolbar;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);
        this.mToolbar = this.findViewById(R.id.toolbar);
        this.mToolbar.setTitle("Title");        
        this.mToolbar.setSubtitle("subTitle");      
        this.mToolbar.setLogo(R.mipmap.ic_launcher_round);
        //Set a Toolbar to act as the ActionBar for this Activity window
        this.setSupportActionBar(this.mToolbar);
    }
}

结果：

Toolbar

以上，就是 Toolbar 最简单的使用方法。

Toolbar 进阶使用

1. 为 Toolbar 增加菜单：

• 定义 menu XML：
  创建一个新的资源文件： /res/menu/menu_toolbar.xml

      //有空余控件，则直接显示

     // 始终隐藏菜单

2. 覆写Activity两个回调方法：onCreateOptionsMenu，onOptionsItemSelected

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = this.getMenuInflater();
        inflater.inflate(R.menu.menu_toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action1:
                Log.d(TAG, "Action 1 selected");
                return true;
            case R.id.action2:
                Log.d(TAG, "Action 2 selected");
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

2. 为 Toolbar 自定义 UI：前面内容我们有提及， Toolbar 是一个ViewGroup，因此它可以容纳其他子View，显示不同的界面。

下面我们就简单进行一个自定义 Toolbar 操作：

1. 首先，修改布局文件如下：

2. 然后，隐藏 Toolbar 的 logo 和 title：

        //hide logo
        this.getSupportActionBar().setDisplayUseLogoEnabled(false);
        //hide title
        this.getSupportActionBar().setDisplayShowTitleEnabled(false);

结果：

Custom Toolbar

参考

• 官方文档 - Toolbar

• 玩转AppBarLayout，更酷炫的顶部栏

• Android Material Design and the Design Support Library