Android 启用 Material Design 3(Material You) 小白教程

发布时间 2023-04-09 16:37:59作者: kingwzun

介绍

md3的效果:
原本是红色壁纸对应的红色App主题,在改成绿色壁纸之后,App主题也相应的变成绿色了。
image
这个效果主要是使用了Material You中的动态颜色功能。

1、什么是Material You
Material You也称Material3或M3,是第三代Material Design设计语言。

Material You将颜色重新定义为更加个性化的体验,助力于构建出色且富有表现力的应用。

2、什么是动态颜色
动态颜色(Dynamic Color)是Material You的关键部分,通过动态配色提取算法从用户的壁纸中派生出颜色方案,且符合无障碍使用的标准,亦或是自定义的个性化颜色方案,然后应用于系统UI和应用程序,从而让设备变得更加个性化。

3、动态颜色的原理是什么

  • 首先,从用户的壁纸上提取一种源颜色,并推算出5中关键颜色,比如primary、Secondary、Tertiary等。
  • 然后,将每个关键颜色转化为由13种色调组成的调色板,且每种色调会生成对应的浅、深色方案。
  • 最后,通过系统Token将从壁纸提取的颜色方案和App Theme关联起来,在DynamicColorsActivityLifecycleCallbacks中判断是否需要覆盖。

引入方法

官方文档 https://m3.material.io
具体每个组件的代码示例,在 github 上:
https://github.com/material-components/material-components-android/tree/master/docs/components

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 的引入方式是一样的。此外:

使用最新的 Android Studio
compileSdkVersion 设置为 31
Material3 主题
例如:Theme.Material3.DayNight 或者 Theme.Material3.DayNight.NoActionBar

只用之后的好处是:

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
颜色主题

参考1
版权声明:本文为CSDN博主「yechaoa」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/yechaoa/article/details/124541072

参考2