主题与样式
为控件定义可复用的样式,为应用定义主题。设置 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 反馈 — 无需本地设置。