样式和主题背景

试用 Compose 方式
Jetpack Compose 是推荐在 Android 设备上使用的界面工具包。了解如何在 Compose 中使用主题设置。
<ph type="x-smartling-placeholder"></ph> Compose 中的设计系统 →

借助 Android 上的样式和主题,您可以将应用设计的细节与界面分离开来 结构和行为,类似于网页设计中的样式表。

样式是一组属性,用于指定单个元素的外观 View。样式可以指定属性 例如字体颜色、字号、背景颜色等。

主题是应用于整个应用、activity 或视图的一组属性 而不仅仅是单个视图。应用某个主题后,应用中的每个视图 activity 会应用其支持的每个主题属性。主题还可以将样式应用于 非视图元素,例如状态栏和窗口背景。

样式和主题在 样式资源文件 res/values/,通常命名为 styles.xml

图 1. 应用于同一 activity 的两个主题: Theme.AppCompat(左)和 Theme.AppCompat.Light(右)。

主题与样式

主题和样式有许多相似之处,但其用途不同。主题和 样式具有相同的基本结构,即将属性映射到的键值对 资源

样式用于为特定类型的视图指定属性。例如,一种样式 指定按钮的属性。您在样式中指定的每个属性都是您可在 布局文件将所有属性提取到样式中,便于您使用和维护它们 并显示在多个微件上

主题背景定义可由样式、布局、 等等主题会为 Android 分配语义名称,例如 colorPrimary 资源。

样式和主题背景应当配合使用。例如,您可能有一个样式 按钮的一个部分为 colorPrimary,另一部分为 colorSecondary。这些颜色的实际定义在主题中提供。时间 设备进入夜间模式时,您的应用可以从“浅色”模式“深色主题”模式主题 更改所有这些资源名称的值您无需更改样式,因为 样式使用语义名称而非特定的颜色定义。

如需详细了解如何搭配使用主题和样式,请参阅此博文 Android 样式设置:主题与样式

创建并应用样式

如需创建新样式,请打开项目的 res/values/styles.xml 文件。对于 请按以下步骤创建:

  1. 使用唯一标识样式的名称添加 <style> 元素。
  2. 为您要定义的每个样式属性添加一个 <item> 元素。通过 每件商品中的 name 均用于指定您原本在 布局。<item> 元素中的值即为该属性的值。

例如,假设您定义了以下样式:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

您可以将该样式应用到视图,如下所示:

<TextView
    style="@style/GreenText"
    ... />

只要视图接受,样式中指定的每个属性就会应用于该视图。视图 并忽略不接受的任何属性。

<ph type="x-smartling-placeholder">

不过,通常不要将样式应用于单个视图, 针对整个应用、活动或应用的集合将样式作为主题应用 具体说明,请参阅本指南的其他部分。

扩展和自定义样式

创建自己的样式时,请始终从框架或支持中扩展现有样式 库,以便保持与平台界面样式的兼容性。要扩展样式,请指定 您想要使用 parent 属性扩展的样式。然后,您可以替换继承的 样式属性和添加新的属性。

例如,您可以继承 Android 平台的默认文本外观,并将其修改为 如下:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

不过,请始终继承 Android 支持库中的核心应用样式。其中的样式 支持库通过优化 每个版本。支持库样式的名称通常与平台中的样式相似, 但包含 AppCompat

若要从库或您自己的项目继承样式,请声明父样式名称 不包含前面示例中显示的 @android:style/ 部分。例如: 以下示例沿用了支持库中的文本外观样式:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

您还可以通过扩展样式的 而不是使用 parent 属性。也就是说,将 样式的名称 + 您要继承的样式的名称,以句点分隔。您 通常只有在扩展您自己的样式(而非来自其他库的样式)时才会执行此操作。例如: 以下样式沿用了前面示例中的 GreenText 的所有样式 然后增大文字大小:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

通过链接更多样式,您可以根据需要继续像这样多次继承样式。 名称。

<ph type="x-smartling-placeholder">

如需了解可使用 <item> 标记声明的属性,请参阅有关 属性”各个类引用中的表格。支持所有视图 基本 XML 属性 View,而许多视图都会添加自己的特殊属性。例如, TextView XML 属性 添加 android:inputType 属性,您可以应用于接收输入的文本视图,例如 EditText widget。

将样式作为主题背景来应用

您可以像创建样式一样创建主题背景。区别在于应用方式: 您无需在视图上应用 style 属性的样式,而是应用主题 <application> 标记上的 android:theme 属性或 在 AndroidManifest.xml 文件中使用 <activity> 标记。

例如,下面展示了如何将 Android 支持库的 Material Design“深色”应用主题为 整个应用:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

下面的代码演示了如何将“浅色”主题应用到一个 activity:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

应用或 activity 中的每个视图都会应用其支持的样式,这些样式来自 指定主题。如果视图仅支持样式中声明的部分属性,则应用该视图 属性,而忽略不支持的属性。

从 Android 5.0(API 级别 21)和 Android 支持库 v22.1 开始,您还可以指定 将 android:theme 属性添加到布局文件中的视图。这会修改 该视图及任何子视图,这对于更改特定 部分

前面的示例展示了如何应用一个主题,例如 Theme.AppCompat, 由 Android 支持库提供。不过,您通常需要自定义主题背景 您应用的品牌最好的方法是通过支持库扩展这些样式, 替换部分属性,如以下部分所述。

样式层次结构

Android 以多种方式在您的 Android 应用中设置属性。例如: 您可以直接在布局中设置属性、将样式应用于视图、将主题应用于布局,以及 甚至可以以编程方式设置属性

在选择如何为应用设置样式时,需考虑 Android 的样式层次结构。一般来说,使用 尽可能多地显示主题和样式,以保持一致性。如果您在 以下列表决定了最终会应用哪些属性。此列表为 而这些 API 会按优先级从高到低排序。

  1. 使用文本 span 将字符级或段落级样式应用于 TextView 派生的样式 类。
  2. 以编程方式应用属性。
  3. 将各个属性直接应用于视图。
  4. 将样式应用于视图。
  5. 默认样式。
  6. 将主题应用于视图集合、某个 activity 或整个应用。
  7. 应用某些视图专用样式,例如设置 TextAppearanceTextView上。

图 2. span 中的样式会覆盖 textAppearance 中的样式。

<ph type="x-smartling-placeholder">

TextAppearance

样式的一个局限性在于,您只能对 View 应用一种样式。在 TextView,但您也可以指定一个 TextAppearance 属性 其功能类似于样式,如以下示例所示:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance 可让您定义特定于文本的样式,同时保留 View 可用于其他用途。但请注意,如果您定义了任何文本属性, 直接在 View 上或样式中设置,那么这些值会替换 TextAppearance 值。

TextAppearance 支持 TextView 优惠。有关完整的属性列表,请参阅 TextAppearance

未包含的一些常见 TextView 属性为 lineHeight[Multiplier|Extra]linesbreakStrategyhyphenationFrequencyTextAppearance 作用于字符级别,而不适用于段落级别,因此 属性。

自定义默认主题背景

当您使用 Android Studio 创建项目时,它会通过以下方式将 Material Design 主题应用于您的应用: 默认名称,如项目的 styles.xml 文件中所定义。此AppTheme样式 扩展了支持库中的主题,并包含对所使用的颜色属性的替换项 关键界面元素(例如应用栏悬浮操作按钮(如果使用)。因此, 可以通过更新提供的颜色来快速自定义应用的颜色设计。

例如,您的 styles.xml 文件类似于以下内容:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

样式值实际上是对 颜色资源,如 项目的 res/values/colors.xml 文件。该文件就是您要用来更改颜色的文件。 请参阅 Material Design 颜色概览 以通过动态配色和其他自定义颜色改善用户体验。

了解颜色后,请更新 res/values/colors.xml 中的值:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

然后,您可以替换所需的任何其他样式。例如,您可以更改 背景颜色如下所示:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

有关可在主题中使用的属性列表,请参阅 R.styleable.Theme。添加 布局中视图的样式,您还可以查看“XML 属性” 视图类引用中的表。例如,所有视图都支持 基本 View 中的 XML 属性 类

大多数属性会应用于特定类型的数据视图,还有一些属性会应用于所有数据视图。不过, 部分主题属性 R.styleable.Theme适用于 activity 窗口,而不是布局中的视图。例如,windowBackground 会将 窗口背景,windowEnterTransition 定义了在以下情况中使用的过渡动画: activity 启动时。有关详情,请参阅开始 使用动画的 activity

Android 支持库还提供了其他可用于自定义主题的属性 从 Theme.AppCompat 扩展而来,例如所示的 colorPrimary 属性 前面的示例。最好在 库的 attrs.xml 文件

<ph type="x-smartling-placeholder">

支持库中还提供了不同的主题,您可以对其进行扩展 而不是前面示例中显示的界面。查看可用主题的最佳位置是 该 库的 themes.xml 文件

添加特定于版本的样式

如果新版 Android 添加了您想使用的主题属性,您可以将这些属性添加到您的主题中 同时仍与旧版本兼容您只需再创建一个 styles.xml 文件 保存在 values 目录中,该目录包含 资源版本 限定符

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

由于 values/styles.xml 文件中的样式适用于所有版本, 您在 values-v21/styles.xml 中的主题可以继承它们。这意味着您可以避免 通过从“基本”开始复制样式然后在特定于版本的环境中进行扩展 样式。

例如,如需为 Android 5.0(API 级别 21)及更高版本声明窗口转换,您需要 以便使用新的属性。因此,您在 res/values/styles.xml 中的基本主题可能如下所示 :

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

然后,在 res/values-v21/styles.xml 中添加特定于版本的样式,如下所示:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

现在,您可以在清单文件中应用 AppTheme,系统将选择样式 。

如需详细了解如何针对不同设备使用备用资源,请参阅 提供备用资源

自定义微件样式

框架和支持库中的每个微件都有一个默认样式。例如,当您 使用支持库中的主题背景设置应用的样式, Button 使用 Widget.AppCompat.Button 样式。如果您想要对 按钮,您可以使用布局文件中的 style 属性来实现此目的。例如, 以下代码会应用库的无边框按钮样式:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

如果您要将此样式应用于所有按钮,则可在主题的 buttonStyle

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

您还可以扩展微件样式,就像扩展任何其他样式一样。 然后在布局或主题中应用自定义 widget 样式。

其他资源

如需详细了解主题和样式,请参阅下面列出的其他资源:

博文