前言

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.Toolbarandroid: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.Toolbarandroid: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

? ? 本文轉自 一點點征服 ? 博客園博客，原文鏈接：http://www.cnblogs.com/ldq2016/p/7209735.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的Android Toolbar样式定制详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。