推荐开发者使用 Material Design 组件

image

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

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

—— d.android.com/design

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

组件

image

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

<!-- 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 拥有以下多种样式:

image
<!-- 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

image

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

Material 主题

image

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

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

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

深色主题

image

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

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

Material 动效 🆕

image

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,请查看我们的 迁移指南

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容