android：ToolBar詳解
這篇文章由於是臺灣人寫的，語言風格很別緻。本文在原文的基礎上作了一些微調（主要是繁體字的問題）。html
今年(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 這個元件來實做之。java
1. 概述
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 嘍。android
本篇所使用到的程序請到 Github 取得。git
2. 基礎套用
這個階段從 toolbar_demo_checkpoint0 開始，分紅下列三個部份：
風格 (style)
介面 (layout)
程式 (java)github
2.1 風格(style)
風格要調整的地方有二，一在 res/values/styles.xml 另外一在 /res/values-v21/styles.xml，爲了以後設定方便，咱們先在 res/values/styles.xml 裏增長一個名爲 AppTheme.Base 的風格web
<style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item> </style>
由於此範例只單純使用 Toolbar，因此咱們要將讓本來的 ActionBar 隱藏起來，作了上面的設定，接著將本來 AppTheme 的 parent 屬性 改成 AppTheme.Base，這邊完整的程式碼以下：api
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
再來調整在 Android 5 的風格檔： /res/values-v21/styles.xml，也將其 parent 屬性改成 AppTheme.Base：架構
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppTheme.Base"> </style> </resources>
2.2 界面面(Layout)
在 activity_main.xml 裏面加入 Toolbar 元件：app
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize"> </android.support.v7.widget.Toolbar>
請記得用 support v7 裏的 toolbar，否則然只有 API Level 21 也就是 Android 5 以上的版本才能使用。ide
這邊需注意，要將 RelatvieLayout 裡的針對四個方向 padding 屬性拿掉，並記得將本來的 Hello World 設定 layout_below="@+id/toolbar" ，不然會看到像下面這樣的錯誤畫面。
2.3 程序 (Java)
請到 MainActivity.java 里加入 Toolbar 的聲明：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
聲明後，再將之用 setSupportActionBar 設定，即能取表明本來的 actionbar 了，此階段完成畫面以下：
完整代碼見：toolbar_demo_checkpoint1
3. 自定義顏色(Customization color)
這個階段將從 toolbar_demo_checkpoint1 接着往下進行：
上圖是將本階段要完成的結果畫面作了標示，結合下面的描述但願你們能一目瞭然（一目瞭然用錯了吧...）。
-
狀態欄底色：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
也所以在這個階段，咱們須要設定的地方有三，一是主要風格檔(res/values/styles.xml)
<style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item> <!-- Actionbar color --> <item name="colorPrimary">@color/accent_material_dark</item> <!--Status bar color--> <item name="colorPrimaryDark">@color/accent_material_light</item> <!--Window color--> <item name="android:windowBackground">@color/dim_foreground_material_dark</item> </style>
再來是 v21 的風格檔 (res/values-v21/styles.xml)
<style name="AppTheme" parent="AppTheme.Base"> <!--Navigation bar color--> <item name="android:navigationBarColor">@color/accent_material_light</item> </style>
最後，就是爲了本篇的主角 – Toolbar 的 background 進行設定。
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize"> </android.support.v7.widget.Toolbar>
在本範例中，toolbar 是設定來在 activity_main.xml，對其設定 background 屬性： android:background="?attr/colorPrimary" ，這樣就可使之延用 Actionbar 的顏色設定嘍。
最後，再來看一下結果畫面。
完整代碼見： toolbar_demo_checkpoint2
4. 元件 (component)
本階段將從 toolbar_demo_checkpoint2 接續，在還未於 <android.support.v7.widget.Toolbar/> 標籤中，自行添加元件的 toolbar 有幾個你們經常使用的元素可使用，請先見下圖：
大抵來講，預設經常使用的幾個元素就如圖中所示，接着就依序來講明之：
-
setNavigationIcon
即設定 up button 的圖標，由於 Material 的介面，在 Toolbar這裏的 up button樣式也就有別於過去的 ActionBar 哦。
-
setLogo
APP 的圖標。 -
setTitle
主標題。 -
setSubtitle
副標題。 -
setOnMenuItemClickListener
設定菜單各按鈕的動做。
先來看到菜單外的代碼，在 MainActivity.java 中：
先來看到
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // App Logo toolbar.setLogo(R.drawable.ic_launcher); // Title toolbar.setTitle("My Title"); // Sub Title toolbar.setSubtitle("Sub title"); setSupportActionBar(toolbar); // Navigation Icon 要設定在 setSupoortActionBar 纔有做用 // 否則會出現 back button toolbar.setNavigationIcon(R.drawable.ab_android);
這邊要留意的是setNavigationIcon須要放在 setSupportActionBar以後纔會生效。
菜單部分，須要先在res/menu/menu_main.xml左定義：
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <item android:id="@+id/action_edit" android:title="@string/action_edit" android:orderInCategory="80" android:icon="@drawable/ab_edit" app:showAsAction="ifRoom" /> <item android:id="@+id/action_share" android:title="@string/action_edit" android:orderInCategory="90" android:icon="@drawable/ab_share" app:showAsAction="ifRoom" /> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never"/> </menu>
再回到MainActivity.java 中加入OnMenuItemClickListener 的監聽者：
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.action_edit: msg += "Click edit"; break; case R.id.action_share: msg += "Click share"; break; case R.id.action_settings: msg += "Click setting"; break; } if(!msg.equals("")) { Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); } return true; } };
將onMenuItemClick監聽者設置給toolbar
setSupportActionBar(toolbar); ... // Menu item click 的監聽事件一樣要設定在 setSupportActionBar 纔有做用 toolbar.setOnMenuItemClickListener(onMenuItemClick);
和 setNavigationIcon 同樣，須要將之設定在 setSupportActionBar 以後纔有做用。執行上面的代碼便會獲得下面的界面。
完完整程序見：toolbar_demo_checkpoint3
5. 總結
在這樣的架構設計下，ToolBar直接成了Layout中能夠控制的東西，相對於過去的actionbar來講，設計與可操控性大幅提高。
本文上面的解釋中用到的完成代碼：toolbar demo check point 0 ~ 4，請到Github 取得。
最後再附上一個界面上經常使用的屬性說明圖：
這裏按照圖中從上到下的順序作個簡單的說明：
-
colorPrimaryDark
-
狀態欄背景色。
-
在 style 的屬性中設置。
-
-
textColorPrimary
-
App bar 上的標題與更多菜單中的文字顏色。
-
在 style 的屬性中設置。
-
-
App bar 的背景色
-
Actionbar 的背景色設定在 style 中的 colorPrimary。
-
Toolbar 的背景色在layout文件中設置background屬性。
-
-
colorAccent
-
各控制元件(如：check box、switch 或是 radoi) 被勾選 (checked) 或是選定 (selected) 的顏色。
-
在 style 的屬性中設置。
-
-
colorControlNormal
-
各控制元件的預設顏色。
-
在 style 的屬性中設置
-
-
windowBackground
-
App 的背景色。
-
在 style 的屬性中設置
-
-
navigationBarColor
-
導航欄的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
-
在 style 的屬性中設置
-
來自個人博客 android：ToolBar詳解（手把手教程）
- 1. systemd詳解詳解
- 2. CAN詳解--協議詳解
- 3. LinkedList詳解（源碼詳解）
- 4. RNN詳解及BPTT詳解
- 5. JSTL詳解 JSTL詳解
- 6. 【知識詳解】Https詳解
- 7. [Java] volatile 詳詳解！
- 8. 註解詳解
- 9. 詳解
- 10. Lucene索引詳解（IndexWriter詳解、Document詳解、索引更新）
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • Flink 數據傳輸及反壓詳解
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. systemd詳解詳解
- 2. CAN詳解--協議詳解
- 3. LinkedList詳解（源碼詳解）
- 4. RNN詳解及BPTT詳解
- 5. JSTL詳解 JSTL詳解
- 6. 【知識詳解】Https詳解
- 7. [Java] volatile 詳詳解！
- 8. 註解詳解
- 9. 詳解
- 10. Lucene索引詳解（IndexWriter詳解、Document詳解、索引更新）