Toolbar

---

1.官方文档内容

toolbar.png

toolbar是android.support.v7.widget包中的一个类，兼容低版本的API，如果你开发的项目最低要求的API版本是21，那么你也可以使用android.widget.包中的toolbar。它可以放置在一个视图层次结构中嵌套的任意级别，应用程序可以使用方法setSupportActionBar将一个ActionBar替换为toolbar，toolBar支持比ActionBar更集中的功能集。

2.toolbar的基本使用：

（1）第一步，在使用之前我们需要把ActionBar隐藏。

也可以不隐藏ActionBar作为一个独立控件使用。

ActionBar的方式有：

• 在AndroidManifest中通过属性theme隐藏：

注：该方式的使用条件是你的XxxActivity必须继承自Activity,如果继承自AppCompatActivity，会报如下图的错误：

错误.png

我们需要使用如下theme：

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

• 在Activity中获取到ActionBar，利用ActionBar的方法进行隐藏；

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
    }

注：以上方式兼容任何级别的API；

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
    }

注：以上方式API21以上才会起作用。

• 在Activity中设置如下代码：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
//        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
    }

注：使用上述代码时，必须放到setContentView方法之前调用。

（2）第二步，在xml中添加toolbar控件，代码如下；

注：上面代码中的TextView为自定义控件。?attr/actionBarSize表示根据屏幕的分辨率采用系统默认的高度，低版本要使用的话，需要使用V7包中的，否则只有api21以上才能使用。

（3）第三步，在Activity中添加toolbar，代码如下；

    @BindView(R.id.toolbar)
    Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_zhifu);
        ButterKnife.bind(this);

        mToolbar.inflateMenu(R.menu.toolbar_menu);          //设置右上角的填充菜单
        mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
        mToolbar.setLogo(R.mipmap.ic_launcher);             //设置app的logo

        mToolbar.setTitle("Title");                         //设置主标题
        mToolbar.setTitleTextColor(Color.MAGENTA);
        mToolbar.setSubtitle("Subtitle");                   //设置子标题
        mToolbar.setSubtitleTextColor(Color.WHITE);

        //设置菜单的点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_search:
                        Toast.makeText(ZhifuActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notification:
                        Toast.makeText(ZhifuActivity.this, R.string.menu_notifications, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item01:
                        Toast.makeText(ZhifuActivity.this, R.string.item01, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item02:
                        Toast.makeText(ZhifuActivity.this, R.string.item02, Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }

用到的菜单xml（R.menu.toolbar_menu）如下：

注：我们可以在xml中使用第三步中java代码的属性，如下所示：

注：在xml中有些属性需要使用toolbar:才会有作用。

常用操作：
（1）改变菜单(R.menu.toolbar_menu)的字体颜色:

• 在styles.xml中定义一个Theme,并设置android：textColorPrimary属性，

• 在布局文件的Toolbar中设置popupTheme:

 toolbar:popupTheme="@style/Theme.ToolBar.Base"

3.仿知乎的标题栏

实现效果如下：

仿知乎的标题栏.gif

代码如下，
ZhihuActivity.java:

public class ZhifuActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhifu);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
        toolbar.setTitle(R.string.home_page);
        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    }
}

主布局activity_zhihu.xml：

toolbar中的三点对应的menu布局zhihu_toolbar_menu.xml：

布局中用到的样式：

4.toolbar实例1

结合DrawerLayout写了一个简单实例。

toolbar实例1.gif

5.toolbar实例2

自定义了更多的弹出菜单布局，利用了PopWindow。

自定义了弹出菜单popwindow.gif

源码地址：https://github.com/gaojuanjuan/MaterialDesign_V7

参考文章：

1. Android 5.x Theme 与 ToolBar 实战
   本文出自：张鸿洋的博客;
2. android Toolbar控件;
3. Android Material Design之Toolbar与Palette实践
   本文出自：Rocko's bog;
4. Android开发：最详细的 Toolbar 开发实践总结;
5. ToolBar的使用