過年前發(fā)了一篇介紹 Translucent System Bar 特性的文章 Translucent System Bar 的最佳實踐，收到很多開發(fā)者的關注和反饋。今天開始寫第二篇，全面的介紹一下Toolbar 的使用。說起 Toolbar ，可能有很多開發(fā)的童鞋還比較陌生，沒關系，請接著往下看。
Toolbar 是在 Android 5.0 開始推出的一個 Material Design 風格的導航控件 ，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導航欄，以此來取代之前的 Actionbar 。與 Actionbar 相比，Toolbar 明顯要靈活的多。它不像 Actionbar一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。除此之外，在設計Toolbar 的時候，Google也留給了開發(fā)者很多可定制修改的余地，這些可定制修改的屬性在API文檔中都有詳細介紹，如：
設置導航欄圖標；設置App的logo；支持設置標題和子標題；支持添加一個或多個的自定義控件；支持Action Menu；
總之，與 Actionbar 相比，Toolbar 讓我感受到Google滿滿的誠意。怎樣？是否已經(jīng)對 Toolbar 有大概的了解，躍躍欲試的感覺出來了有木有？接下來，我們就一步一步的來看如何使用 Toolbar（其實是我使用 Toolbar 踩坑填坑的血淚史，你們接下去看，我先擦個眼淚.... ）。
前面提到 Toolbar 是在 Android 5.0 才開始加上的，Google 為了將這一設計向下兼容，自然也少不了要推出兼容版的 Toolbar 。為此，我們需要在工程中引入appcompat-v7 的兼容包，使用 android.support.v7.widget.Toolbar 進行開發(fā)。下面看一下代碼結(jié)構(gòu)，同樣把重點部分已經(jīng)紅圈圈出：
ToolbarActivity 包含了 Toolbar 的一些基本使用， ZhiHuActivity 是在熟悉了Toolbar 后對知乎主頁面的一個高仿實現(xiàn)。
layout和menu文件夾分別是上面提到的兩個Activity的布局文件 和 actionmenu 菜單文件。
values、values-v19、values-v21 中包含了一些自定義的 theme，后面用到的時候會順帶講解。
我們先來看一下 ToolbarActivity 的運行效果
ToolbarActivity效果圖按照效果圖，從左到右分別是我們前面提及到的 導航欄圖標、App的logo、標題和子標題、自定義控件、以及 ActionMenu 。接著，我們來看下布局文件和代碼實現(xiàn)。
首先，在布局文件 activity_tool_bar.xml 中添加進我們需要的 Toolbar 控件
<?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"> <!--自定義控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar></LinearLayout>接著在 base_toolbar_menu.xml 中添加 action menu 菜單項
<?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 中調(diào)用代碼拿到這 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);//設置導航欄圖標 toolbar.setLogo(R.mipmap.ic_launcher);//設置app logo 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; } }); }}代碼到此已經(jīng)完成了 Toolbar 的基本使用，注意，是基本使用而已！！！！！下面有幾個代碼里面需要注意的地方：
我們在使用 Toolbar 時候需要先隱藏掉系統(tǒng)原先的導航欄，網(wǎng)上很多人都說給Activity設置一個NoActionBar的Theme。但個人覺得有點小題大做了，所以這里我直接在BaseActivity中調(diào)用supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默認的導航欄（注意，我的BaseActivity是繼承了AppCompatActivity的，如果是繼承Activity就應該調(diào)用requestWindowFeature(Window.FEATURE_NO_TITLE)）；
如果你想修改標題和子標題的字體大小、顏色等，可以調(diào)用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 這些API；
自定義的View位于 title、subtitle 和 actionmenu 之間，這意味著，如果 title和 subtitle 都在，且 actionmenu選項 太多的時候，留給自定義View的空間就越小；
導航圖標 和 app logo 的區(qū)別在哪？如果你只設置 導航圖標（ or app logo） 和title、subtitle，會發(fā)現(xiàn) app logo 和 title、subtitle 的間距比較小，看起來不如導航圖標 與 它們兩搭配美觀；
Toolbar 和其他控件一樣，很多屬性設置方法既支持代碼設置，也支持在xml中設置（這里也是最最最最最坑爹的地方，如何坑爹法，請接著往下看）；
剛開始使用Toolbar的時候，我的布局文件中是這樣寫的
<?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:logo="@mipmap/ic_launcher" android:navigationIcon="@mipmap/ic_drawer_home" android:subtitle="456" android:title="123"> <!--自定義控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar></LinearLayout>在真機跑起來之后，看到的結(jié)果是下面這樣的。
Toolbar 屬性設置無效此時心中真是萬千匹草泥馬在奔騰，除了設置背景色和TextView有效外，說好的logo、navigationIcon、subtitle、title 都跑哪去了？在編譯器沒報錯又不見效果的情況下，參考了其他開發(fā)者的用法后找到了以下的解決方案，就是在根布局中加入自定義屬性的命名空間
xmlns:toolbar="http://schemas.android.com/apk/res-auto"(這里的toolbar可以換成你想要其他命名，做過自定義控件的童鞋相比很熟悉此用法了)然后把所有用 android:xxx 設置無效的，都用 toolbar：xxx 設置即可生效。最終的布局代碼如下：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:toolbar="http://schemas.android.com/apk/res-auto" 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" toolbar:navigationIcon="@mipmap/ic_drawer_home" toolbar:logo="@mipmap/ic_launcher" toolbar:subtitle="456" toolbar:title="123"> <!--自定義控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar></LinearLayout>到此即可解決 xml 中屬性設置失效的問題，為什么會出現(xiàn)這種問題呢？我猜測是因為這個控件是兼容版的控件，用 android:xxx 設置無效是的這些屬性是在兼容包中，不在默認的Android SDK中，所以我們需要額外的引入。至于為什么IDE不報錯，估計就是bug了吧！
坑二：Action Menu Item 的文字顏色設置無效系統(tǒng)默設置了ActionMenu每個Item的文字顏色和大小，像ToolbarActivity在Google原生5.1系統(tǒng)下默認效果就是下面這樣的
Android 5.1 默認的ActionMenu Item的風格此時，如果我有需求要改變一下item文字顏色，應該怎么破？我按照網(wǎng)上比較普遍的解決方案，做了如下兩步的修改操作：
在styles.xml中自定義一個Theme，并設置 actionMenuTextColor 屬性（注意：不是 android:actionMenuTextColor ）<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar"> <item name="actionMenuTextColor">@color/color_red</item></style>在布局文件的Toolbar中設置popupTheme（注意：是toolbar:xxx，不是android:xxx） <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" toolbar:popupTheme="@style/Theme.ToolBar.Base"> <!--自定義控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar>運行之后，文字的顏色的并沒有發(fā)生任何改變。說好的改變顏色呢.....找來找去，最后再 StackOverflow 找到一個還不錯的解決方案，就是把上面的的 actionMenuTextColor屬性換成 android:textColorPrimary 即可解決，最終得到下面的運行效果。
成功修改 actionmenu item 文字的顏色這種方法也有一個小缺點，如果我把自定義控件換成Button，你會發(fā)現(xiàn)Button默認的文字顏色也變成了紅色。所以，此處如果有朋友有更好的解決方案，請留言賜教。
如果你想要修改 ActionMenu Item 的文字大小，也可以在theme中設置加上如下設置
<item name="android:textSize">20sp</item>以上就是目前使用 Toolbar 一些比較折騰的坑，感覺 Google 對 Toolbar 這些坑，還可以進一步優(yōu)化優(yōu)化，不然就坑苦了開發(fā)者們了。
為了加深一下 Toolbar 的開發(fā)體驗，我們使用 Toolbar 來實現(xiàn)知乎主頁的效果！先來看下知乎主頁的效果
Android 5.1上知乎主頁效果圖如果前面的內(nèi)容你看明白，想擼出這個界面無非是幾分鐘的事情，下面就直接上代碼，不做贅述了。
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>最終得到下面這樣的效果
Android5.1上仿知乎主頁面效果這里在 Toolbar 設置 android:theme="@style/Theme.ToolBar.ZhiHu" 主要是為了替換系統(tǒng)右上角三個點的圖標，如果不設置，則會成系統(tǒng)默認主題的樣子。
不設置Theme的效果最后，再給知乎的主頁面做個小小的優(yōu)化，它在 Android 4.4 上運行還是能夠看到一條黑乎乎的通知欄，為此我把 Toolbar 和 Translucent System Bar 的特性結(jié)合起來，最終改進成下面的效果（附上 Android4.4 和 5.1 上的運行效果）。
Android4.4上改進版的知乎主頁
如果你還不知道 Translucent System Bar 的特性怎么使用，請查看我的上一篇文章：Translucent System Bar 的最佳實踐
關于 Toolbar 的使用就介紹到此，本來是懷著很簡單就可以上手的心態(tài)來使用，結(jié)果發(fā)現(xiàn)還是有很多坑需要填。果然還是驗證了一句老話
紙上得來終覺淺，絕知此事要躬行對于想要更深的了解 Toolbar 設計的童鞋，也可以看看這篇官網(wǎng)文檔（自備梯子）。
同樣，分享即美德，需要源代碼的童鞋，請戳：https://github.com/D-clock/AndroidSystemUiTraining
新聞熱點
疑難解答
