0Pricing
Android Academy · 课时

主题与样式

为控件定义可复用的样式,为应用定义主题。设置 Material 3 的颜色角色、字体排印比例、自定义字体和深色模式。

主题与样式 是 CoddyKit 上的免费 Android Academy 课时。 这是第 2 节课,共 5 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 5 节课。

样式与主题的区别

以下两个概念经常被混淆:

  • 样式 — 应用于单个控件的一组视图属性(例如文本大小、颜色和内边距)。使用 style="@style/MyButton" 设置。
  • 主题 — 应用于 Activity 或应用的一组语义属性。视图通过 ?attr/colorPrimary 查找主题属性。

定义样式

在 res/values/styles.xml 中创建样式。样式可以继承自父样式:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

定义主题

主题继承自 Material 3 父主题,并覆盖颜色和形状属性:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Material 3 配色系统

Material 3 使用语义化颜色角色,而不是原始十六进制值。主要角色包括:

  • colorPrimary — 主要品牌颜色
  • colorOnPrimary — 主要背景上的文本和图标颜色
  • colorSecondary — 强调色
  • colorSurface — 卡片和底部表单的背景色
  • colorError — 错误状态颜色
  • colorBackground — 窗口背景色

颜色资源

在 res/values/colors.xml 中定义颜色:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

深色主题

Material 3 的 DayNight 主题会自动处理深色模式。为颜色添加夜间版本:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

排版

Material 3 定义了一套排版比例。使用 textAppearance 属性来保持文本一致:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

自定义字体

将字体添加到 res/font/,并在主题或样式中引用它:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

将主题应用于 Activity

在 AndroidManifest.xml 中设置主题。您可以为每个 Activity 使用不同的主题:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

在代码中读取主题属性

在运行时通过 Kotlin 代码访问任意主题属性:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

使用 Material Theme Builder(m3.material.io/theme-builder),根据您的品牌颜色生成完整的 Material 3 配色方案。它会为 colors.xml 和 themes.xml 导出可直接使用的 XML 文件。这是快速获得一致设计系统的方式。

快速检查

Android 中样式和主题的主要区别是什么?

回顾:主题与样式

一致的设计从这里开始:

  • 样式 — 控件级属性,可在多个视图之间复用
  • 主题 — 应用或 Activity 级属性,以及语义化颜色角色
  • Material 3 颜色角色:colorPrimary、colorSurface、colorError 等
  • 通过 values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM 实现深色模式
  • 通过 textAppearance 属性使用排版比例
  • 使用 Material Theme Builder 快速生成配色方案

下一步:从零开始绘制自定义视图。

常见问题解答

「主题与样式」课时是免费的吗?

是的 — 「主题与样式」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Android Academy 课程的其余内容,请升级到 CoddyKit PRO。 Android Academy 课程共包含 5 节课。

「主题与样式」这节课中我会学到什么?

为控件定义可复用的样式,为应用定义主题。设置 Material 3 的颜色角色、字体排印比例、自定义字体和深色模式。 你通过在浏览器中直接运行的动手代码来练习 Android Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 5 节。

「主题与样式」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗?

能。每节 Android Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Material Design 基础
  2. 主题与样式
  3. 自定义视图
  4. 动画与过渡
  5. 底部导航与标签页
← 返回 Android Academy