Material Design 3

发布时间: 2022-06-25 19:57:55 作者: 大象笔记

官方文档

https://m3.material.io

具体每个组件的代码示例,在 github 上:

https://github.com/material-components/material-components-android/tree/master/docs/components

官方主题生成器工具在线版

https://m3.material.io/theme-builder#/dynamic

这个工具的好处是,可以生成主题预览,然后将主题配置导出。

注意:

契机

最近要启动一个 Android 项目,我感觉需要一套 Android 上的 UI 模板/框架。 类似 Web 开发中的 Bootstrap 这样的 UI 框架,否则我的组件、配色都很难搞定。

Material Design 看起来是最好的选择。

选择 Material Design 3 还是 2

看起来 Material Design 3 比 2 少了很多组件

例如:

需要动手测试,3 是否兼容 2 的组件,即 3 中也能使用 2 的组件。

但也不一定 2 就更全,可以看到很多 2 的组件,只有规范,但是没有实现。例如 banner, image list。

所以我觉得还是大胆地用版本 3 就行。

XML 还是 jetpack compose

在 Admob 官方支持 jetpack compose 之前,我不打算再使用 jetpack compose。

或者在 XML 中嵌入 compose view。总之最外层架子绝对不用 compose。

WPF 的 Material Design 支持

同时,最近也在调研 Windows 桌面客户端的技术方案。 不太了解 Windows 桌面开发的生态,用 wpf 上手最大的问题是默认组件都非常丑陋。 而 WinUI3 又看起来是个跟 UWP 一样的半成品,不想再被微软坑一遍。

没想到三方有支持 MD 的实现,12K 的 star 看起来也比较靠谱。

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

引入方法

https://m3.material.io/libraries/mdc-android/getting-started

implementation 'com.google.android.material:material:<version>'

In order to use the new Material3 themes and component styles, you should depend on version 1.5.0 or later.

看起来 2 和 3 的引入方式是一样的。此外:

Material3 主题

例如:Theme.Material3.DayNight 或者 Theme.Material3.DayNight.NoActionBar

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
	...
</style>

只用之后的好处是:

Material3 themes enable a custom view inflater, which replaces default components with their Material counterparts. Currently, this replaces the following XML components:

部分组件自动变成 Material3 样式:

<Button → MaterialButton
<CheckBox → MaterialCheckBox
<RadioButton → MaterialRadioButton
<TextView → MaterialTextView
<AutoCompleteTextView → MaterialAutoCompleteTextView

颜色主题

这个可太方便了,非常适合我这种色弱型开发者使用。大大节约了挑选颜色的时间。

而且日间模式和夜间模式,对应的颜色会自动调整。 当然,这些颜色也可以根据自己的需要进行调整。

但如何区分使用场景呢?参考:

https://m3.material.io/styles/color/the-color-system/color-roles

一图胜千言:

进阶了解:Android Kotlin 获取主题中指定颜色的方法

字体大小

https://m3.material.io/libraries/mdc-android/typography-theming

如何应用到 XML 布局上呢?

导入图标的方法

https://stackoverflow.com/questions/28684759/import-material-design-icons-into-an-android-project

我是一名山东烟台的开发者,联系作者