ToolBar

个人博客： chrongliu.cn

自从 Android 5.0 出来 Material Design 之后 ，Android 的 UI 确实美观了不少 ，甚至比 ios 的界面还要漂亮 。但自己对于 Material Design 风格的控件使用的还是不熟练 ，所以打算把一些比较常用的控件再次学习一遍 ，顺便记下笔记 。今天先从 ToolBar 开始 。

一、隐藏 ActionBar

新建项目后，默认显示 ActionBar ，所以，我们首先得隐藏掉ActionBar 。隐藏 ActionBar 很简单 ，只要在 AndroidManifest.xml 文件中把项目的主题换成无 ActionBar 的主题就可以了 。

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
</application>

 <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>

颜色说明 ：

toolbar-color.png

二、布局文件相关设置

• android:theme : 设置主题
• app:popupTheme : 设置溢出主题
• app:navigationIcon : 设置导航button
• app:logo : 设置logo
• app:title : 设置标题
• app:titleTextColor : 设置标题颜色

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:navigationIcon="@drawable/nav_icon"
            app:logo="@drawable/logo"
            app:title="MyTest"
            app:titleTextColor="@color/colorAccent"/>

三、在代码中设置

1. 首先在要根据 id 进行初始化

Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolBar);

2. 代码中设置 ToolBar 属性

/*设置标题*/
mToolBar.setTitle("MyTest");
/*设置导航button*/
mToolBar.setNavigationIcon(R.drawable.nav_icon);
/*设置溢出主题*/
mToolBar.setPopupTheme(android.R.style.ThemeOverlay_Material_ActionBar);
/*设置logo*/
mToolBar.setLogo(R.drawable.logo);
/*设置标题*/
mToolBar.setTitle(R.string.app_name);
/*设置标题颜色*/
mToolBar.setTitleTextColor(getResources().getColor(R.color.colorAccent));

四、添加溢出选项

1.创建 menu 菜单 。

在 res -- menu 目录下新建 menu 布局文件 menu_layout ，其中app:showAsAction 属性为菜单显示方式 ，常用属性有三种 :

ifRoom : 如果空间足够则显示 ，否则在溢出列表 ；
never : 一直显示在溢出列表 ；
always : 一直显示在 ToolBar 。

<?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/add"
            android:title="添加"
            android:icon="@drawable/menu_add"
            app:showAsAction="ifRoom"/>
    <item
            android:id="@+id/set"
            android:title="设置"
            android:icon="@drawable/menu_set"
            app:showAsAction="never"/>
    <item
            android:id="@+id/del"
            android:title="删除"
            android:icon="@drawable/menu_del"
            app:showAsAction="always"/>
</menu>

2.重写 onCreateOptionsMenu ，onOptionsItemSelected 方法，分别用于加载 menu 与设置点击事件 。

/**
  * 创建Menu布局
  */
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.menu_layout, menu);
      return true;
 }

/**
  * Menu选项点击事件
  */
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.add:
                //添加
                Toast.makeText(this, "添加", Toast.LENGTH_SHORT).show();
                break;
            case R.id.set:
                //设置
                Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
                break;
            case R.id.del:
                //删除
                Toast.makeText(this, "删除", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

五、设置 NavigationButton 的点击事件

这里有两种方法进行设置：

1.在onOptionsItemSelected方法中根据 android.R.id.home 设置点击事件

@Override
public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
          case android.R.id.home:
              Toast.makeText(this, "NavigationButton点击", Toast.LENGTH_SHORT).show();
              break;
        }
      return true;
}

2.根据 setNavigationOnClickListener 监听方法设置

mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "NavigationButton点击", Toast.LENGTH_SHORT).show();
        }
});