每個(gè)活動(dòng)最頂部的那個(gè)標(biāo)題欄就是 ActionBar，不過 ActionBar 由于其設(shè)計(jì)的原因，被限定只能位于活動(dòng)的頂部，從而不能實(shí)現(xiàn)一些 Material Design 的效果，因此官方現(xiàn)在已經(jīng)不再建議使用 ActionBar 了?，F(xiàn)在我們使用 Toolbar 來代替 ActionBar，Toolbar 的強(qiáng)大之處在于，它不僅繼承了 ActionBar 的所有功能，而且靈活性很高，可以配合其他控件來完成一些 Material Design 的效果。

一個(gè) Toolbar 可以包含一下內(nèi)容：

1. 一個(gè)導(dǎo)航按鈕
2. 一個(gè) Logo
3. 一個(gè)標(biāo)題或子標(biāo)題
4. 一個(gè)或多個(gè)自定義 views
5. 一個(gè) action menu

0. Prepare

在示例中我們將使用以下工具：

• Android Studio 3.0 Beta
• JDK 1.7
• Android SDK 4.4

1. Create a New Android Application Project

打開 Android Studio，選擇 “File -> New -> New Project...”菜單項(xiàng)，輸入項(xiàng)目名稱等。

Create Android Project

在下一個(gè)窗口，選擇應(yīng)用運(yùn)行的設(shè)備環(huán)境。

Select Target

在示例中，我們選擇新建一個(gè)空的 Activity。

Add an Activity

Activity 使用默認(rèn)的配置。

Configure Activity

現(xiàn)在，我們可以看到項(xiàng)目的目錄結(jié)構(gòu)如下：

Directory Structure

2. Modify the layout of the project

在 res/layout/activity_main.xml 中，添加 Toolbar 組件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="me.xandeer.toolbarexample.MainActivity">

  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      app:navigationIcon="@drawable/ic_toolbar_back"
      app:title="@string/app_name"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary">

    <Button
        android:id="@+id/toolbar_sheet_trigger"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:background="@drawable/ic_toolbar_sheet_trigger" />
  </android.support.v7.widget.Toolbar>

</android.support.constraint.ConstraintLayout>

3. Initialize the Toolbar of the main Activity

我們使用 setSupportActionBar(Toolbar) 實(shí)例化并添加 Toolbar 到 Activity。

package me.xandeer.toolbarexample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.PopupMenu
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    initToolBar()
  }

  private fun initToolBar() {
    setSupportActionBar(toolbar)

    // 生成 PopupMenu
    generateSheetMenus()

    // 處理導(dǎo)行按鈕的點(diǎn)擊事件
    toolbar.setNavigationOnClickListener {
      toolbar.title = getString(R.string.app_name)
      Toast.makeText(this, "Clicking the toolbar!", Toast.LENGTH_SHORT).show()
    }

    // 處理自定義按鈕的點(diǎn)擊事件
    toolbar_sheet_trigger.setOnClickListener {
      sheetMenus.show()
    }
  }


  private fun generateSheetMenus() {
    sheetMenus = PopupMenu(this, toolbar_sheet_trigger)

    for (i in 0..4) {
      sheetMenus.menu.add(0, Companion.SHEET_START + i, i, "sheet${i + 1}")
    }

    sheetMenus.setOnMenuItemClickListener {
      toolbar.title = it.title
      Toast.makeText(this, "Clicking Popup Menu: ${it.order}", Toast.LENGTH_SHORT).show()
      true
    }
  }

  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    toolbar.inflateMenu(R.menu.mainmenu)
    toolbar.setOnMenuItemClickListener { onOptionsItemSelected(it) }
    return super.onCreateOptionsMenu(menu)
  }

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
      R.id.action_share -> {
        val format = toolbar.menu.findItem(R.id.action_format)
        format.isEnabled = !format.isEnabled
      }
    }
    Toast.makeText(this, "Trigger action ${item.title}", Toast.LENGTH_SHORT).show()

    return super.onOptionsItemSelected(item)
  }

  private lateinit var sheetMenus: PopupMenu

  companion object {
    private val SHEET_START = Menu.FIRST
  }
}

4. Modify application styles

默認(rèn)主題是帶有 ActionBar 的，要用 Toolbar 替換就需要將主題換成不帶 ActionBar 的。

<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

</resources>

5. Create menu resource

在 res 目錄右擊喚出如下菜單，點(diǎn)擊新建 Directory，輸入 menu 創(chuàng)建 menu 資源存放目錄。

Create Menu Directory

然后在 res/menu 目錄右擊喚出如下菜單，新建 Menu resource file，輸入 mainmenu 創(chuàng)建我們要用的菜單資源文件。

Create a Menu resource file

將下面的內(nèi)容拷貝其中：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:title="@string/format"
      android:icon="@drawable/ic_toolbar_format"
      android:id="@+id/action_format"
      app:showAsAction="ifRoom" />

  <item android:title="@string/share"
      android:icon="@drawable/ic_toolbar_share"
      android:id="@+id/action_share"
      app:showAsAction="ifRoom" />


  <item android:title="@string/add"
      android:id="@+id/action_add"
      app:showAsAction="collapseActionView" />

  <item android:title="@string/delete"
      android:id="@+id/action_delete"
      app:showAsAction="collapseActionView" />

  <item android:title="@string/modify"
      android:id="@+id/action_modify"
      app:showAsAction="collapseActionView" />

</menu>

6. Build, compile and run

項(xiàng)目編譯運(yùn)行后如下所示：

Toolbar Example

7. Code Repository

Github: Android Example