保姆级学习开发安卓手机软件(二十四)--Material Design 3

注意：如果是简单的应用，您可以为各个界面元素设置单独的样式。不过，随着您添加越来越多的界面，这种做法会造成负担。Compose 已实现 Material Design，有助于保持设计一致性。我们会在日后学习的单元中详细了解 Material Design 和 Material 主题设置。您可以参阅 Compose 中的 Material 主题设置，了解有关详情。

之前我们有简单的用到Material Design，本节就展开讲解这个部分吧。

一、什么是 Material Design 3？

Material Design 3（简称 MD3）是 Google 最新一代设计系统。特点：

现代、简洁、有层次感
动态颜色（Dynamic Color）
全新组件样式
Compose 官方默认 UI
完全替代老的 MD2

现在写 Compose，必须用 MD3！

那我个人的理解，可能就是使用官网可以半自动生成我想要颜色的主题样式表。然后下载下来方便复制到项目使用，可以统一样式，就像qt和网页的css表，但是更方便的是无需每个控件都指定使用该样式，平台已经自动给你绑定到一些控件上啦。

二、怎么下载\导出主题格式？（使用 Material Theme Builder 创建配色方案）

这是地址：

https://material-foundation.github.io/material-theme-builder/

这两个地方都可以切换风格（是原有自带的主题样式或随机生成）：

当然，也支持自己设置。

在左侧下面窗格中，看到“Core Colors”（核心颜色），

下面的就是主要的配色解释：

primary（主色）用于整个界面的关键组件。

secondary（副色）用于界面中不太显眼的组件。

tertiary（第三色）用于对比强调，可以平衡主色和副色，或者引起用户对某个元素（例如输入字段）的高度关注。

我们先点击“Primary”（主色）：

系统会打开 HCT 颜色选择器。

我们随意拖动或者自己输入想要的颜色，并点击运用：

左边区域页面下滑会看到一些控件样式：

继续下滑会看到系统根据我们输入的颜色生成的浅色和深色主题的完整配色方案：

然后在右下角，有一个选择字体，我们可以设置自定义主题的字体：

我们先不管，直接导出这个主题：

我们选择这个格式：

这就是导出的内容：

三、替换主题文件

上面我们导出的内容，大家会不会觉得很熟悉呀，这正是我们工程里原有的内容：

Theme.kt 我们应该说过，会存储所有关于应用主题的信息，这些信息通过颜色、排版和形状进行定义。

Color.kt 是颜色。

Type.kt 是字体。

我们现在把原有工程目录下的对应文件替换成新下载的文件：

需要注意的是下面这个文件（Theme.kt）：

我们把刚才下载的文件里面替换成我们自己的主题名称再进行替换整个原有文件(上面那个是我们的主题名，下面这个是绑定的Type哟)。

这里还需要注意，所有替换的文件还需要改一个地方（划掉的是下载文件的包名，我们要用项目里面的包名进行替换，确认包名一致，不然会报错，找不到对应的颜色或者字体）：

那现在，就替换完成啦，运行软件不会报bug。

四、使用主题

上面我们替换完成后，在主界面我们可以看到对应的使用地方：

这里也就是之前文件为什么要你改名的原因，改了就不用动这里啦，当然如果不改文件，改这里也是一样的~~~主要就是要一一对应。

那如何使用呢：

方法一：用MD3自带的组件

例如，我们之前内容里面用的 Card 和 Surface 都是 Material 3（MD3）的组件。

Surface：M3 的基础容器，非常通用。

可以设置：color、shape、elevation、onClick 等。
很多 M3 组件（包括 Card）内部就是用 Surface 做的。
适合：整个页面背景、自定义容器、需要阴影 / 圆角的块。

Card：M3 专门的 “卡片” 组件，是对 Surface 的封装。

默认自带：`shape = medium`、一定 `elevation`、有 `surfaceTint`（MD3 色调）。

适合：列表项、信息卡片、内容块。

PS:几乎所有 MD3 自带组件都会自动变色；只有纯布局容器不会。

方法二：就是在编写布局的时候直接使用主题里面的颜色（适合于不想要控件默认对应主题颜色的时候）：

MaterialTheme.colorScheme.primary       MaterialTheme.colorScheme.secondary     MaterialTheme.colorScheme.background    MaterialTheme.colorScheme.surfaceVariant// 侧边栏背景

那解释下为什么用的是MaterialTheme 而非AffirmationsTheme：

你写的 AffirmationsTheme 内部，就是在给 MaterialTheme 赋值！

打开你自己的 Theme.kt 最后一段：

看到了吗？AffirmationsTheme 本质就是一个包装好的 MaterialTheme！

AffirmationsTheme 是一个函数，不是颜色容器！

它的作用只有一个：把颜色方案注入给 MaterialTheme

真正存颜色的是：MaterialTheme.colorScheme

我们最后总结下怎么使用：

1.你在 Activity 里写：

给整个界面设置你导出的主题。

2.使用MD3组件（推荐）或者界面内部取色

内部取色必须写：

MaterialTheme.colorScheme.primaryMaterialTheme.colorScheme.background...

因为：颜色都存在 MaterialTheme 里面！

最后：我弄了绿色和蓝色主题，看看对比吧！

如果你的主题还是没有生效，去检查下这个文件（Theme.kt），是不是dynamicColor也是ture，一定要关掉（必须关！因为我们这里是自定义主题）：

所以这里讲解这个属性为true存在的意义吧：

Material 3 非常注重用户体验，其中推出的动态配色这项新功能就能根据用户的壁纸为应用创建主题。这样一来，如果用户喜欢绿色且拥有蓝色的手机背景，Woof 应用也会据此呈现蓝色。动态主题仅适用于搭载 Android 12 及更高版本的特定设备。

若要启用动态配色，请打开 Theme.kt 并前往 AffirmationsTheme() 可组合项，然后将 dynamicColor 参数设为 true。
打开设置，然后搜索壁纸。
将壁纸更改为某一种或一组颜色。
重新运行应用即可查看动态主题（注意，设备或模拟器必须搭载 Android 12 或更高版本，您才能看到动态配色）。我没试过，自己尝试吧！

五、深色主题和浅色主题

我们下载的主题一般是支持浅色和深色两个主题颜色的，在手机设置中切换深色主题：

就和其他手机软件一样，会跟随系统的设置生效：

那具体代码我们也可以了解下，在这里：

如果 dynamicColor 为 true，并且 build 版本为 S 或更高，则检查设备是否采用 darkTheme。
如果采用深色主题，colorScheme 会设为 dynamicDarkColorScheme。
如果没有采用深色主题，则会设为 dynamicLightColorScheme。
如果应用未使用 dynamicColorScheme，则检查该应用是否采用 darkTheme。如果采用，那么 colorScheme 会设为 DarkColors。
如果这两种情况都不是，则 colorScheme 会设为 LightColors。

当然，我们想要直接在运行的时候看效果也很简单：

六、字体和圆角设置说明

这节我不打算讲字体怎么设置（Type.kt），因为打算放到下节讲，步骤比圆角复杂一些。

那圆角，官方网址完全没有生成这个Shape.kt。

要不要自己写 Shape.kt？

如果默认圆角够用（Card、Button 都是 8dp、16dp）：可以不写，直接用默认。
如果要统一改所有组件圆角（比如全部改成 12dp）：就手动建 Shape.kt，一行改全局。

示例 Shape.kt：

package com.example.affirmations.ui.themeimport androidx.compose.foundation.shape.RoundedCornerShapeimport androidx.compose.material3.Shapesimport androidx.compose.ui.unit.dpval Shapes = Shapes( small = RoundedCornerShape(4.dp), medium = RoundedCornerShape(12.dp), // Card 默认用 medium large = RoundedCornerShape(20.dp))

// 还可以为每个角添加不同的圆角百分比，进一步自定义形状。全局都能调用val CustomShape1 = RoundedCornerShape(    topStart = 50.dp,    bottomStart = 25.dp,    topEnd = 0.dp,    bottomEnd = 15.dp)

在 Theme.kt 里把它们塞进去：

MaterialTheme(    colorScheme = colorScheme,    typography = Typography, // 来自 Typy.kt    shapes = Shapes,          // 来自 Shape.kt    content = content)

例如下面这些组件 自动读取 Shape.kt：

Card,Surface,Button,TextField,Dialog,ModalBottomSheet

如果你想手动指定也可以（Surface也不会生效）:

Surface(    shape =MaterialTheme.shapes.medium, // 必须加这句    //shape = CustomShape1,//自定义的    ) { ... }

六、插入依赖项（一般可略过）

一般来说我们现在新建工程就是使用了Material 3，就无需插入依赖，如果是老版本，使用的是Material 2，就需将 Compose Material 3 依赖项添加到 build.gradle 文件中：

implementation("androidx.compose.material3:material3:1.2.1")

添加依赖项后，就可以开始向应用添加 Material Design 系统，包括颜色、排版和形状。