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

Android Toolbar樣式定製詳解