Android Theme.AppCompat 和 ThemeOverlay.AppCompat

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

Theme.AppCompat

<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>

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:background,android:colorBackground 等。

android:textColorPrimary

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

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>
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你在使用 ConstraintLayout 布局时,遇到了 "Missing Constraints in ConstraintLayout" 的错误,这意味着你的 Toolbar 控件缺少了必要的约束条件。 在 ConstraintLayout 中,每个控件都需要定义水平和垂直方向上的约束条件,以确定其在布局中的位置。对于 Toolbar,你可以尝试添加以下约束条件: 1. 左侧约束条件:将 Toolbar 的左侧边缘与父布局的左侧边缘连接。 ``` app:layout_constraintStart_toStartOf="parent" ``` 2. 右侧约束条件:将 Toolbar 的右侧边缘与父布局的右侧边缘连接。 ``` app:layout_constraintEnd_toEndOf="parent" ``` 3. 顶部约束条件:将 Toolbar 的顶部边缘与父布局的顶部边缘连接。 ``` app:layout_constraintTop_toTopOf="parent" ``` 这些约束条件将确保 Toolbar 控件在水平和垂直方向上都有合适的位置。记得将这些约束条件添加到 Toolbar 控件的 XML 声明中,例如: ```xml <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> ``` 通过添加这些约束条件,你应该能够解决 "Missing Constraints in ConstraintLayout" 的错误,并正确地布局 Toolbar 控件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值