最詳細的 Toolbar 開發實踐總結
過年前發了一篇介紹 Translucent System Bar 特性的文章 Translucent System Bar 的最佳實踐，收到很多開發者的關注和反饋。今天開始寫第二篇，全面的介紹一下 Toolbar 的使用。說起 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"?> <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 中調用代碼拿到這 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; } }); } }代碼到此已經完成了 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的時候，我的布局文件中是這樣寫的
<?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>在真機跑起來之后，看到的結果是下面這樣的。
此時心中真是萬千匹草泥馬在奔騰，除了設置背景色和TextView有效外，說好的 logo、navigationIcon、subtitle、title 都跑哪去了？在編譯器沒報錯又不見效果的情況下，參考了其他開發者的用法后找到了以下的解決方案，就是在根布局中加入自定義屬性的命名空間
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 中屬性設置失效的問題，為什么會出現這種問題呢？我猜測是因為這個控件是兼容版的控件，用 android:xxx 設置無效是的這些屬性是在兼容包中，不在默認的Android SDK中，所以我們需要額外的引入。至於為什么IDE不報錯，估計就是bug了吧！
- 坑二：Action Menu Item 的文字顏色設置無效
系統默設置了ActionMenu每個Item的文字顏色和大小，像ToolbarActivity在Google原生5.1系統下默認效果就是下面這樣的
此時，如果我有需求要改變一下item文字顏色，應該怎么破？我按照網上比較普遍的解決方案，做了如下兩步的修改操作：
- 在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>運行之后，文字的顏色的並沒有發生任何改變。說好的改變顏色呢.....找來找去，最后在 StackOverflow 找到一個還不錯的解決方案，就是把上面的的 actionMenuTextColor 屬性換成 android:textColorPrimary 即可解決，最終得到下面的運行效果。
這種方法也有一個小缺點，如果我把自定義控件換成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 的特性結合起來，最終改進成下面的效果（附上 Android4.4 和 5.1 上的運行效果）。
如果你還不知道 Translucent System Bar 的特性怎么使用，請查看我的上一篇文章：Translucent System Bar 的最佳實踐
總結
關於 Toolbar 的使用就介紹到此，本來是懷着很簡單就可以上手的心態來使用，結果發現還是有很多坑需要填。果然還是驗證了一句老話
紙上得來終覺淺，絕知此事要躬行對於想要更深的了解 Toolbar 設計的童鞋，也可以看看這篇官網文檔（自備梯子）。
同樣，分享即美德，需要源代碼的童鞋，請戳：https://github.com/D-clock/AndroidSystemUiTraining
歡迎關注我的簡書，以及：
- 知乎：https://www.zhihu.com/people/d_clock
- 知乎專欄（技術視界）：https://zhuanlan.zhihu.com/coderclock
- 知乎專欄（閱讀視界）：https://zhuanlan.zhihu.com/readerclock
- 個人博客：http://blog.coderclock.com/
- 微信公眾號：
作者：D_clock愛吃蔥花
鏈接：http://www.jianshu.com/p/79604c3ddcae
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。