初識 Toolbar過年前發了一篇介紹 Translucent System Bar 特性的文章，收到很多開發者的關注和反饋。今天開始寫第二篇，全面的介紹一下 Toolbar 的使用。說起 Toolbar ，可能有很多開發的童鞋還比較陌生，沒關係，請接著往下看。
Toolbar 是在 Android 5.0 開始推出的一個 Material Design 風格的導航控制元件 ，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導航欄，以此來取代之前的 Actionbar 。
與 Actionbar 相比，Toolbar 明顯要靈活的多。它不像 Actionbar一樣，一定要固定在Activity的頂部，而是可以放到介面的任意位置。除此之外，在設計 Toolbar 的時候Google也留給了開發者很多可定製修改的餘地，這些可定製修改的屬性在API文件中都有詳細介紹，如：
設定導航欄圖示；設定App的logo；支援設定標題和子標題；支援新增一個或多個的自定義控制元件；支援Action Menu；
總之，與 Actionbar 相比，Toolbar 讓我感受到Google滿滿的誠意。怎樣？是否已經對 Toolbar 有大概的了解，躍躍欲試的感覺出來了有木有？接下來，我們就一步一步的來看如何使用 Toolbar（其實是我使用 Toolbar 踩坑填坑的血淚史，你們接下去看，我先擦個眼淚…. ）。
開始使用 Toolbar前面提到 Toolbar 是在 Android 5.0 才開始加上的，Google 為了將這一設計向下相容，自然也少不了要推出相容版的 Toolbar 。為此，我們需要在工程中引入 appcompat-v7 的相容包，使用 android.support.v7.widget.Toolbar 進行開發。下面看一下程式碼結構，同樣把重點部分已經紅圈圈出：
ToolbarActivity 包含了 Toolbar 的一些基本使用， ZhiHuActivity 是在熟悉了 Toolbar 後對知乎主頁面的一個高仿實現。layout和menu資料夾分別是上面提到的兩個Activity的佈局檔案 和 actionmenu 選單檔案。values、values-v19、values-v21 中包含了一些自定義的 theme，後面用到的時候會順帶講解。我們先來看一下 ToolbarActivity 的執行效果
按照效果圖，從左到右分別是我們前面提及到的 導航欄圖示、App的logo、標題和子標題、自定義控制元件、以及 ActionMenu 。接著，我們來看下佈局檔案和程式碼實現。首先，在佈局檔案 activity_tool_bar.xml 中新增進我們需要的 Toolbar 控制元件
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@id/action_search" android:icon="@mipmap/ic_search" android:title="@string/menu_search" app:showAsAction="ifRoom" /> <item android:id="@id/action_notification" android:icon="@mipmap/ic_notifications" android:title="@string/menu_notifications" app:showAsAction="ifRoom" /> <item android:id="@+id/action_item1" android:title="@string/item_01" app:showAsAction="never" /> <item android:id="@+id/action_item2" android:title="@string/item_02" app:showAsAction="never" /></menu>最後到 ToolbarActivity 中呼叫程式碼拿到這 Toolbar 控制元件，並在程式碼中做各種setXXX操作。
/** * Toolbar的基本使用 */public class ToolBarActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tool_bar); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); //設定導航欄圖示 toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); //設定app logo toolbar.setLogo(R.mipmap.ic_launcher); //設定主標題 toolbar.setTitle("Title"); //設定子標題 toolbar.setSubtitle("Subtitle"); //設定右上角的填充選單 toolbar.inflateMenu(R.menu.base_toolbar_menu); toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { int menuItemId = item.getItemId(); if (menuItemId == R.id.action_search) { Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_notification) { Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_item1) { Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_item2) { Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show(); } return true; } }); }}程式碼到此已經完成了 Toolbar 的基本使用，注意，是基本使用而已！！！！！下面有幾個程式碼裡面需要注意的地方：
我們在使用 Toolbar 時候需要先隱藏掉系統原先的導航欄，網上很多人都說給Activity設定一個NoActionBar的Theme。但個人覺得有點小題大做了，所以這裡我直接在BaseActivity中呼叫 supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了預設的導航欄（注意，我的BaseActivity是繼承了AppCompatActivity的，如果是繼承Activity就應該呼叫requestWindowFeature(Window.FEATURE_NO_TITLE)）；如果你想修改標題和子標題的字型大小、顏色等，可以呼叫setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 這些API；自定義的View位於 title、subtitle 和 actionmenu 之間，這意味著，如果 title和 subtitle 都在，且 actionmenu選項 太多的時候，留給自定義View的空間就越小；導航圖示 和 app logo 的區別在哪？如果你只設置 導航圖示（ or app logo） 和 title、subtitle，會發現 app logo 和 title、subtitle 的間距比較小，看起來不如 導航圖示 與 它們兩搭配美觀；Toolbar 和其他控制元件一樣，很多屬性設定方法既支援程式碼設定，也支援在xml中設定（這裡也是最最最最最坑爹的地方，如何坑爹法，請接著往下看）；Toolbar 踩坑填坑坑一：xml佈局檔案中，Toolbar屬性設定無效
剛開始使用Toolbar的時候，我的佈局檔案中是這樣寫的
此時心中真是萬千匹草泥馬在奔騰，除了設定背景色和TextView有效外，說好的 logo、navigationIcon、subtitle、title 都跑哪去了？在編譯器沒報錯又不見效果的情況下，參考了其他開發者的用法後找到了以下的解決方案，就是在根佈局中加入自定義屬性的名稱空間
xmlns:toolbar="http://schemas.android.com/apk/res-auto"(這裡的toolbar可以換成你想要其他命名，做過自定義控制元件的童鞋相比很熟悉此用法了)然後把所有用 android:xxx 設定無效的，都用 toolbar：xxx 設定即可生效。最終的佈局程式碼如下：
坑二：Action Menu Item 的文字顏色設定無效系統默設定了ActionMenu每個Item的文字顏色和大小，像ToolbarActivity在Google原生5.1系統下預設效果就是下面這樣的
此時，如果我有需求要改變一下item文字顏色，應該怎麼破？我按照網上比較普遍的解決方案，做了如下兩步的修改操作：
這種方法也有一個小缺點，如果我把自定義控制元件換成Button，你會發現Button預設的文字顏色也變成了紅色。所以，此處如果有朋友有更好的解決方案，請留言賜教。如果你想要修改 ActionMenu Item 的文字大小，也可以在theme中設定加上如下設定
<item name="android:textSize">20sp</item>以上就是目前使用 Toolbar 一些比較折騰的坑，感覺 Google 對 Toolbar 這些坑，還可以進一步優化優化，不然就坑苦了開發者們了。
仿知乎主頁面為了加深一下 Toolbar 的開發體驗，我們使用 Toolbar 來實現知乎主頁的效果！先來看下知乎主頁的效果
如果前面的內容你看明白，想擼出這個介面無非是幾分鐘的事情，下面就直接上程式碼，不做贅述了。ZhiHuActivity介面程式碼
public class ZhiHuActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zhi_hu); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.inflateMenu(R.menu.zhihu_toolbar_menu); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); toolbar.setTitle(R.string.home_page); toolbar.setTitleTextColor(getResources().getColor(android.R.color.white)); }}zhihu_toolbar_menu.xml 選單
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@id/action_search" android:icon="@mipmap/ic_search" android:title="@string/menu_search" app:showAsAction="ifRoom" /> <item android:id="@id/action_notification" android:icon="@mipmap/ic_notifications" android:title="@string/menu_notifications" app:showAsAction="ifRoom" /> <item android:id="@id/action_settings" android:orderInCategory="100" android:title="@string/menu_settings" app:showAsAction="never" /> <item android:id="@id/action_about" android:orderInCategory="101" android:title="@string/menu_about_us" app:showAsAction="never" /></menu>activity_zhi_hu.xml 佈局
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" android:theme="@style/Theme.ToolBar.ZhiHu"> </android.support.v7.widget.Toolbar> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"> <ImageView android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:background="@mipmap/ic_zhihu_logo" /> </RelativeLayout></LinearLayout>styles.xml 中的 Theme.ToolBar.ZhiHu，給 Toolbar 設定android:theme用的
<resources> ... ... <style name="Theme.ToolBar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar"> <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item> </style> <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow"> <item name="android:src">@mipmap/ic_menu_more_overflow</item> </style></resources>最終得到下面這樣的效果
這裡在 Toolbar 設定 android:theme=”@style/Theme.ToolBar.ZhiHu” 主要是為了替換系統右上角三個點的圖示，如果不設定，則會成系統預設主題的樣子。
最後，再給知乎的主頁面做個小小的優化，它在 Android 4.4 上執行還是能夠看到一條黑乎乎的通知欄，為此我把 Toolbar 和 Translucent System Bar 的特性結合起來，最終改進成下面的效果：
Anddroid 4.4上改進版的知乎Toolbar
Android 5.1上改進版的知乎Toolbar
如果你還不知道 Translucent System Bar 的特性怎麼使用，請檢視我的上一篇文章：Translucent System Bar 的最佳實踐(http://www.jianshu.com/p/0acc12c29c1b)
總結關於 Toolbar 的使用就介紹到此，本來是懷著很簡單就可以上手的心態來使用，結果發現還是有很多坑需要填。果然還是驗證了一句老話
紙上得來終覺淺，絕知此事要躬行