ToolBar

本文参照Google官方的教程，进行了二次整理和实际使用中的经验总结。
Android develop之AppBar

前言

没什么前言了，能进来看ToolBar，相信你也知道为什么要使用ToolBar了。接下来请坐稳，让我们一起去Android developer上学习一下ToolBar。
先放一张Toolbar的示意图

Toolbar

一、ToolBar的基本入门使用

让你的工程依赖支持v7 appcompat。这个不废话。
让你要显示的Activity继承AppCompatActivity。
在清单Manifest中设置Application的主题为NoActionBar。

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

如果你使用的是自定义主题，那么需要在你自定义的style里面加上下面的代码，让ActionBar隐藏。

  <item name="windowActionBar">false</item>
  <item name="android:windowNoTitle">true</item>

在activiy的xml布局文件中加上ToolBar。

<android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

需要注意下面几点

一般Toolbar都是放到布局的最上面。
Material Design 规范)建议应用栏具有 4 dp 的仰角，所以要android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
的作用是让ToolBar浮于其他Activity布局之上。

在Activity中初始化ToolBar。

@Override
protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_my);
          Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
          setSupportActionBar(myToolbar);
    }

这里其实是分为两步的：

初始化ToolBar对象；
setSupportActionBar将ToolBar对象传递给Activity。该方法会将工具栏设置为 Activity 的应用栏。

至此，一个最基本的ToolBar就完成了，这个ToolBar会包含应用的名称和一个溢出菜单。

二、在ToolBar上添加menu

简单地说，就是把当前Activity上比较重要的功能放到ToolBar上，这样方便用户操作。比如我们在看到一篇很好的博客的时候，ToolBar上就可以放上一个分享和收藏的标签。
这里我们采用menu的方式来实现此功能。

在res/menu/下创建一个menu资源文件

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_48dp"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          app:showAsAction="never"/>
</menu>

每个menu的item设置icon、id、title。最重要的一个就是app:showAsAction，这个有下面个选项：

never：永远不显示的ToolBar上，只放在溢出菜单中（也就是三个竖点）。只有点击溢出菜单才会弹出。
always：无论是否溢出，总会显示。
ifRoom：如果还有地儿的话，那就显示上。没地儿的话就放到溢出菜单中。

将上一步的menu加载到ToolBar上。
准确的说是将menu加载到Activity中，因为ToolBar取代了Activity的ActionBar，所以menu会被加载到ToolBar上。
在Activity的onCreateOptionsMenu中加载menu

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_item, menu);
        return true;
    }

添加对Menu的响应。
当我们点击了响应的menu，对应的处理方法依然和普通的menu一样是放在Activity的onOptionsItemSelected中。

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            // User chose the "Settings" item, show the app settings UI...
            return true;

        case R.id.action_favorite:
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;

        default:
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            return super.onOptionsItemSelected(item);

    }
}

修改menu的字体颜色
一般默认主题的menu字体颜色是黑色，但是大多数我们希望的是白色。可以通过在style中加入一行设置来实现：

<item name="actionMenuTextColor">#ffffff</item>`

三、添加返回图标

添加返回图标有两种方式：

方法一：官方方法

在AndroidManifest中在ParentActivity和ChildActivity中加上配置：

<application ... >
    ...

    <!-- The main/home activity (it has no parent activity) -->

    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>

    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.MyChildActivity"
        android:label="@string/title_activity_child"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >

        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

在Java代码中调用actionbar的setDisplayHomeAsUpEnabled()方法。这个方法是让返回按钮能显示出来

// my_child_toolbar is defined in the layout file
    Toolbar myChildToolbar = (Toolbar) findViewById(R.id.my_child_toolbar);
    setSupportActionBar(myChildToolbar);
    // Get a support ActionBar corresponding to this toolbar
    ActionBar ab = getSupportActionBar();
    // Enable the Up button
    ab.setDisplayHomeAsUpEnabled(true);

这是官方API上的教程。

方法二：使用menu

这个方法无需在AndroidManifest中进行配置

初始完成Toolbar之后，加上下面这两行：

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

这两行必须同时打开才可以。第一行是显示返回按钮，第二行是使action bar角落上的home button有效。

重写onOptionsItemSelected方法，监听android.R.id.home：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            Toast.makeText(this, "哈哈哈", Toast.LENGTH_SHORT).show();
            finish();
        }
        return super.onOptionsItemSelected(item);
    }

方法三：自己设置导航图标

ToolBar是可以自己设置导航icon的，我们完全可以把导航icon设置为返回按钮，然后开始监听返回按钮的点击事件。
看下面的代码。

       setSupportActionBar(toolbar);
       toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white);
       toolbar.setNavigationOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });

四、Toolbar中加入自定义view

Toolbar为我们提供了title、subtitle、navigationIcon、还有各种menu等组件。但这些似乎并不能满足我们的设计师，似乎要在Toolbar中加入各种绚丽的功能，让我们的Toolbar变得功能更加丰富。这也难不倒我们。因为Toolbar继承了ViewGroup，所以只要你需要，你可以添加各种View到Toolbar中。使用方法也非常简单。只要在xml布局的Toolbar标签中直接添加View就可以，然后在Java代码中像普通组件一样直接使用就可以了。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hahaha"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            />
    </android.support.v7.widget.Toolbar>