天天看點

Android Toolbar樣式定制詳解

Marterial Design出來也有一段時間了,為了緊跟Google的設計規範,決定在項目中使用Toolbar。使用了一段時間之後,發現很多時候原始的Toolbar并不能滿足項目的要求。為了适應項目多樣化的需求,對Toolbar進行了深入的研究。

Toolbar使應用的标準工具欄,可以說是Actionbar的更新版。和Actionbar相比,Toolbar最明顯的變化是自由,友善定制。

style有兩個地方需要調整,一個在 res/values/styles.xml, 另一個在 /res/values-v21/styles.xml(沒有就不需要了),為了之後設定友善,我們先在 res/values/styles.xml 裡增加一個名為 AppTheme.Base 的style。

因為隻要Toolbar,是以需要把原本的 ActionBar 隐藏起來。你可以在style裡面這樣寫:

但是我太懶了,發現原本就有隐藏标題的Theme,是以最終我是這樣寫的:

然後别忘記修改 /res/values-v21/styles.xml,将其 parent 屬性改為 AppTheme.Base:

在 activity_main.xml 裡面加入 Toolbar 元件:

請到 MainActivity.java 裡加入 Toolbar 的聲明:

運作截圖:

Android Toolbar樣式定制詳解

截圖可以看到,标題欄和頁面連在一起,現在需要讓他們區分開來。

在style裡面将主題改為白色,修改toolbar的顔色

在布局檔案裡為toolbar加上背景

Android Toolbar樣式定制詳解

上面的截圖可以看到,文字為黑色,和背景不太搭配,現在将toolbar文字改成白色。這裡分三步來改:

修改标題文字很簡單,在style裡加上下面的樣式就行

這裡給toolbar單獨設定一個theme

在theme裡面設定菜單文字為白色

Android Toolbar樣式定制詳解

現在的popup menu是這樣的

Android Toolbar樣式定制詳解

可以發現,根本就看不到文字。

現在我們使背景變成黑色。

在布局檔案裡給toolbar加上popupTheme:

在style裡面這樣寫:

改完之後的效果:

Android Toolbar樣式定制詳解

現在又發現标題文字太大了,想改小一點。

給toolbar加上titleTextAppearance屬性

對應的style

Android Toolbar樣式定制詳解

修改完标題之後,又發現菜單文字太大,需要改小。

現在在菜單樣式裡面修改,加上actionMenuTextAppearance屬性,代碼如下:

來看ToolbarMenuTextSize是怎麼寫的

改完之後,看一下效果:

Android Toolbar樣式定制詳解

可能有人會認為toolbar太高了,想把高度調低點。

條高度隻需要調整toolbar的layout_height和minHeight屬性就行了。

調整後的代碼如下:

很多時候,預設的選中狀态并不能滿足設計的需求。

想要更改選中狀态,需要在toolbarTheme裡加上下面的樣式:

toolbar_button_bg.xml檔案的内容:

注:顔色根據需求變更。

更改後的選中截圖:

Android Toolbar樣式定制詳解

目前開發過程中,需要的toolbar樣式定制都包含在這裡了。後續有發現新的樣式定制需求,會繼續更新。

附上最終代碼下載下傳位址:

<a href="https://github.com/oyjt/android-toolbar">https://github.com/oyjt/android-toolbar</a>

    本文轉自 一點點征服   部落格園部落格,原文連結:http://www.cnblogs.com/ldq2016/p/7209735.html,如需轉載請自行聯系原作者

繼續閱讀