使用 Theme Editor 设计应用主题背景

警告:从版本 3.3 开始,Theme Editor 不再包含在 Android Studio 中。

Android Studio 包含一个名为 Theme Editor 的可视化辅助工具,该工具可以帮助您:

  • 创建和修改应用的主题背景
  • 调整不同资源分类器的主题背景。
  • 直观呈现常见界面元素颜色变化的效果。

本页介绍了您可以使用 Theme Editor 执行的基本任务及执行方法。

Theme Editor 基础知识

本部分介绍 Theme Editor 的访问方式及其布局。

访问 Theme Editor

有两种方法可以打开 Theme Editor:

  • 在打开的样式 XML 文件(例如 styles.xml)中,点击文件窗口右上方附近的 Open editor
  • Tools 菜单中,选择 Theme Editor

在 Theme Editor 中找到所需的界面

Theme Editor 的主屏幕分为两个部分:左侧显示将当前主题背景应用于特定界面元素(如应用栏或凸起按钮)时它们会是什么样子;右侧显示正在预览的当前主题背景的名称、该主题背景是在哪个模块中定义的,以及主题背景资源(如 Theme parentcolorPrimary)的设置。您可以通过更改这些资源设置来为应用设计修改主题背景。

主题背景和颜色

在 Theme Editor 中,您可以创建新的主题背景、修改现有的主题背景,以及管理构成主题背景的颜色。

创建新主题背景

要创建主题背景,请按以下步骤操作:

  1. 打开 Theme Editor 右上方附近的 Theme 下拉菜单。
  2. 点击 Create New Theme
  3. New Theme 对话框中,为新主题背景输入一个名称。
  4. Parent theme name 列表中,点击作为主题背景初始资源继承来源的父主题背景。

为主题背景重命名

要为主题背景重命名,请按以下步骤操作:

  1. 打开 Theme Editor 右上方附近的 Theme 下拉菜单。
  2. 点击 Rename theme-name
  3. Rename 对话框中,为主题背景输入一个新名称。
  4. (可选)要查看更改后会是什么样子,请点击 Preview
  5. 要应用所做的更改,请点击 Refactor

更改颜色资源

要更改现有颜色资源(如 colorPrimary),请按以下步骤操作:

  1. 在 Theme Editor 中,找到要更改的资源,然后点击其名称旁边的彩色方格。此时将显示 Resources 对话框,该对话框左侧显示颜色组的列表,右侧显示当前选定资源颜色的设置和信息。
  2. 按照下文中的说明为主题背景资源设置颜色,具体可以从左侧面板中选择一种颜色,也可定义一种新颜色。

选择颜色

颜色列在 Resources 对话框的左列中并分成以下几组。

  • Project:这些是您的项目中的颜色。有些颜色可以修改,因为它们是项目源代码的一部分;有些颜色不能修改,因为它们是您添加到项目中的库的一部分。
  • android:这些是属于 android 命名空间的颜色资源。它们是 Android 框架的一部分,不能修改。
  • Theme Attributes:这些是当前选定主题背景的属性。它们由主题背景引用,可能会根据您所选主题背景的不同而发生变化。在 Resources 对话框内部,主题背景属性是完全不可编辑的。

定义新颜色

    图 1. 颜色编辑器

  1. Resources 对话框右上角的下拉菜单中,依次点击 Add new resource > New color ValueResources 对话框将显示一个可编辑的右侧窗格,其中包含一个空白的 Name 字段,供您为自定义的颜色输入名称。
  2. 请按以下步骤操作来创建自定义颜色。这些步骤与图 1 中的标注相对应。
    1. 在空的 Name 字段中,为新颜色值输入一个名称。名称中不允许使用空格或特殊字符,但允许使用下划线和数字。
    2. 色标、Custom color 字段和颜色提取器:
      • 在色标上,点击所需的颜色。相应颜色将显示在 Custom color 字段中。
      • 您可以使用 Custom color 字段左侧的颜色提取器来选择一种颜色。点击颜色提取器图标 ,然后点击在计算机屏幕上的任意位置可见的内容。Custom color 字段中的颜色将更改为您选择的颜色。
    3. Custom color 字段的紧下方,使用左侧的可编辑字段和下拉菜单以数值形式指定 RGBHSBARGB 颜色。相应颜色所对应的十六进制数字将显示在最右侧的可编辑字段中。
    4. 要设置颜色不透明度和色调,请移动色标下方的滑块。
    5. 从可供选择的预定义颜色方块中选择一个。所选颜色便会显示在 Custom Color 字段中,并且名称也会变为您所选颜色的名称。
  3. 点击 OK 保存您的设置。Resources 对话框随即关闭,您将返回到 Theme Editor。

修改颜色

您可以修改任何可编辑的颜色。如果某种颜色可编辑,您会看到可编辑的颜色、色调、不透明度和名称字段,以及设备配置字段。如果您想知道为什么某些字段可编辑而其他字段不可编辑,请参阅选择颜色部分。

  1. 调整设置。
  2. 点击 OK

匹配素材颜色

如果您已定义或修改某种自定义项目颜色,则可以点击位于 Custom color 旁边的 CLOSEST MATERIAL COLOR 来确保该颜色与最接近的素材调色板颜色匹配。Android Studio 会将您选取的颜色的颜色值和不透明度值更改为与其最相似的素材颜色的相应值,并将 Custom color 替换为素材调色板中的颜色的名称。

注意:仅当相应颜色还不是素材颜色时,才会显示 CLOSEST MATERIAL COLOR 功能。

查看状态列表和颜色

在 Theme Editor 中,您可以预览与不同状态关联的颜色。为此,请点击某项可编辑状态列表资源的名称旁边的颜色集方块,以打开 Resources 对话框。Resources 对话框会显示状态(如“Selected”)的列表,以及与状态关联的颜色值。点击某种状态的颜色即可选择其他颜色值。

要更全面地控制状态本身,您可以直接在用来定义状态的 XML 文件中查看和修改状态的属性。如需了解详情,请参阅 ColorStateList 类的文档。

设备专用配置

如果某种颜色可修改,您可以选择要让应用支持的设备专用配置。为此,请执行以下步骤:

  1. 打开 Resources 对话框。如需了解如何打开 Resources 对话框,请参阅“更改颜色资源”部分。
  2. 选择一种 Project 颜色,然后在右侧窗格的底部点击以展开 Device Configuration,从而显示包含相应资源的 XML 文件的源代码集和名称,以及存放该文件的配置专用目录的列表。
  3. 如有必要,可更改 XML 文件名。
  4. 找到您希望支持的设备专用配置对应的目录,勾选该目录旁边的框。如果您没有为配置指定任何目录,该配置将默认使用 values 目录。

如需详细了解目录名称与配置之间的关系,请参阅支持多种屏幕。如需详细了解支持的目录名称,请参阅提供资源