使用 colorPrimary 來給你的 App Bar 上色

enigma發表於2016-03-10
APP

App bar [1] 或者是說 Action bar，是眾多 Android 應用程式的標誌性組成部分，給導航功能和頻繁重要的操作提供了永續性的位置。當然它也可以成為給你 App 渲染個性的絕佳機會，使用你品牌色作為 App Bar 的背景色就是一種簡單的方式。

事實上，AppCompat 使用了提供一個調色盤（color palette [2]）的技術讓這一切變得非常容易。雖然 Material 主題是在 Android 5.0 引入的，但是 AppCompat 使得這種技術適用於所有Android 2.1 以上的裝置。

如果你使用的是一個類似於 Theme.AppCompat 的主題，那麼你只需要新增一個 colorPrimary 屬性:

然後你的 App Bar 將會恰如其分地被上色。要注意到我們要用的是 colorPrimary 而不是 android:colorPrimary。和appCompat 提供的 colorPrimary不同， android:colorPrimary 只能被用在 Android 5.0 以上的裝置。一定要確保你正使用的是正確的主題，這樣才能使得文字和圖示有足夠的反差。

– Theme.AppCompat -> 深色的Activity，深色的 App Bar
– Theme.AppCompat.Light -> 淺色的Activity，淺色的 App Bar
– Theme.AppCompat.Light.DarkActionBar ->  淺色的Activity，深色的 Action Bar

也許你早已經遷移到了 Toolbars （或者包裝在 Design Library 的 AppBarLayout 當中[3]）？ 在這種情況下，你很可能在使用 Theme.AppCompat.NoActionBar 或是  Theme.AppCompat.Light.NoActionBar 作為主題，並且把這些元素包含到了你的佈局 XML 檔案當中。值得慶幸的是，你依然可以通過 ?attr/colorPrimary 格式來利用你的 colorPrimary :

這個 ?attr/ 格式允許你把任何元素從你的主題中剝離，這讓你更輕鬆地把主題固化在一個地方，從而避免在很多檔案之間查詢或是替換。

不過我們還遺留了一件事，那就是文字上色的部分。根本沒有 Theme.AppCompat.Light.DarkActionBar.NoActionBar 這個主題。這便是 ThemeOverlay 頗為受用的證據。不同於一個完整的主題那樣，ThemeOverlay 只是覆蓋於當前主題，改變稍許它應該改變的檢視。舉個例子來講，如果我們有一個淺色的主題但是需要一個深色的 Toolbar，我們可以這麼用:

隨此改變，文字和圖示應該回歸到了白色，與深色的 Toolbar 相得益彰。

你將會發現一些其它的顏色你可以新增，並且應該新增到你的主題中：例如 colorPrimaryDark 用以改變 5.0 以上的裝置的狀態列以獲得更深的廣告色；colorAccent 則是高對比的強調色，為了讓類似於 FloatingActionButton 這樣的元素更加真實地浮現而設計。如果你想了解更多AppCompat 的事情，去看看我們的視訊 Consistent Design with AppCompat 吧。

現在使用 colorPrimary 來給你的 App Bar 上色，賦予App個性吧！[4]

Google Plus連結，需要梯子

#構建更佳的應用https://plus.google.com/s/%23BuildBetterApps

文中註釋連結，需要梯子

[1] – http://www.google.com/design/spec/layout/structure.html?linkId=15263302#structure-app-bar
[2] – https://developer.android.com/training/material/theme.html?linkId=15263307#ColorPalette
[3] – https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html?linkId=15263308
[4] – https://www.youtube.com/watch?v=5Be2mJzP-Uw

相關文章