Android Toolbar樣式定制詳解

前言

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