迁移你的应用到Material Design 3

2022 年 11 月 14 日 666点热度 0人点赞 0条评论

作者：James Williams, Material Developer Advocate

在Google I/O上，我们发布了Material You，突出了我们最新一代Material Design系统Material Design 3中最具表现力的个性化功能。除了支持动态颜色外，我们还更新了几个Material Components。

从M2迁移到M3(MDC 1.4.0 到 MDC 1.5.0)

更新你的主题到Material 3

Material Design 3具有扩展的颜色系统，该系统利用了动态颜色等特性。

如果使用“Material主题生成器”重新配置调色板，只需放入Android XML或编写主题代码即可。也就是说，主题方面使用Theme.Material3.*替换Theme.MaterialComponents.*，控件方面使用Widget.Material3.*替换Widget.MaterialComponents.*。

颜色和主题

Material主题可以扩展其前身的颜色空间，添加第三种颜色和从“主”、“次”、“第三种”和“错误”颜色派生的许多插值颜色。

这些新的颜色空间支持动态颜色表达。我们已经通过Material Theme Builder（可在web和Figma上获得）轻松可视化动态颜色并迁移到我们的新颜色系统。当通过我们的工具生成这些中间颜色值时，只需提供一种颜色即可创建。

浅色主题颜色值

如何工作

当用户在Android 12设备上更改墙纸时，会分析图像以选择颜色，并使用初始种子颜色通过算法选择主、次、三级和错误颜色。同时，它应用了颜色理论和可访问性规则。根据这些颜色，该算法创建从0%亮度（黑色）到100%（白色）的色调调色板。通过我们的工具创建的动态主题或自定义主题将使用这些色调调色板中的值来设置该颜色范围的主题属性。

例如，如果原色上显示的文本/图标的原色为100色调，则对于浅色主题，“次色”、“第三色”和“错误时”的色调为100，而深色主题色调为20。

您可以自由定制这些值，但要注意对比度和可访问性。

在Android 12设备上，Material You将根据用户的墙纸生成动态调色板。除了生成的色调调色板之外，还有几个预先创建的方案。要选择动态颜色，您需要确保应用程序中没有任何硬编码颜色。相反，应用程序中的所有颜色都应该被引用为主题属性，这样在启用动态壁纸颜色支持时，它们就可以轻松交换。

集成动态颜色

Material库中的DynamicColors类可访问“活动生命周期回调”，以确定何时以及如何应用颜色覆盖。使用提供的API调用，您可以将动态颜色应用于子集或整个应用程序。您还可以确定应用动态颜色的时间和位置。
为了避免意外的影响，您应该确保您的应用程序代码引用主题属性，而不是任何硬编码颜色（HEX代码或@color/）。
给定一个使用Material3主题和MDC组件的应用程序，下面是启用动态颜色所需的最小量代码-应用程序类的onCreate方法中的一行。

import android.app.Application;
import com.google.android.material.color.DynamicColors;

public class MyApplication extends Application {
 @Override
 public void onCreate() {
   super.onCreate();
   // This is all you need.
   DynamicColors.applyToActivitiesIfAvailable(this);
 }
}

更多颜色主题的文章。
如何在你的应用中使用动态颜色主题，参考codelabs示例代码。

排版

排版风格经历了简化。在Material 3之前，有6个标题变体、2个副标题变体、两个正文变体、按钮、标题和上划线样式。

M2的字体风格
在Material 3中，每个分类都有一个更规则、数量更少的变体，即“小”、“中”和“大”。

M3的字体风格
大多数新的TextAppearance样式直接映射到Material 3之前的样式。MDC Android中的属性名称使用类似的模式形成：textAppearance+｛Display、Headline、Title、Body、Label｝+｛Large、Medium、Small｝

组件升级

Top App Bar
顶部应用栏使用了“Material you”进行了更新，颜色适配的更好了。在Material You之前，顶部应用栏使用阴影来区分应用栏和内容。现在则使用颜色来突出显示内容与应用栏的色调区分。

阅读更多关于Top App Bar的示例代码与代码片段。

在“Material Design3”中，非活动目的地由图标的轮廓版本（如果可用）表示。活动目的地由封装在丸状容器中的填充图标表示。

如果图标的不同填充和轮廓变体不可用，您可能需要考虑其他提示来帮助指示活动状态，例如仅在活动目的地上显示目的地标签。阅读有关实现导航栏的更多示例和代码片段。
Floating Action Button
FloatingActionButton经过了一些重新设计。没有明确主题或遗留Widget.Design的FAB。FloatingActionButton主题将在theme.Material3.*主题中继承此新设计。

与现有FAB的圆形形状相比，新FAB的角半径更小，现在类似于圆形矩形。有预设样式可以使用原色、次色或表面色的色调为FAB设置主题。要保留以前的浮动动作按钮设计，请确保将FAB的样式设置为@style/Widget.MaterialComponents.FloatingActionButton。还有一种新的大型FAB变体。阅读更多示例和代码片段，了解如何实现FAB。

Buttons
Material Design 3中的填充和轮廓按钮具有完全圆角。如果包含在从theme.Material3.*派生的主题中，按钮小部件将自动膨胀到MaterialButton并应用Material3样式。阅读更多示例和代码片段，了解如何实现按钮。

Chips
在“Material 2”中，Chips具有完全圆角，在“Material 3”中，它们经历了视觉变化，现在具有8 dp角。在Material3中，它们都有8个dp角。阅读有关实现Chips的更多示例和代码片段。

Badges
底部导航栏现在具有可以展示未读消息badge。可以通过Drawable.BadgeGravity属性设置badge的位置，取值如下：

TOP_START

TOP_END

BOTTOM_START

BOTTOM_END

下面的代码展示了如何向BottomNavigationView添加badge：

Navigation View bn = //... items.

// Retrieve the first menu item and increment the badge label MenuItem menuItem = bn.getMenu().getItem(0);

int menuItemId = menuItem.getItemId(); 
Badge Drawable badgeDrawable = bn.getOrCreateBadge(menuItemId);
// If the first menu item is selected and the badge was hidden, 
// call Badge Drawable #setVisible to ensure the badge is visible. 
badge Drawable.setVisible(true);
badge Drawable.setNumber(badgeDrawable.getNumber() +1);

阅读更多关于badge实现的示例代码和代码片段。