当前位置: 首页 > 科技观察

MaterialDesign3全新进阶版UI库!

时间:2023-03-12 06:35:56 科技观察

前不久,谷歌在I/O大会上发布了MaterialYou,重点展示了MaterialDesign体系最新迭代MaterialDesign3中最具表现力的个性化特性。已更新。准备好迁移到MaterialDesign3了吗?让我们开始吧!从M2迁移到M3(MDC1.4.0到MDC1.5.0)将主题更新为Material3MaterialDesign3具有扩展的颜色系统以利用动态颜色和更多功能。如果您使用MaterialThemeBuilder重新配置调色板,您只需放入AndroidXML或Compose主题代码即可。否则,将Theme.MaterialComponents.*替换为Theme.Material3.*主题,将Widget.MaterialComponents.*替换为小部件样式。颜色和主题Material中的主题您扩展了其前身的颜色空间,添加了三次色和一些从原色、二次色、三次色和错误色派生的插值颜色。完整版:这些新的颜色空间支持动态颜色表达,使用MaterialThemeBuilder简化动态颜色的可视化并迁移到新的颜色系统,可在网络和Figma上使用。当由绘图工具生成时,可以通过仅提供一种颜色来创建这些中间颜色值。工作原理当用户更改Android12设备上的壁纸时,系统会分析图像的所选颜色,并使用主要种子颜色通过算法选择主要颜色、次要颜色、第三颜色和错误颜色。同时,它应用了色彩理论和可访问性规则。该算法根据这些颜色创建一个从0%亮度(黑色)到100%(白色)的色调调色板。通过该工具创建的动态主题或自定义主题将使用这些调色板中的值来设置该颜色范围的主题属性。例如,如果在原色上显示的文本/图标的OnPrimarycolor是100色度,OnSecondary、OnTertiary和OnError都将是它们各自颜色的100色度,对于浅色主题,可能是20色度对于深色主题.您可以自由自定义这些值中的任何一个,但要注意对比度和可访问性。在Android12设备上,MaterialYou将根据用户的壁纸生成动态调色板。除了生成的调色板外,还会有几个预先创建的方案。要选择动态颜色,您首先需要确保您的应用程序中没有任何硬编码颜色。相反,您应用中的所有颜色都应作为主题属性引用,以便在启用动态壁纸颜色支持时可以轻松交换它们。集成动态颜色Material库中的DynamicColors类利用活动生命周期回调来确定何时以及如何应用颜色叠加。使用提供的API调用,除了确定应在何时何地应用动态颜色之外,还可以将动态颜色应用于子集或整个应用程序。为避免意外影响,请验证应用程序代码引用的主题属性不是任何硬编码颜色(HEX代码或@color/)。给定一个使用带有MDC组件的Material3主题的应用程序,以下是启用动态颜色所需的最少代码-类的onCreateApplication方法中的一行。导入android.app.Application;导入com.google.android.material.color.DynamicColors;publicclassMyApplicationextendsApplication{@OverridepublicvoidonCreate(){super.onCreate();//这就是您所需要的。DynamicColors。applyToActivitiesIfAvailable(这个);}}TypographyPre-Material3具有6种标题变体、2种副标题变体、2种文本变体、按钮、标题和上划线样式。在Material3中,每个类别都有更多的规则和更少的变体,即小型、中型和大型。大多数新的TextAppearance样式直接映射到pre-Material3样式。MDC-Android中的属性名称使用类似的模式形成:textAppearance+{Display,Headline,Title,Body,Label}+{Large,Medium,Small}ComponentUpdateTopAppBarTheTopAppBarhasbeenrefreshedbyMaterialYoufor更好地与颜色对齐。在MaterialYou之前,顶部应用栏使用阴影来区分应用栏和内容。颜色现在是使用新创建的表面色调的主要海拔指示器。导航栏/底部导航视图底部导航视图进行了视觉刷新并获得了一些新功能。目前,底部导航视图中的每个菜单项都包含一个图标和文本标签。选择目的地后,图标和标签都将染上与非活动状态不同的颜色。在MaterialDesign3中,非活动目的地由图标的OutLined版本指示(如果可用)。事件目的地由填充在药丸状容器中的图标表示。如果图标的不同fill和OutLined变体不可用,您可能需要考虑其他提示来帮助指示活动状态,例如仅在活动目的地上显示目的地标签。FloatingActionButtonFloatingActionButton经过一些重新设计。没有明确主题或遗留Widget.Design.FloatingActionButton主题的FAB将继承Theme.Material3.*主题中的这个新设计。新的FAB具有更小的角半径,现在类似于圆角矩形而不是现有FAB的圆形。有预设样式可以使用主要颜色、次要颜色或表面颜色的色调来为您的FAB设置主题。要保留之前的浮动操作按钮设计,请确保将FAB的样式设置为@style/Widget.MaterialComponents.FloatingActionButton。还有一个新的大型FAB变体。ButtonMaterialDesign3中的填充和轮廓按钮具有完全圆角,包含在DerivedfromTheme.Material3.*.Chips在MaterialDesign2中,芯片具有完全圆角,在MaterialDesign3中它们在视觉上发生了变化,现在有8dp角.它们在材料3中都有8dp的角。BadgesBottom导航视图现在能够将关联的徽章显示为填充形状或带有标签。通过将徽章的重力设置为下面声明的常量之一,徽章可以锚定到图标的四个角之一。BadgeDrawable.BadgeGravity:TOP_STARTTOP_ENDBOTTOM_STARTBOTTOM_END下面是一些代码,显示如何将徽章添加到BottomNavigationView菜单项:NavigationViewbn=//...items.//检索第一个菜单项并增加徽章标签MenuItemmenuItem=bn.getMenu().getItem(0);intmenuItemId=menuItem.getItemId();徽章可绘制对象badgeDrawable=bn.getOrCreateBadge(menuItemId);//如果选择了第一个菜单项并且隐藏了徽章,//调用BadgeDrawable#setVisible以确保徽章可见。徽章Drawable.setVisible(true);徽章Drawable.setNumber(badgeDrawable.getNumber()+1);下一步是什么?看完上面的文章,你一定已经了解了MDC1.4.0和1.5.0(MaterialDesign3)版本之间的主要区别。那还等什么,赶快换上MaterialDesign3,探索不一样的UI体验吧!