Android主題與Toolbar樣式之間的關(guān)系

前言

最近這幾天被Android主題與Toolbar樣式搞暈了,因為本來自己的Android根基就淺匪补,對這方面又一直沒有深入了解過伞辛;后來在Google上搜索到一篇文章:Android: Changing the Toolbar’s text color and overflow icon color,該文章對這方面有一定描述夯缺,幫助我理解了一些內(nèi)容蚤氏。

然后我試著將這篇文章翻譯了一下,想著不明白的時候再回來查閱踊兜,譯文:Android:改變 Toolbar 的文字和溢出圖標(biāo)顏色竿滨。

今天又測試一下相關(guān)內(nèi)容,這里寫點東西記一下捏境。

目的

我的最終目的是在Light主題上得到深色Toolbar背景色和白色菜單按鈕于游,包括溢出菜單背景色和Menu項字體顏色都一致,如下圖所示:

下面描述一下如何得到這么一個效果典蝌。


最初的樣子

新創(chuàng)建項目時在style.xml中定義一下AppTheme并在AndroidManifest.xml文件中指定為App的主題(android:theme=”@style/AppTheme”)曙砂,Style定義如下所示:

其它測試代碼省略。這時我們運行一下骏掀,可以看到界面如下所示:


感覺黑色的標(biāo)題和菜單真的好丑鸠澈,因為淺色主題期 App Bar (Toolbar 或者 ActionBar)擁有淺色背景,因此給你用上了黑色的標(biāo)題和溢出菜單圖標(biāo)截驮,包括菜單字體的顏色笑陈。

定義溢出菜單樣式

我們看到上面的效果圖中溢出菜單是覆蓋在Toolbar之上的,我希望它能像微信中的一樣出現(xiàn)在Toolbar下面葵袭,可以通過自定義樣式來做到這些涵妥。

在style.xml中定義OverflowMenuStyle樣式如下所示:

這時有兩種方式應(yīng)用這個樣式:

這時我們運行App,效果如下所示:


溢出菜單的彈出層已經(jīng)位于Toolbar的下方了坡锡,而且背景色也改為我們期望的colorPrimary顏色蓬网。

接下來我們嘗試改變一下標(biāo)題和溢出菜單項的文字顏色。

Dark主題

這時改變標(biāo)題和溢出圖標(biāo)為白色的最簡單方法就是使用Dark主題作為我們的App主題鹉勒,因為Dark主題會默認(rèn)使用白色的標(biāo)題和溢出菜單圖標(biāo)帆锋,那么我們試一下。

修改AppTheme的父主題為“Theme.AppCompat.NoActionBar”禽额,該部分代碼如下所示:

運行效果如下所示:


這時已經(jīng)很接近我的目標(biāo)了锯厢,但由于用的是Dark主題皮官,因此TextView的背景色是黑色的,我不希望我的大部分UI控件都是深色系統(tǒng)的实辑,因此這種方式我不想采用捺氢。

我把AppTheme的parent改回“Theme.AppCompat.Light.NoActionBar”主題,這時再看一遍當(dāng)前的運行效果:


這是淺色主題下的表現(xiàn)剪撬,接下來嘗試改變這些黑色字體摄乒。

改變Toolbar主題

Android 5.0引入一個全新的特性,允許你對view設(shè)置theme婿奔,這種設(shè)置會影響控件及其包含的子控件缺狠。

使用AppCompat v22.1.x 后,也可以給你 layout 里的任意視圖設(shè)置主題萍摊。

只要使用 android:theme 這個屬性就好挤茄,新版本的兼容庫可以在 compat 和 framework 之間無縫地切換功能。

從上面的描述中可以得知冰木,我們可以單獨為Toolbar設(shè)置主題穷劈,主題中的樣式將影響Toolbar本身及其子View;因此我們考慮是否可以為Toolbar設(shè)置一個深色主題踊沸,這樣系統(tǒng)會將標(biāo)題和溢出圖標(biāo)等元素顏色設(shè)置為白色歇终。

嘗試將Toolbar主題設(shè)置為“ThemeOverlay.AppCompat.Dark.ActionBar”如下所示:

運行App可以看到確實有效果,這樣我們就可以得到開關(guān)描述的效果了(淺色主題下Toolbar使用深色背景逼龟,并且將標(biāo)題评凝、溢出圖標(biāo)及溢出菜單文字改為白色)。

再看一遍最終效果圖吧腺律!


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奕短,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子匀钧,更是在濱河造成了極大的恐慌翎碑,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件之斯,死亡現(xiàn)場離奇詭異日杈,居然都是意外死亡,警方通過查閱死者的電腦和手機佑刷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進(jìn)店門莉擒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瘫絮,你說我怎么就攤上這事啰劲。” “怎么了檀何?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我频鉴,道長栓辜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任垛孔,我火速辦了婚禮藕甩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘周荐。我一直安慰自己狭莱,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布概作。 她就那樣靜靜地躺著腋妙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪讯榕。 梳的紋絲不亂的頭發(fā)上骤素,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天,我揣著相機與錄音愚屁,去河邊找鬼济竹。 笑死,一個胖子當(dāng)著我的面吹牛霎槐,可吹牛的內(nèi)容都是我干的送浊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼丘跌,長吁一口氣:“原來是場噩夢啊……” “哼袭景!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起碍岔,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤浴讯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蔼啦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體榆纽,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年捏肢,在試婚紗的時候發(fā)現(xiàn)自己被綠了奈籽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸵赫,死狀恐怖衣屏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辩棒,我是刑警寧澤狼忱,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布膨疏,位于F島的核電站,受9級特大地震影響钻弄,放射性物質(zhì)發(fā)生泄漏佃却。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一窘俺、第九天 我趴在偏房一處隱蔽的房頂上張望饲帅。 院中可真熱鬧,春花似錦瘤泪、人聲如沸灶泵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赦邻。三九已至,卻和暖如春掀宋,著一層夾襖步出監(jiān)牢的瞬間深纲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工劲妙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留湃鹊,地道東北人。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓镣奋,卻偏偏與公主長得像币呵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子侨颈,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,455評論 2 359

推薦閱讀更多精彩內(nèi)容