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 的聲明:
運作截圖:
截圖可以看到,标題欄和頁面連在一起,現在需要讓他們區分開來。
在style裡面将主題改為白色,修改toolbar的顔色
在布局檔案裡為toolbar加上背景
上面的截圖可以看到,文字為黑色,和背景不太搭配,現在将toolbar文字改成白色。這裡分三步來改:
修改标題文字很簡單,在style裡加上下面的樣式就行
這裡給toolbar單獨設定一個theme
在theme裡面設定菜單文字為白色
現在的popup menu是這樣的
可以發現,根本就看不到文字。
現在我們使背景變成黑色。
在布局檔案裡給toolbar加上popupTheme:
在style裡面這樣寫:
改完之後的效果:
現在又發現标題文字太大了,想改小一點。
給toolbar加上titleTextAppearance屬性
對應的style
修改完标題之後,又發現菜單文字太大,需要改小。
現在在菜單樣式裡面修改,加上actionMenuTextAppearance屬性,代碼如下:
來看ToolbarMenuTextSize是怎麼寫的
改完之後,看一下效果:
可能有人會認為toolbar太高了,想把高度調低點。
條高度隻需要調整toolbar的layout_height和minHeight屬性就行了。
調整後的代碼如下:
很多時候,預設的選中狀态并不能滿足設計的需求。
想要更改選中狀态,需要在toolbarTheme裡加上下面的樣式:
toolbar_button_bg.xml檔案的内容:
注:顔色根據需求變更。
更改後的選中截圖:
目前開發過程中,需要的toolbar樣式定制都包含在這裡了。後續有發現新的樣式定制需求,會繼續更新。
附上最終代碼下載下傳位址:
<a href="https://github.com/oyjt/android-toolbar">https://github.com/oyjt/android-toolbar</a>
本文轉自 一點點征服 部落格園部落格,原文連結:http://www.cnblogs.com/ldq2016/p/7209735.html,如需轉載請自行聯系原作者