首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >推荐开发者使用 Material Design 组件

推荐开发者使用 Material Design 组件

作者头像
Android 开发者
发布2022-03-09 15:20:26
发布2022-03-09 15:20:26
1.3K0
举报
文章被收录于专栏:Android 开发者Android 开发者

为了保证您的应用与用户设备中安装的其他应用在视觉和行为上保持一致,我们 推荐 您遵循 Material Design 规范,因为用户从一个应用中学习的操作模式可以无缝衔接地在另一个应用中使用。

Android 用户希望您的应用在视觉和行为上与系统保持一致。您在设计视觉和导航模式时应该遵循 Material Design 规范… —— d.android.com/design

您可以使用 Material Design Components (MDC) 组件库来 实现 这一目的。本文将列出使用 MDC 的优势,从而说明我们推荐使用它的原因。

组件

MDC 提供了系统标准组件的 Material 版本,例如 ButtonsToolbarsCheckBox 等等,使用这些组件能轻松实现 Material 风格。如果您使用了 MaterialComponents 主题,当您 inflate 一个 layout (通过 MDC 的 View Inflater) 时,被实例化是 Material 组件而不是标准组件,因此您不需要对布局进行重大的更新就能轻松实现 Material 风格。

代码语言:javascript
复制
<!-- Copyright 2019 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!--  标准组件 Button 将会被替换为 MaterialButton -->
<Button ... />

<!-- 您甚至可以使用 MaterialButton 特定的属性 -->
<Button ...
  app:icon="@drawable/foo"/>

<!--如果您想用具有向后兼容能力的 AppCompatButton 而不是 MaterialButton,您可以这样做 -->
<androidx.appcompat.widget.AppCompatButton ... />

所有 Material 组件都继承自对应的 AppCompat 组件,因此它们享有相同的向后兼容能力和新版本的 bug 修复。

Material 组件在对应的系统标准组件和 AppCompat 组件的基础上拓展出更多样式和功能,例如 MaterialButton 拥有以下多种样式:

代码语言:javascript
复制
<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->

<!-- Contained button -->
<Button ... 
  style="?attr/materialButtonStyle"/>

<!-- Text button -->
<Button ... 
  style="?attr/borderlessButtonStyle"/>

<!-- Outlined button -->
<Button ... 
  style="?attr/materialButtonOutlinedStyle"/>

我最喜欢的功能之一是使用 MaterialTextView 替换 TextView,它 新增的功能 可以很方便地在 TextAppearance 中设置行高。

除了拓展现有组件的功能外,MDC 还提供了一系列全新的组件。您可能知道 Bottom NavigationBottom SheetFloating Action Button,但未必听说过 ChipsDate PickerTime Picker

MDC 提供的全部组件列单,请查阅 —— 组件

Material 主题

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20ecc840d10541fd8a49c5d358d7340c~tplv-k3u1fbpfcp-zoom-1.image

Material 主题 可以更系统地 自定义 Material Design 样式来体现您的产品品牌。Material 主题包括 颜色字体样式形状 属性。对其进行自定义将自动应用到您用于构建应用的组件上。

您可以将 Material 主题理解为创建设计系统的设计系统 🤯。您只需配置好颜色、字体样式和形状,即可得到一套基于您品牌的完整设计系统。

Nick Rout 在以下文章中分别深入地介绍了这三个子系统:

深色主题

MDC 组件遵循 Material 的 深色主题背景规范 实现了深色主题。在深色主题下,许多组件都将调整它们的颜色,并且在阴影不可见的情况下添加了 elevation 叠加层以表现高度变化。

Chris Banes 在下面这篇文章中深入介绍了 MDC 的深色主题:

Material 动效 🆕

https://ask.qcloudimg.com/http-save/yehe-2267234/e97b61425aa4e85edf9073220a4af0b6.gif

Material Design 还针对转场动画制定了规范。现在,MDC 不仅提供了 规范,还将这些模式实现为 Transition 以便您在应用中使用。

Hunter Stich 在下面这篇文章中介绍了 Material Motion 库:

使用 Compose

Jetpack Compose 是 Android 系统的下一代 UI 工具包,目前 已正式发布。它会提供 Material 风格的组件和主题。尽早使用 MDC 将为未来迁移至 Jetpack Compose 做好准备 — 它们使用了相同的概念、设计名词和组件。您甚至可以使用类似 MDC-Android Compose 主题适配器 的库来简化迁移过程,该库将 XML 实现的 MDC 主题转换为 Compose 的 MaterialTheme

推荐使用 Material

希望您已经清楚我们推荐使用 Material Design Components 构建 Android UI 的原因。我们 近期更新 了在 Android Studio 中通过 File > New Project 菜单新建的模版,这些模版为您预设置了 Material 主题并使用了 MDC,因此您可以更容易的开始使用 MDC。如果您还没有迁移到 MDC,请查看我们的 迁移指南

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/08/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 组件
  • Material 主题
  • 深色主题
  • Material 动效 🆕
  • 使用 Compose
  • 推荐使用 Material
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档