Android Toolbar Example 示例

每个活动最顶部的那个标题栏就是 ActionBar，不过 ActionBar 由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些 Material Design 的效果，因此官方现在已经不再建议使用 ActionBar 了。现在我们使用 Toolbar 来代替 ActionBar，Toolbar 的强大之处在于，它不仅继承了 ActionBar 的所有功能，而且灵活性很高，可以配合其他控件来完成一些 Material Design 的效果。

一个 Toolbar 可以包含一下内容：

1. 一个导航按钮
2. 一个 Logo
3. 一个标题或子标题
4. 一个或多个自定义 views
5. 一个 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...”菜单项，输入项目名称等。

Create Android Project

在下一个窗口，选择应用运行的设备环境。

Select Target

在示例中，我们选择新建一个空的 Activity。

Add an Activity

Activity 使用默认的配置。

Configure Activity

现在，我们可以看到项目的目录结构如下：

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) 实例化并添加 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()

    // 处理导行按钮的点击事件
    toolbar.setNavigationOnClickListener {
      toolbar.title = getString(R.string.app_name)
      Toast.makeText(this, "Clicking the toolbar!", Toast.LENGTH_SHORT).show()
    }

    // 处理自定义按钮的点击事件
    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

默认主题是带有 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 目录右击唤出如下菜单，点击新建 Directory，输入 menu 创建 menu 资源存放目录。

Create Menu Directory

然后在 res/menu 目录右击唤出如下菜单，新建 Menu resource file，输入 mainmenu 创建我们要用的菜单资源文件。

Create a Menu resource file

将下面的内容拷贝其中：

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

项目编译运行后如下所示：

Toolbar Example

7. Code Repository

Github: Android Example