样式与主题

第四章：样式与主题

资源文件系统（对比 Web 资源管理）

在 Android 中，所有的资源都统一存放在 res 目录下，类似于 Web 项目中的 assets 目录：

res/
├── drawable/   # 图片资源（类比 images/）
├── layout/    # 布局文件（类比 Vue 的 templates/）
├── values/    # 常量定义
│   ├── colors.xml     # 颜色定义（类比 CSS 变量）
│   ├── strings.xml    # 文本常量
│   └── styles.xml     # 样式定义（类比 CSS）
└── mipmap/    # 应用图标

Android 样式定义

颜色定义（colors.xml）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 类似 CSS 变量 -->
    <color name="primary">#2196F3</color>
    <color name="secondary">#FF4081</color>
    <color name="background">#FFFFFF</color>
    <color name="text_primary">#212121</color>
    <color name="text_secondary">#757575</color>
</resources>

样式定义（styles.xml）

<resources>
    <!-- 基础按钮样式 -->
    <style name="ButtonStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">16dp</item>
        <item name="android:textColor">@color/text_primary</item>
        <item name="android:background">@color/primary</item>
    </style>

    <!-- 继承基础按钮样式 -->
    <style name="ButtonStyle.Small">
        <item name="android:padding">8dp</item>
        <item name="android:textSize">12sp</item>
    </style>
</resources>

在布局中使用样式

<Button
    style="@style/ButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="标准按钮" />

<Button
    style="@style/ButtonStyle.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="小按钮" />

主题定制与深色模式

主题定义（themes.xml）

<resources>
    <!-- 浅色主题 -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="android:background">@color/background</item>
    </style>

    <!-- 深色主题 -->
    <style name="AppTheme.Dark" parent="Theme.MaterialComponents.DayNight">
        <item name="colorPrimary">@color/primary_dark</item>
        <item name="colorSecondary">@color/secondary_dark</item>
        <item name="android:background">@color/background_dark</item>
    </style>
</resources>

动态切换主题

// 在 Activity 中切换主题
override fun onCreate(savedInstanceState: Bundle?) {
    // 设置主题必须在 super.onCreate 之前
    setTheme(R.style.AppTheme_Dark)
    super.onCreate(savedInstanceState)
}

屏幕适配方案

尺寸单位

• dp（密度无关像素）：类似 Web 中的 rem
• sp（可缩放像素）：专用于字体大小，会随系统字体大小设置变化
• match_parent：类似 CSS 的 100%
• wrap_content：类似 CSS 的 auto

资源限定符

res/
├── layout/           # 默认布局
│   └── activity_main.xml
├── layout-land/      # 横屏布局
│   └── activity_main.xml
├── values/           # 默认配置
│   └── dimens.xml
└── values-sw600dp/   # 平板配置
    └── dimens.xml

尺寸定义（dimens.xml）

<resources>
    <!-- 文字大小 -->
    <dimen name="text_small">12sp</dimen>
    <dimen name="text_normal">14sp</dimen>
    <dimen name="text_large">16sp</dimen>

    <!-- 间距 -->
    <dimen name="spacing_small">8dp</dimen>
    <dimen name="spacing_normal">16dp</dimen>
    <dimen name="spacing_large">24dp</dimen>
</resources>

最佳实践

1. 使用 ConstraintLayout 创建响应式布局
2. 避免使用固定像素值，始终使用 dp 或 sp
3. 为不同屏幕尺寸提供适配布局
4. 使用主题和样式实现统一的视觉风格
5. 合理运用 weight 属性实现弹性布局

这些概念对前端开发者来说并不陌生，下一章我们将介绍 Android 中的状态管理与数据流，这与前端框架中的状态管理有许多相似之处。