Android开发实战班 - 现代 UI 开发之 Material Design及自定义主题

Material Design 是 Google 推出的一套设计语言，旨在为开发者提供统一的视觉和交互设计规范。Material Design 3（简称 MD3）是 Material Design 的最新版本，引入了更多现代化的设计元素和主题定制功能。本章节将介绍 Material Design 3 的核心设计原则、组件、主题定制以及在 Jetpack Compose 中的应用，帮助学员理解并应用 MD3 设计规范来构建美观、统一的 Android 应用。

7.1 Material Design 3 简介

Material Design 的历史与发展:
- Material Design 1.0 于 2014 年发布，旨在为跨平台应用提供一致的设计语言。
- Material Design 2.0 于 2018 年发布，引入了更多自定义选项和动态色彩。
- Material Design 3（MD3）于 2021 年发布，进一步优化了设计语言，提供了更灵活的主题定制和更现代化的视觉风格。
Material Design 3 的核心目标:
- 个性化: 提供更强大的主题定制功能，允许开发者根据品牌需求自定义颜色、字体、排版等。
- 可访问性: 增强可访问性设计，确保应用对所有用户友好。
- 动态: 支持动态色彩和主题切换，提升用户体验。
- 现代化: 采用更现代化的视觉风格和设计元素。

7.2 Material Design 3 的核心设计原则

1. 层次分明:
- 使用阴影、深度和层次来表达 UI 元素之间的关系。
- 例如，按钮、卡片、对话框等元素通过阴影和层次来区分。
2. 响应式设计:
- UI 元素应具有响应性，能够适应不同屏幕尺寸和方向。
- 使用 ConstraintLayout, LazyColumn, LazyRow 等组件实现响应式布局。
3. 动态色彩:
- 支持动态色彩主题，允许用户根据个人喜好或系统设置切换主题。
- MD3 提供了丰富的色彩系统，包括主色、辅助色、背景色等。
4. 可访问性:
- 确保应用对所有用户友好，包括视力障碍用户。
- 使用高对比度颜色、足够的触摸目标大小、语义化的内容描述等。
5. 动效:
- 使用平滑、流畅的动效来增强用户体验。
- 例如，按钮点击动画、页面切换动画等。

7.3 Material Design 3 主题定制

主题配置:

在 Theme.kt 文件中配置 MD3 主题。
MD3 提供了 MaterialTheme 组件，用于定义主题的颜色、字体、排版等。

kotlin 复制代码

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable

val LightColorScheme = lightColorScheme(
    primary = Color(0xFF6200EE),
    onPrimary = Color.White,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
    background = Color.White,
    onBackground = Color.Black,
    surface = Color.White,
    onSurface = Color.Black,
)

val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFBB86FC),
    onPrimary = Color.Black,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
    background = Color.Black,
    onBackground = Color.White,
    surface = Color.Black,
    onSurface = Color.White,
)

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

动态色彩:
- MD3 支持动态色彩，可以根据用户的系统设置自动切换主题。
- 使用 isSystemInDarkTheme() 函数获取系统主题模式。

自定义主题:

可以根据品牌需求自定义主题颜色、字体、排版等。
例如，定义品牌主色、品牌辅助色、品牌背景色等。

kotlin 复制代码

val BrandColorScheme = lightColorScheme(
    primary = Color(0xFF4CAF50),
    onPrimary = Color.White,
    secondary = Color(0xFFFF5722),
    onSecondary = Color.White,
    background = Color(0xFFECEFF1),
    onBackground = Color.Black,
    surface = Color.White,
    onSurface = Color.Black,
)

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师