关于前端:Material-Design-3-全新的进阶版本UI库

Material Design 3 全新的进阶版本 UI 库！

就在底前不久，Google 在 I/O 大会上公布了 Material You，突出最新迭代的 Material Design 零碎 Material Design 3 中最具表现力的个性化性能。除了反对动静色彩，同时还更新了多个 Material 组件。

筹备好迁徙到 Material Design 3 了吗？让咱们开始吧！

从 M2 迁徙到 M3（MDC 1.4.0 到 MDC 1.5.0）

将主题更新为 Material 3

Material Design 3 具备扩大的色彩零碎，可利用动静色彩等性能。

如果大家应用 Material Theme Builder 重新配置 palettes 的话，能够简略地放入 Android XML 或 Compose 的主题代码。否则，请替换 Theme.MaterialComponents. 为 Theme.Material3. 主题和 Widget.MaterialComponents.* 的部件款式。

色彩和主题

Material You 中的主题扩大了其前身的色彩空间，增加了第三色彩和从次要色彩、主要色彩、第三色彩和谬误色彩派生的许多插值色彩。

残缺版本：

这些新的色调空间反对动静色调表白, 应用 Material Theme Builder 简化了动静色彩的可视化并迁徙到新色彩零碎，可在 Web 和 Figma 上应用。当通过作图工具生成时，这些两头色彩值只需提供一种色彩即可创立。

How it works

当用户在 Android 12 设施上更改壁纸时，零碎会剖析图像已抉择色彩，并应用初 Primary 种子色彩通过算法抉择次要、主要、第三和谬误色彩。同时，它利用了色调实践和可拜访性规定。从这些色彩中，该算法创立从 0% 亮度（彩色）到 100%（红色）的色调调色板。通过工具创立的动静主题或自定义主题将应用这些色调调色板中的值来设置该色彩范畴的主题属性。

例如，如果主色彩上显示的 text/icon 的 On Primary color 是 100 色调，则 On Secondary、On Tertiary 和 On Error 都将为浅色主题各自色彩的 100 色调，兴许是 20 色调对于光明的主题。

大家能够自在自定义任何这些值，但请留神对比度和可拜访性。

在 Android 12 设施上，Material You 将依据用户的壁纸生成动静调色板。除了生成的调色板外，还会有几个事后创立的计划。要抉择动静色彩，首先须要确保应用程序中没有任何硬编码色彩。相同，应用程序中的所有色彩都应作为主题属性援用，这样在启用动静壁纸色彩反对时能够轻松替换它们。

整合动静色调

Material 库中的 DynamicColors 类利用 Activity Lifecycle Callbacks 来确定何时以及如何利用色彩叠加。应用提供的 API 调用，能够将动静色彩利用于子集或整个应用程序，除此之外还能够确定应在何时何地利用动静色彩。

为防止意外影响，须要确认利用程序代码援用主题属性不是任何硬编码色彩（HEX 代码或 @color/）。

给定一个应用带有 MDC 组件的 Material3 主题的应用程序，以下是启用动静色彩所需的起码代码 – onCreateApplication 类的办法中的一行。

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);
 }
}

排版

在 Material3 之前，有 6 种题目变体、2 种字幕变体、2 种注释变体、按钮、题目和上划线款式。

在 Material3 中，每个分类都有更规定且数量更少的变体，即小、中和大。

大多数 new TextAppearance 款式间接映射到 pre-Material 3 之前的款式。MDC-Android 中的属性名称应用相似的模式造成：textAppearance+ {Display, Headline, Title, Body, Label} + {Large, Medium, Small}

组件更新

Top App Bar

Top App Bar 曾经被 Material You 刷新过以更好地与色彩对齐。在 Material You 之前，top app bar 应用暗影来辨别 app bar 和 content。色彩当初是应用新创建的外表色调的次要标高指标。

Navigation Bar / Bottom Navigation View

Bottom Navigation View 进行了视觉刷新并取得了一些新性能。目前，Bottom Navigation View 中的每个菜单项都由一个图标和文本标签组成。抉择目的地后，图标和标签都将被染成与非活动状态不同的色彩。

在 Material Design 3 中，不流动的目的地由图标的 OutLined 版本（如果可用）批示。流动目的地由一个填充在药丸状容器中的图标示意。

如果图标的不同填充和 OutLined 变体不可用，就可能须要思考其余提醒来帮忙批示活动状态，例如仅在流动目的地上显示目的地标签。

Floating Action Button

FloatingActionButton 经验了一些从新设计。没有明确主题或遗留 Widget.Design.FloatingActionButton 主题的 FAB 将在主题中继承此新设计 Theme.Material3.*。

新的 FAB 的角半径更小，当初相似于圆角矩形，而不是现有 FAB 的圆形。有预设款式能够应用来自主色、辅助色或外表色彩的色调来为 FAB 设置主题。要保留以前的浮动操作按钮设计，请确保将 FAB 的款式设置为 @style/Widget.MaterialComponents.FloatingActionButton. 还有一个新的大型 FAB 变体。

Button

Material Design 3 中的填充和轮廓按钮具备齐全圆角，蕴含在派生自 Theme.Material3.*.

Chips

在 Material Design 2 中，芯片具备齐全圆角，在 Material Design 3 中，它们产生了视觉变动，当初有 8 个 dp 角。它们在资料 3 中都有 8 个 dp 角。

Badges

Bottom Navigation View 当初可能将关联的 Badges 显示为填充形态或带有标签。通过将其重力设置为以下申明的常量之一，能够将 Badges 锚定到图标的四个角之一 Badge Drawable.BadgeGravity：

TOP_START

TOP_END

BOTTOM_START

BOTTOM_END

上面是一些代码，展现了如何将 Badges 增加到 BottomNavigationView 菜单项：

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);

下一步是什么？

大家看完上述文章想必曾经理解了 MDC 1.4.0 和 1.5.0（Material Design 3）版本之间的次要区别。

所以还在等什么，连忙快来替换接入 Material Design 3，摸索不一样的 UI 体验！

❤️/ 感激反对 /

以上便是本次分享的全部内容，心愿对你有所帮忙 ^_^

喜爱的话别忘了 分享、点赞、珍藏 三连哦~

欢送关注公众号 程序员巴士 ，来自字节、虾皮、招银的三端兄弟，分享编程教训、技术干货与职业规划，助你少走弯路进大厂。