使用colorPrimary增色你的App Bar

app bar或者是action bar是Android App的一部分,有些時候,我們希望能夠個性化我們的app:使用branding color來作爲app bar的背景顏色。

color palette(AppCompat提供的直接的解決方法),在5.0中增加的material design中,Android 2.1設備中同樣可以使用AppCompat這項技術。

如果你正在使用諸如:Theme.AppCompat,你需要添加colorPrimary屬性:

<style name="AppTheme" parent="@style/Theme.AppCompat">
<item name="colorPrimary">@color/primary</item>
</style>

這樣,App Bar會進行顏色的自適應。注意到的是,使用的是colorPrimary,而非android:colorPrimary,因爲android:colorPrimary僅僅只能在android 5.0或者以上的設備中,但是AppCompat中提供的colorPrimary卻不是。請確保你使用了正確的Theme,以保證text和icons具備足夠的對比性:

  • Theme.AppCompat->dark activity,dark app bar;
  • Theme.AppCompat.Light->light activity,light app bar;
  • Theme.AppCompat.Light.DarkActionBar->light activity,dark action bar.

但是,或許你已經早就使用了Toolbars(或許是使用了在Design Library’s AppBarLayout)。如果正是如此,或許你正在使用Theme.AppCompat.NoActionBar或者Theme.AppCompat.Light.NoActionBar,並且早將這些元素寫在了xml文件中。謝天謝地,我們仍舊可以通過?attr/colorPrimary使用:

<android.support.v7.widget.Toolbar
android:background="?attr/colorPrimary" />

好了:?attr/這種樣式允許你使用當前theme中任意的attribute,避免了在文件中尋找的麻煩。

介於並沒有Theme.AppCompat.Light.DarkActionBar.NoActionBar的存在,我們將失去text color的自渲染。沒關係,在xml中可以進行theme的ThemeOverlay,即是Theme的覆寫。值得注意的是,不同於完整的theme的覆寫,只會覆寫當前的Theme,並改變那些我們希望改變的東西。舉個例子,如果我們希望一個light theme,但是一個dark Toolbar,我們可以這樣使用:

<android.support.v7.widget.Toolbar
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

這樣,我們的text和icon將會成爲白色。this is perfect for a dark Toolbar.

事實上,你可以找到許多你能夠找到的顏色對你的5.0的設備的status bar的顏色進行渲染。比方說:colorPrimaryDark–使得status bar的背景色更深點,colorAccent–使得類如 FloatActionBar 的顏色與周圍有着對比,這樣看來,就真正的突出了。

現在開始,盡情的享受colorPrimary吧!

資料鏈接:
http://goo.gl/Meu1sE
https://goo.gl/EHaUMj
https://goo.gl/Wo1IBv
[https://www.youtube.com/watch?v=5Be2mJzP-Uw](https://www.youtube.com/watch?v=5Be2mJzP-Uw)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章