Android Theme.AppCompat 中,你应该熟悉的颜色属性

创建一个 Android 工程,第一步,也是必不可少的一步,就是定制 Application 主题样式。利用系统诸多属性定义 App 各种 View 的默认样式,能够减少 layout 文件中很多重复性的属性设置代码。在开发者官网 R.attr 栏目中,Google 列出了所有 Android SDK 中的系统级属性。如何取舍,如何区分,又有哪些常用的属性呢?本文就来列举颜色相关的一些属性介绍,以供参考。

通常,在 res/values/styles.xml 文件中定义的 application 主题样式里,你可能见到的最常见的使用组合是这样:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

事实上,远不止这样...

Theme.AppCompat


自 Lollipop 开始,Android 系统引入 Material Design 风格,各个控件的呈现样式大有改变。为了在不同版本的系统中统一 UI 样式,设置自定义的 Application Theme 的 parent 样式为 Theme.AppCompat 系列即可。比如这里的 Theme.AppCompat.Light.NoActionBar 主题。

关于 AppCompat 相关主题提供的系统属性,可以参考源码:v7/appcompat/res/values-v21/themes_base.xml

同时,由于部分属性的版本兼容问题,为了避免添加多个版本的 styles 文件,可以省略 android: 命名空间。

colorPrimary

App Bar 的背景色,即 ActionBar,通常也是一个 App 的主题色调。不过 ActionBar 已经退出历史舞台,由 Toolbar 代替使用,但是 Toolbar 需要在 layout 文件中单独使用 background 属性设置背景色,如:

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

colorPrimaryDark

status bar(状态栏)背景色。仅作用于 Lollipop 及更高版本。

colorAccent

许多控件在选中状态或获取焦点状态下使用这个颜色,常见有:

  • CheckBox:checked 状态
  • RadioButton:checked 状态
  • SwitchCompat:checked 状态
  • EditText:获取焦点时的 underline 和 cursor 颜色
  • TextInputLayout:悬浮 label 字体颜色
  • 等等

除了这三种常见的控制颜色属性,事实上,还有一些颜色相关的属性也是非常实用的。

android:navigationBarColor

navigation bar 背景色。仅作用于 Lollipop 及更高版本。

colorControlNormal

某些 Views “normal” 状态下的颜色,常见如:unselected CheckBox 和 RadioButton,失去焦点时的 EditText,Toolbar 溢出按钮颜色,等等。

colorControlActivated

某种程度上,是 colorAccent 的替代者,比如对于 CheckBox 和 RadioButton 的 checked 状态,colorControlActivated 属性会覆盖 colorAccent 属性的对应颜色。

colorControlHighlight

所有可点击 Views 触摸状态下的 Ripple(涟漪)效果。仅作用于 Lollipop 及更高版本。

colorButtonNormal

Button normal 状态下的背景色。注意,这种设置与 Button 的 android:background 属性改变背景色不同的是,前者在 Lollipop 及更高版本上会让 Button 依旧保持阴影和 Ripple 触摸效果。

android:windowBackground

窗口背景色,诸如此类的还有:android:backgroundandroid:colorBackground 等。

android:textColorPrimary

EditText 的 text color,等等文本颜色。

诸如此类,还有很多颜色相关的系统属性。GitHubGist 上面有一份参考指南:Android Lollipop Widget Tinting Guide,列举了常用控件的着色相关属性。

ThemeOverlay.AppCompat


作为 Application Theme 的 parent 主题,Theme.AppCompat 提供了诸多属性设置 App 全局 Views 样式。但是有时候,我们还是需要单独给某个或者某些 View 设置与全局样式不一样的样式。这种情况下,ThemeOverlay.AppCompat 就派上用场啦。

正如命名所表达的含义一般,ThemeOverlay.AppCompat 系列主题用于覆盖基本的 AppCompat.Theme 样式,按照需求仅仅改变部分属性的样式。这里列举一些常见用法:

ThemeOverlay.AppCompat

继承自 @style/Base.ThemeOverlay.AppCompat。这是一个空主题,但是却将 AppCompat 主题中的相关属性复制了一遍。这在给个别 View 单独设置部分样式时非常实用。举个例子:

<style name="AppTheme.Secondary" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/colorPrimary</item>
</style>

然后再借助 android:theme 属性使用在 layout 中的某个 View 上:

android:theme="@style/AppTheme.Secondary"

在这个例子中,重写了 colorAccent 属性,同时保证其他属性继续延用 parent 为 Theme.AppCompat 的 AppTheme 中的设置。从 ThemeOverlay.AppCompat 文档介绍中可以看出,比如 colorPrimary 属性是这样复制的:

android:colorPrimary = ?attr/colorPrimary

如果 parent 使用 Theme.AppCompat 或者其他主题就不行,相当于只设置 colorAccent 属性,其他属性使用默认样式。

ThemeOverlay.AppCompat.Light(Dark)

与 ThemeOverlay.AppCompat 不同的是,这个主题修改背景色、文本颜色、高亮状态颜色来匹配 Light(Dark)主题。比如 Light 样式下的白色背景里,显示黑色(Dark)文本;Dark 样式下的黑色背景里,显示白色(Light)文本。

这个主题的使用场景可以是这样,比如我们的全局主题是 Light,但是有一部分 UI 可能需要使用一个 Dark 样式的背景,这种情况下,每个 View 单独设置颜色就比较麻烦,可以在 ViewGroup 中统一设置,比如:

<FrameLayout
    android:background=”@color/dark_background”
    android:theme="@style/ThemeOverlay.AppCompat.Dark”>
  <TextView />
</FrameLayout>

ThemeOverlay.AppCompat.Dark.ActionBar
ThemeOverlay.AppCompat.Light.ActionBar

相比而言,由于 Toolbar 的广泛使用,这对主题使用的就比较多啦。前面我们说过,colorControlNormal 和 textColorPrimary 属性都可以影响 Toolbar 或者 ActionBar 的溢出按钮颜色和溢出文本颜色,同时也改变着其他 View 的显示颜色。综合考虑下,我们不会使用在 Application Theme 使用这些属性控制 Toolbar 的内容颜色,而是使用这对主题单独设置给 Toolbar 的 theme 属性。

比如全局使用的是 Light 主题,Toolbar 的背景色是蓝色或者红色之类的颜色,要求溢出按钮的颜色是白色。如果没有特殊设置的话,默认情况下溢出按钮显示为黑色。此时,便可以用上这个主题:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimary">

</android.support.v7.widget.Toolbar>

总结


系统主题提供的属性样式非常之多,同时也会相互影响,多对多关系,错综复杂,并且有些还会存在版本兼容问题,使用时一定要多多测试。当然,使用恰当的话,能够减少很多重复性的 xml 代码,也方便后续 App 主题变更的需求,拓展之类的场景。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,924评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,902评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,716评论 0 239
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,783评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,166评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,510评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,784评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,476评论 0 196
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,196评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,459评论 2 243
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,978评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,321评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,964评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,046评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,803评论 0 193
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,530评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,420评论 2 265

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,561评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,078评论 2 44
  • 骷髅,没有血肉,没有灵魂,没了铁石心肠刀子嘴豆腐心一类的说法,除了高度,每个都一样的,努力支着几乎全然相似...
    陈谢意阅读 442评论 0 3
  • 小灶行动营马上就要开营了,但是我心里还是没底,要完成每天一本书,这对于一个读书龟速的我来说简直难似登天。该怎么办是...
    唯其时物阅读 268评论 0 1
  • 20160409 建材-->BO,多头AA; 煤炭-->BO,持续反弹,多头AAA; 贵金属-->BO,滞涨,A;...
    constant007阅读 174评论 0 0