当前位置: 首页 > Web前端 > HTML

MaterialDesign3全新高级UI库

时间:2023-03-28 15:48:24 HTML

MaterialDesign3全新高级UI库!结束前不久,谷歌在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中的主题您扩展了其前身的颜色空间,添加了三次色和一些从原色、二次色、三次色和错误色派生的插值颜色。完整版本:Material3MDC1.4.0android:backgroundColorandroid:backgroundColorcolorPrimarycolorPrimarycolorOnPrimarycolorOnPrimarycolorPrimaryContainercolorOnPrimaryContainercolorPrimaryInverseDEPRECATEDcolorPrimaryVariantcolorSurfacecolorPrimarySurfacecolorOnSurfacecolorOnPrimarySurfacecolorSecondarycolorSecondarycolorOnSecondarycolorOnSecondarycolorSecondaryContainercolorOnSecondaryContainerDEPRECATEDcolorSecondaryVariantcolorTertiarycolorOnTertiarycolorTertiaryContainercolorOnTertiaryContainercolorErrorcolorErrorcolorOnErrorcolorOnErrorcolorErrorContainercolorOnErrorContainercolorSurfacecolorSurfacecolorOnSurfacecolorOnSurfacecolorSurfaceVariantcolorOnSurfaceVariantcolorSurfaceInverse这些新的色彩空间支持动态色彩表达,使用MaterialThemeBuilder简化了动态颜色的可视化并迁移到新颜色system,availableonthewebandFigma.Whengeneratedbyadrawingtool,theseintermediatecolorvalues??canbecreatedbyprovidingonlyonecolor.HowitworksWhenauserchangesthewallpaperonanAndroid12device,thesystemanalyzestheimage'sselectedcolorsandusestheprimaryseedcolortoalgorithmicallyselecttheprimary,secondary,tertiary,anderrorcolors.Atthesametime,itappliescolortheoryandaccessibilityrules.该算法根据这些颜色创建一个从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}NewPropertyOldPropertytextAppearanceDisplayLargetextAppearanceDisplay2textAppearanceDisplayMediumtextAppearanceDisplay3textAppearanceDisplaySmalltextAppearanceHeadline1textAppearanceHeadlineLargetextAppearanceHeadline2textAppearanceHeadlineMediumtextAppearanceHeadline3textAppearanceHeadlineSmalltextAppearanceHeadline4textAppearanceTitleLargetextAppearanceHeadline5textAppearanceTitleSmalltextAppearanceSubhead1/Subtitle1textAppearanceBodyLargetextAppearanceSubhead2/Subtitle2textAppearanceBodyMediumtextAppearanceBody1textAppearanceBodyMediumtextAppearanceBody2textAppearanceBodySmalltextAppearanceCaptiontextAppearanceLabelLargetextAppearanceButtontextAppearanceLabelMediumtextAppearanceOverlinetextAppearanceLabelSmallN/A组件更新TopAppBarTopAppBar已经由MaterialYou更新以实现更好的颜色对齐。在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体验吧!??/感谢大家的支持/以上就是本次分享的全部内容,希望对大家有所帮助^_^喜欢的话别忘了三连三连三收藏哦~欢迎收看关注公众号ProgrammerBus,来自ZiziFestival、Shopee、招行三兄弟,分享编程经验、技术干货和职业规划,助你少走弯路,进大厂。