前言
Marterial Design出來也有一段時間了，為了緊跟Google的設計規範，決定在項目中使用Toolbar。使用了一段時間之後，發現很多時候原始的Toolbar并不能滿足項目的要求。為了适應項目多樣化的需求，對Toolbar進行了深入的研究。
Toolbar簡介
Toolbar使應用的标準工具欄，可以說是Actionbar的更新版。和Actionbar相比，Toolbar最明顯的變化是自由，友善定制。
Toolbar簡單使用
樣式設定
style有兩個地方需要調整，一個在 res/values/styles.xml， 另一個在 /res/values-v21/styles.xml（沒有就不需要了），為了之後設定友善，我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的style。
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style> 因為隻要Toolbar，是以需要把原本的 ActionBar 隐藏起來。你可以在style裡面這樣寫：
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item> 但是我太懶了，發現原本就有隐藏标題的Theme，是以最終我是這樣寫的：
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
</style> 然後别忘記修改 /res/values-v21/styles.xml，将其 parent 屬性改為 AppTheme.Base：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
</resources> 界面布局
在 activity_main.xml 裡面加入 Toolbar 元件：
<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> 程式代碼
請到 MainActivity.java 裡加入 Toolbar 的聲明：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar); 運作截圖：
修改Toolbar背景顔色
截圖可以看到，标題欄和頁面連在一起，現在需要讓他們區分開來。
在style裡面将主題改為白色，修改toolbar的顔色
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- toolbar（actionbar）顔色 -->
<item name="colorPrimary">#2196F3</item>
</style> 在布局檔案裡為toolbar加上背景
android:background="?attr/colorPrimary" 
修改Toolbar文字顔色
上面的截圖可以看到，文字為黑色，和背景不太搭配，現在将toolbar文字改成白色。這裡分三步來改：
改變标題文字顔色
修改标題文字很簡單，在style裡加上下面的樣式就行
<!--toolbar标題文字顔色-->
<item name="android:textColorPrimary">@android:color/white</item> 改變菜單文字顔色
這裡給toolbar單獨設定一個theme
app:theme="@style/ToolbarTheme" 在theme裡面設定菜單文字為白色
<!-- toolbar菜單樣式 -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
<item name="actionMenuTextColor">@android:color/white</item>
</style> 修改Toolbar popup menu樣式
現在的popup menu是這樣的
可以發現，根本就看不到文字。
現在我們使背景變成黑色。
在布局檔案裡給toolbar加上popupTheme：
app:popupTheme="@style/ToolbarPopupTheme" 在style裡面這樣寫：
<!-- toolbar彈出菜單樣式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
<item name="android:colorBackground">#212121</item>
</style> 改完之後的效果：
修改Toolbar 标題文字大小
現在又發現标題文字太大了，想改小一點。
給toolbar加上titleTextAppearance屬性
app:titleTextAppearance="@style/ToolbarTitle" 對應的style
<!-- toolbar标題樣式 -->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">14sp</item>
</style> 修改Toolbar 菜單文字大小
修改完标題之後，又發現菜單文字太大，需要改小。
現在在菜單樣式裡面修改，加上actionMenuTextAppearance屬性，代碼如下：
<!-- toolbar菜單樣式 -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
<item name="actionMenuTextColor">@android:color/white</item>
<item name="actionMenuTextAppearance">@style/ToolbarMenuTextSize</item>
</style> 來看ToolbarMenuTextSize是怎麼寫的
<!-- toolbar菜單文字尺寸 -->
<style name="ToolbarMenuTextSize" parent="@style/TextAppearance.AppCompat.Menu">
<item name="android:textSize">10sp</item>
</style> 改完之後，看一下效果：
修改toolbar高度
可能有人會認為toolbar太高了，想把高度調低點。
條高度隻需要調整toolbar的layout_height和minHeight屬性就行了。
調整後的代碼如下：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="?attr/colorPrimary"
android:minHeight="45dp"
app:popupTheme="@style/ToolbarPopupTheme"
app:titleTextAppearance="@style/ToolbarTitle"
app:theme="@style/ToolbarTheme"> 修改toolbar menu的選中狀态
很多時候，預設的選中狀态并不能滿足設計的需求。
想要更改選中狀态，需要在toolbarTheme裡加上下面的樣式：
<item name="selectableItemBackground">@drawable/toolbar_button_bg</item> toolbar_button_bg.xml檔案的内容：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/primary_dark" android:state_pressed="true"/>
<item android:drawable="@color/primary_dark" android:state_focused="true"/>
<item android:drawable="@color/primary"/>
</selector> 注：顔色根據需求變更。
更改後的選中截圖：
總結
目前開發過程中，需要的toolbar樣式定制都包含在這裡了。後續有發現新的樣式定制需求，會繼續更新。
附上最終代碼下載下傳位址：
https://github.com/oyjt/android-toolbar
作者: 一點點征服
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利