样式与主题

尝试 Compose 方式
Jetpack Compose 是推荐用于 Android 的 UI 工具包。了解如何在 Compose 中使用主题。
Compose 中的设计系统 →

Android 上的样式与主题允许您将应用设计的细节与 UI 结构和行为分离开来，这与网页设计中的样式表类似。

样式 (style) 是指定单个 View 外观的属性集合。样式可以指定字体颜色、字体大小、背景颜色等属性。

主题 (theme) 是应用于整个应用、Activity 或视图层次结构的属性集合，而不仅仅是单个视图。当您应用主题时，应用或 Activity 中的每个视图都会应用其支持的主题属性。主题还可以将样式应用于非视图元素，例如状态栏和窗口背景。

样式和主题在 res/values/ 中的样式资源文件（通常名为 styles.xml）中声明。

图 1. 应用于同一个 Activity 的两个主题：Theme.AppCompat（左）和 Theme.AppCompat.Light（右）。

主题与样式

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

样式为特定类型的视图指定属性。例如，一个样式可以指定按钮的属性。您在样式中指定的每个属性都是可以在布局文件中设置的属性。将所有属性提取到样式中，可以方便地在多个小部件中使用和维护它们。

主题定义了一组可由样式、布局、小部件等引用的命名资源。主题将语义名称（如 colorPrimary）分配给 Android 资源。

样式和主题旨在协同工作。例如，您可以定义一个样式，规定按钮的一部分颜色为 colorPrimary，另一部分为 colorSecondary。这些颜色的具体定义在主题中提供。当设备进入夜间模式时，您的应用可以从“浅色”主题切换到“深色”主题，从而更改所有这些资源名称的值。您无需更改样式，因为样式使用的是语义名称而非具体的颜色定义。

有关主题和样式如何协同工作的更多信息，请参阅博客文章 Android 样式：主题 vs 样式。

创建并应用样式

要创建新样式，请打开项目的 res/values/styles.xml 文件。对于要创建的每个样式，请执行以下步骤：

  1. 添加一个 <style> 元素，其名称应能唯一标识该样式。
  2. 为您要定义的每个样式属性添加一个 <item> 元素。每个 item 中的 name 指定了您通常在布局中作为 XML 属性使用的属性。 <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"
    ... />

如果在样式中指定的属性受视图支持，则会应用于该视图。视图会忽略它不支持的任何属性。

但是，通常的做法不是将样式应用于单个视图，而是按照本指南其他章节所述，将样式作为整个应用、Activity 或视图集合的主题来应用。

扩展和自定义样式

创建自己的样式时，请始终扩展框架或支持库中的现有样式，以便与平台 UI 样式保持兼容。要扩展样式，请使用 parent 属性指定要扩展的样式。然后，您可以覆盖继承的样式属性并添加新属性。

例如，您可以继承 Android 平台的默认文本外观并进行如下修改：

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

但是，请始终从 Android 支持库继承您的核心应用样式。支持库中的样式通过针对每个版本中可用的 UI 属性优化每个样式来提供兼容性。支持库样式通常具有与平台样式相似的名称，但包含 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>

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

要查找可以使用 <item> 标记声明的属性，请参阅各种类参考中的“XML 属性”表。所有视图都支持 来自基本 View 类的 XML 属性，许多视图还添加了它们自己的特殊属性。例如，TextView XML 属性包括 android:inputType 属性，您可以将其应用于接收输入的文本视图，例如 EditText 小部件。

将样式应用为主题

您可以像创建样式一样创建主题。不同之处在于应用方式：不是在视图上使用 style 属性应用样式，而是在 AndroidManifest.xml 文件中的 <application> 或 <activity> 标记上使用 android:theme 属性来应用主题。

例如，以下是如何将 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 属性指定给布局文件中的视图。这会修改该视图及其任何子视图的主题，这对于更改界面特定部分的主题配色方案非常有用。

前面的示例展示了如何应用 Android 支持库提供的诸如 Theme.AppCompat 之类的主题。但是，您通常希望自定义主题以符合您应用的品牌。最好的方法是扩展支持库中的这些样式并覆盖部分属性，如下一节所述。

样式层次结构

Android 提供了多种在整个 Android 应用中设置属性的方法。例如，您可以直接在布局中设置属性、将样式应用于视图、将主题应用于布局，甚至以编程方式设置属性。

选择如何设置应用样式时，请注意 Android 的样式层次结构。通常，为了保持一致性，请尽可能使用主题和样式。如果您在多个地方指定了相同的属性，则以下列表决定了最终应用的属性。列表按优先级从高到低排序：

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

图 2. 来自 span 的样式覆盖了来自 textAppearance 的样式。

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]、lines、breakStrategy 和 hyphenationFrequency。TextAppearance 在字符级别工作，而不是在段落级别，因此不支持影响整个布局的属性。

自定义默认主题

当您使用 Android Studio 创建项目时，它会默认将 Material Design 主题应用于您的应用，该主题定义在项目的 styles.xml 文件中。此 AppTheme 样式扩展了支持库中的一个主题，并包含对关键 UI 元素（如应用栏和浮动操作按钮（如果使用））所使用的颜色属性的覆盖。因此，您可以通过更新提供的颜色来快速自定义应用的颜色设计。

例如，您的 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>

然后，您可以覆盖任何其他想要的样式。例如，您可以按如下方式更改 Activity 的背景颜色：

<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 文件中查看这些属性。

支持库中还有其他不同的主题，您可能希望扩展它们而不是前面示例中显示的主题。查看可用主题的最佳位置是库的 themes.xml 文件。

添加版本特定样式

如果 Android 的新版本添加了您想使用的主题属性，您可以将它们添加到您的主题中，同时保持与旧版本的兼容性。您只需在包含资源版本限定符的 values 目录中保存另一个 styles.xml 文件即可：

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>

您还可以像扩展任何其他样式一样扩展小部件样式，然后在布局或主题中应用您的自定义小部件样式。

其他资源

要了解有关主题和样式的更多信息，请参阅以下其他资源：

博文