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

介绍

md3的效果:
原本是红色壁纸对应的红色App主题,在改成绿色壁纸之后,App主题也相应的变成绿色了。
image
这个效果主要是使用了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及修改 的位置

image

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中修改compileSdkVersiontargetSdkVersion到31及以上

build.gradle及修改 的位置

image

compileSdktargetSdk改到31以及以上(上面图片可以看到):

修改App主题

themes.xmlTheme.AppCompat.*Theme.MaterialComponents.* 改为 Theme.Material3.*

推荐改为:

  1. Theme.Material3.DayNight 有标题栏
  2. Theme.Material3.DayNight.NoActionBar没有标题栏

themes.xml及修改 的位置
image

    <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

参考2

posted @ 2023-04-09 16:33  kingwzun  阅读(7515)  评论(0编辑  收藏  举报