android：ToolBar詳解（手把手教程）

今年(2014) 的 google i/o 發表令多數人為之一亮的 material design，而 google 也從「google i/o 2014」開始，大家也陸陸續續地看到其更新的 android app 皆套用了這個設計介面。當然，這個設計介面著實讓大家感到驚豔外，更讓 android 開發者開始擔心未來 app 的界面處理了。

不過，所幸有着之前 actionbar 的經驗後，android 也很快地在 support library 裡面提供了相對應的 api 給開發者使用，本篇就為各位介紹 – toolbar，這是用來取代過去 actionbar 的控件，而現在于 material design 中也對之有一個統一名稱：app bar，在未來的 android app 中，就以 toolbar 這個元件來實作之。

Android 3.0 Android 推了 ActionBar 這個控件，而到了2013 年 Google 開始大力地推動所謂的 android style，想要逐漸改善過去 android 紛亂的界面設計，希望讓終端使用者盡可能在 android 手機有個一緻的操作體驗。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 裡的 AppCompat。

既然會有本篇跟各位介紹的 Toolbar，也意味着官方在某些程度上認為 ActionBar 限制了 android app 的開發與設計的彈性，而在 material design 也對之做了名稱的定義：App bar。接下來将為各位分成幾個階段進行說明，如何在 android app 中用 toolbar 這個控件來做出一個基本的 app bar 喽。

這個階段從 toolbar_demo_checkpoint0 開始，分成下列三個部份：

風格 (style)

界面 (layout)

程式 (java)

風格要調整的地方有二

一在 res/values/styles.xml中

二在 /res/values-v21/styles.xml中

為了之後設定友善，我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的風格

<code><style name=</code><code>"AppTheme.Base"</code> <code>parent=</code><code>"Theme.AppCompat"</code><code>></code>

<code> </code><code><item name=</code><code>"windowActionBar"</code><code>></code><code>false</code><code></item></code>

<code> </code><code><item name=</code><code>"android:windowNoTitle"</code><code>></code><code>true</code><code></item></code>

因為此範例隻使用 Toolbar，是以我們要将讓原本的 ActionBar 隐藏起來，然後将原本 AppTheme 的 parent 屬性改為上面的AppTheme.Base，代碼如下：

<code> </code><code><style name=</code><code>"AppTheme"</code> <code>parent=</code><code>"AppTheme.Base"</code><code>></code>

<code> </code><code><style name=</code><code>"AppTheme.Base"</code> <code>parent=</code><code>"Theme.AppCompat"</code><code>></code>

<code> </code><code><item name=</code><code>"windowActionBar"</code><code>></code><code>false</code><code></item></code>

<code> </code><code><del><item name=</code><code>"android:windowNoTitle"</code><code>></code><code>true</code><code></item></del></code>

<code> </code><code><item name=</code><code>"windowNoTitle"</code><code>></code><code>true</code><code></item></code>

再來調整Android 5.0的style： /res/values-v21/styles.xml，也将其 parent 屬性改為 AppTheme.Base：

<code><?xml version=</code><code>"1.0"</code> <code>encoding=</code><code>"utf-8"</code><code>?></code>

<code> </code><code><style name=</code><code>"AppTheme"</code> <code>parent=</code><code>"AppTheme.Base"</code><code>></code>

在 activity_main.xml 裡面添加 Toolbar 控件：

<code> </code><code>android:id=</code><code>"@+id/toolbar"</code>

<code> </code><code>android:layout_height=</code><code>"?attr/actionBarSize"</code>

<code> </code><code>android:layout_width=</code><code>"match_parent"</code> <code>></code>

請記得用 support v7 裡的 toolbar，不然然隻有 API Level 21 也就是 Android 5.0 以上的版本才能使用。

這裡需注意，要将 RelatvieLayout 裡的四個方向的padding 屬性去掉，并記得将原本的 Hello World 設為 layout_below="@+id/toolbar" ，否則會看到像下面這樣的錯誤畫面。

在 MainActivity.java 中加入 Toolbar 的聲明：

<code>Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);</code>

<code>setSupportActionBar(toolbar);</code>

聲明後，再将之用 setSupportActionBar 設定，Toolbar即能取代原本的 actionbar 了，此階段完成畫面如下：

上圖是将本階段要完成的結果畫面做了标示，結合下面的描述希望大家能明白。

colorPrimaryDark（狀态欄底色）：在風格 (styles) 或是主題 (themes) 裡進行設定。

App bar 底色

這個設定分為二，若你的 android app 仍是使用 actionbar ，則直接在風格 (styles) 或是主題 (themes) 裡進行設定 colorPrimary 參數即可；

可若是采用 toolbar 的話，則要在界面 (layout) 裡面設定 toolbar 控件的 background 屬性。

navigationBarColor（導航欄底色）：

僅能在 API v21 也就是 Android 5 以後的版本中使用，是以要将之設定在 res/values-v21/styles.xml 裡面。

主視窗底色：windowBackground

也是以在這個階段，我們需要設定的地方有三，一是 style中(res/values/styles.xml)

<code> </code><code><item name=</code><code>"colorPrimary"</code><code>>@color/accent_material_dark</item></code>

<code> </code><code><item name=</code><code>"colorPrimaryDark"</code><code>>@color/accent_material_light</item></code>

<code> </code><code><item name=</code><code>"android:windowBackground"</code><code>>@color/dim_foreground_material_dark</item></code>

再來是 v21 的style中 (res/values-v21/styles.xml)

<code><style name=</code><code>"AppTheme"</code> <code>parent=</code><code>"AppTheme.Base"</code><code>></code>

<code> </code><code><item name=</code><code>"android:navigationBarColor"</code><code>>@color/accent_material_light</item></code>

最後，就是為了本篇的主角 – Toolbar 的 background 進行設定。

<code> </code><code>android:layout_width=</code><code>"match_parent"</code>

<code> </code><code>android:background=</code><code>"?attr/colorPrimary"</code> <code>></code>

在本範例中，toolbar 是設定來在 activity_main.xml，對其設定 background 屬性： android:background="?attr/colorPrimary" ，這樣就可以使之延用 Actionbar 的顔色設定喽。

最後，再來看一下結果畫面。

大抵來說，預設常用的幾個元素就如圖中所示，接着就依序來說明之：

setNavigationIcon

即設定 up button 的圖示，因為 Material 的介面，在 Toolbar這裡的 up button樣式也就有別于過去的 ActionBar 哦。

setLogo

APP 的圖示。

setTitle

主标題。

setSubtitle

副标題。

setOnMenuItemClickListener

設定菜單各按鈕的動作。

先來看看菜單外的代碼，在 MainActivity.java 中：

<code>toolbar.setLogo(R.drawable.ic_launcher);</code>

<code>// Title</code>

<code>toolbar.setTitle(</code><code>"My Title"</code><code>);</code>

<code>// Sub Title</code>

<code>toolbar.setSubtitle(</code><code>"Sub title"</code><code>);</code>

<code>// Navigation Icon 要設定在 setSupoortActionBar 才有作用</code>

<code>// 否則會出現 back button</code>

<code>toolbar.setNavigationIcon(R.drawable.ab_android);</code>

這邊要留意的是setNavigationIcon需要放在 setSupportActionBar之後才會生效。

菜單部分，需要先在res/menu/menu_main.xml左定義：

<code> </code><code>tools:context=</code><code>".MainActivity"</code><code>></code>

<code> </code><code><item android:id=</code><code>"@+id/action_edit"</code>

<code> </code><code>android:title=</code><code>"@string/action_edit"</code>

<code> </code><code>android:orderInCategory=</code><code>"80"</code>

<code> </code><code>android:icon=</code><code>"@drawable/ab_edit"</code>

<code> </code><code>app:showAsAction=</code><code>"ifRoom"</code> <code>/></code>

<code> </code><code><item android:id=</code><code>"@+id/action_share"</code>

<code> </code><code>android:orderInCategory=</code><code>"90"</code>

<code> </code><code>android:icon=</code><code>"@drawable/ab_share"</code>

<code> </code><code><item android:id=</code><code>"@+id/action_settings"</code>

<code> </code><code>android:title=</code><code>"@string/action_settings"</code>

<code> </code><code>android:orderInCategory=</code><code>"100"</code>

<code> </code><code>app:showAsAction=</code><code>"never"</code><code>/></code>

再回到MainActivity.java 中加入OnMenuItemClickListener 的監聽者：

<code>private Toolbar.OnMenuItemClickListener onMenuItemClick = </code><code>new</code> <code>Toolbar.OnMenuItemClickListener() {</code>

<code> </code><code>@Override</code>

<code> </code><code>public boolean onMenuItemClick(MenuItem menuItem) {</code>

<code> </code><code>String msg = </code><code>""</code><code>;</code>

<code> </code><code>switch</code> <code>(menuItem.getItemId()) {</code>

<code> </code><code>case</code> <code>R.id.action_edit:</code>

<code> </code><code>msg += </code><code>"Click edit"</code><code>;</code>

<code> </code><code>break</code><code>;</code>

<code> </code><code>case</code> <code>R.id.action_share:</code>

<code> </code><code>msg += </code><code>"Click share"</code><code>;</code>

<code> </code><code>case</code> <code>R.id.action_settings:</code>

<code> </code><code>msg += </code><code>"Click setting"</code><code>;</code>

<code> </code><code>if</code><code>(!msg.equals(</code><code>""</code><code>)) {</code>

<code> </code><code>Toast.makeText(MainActivity.</code><code>this</code><code>, msg, Toast.LENGTH_SHORT).show();</code>

<code> </code><code>return</code> <code>true</code><code>;</code>

将onMenuItemClick監聽者設定給toolbar

<code>// Menu item click 的監聽事件一樣要設定在 setSupportActionBar 才有作用</code>

<code>toolbar.setOnMenuItemClickListener(onMenuItemClick);</code>

和 setNavigationIcon 一樣，需要將之設定在 setSupportActionBar 之後才有作用。執行上面的代碼便會得到下面的界面。

在這樣的架構設計下，ToolBar直接成了Layout中可以控制的東西，相對于過去的actionbar來說，設計與可操控性大幅提升。

最後再附上一個界面上常用的屬性說明圖：

這裡按照圖中從上到下的順序做個簡單的說明：

colorPrimaryDark

狀态欄背景色。

在 style 的屬性中設定。

textColorPrimary

App bar 上的标題與更多菜單中的文字顔色。

App bar 的背景色

Actionbar 的背景色設定在 style 中的 colorPrimary。

Toolbar 的背景色在layout檔案中設定background屬性。

colorAccent

各控制元件(如：check box、switch 或是 radoi) 被勾選 (checked) 或是標明 (selected) 的顔色。

colorControlNormal

各控制元件的預設顔色。

在 style 的屬性中設定

windowBackground

App 的背景色。

navigationBarColor

導航欄的背景色，但隻能用在 API Level 21 (Android 5) 以上的版本

最後需要注意的是：使用material主題的時候，必須設定targetSdkVersion = 21，否則界面看起來是模糊的

本文轉自一點點征服部落格園部落格，原文連結：http://www.cnblogs.com/ldq2016/p/5362878.html，如需轉載請自行聯系原作者

android：ToolBar詳解（手把手教程）

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

Android電視機（機頂盒）初次開發的一些經驗分享

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method