Android 启用 Material Design 3(Material You) 小白教程
介绍
md3的效果:
原本是红色壁纸对应的红色App主题,在改成绿色壁纸之后,App主题也相应的变成绿色了。
这个效果主要是使用了Material You中的动态颜色功能。
官方文档 https://m3.material.io
具体每个组件的代码示例,在 github 上:
https://github.com/material-components/material-components-android/tree/master/docs/components
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/libraries/mdc-android/getting-started
md3和 md2 引入方式是一样,但是需要:
- material库版本到
1.5.0
及以上 - compileSdkVersion,targetSdkVersion设置为
31
以上 - 使用最新的 Android Studio
具体操作如下:
更新Gradle依赖
需要在build.gradle
中更新Gradle依赖,将material库版本到1.5.0及以上
build.gradle及修改 的位置
在dependencies
里面写入(上面图片可以看到):
implementation 'com.google.android.material:material:1.5.0'
In order to use the new Material3 themes and component styles, you should depend on version 1.5.0 or later.
修改版本Sdk版本
在build.gradle
中修改compileSdkVersion
和targetSdkVersion
到31及以上
build.gradle及修改 的位置
将compileSdk
和targetSdk
改到31以及以上(上面图片可以看到):
修改App主题
将themes.xml的Theme.AppCompat.*
或Theme.MaterialComponents.*
改为 Theme.Material3.*
推荐改为:
Theme.Material3.DayNight
有标题栏Theme.Material3.DayNight.NoActionBar
没有标题栏
themes.xml及修改 的位置
<style name="XXXXXXX" parent="Theme.Material3.DayNight.NoActionBar">
<!-- 上面name="XXXXXXX" 的 XXXXXXX改成自己的原来的 -->
<!-- 中间不需要写内容 -->
</style>
设置为Theme.Material3.*
后部分组件便会自动变成 Material3 样式:
<Button → MaterialButton
<CheckBox → MaterialCheckBox
<RadioButton → MaterialRadioButton
<TextView → MaterialTextView
<AutoCompleteTextView → MaterialAutoCompleteTextView
使用动态颜色
我们过去在使用颜色时可能是硬编码,比如这样:
android:background="@color/colorPrimary"
启用md3后,应改为动态访问的方式,比如:
android:background="?attr/colorPrimary"
至此已经可以在Android 12 上试试动态颜色的效果了。
动态颜色选取
颜色的选取建议参考官方文档,下面进行简述:
颜色分为:
- Primary 主色 ; Secondary 次级色 ; Tertiary 第三位的
- Error
- Outline
- Background
- Surface
而且日间模式和夜间模式,对应的颜色会自动调整。 当然,这些颜色也可以根据自己的需要进行调整。
对于颜色的选取参考:
- Primary: 例如,主按钮的背景色
- On Primary: 例如,主按钮上的文字颜色
- Primary Container: 这个我理解不了,比主按钮稍弱一点的按钮?那 Secondary 还有必要么?applied to elements needing less emphasis than primary
- On Primary Container
- Inverse Primary: 就是跟背景色对比强烈的颜色。For example, snackbars use the reverse color mapping to bring attention to an alert.
参考1
版权声明:本文为CSDN博主「yechaoa」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/yechaoa/article/details/124541072