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

news/2024/11/21 11:08:15/

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 组件,用于定义主题的颜色、字体、排版等。
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.darkColorScheme
    import androidx.compose.material3.lightColorScheme
    import androidx.compose.runtime.Composableval 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,
    )uiltin">@Composable
    fun MyTheme(darkTheme: Boolean = isSystemInDarkTheme(),content: uiltin">@Composable () -> Unit
    ) {val colorScheme = if (darkTheme) DarkColorScheme else LightColorSchemeMaterialTheme(colorScheme = colorScheme,typography = Typography,shapes = Shapes,content = content)
    }
    
  • 动态色彩:

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

    • 可以根据品牌需求自定义主题颜色、字体、排版等。
    • 例如,定义品牌主色、品牌辅助色、品牌背景色等。
    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 到移动,什么前端难题都见过。热衷于用技术打磨产品,带领团队把复杂的事情做到极简,体验做到极致。喜欢探索新技术,也爱分享一些实战经验,帮助大家少走弯路!

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


http://www.ppmy.cn/news/1548733.html

相关文章

跨平台WPF框架Avalonia教程 十一

控件类型 如果您想创建自己的控件,Avalonia中有三个主要的控件类型。首先要做的是选择最适合您使用场景的控件类型。 用户控件(User Controls)​ UserControl是创建控件的最简单方法。这种类型的控件最适合特定于应用程序的“视图”或“页面”。UserControl的创建…

联邦学习安全聚合算法综述(论文解析)以及如何确定自己研究方向的方法

自己写相关论文的方法: 可以重点看看综述类论文的未来研究方向和引言中前人已经做过的内容 联邦学习安全聚合算法综述 auth:江萍 1 通讯作者 李芯蕊 1 赵晓阳 2 杭永凯 摘要 摘要:随着深度学习技术的发展,人工智能在社会的各个方面有着重要…

ThreadLocal 和 Caffeine 缓存是两种不同的缓存机制,它们在用途和实现上有明显的区别

ThreadLocal 和 Caffeine 缓存是两种不同的缓存机制,它们在用途和实现上有明显的区别: ThreadLocal 缓存: ThreadLocal 提供了线程局部变量的功能,每个线程可以访问自己的局部变量,而不会与其他线程冲突。ThreadLocal …

Swift从0开始学习 对象和类 day3

类(Class) 是一种类型或模板,描述了对象的特征和行为。对象(Object) 是类的实例,实际的实体,拥有自己的数据。 新入门的教学都喜欢用“人”来举例为类,在这里我也用“人”吧 //&…

go-zero(四) 错误处理(统一响应信息)

go-zero 错误处理(统一响应信息) 在实现注册逻辑时,尝试重复注册可能会返回 400 状态码,显然不符合正常设计思维。我们希望状态码为 200,并在响应中返回错误信息。 一、使用第三方库 1.下载库 目前 go-zero官方的…

pcap_set_timeout()函数

功能描述 pcap_set_timeout()函数用于设置数据包捕获操作的超时时间。当调用数据包捕获函数(如pcap_loop()或pcap_dispatch())时,如果在设定的超时时间内没有捕获到数据包,这些函数将返回,而不是一直等待下去。这个超时…

AI+生命科学助力化妆品行业革新:代理IP的角色与前景

目录 引言 一、AI与生命科学在化妆品行业的应用 1. 蛋白质结构预测与设计 2. 个性化与精准化产品开发 3. 虚拟试妆与用户体验提升 二、代理IP在化妆品行业中的角色 1. 数据采集与隐私保护 2. 市场策略优化 3. 跨界合作与品牌提升 三、代理IP在化妆品行业的前景 1. 智…

面向FWA市场!移远通信高性能5G-A模组RG650V-NA通过北美两大重要运营商认证

近日,全球领先的物联网整体解决方案供应商移远通信宣布,其旗下符合3GPP R17标准的新一代5G-A模组RG650V-NA成功通过了北美两家重要运营商认证。凭借高速度、大容量、低延迟、高可靠等优势,该模组可满足CPE、家庭/企业网关、移动热点、高清视频…