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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM