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

青春须早为,岂能长少年。这篇文章主要讲述Android Theme.AppCompat 中,你应该熟悉的颜色属性相关的知识,希望能为你提供帮助。
创建一个 android 工程, 第一步, 也是必不可少的一步, 就是定制 Application 主题样式。利用系统诸多属性定义 App 各种 View 的默认样式, 能够减少 layout 文件中很多重复性的属性设置代码。在开发者官网 R.attr 栏目中, Google 列出了所有 Android SDK 中的系统级属性。如何取舍, 如何区分, 又有哪些常用的属性呢? 本文就来列举颜色相关的一些属性介绍, 以供参考。

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

文章图片

通常, 在 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 主题变更的需求, 拓展之类的场景。
关于我: 亦枫, 博客地址: http://yifeng.studio/, 新浪微博: IT亦枫
微信扫描二维码, 欢迎关注我的个人公众号: 安卓笔记侠
不仅分享我的原创技术文章, 还有程序员的职场遐想
【Android Theme.AppCompat 中,你应该熟悉的颜色属性】
Android Theme.AppCompat 中,你应该熟悉的颜色属性

文章图片


    推荐阅读