组件与常用模式

前面已经比较全面的介绍了Material Design相关的设计哲学、设计原理和方法论。这一章开始，我们将看看这些原理是如何在安卓系统当中得到实践的。

一个应用并不是完全从什么都没有来组建的，至少会有一匹一匹的砖嘛。而在界面设计当中，这些能够拿过来就使用的砖块就是控件。

例如，按钮 滑动条 列表等等，都是可以直接拿过来用的砖块。

Material Design最基础的体现，就是看看这些砖长成什么样，以及如何用Material Design的理念将这些砖组合起来，构建成应用的界面。

这样的砖块很多，Google在Material Design的规范中给出了详细的定义。

因此我不会一一列举，只是拿出其中一两个最为常见的、最为典型的砖块和大家讨论，看看规范该如何解读和使用。知道了这些典型砖块的实践方式以后，大家就能自己根据设计规范来查看资料了。

我这里选取了按钮 列表 应用栏 系统栏来详细的讨论。

按钮

Material Design中有3类按钮：

• Floating action按钮：前面已经大致介绍过，它是一个圆形的按钮，悬浮在界面之上6dp的位置，当点击的时候，按钮会向上浮动（显示出更大的阴影），是界面中吸引用户的界面元素之一；

  Image may be NSFW.
  Clik here to view.

• Raised按钮：拥有背景颜色（Accent color）的按钮，点击时它在z轴的位置会向上变化；

  Image may be NSFW.
  Clik here to view.

• Flat按钮：按钮文字有颜色（Accent color）的按钮，点击时它在z轴的位置不会变化；

  Image may be NSFW.
  Clik here to view.

Flat按钮

Flat按钮常常用在toolbar、对话框以及需要与很多文字配合的地方。通常用来告诉用户“我能提供一些轻量级的功能，这些功能并不是我的特色，你知道我有就行”。

它的设计规范如下，

项目	数值
最小宽度	88dp
高度	36dp
边角弧度半径	2dp
左右margin	8dp
左右padding	8dp
字体大小	15sp

当使用亮色主题并按下按钮的时候，按钮的背景颜色是#999999，透明度为40%；
当使用暗色主题并按下按钮的时候，按钮的背景颜色是#CCCCCC，透明度为25%；

当点击按钮的时候，会出现水波纹一样的动画，

Raised按钮

Raised按钮比Flat按钮能更加吸引用户的注意力。通常用来告诉用户“点击我以后，会启动我一个很重要的功能，你要特别注意”。

它的设计规范如下，

项目	数值
最小宽度	88dp
高度	36dp
默认z轴位置	2dp
按下时z轴位置	8dp
边角弧度半径	2dp
左右margin	0dp
左右padding	16dp
字体大小	15sp

当使用暗色主题时，背景的颜色如下，

按钮状态	数值
正常	调色板500类型的颜色
按下	调色板700类型的颜色

当点击按钮的时候，会出现水波纹一样的动画，之后按钮在Z轴的位置也会提升，

FloatingAction按钮

FloatAction按钮是界面当中最引人瞩目的按钮。它代表了这个界面能提供的最重要、最核心的功能。默认情况下它的尺寸是56dp，放在上方会小一点，是40dp。

按照中心位置会内嵌一个系统图标，系统图标的大小我们在图标的章节讲过，是24dp。

需要注意的是：并不是所有的界面一定要有个FloatAction按钮，它的存在完全是由应用的逻辑决定的。之所以我们看到那么多界面都有FloatAction按钮，是因为这是Material Design的典型特征，所以选择的很多例子都有它。如果某个界面确实需要FloatAction按钮，那么一个界面上也只能有一个，表明只有一个功能是最为重要的。

FloatAction按钮还有一些常用的使用模式：

• 当拥有FloatAction按钮的界面退出的时候，按钮要用动画的形式消失；
  当拥有FloatAction按钮的界面显示的时候，按钮要用动画的形式出现；

  Image may be NSFW.
  Clik here to view.

  当拥有FloatAction按钮的界面在内部进行切换的时候，按钮要有动态变化的效果；

  Image may be NSFW.
  Clik here to view.

• 按钮点击后可以，展示出更多菜单；

  Image may be NSFW.
  Clik here to view.
  • 按钮变化成一个新的纸片，纸片上展现更多的内容；
  Image may be NSFW.
  Clik here to view.

它的设计规范如下，

项目	数值
标准尺寸	56dp
最小尺寸	40dp
内嵌图标尺寸	24dp
默认z轴位置	6dp
按下时z轴位置	12dp
背景颜色	Accent Color

列表

接下来，我们看看另外一个会经常用到的组件列表。

列表用来显示展示类型相同的数据，比如都有头像、名字、职务等信息，不同的只是这些信息的具体内容。

列表项是列表的一个显示单元，列表项的布局不要超过三行，如果确实要超过三行，那么就不应该使用列表来展示内容了。

列表项的内容根据位置的不同，体现出的重要性也不同：

1. 靠左边的内容是最重要的，右边的次之；
2. 靠上边的内容是最重要的，下边的次之；

常见的列表布局有以下三种，

1. 单行：有一行文字的显示

   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.

2. 双行：有两行文字的显示

   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.

3. 三行：有三行文字的显示

   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.
   Image may be NSFW.
   Clik here to view.

这些布局中各个元素的位置，都在规范中有明确的规定，经过按钮那一小节的讲述，我想大家一定具备看懂规范的能力，能够从中找到设置位置的关键点。

在查看上面的示例时，大家应该注意到了列表项的分割线。这些分割线将列表区域按照逻辑区分开来，都是1dp的宽度。

• 有的分割线贯穿了整个屏幕；

  Image may be NSFW.
  Clik here to view.

• 有的只是将文字的部分分开；

  Image may be NSFW.
  Clik here to view.

• 有的没有分隔；

to

关于分割线，在Material Design的规范当中，也有专门的章节细致的讲述。

应用栏与工具栏

工具栏的作用是把很多操作按钮集中起来，一起展现给用户。它可以放在应用界面的上部分、中间、底部，

在安卓的设计当中，有个ActionBar的概念，它的作用就是展示一个应用的图标、名字，以及菜单、导航栏等内容，从安卓3.0开始它就被提出，并推广了起来。

不过从安卓5.0开始，在ActionBar的基础上提出了AppBar。AppBar除了担当ActionBar的功能外，还增加了一些新的特性，例如滑动效果。新引入的具体的控件ToolBar接替了ActionBar的具体功能，成为AppBar最为核心的组件。

为了便于理解，我举一个例子。Google在2015年进行拆分，成立了多家公司，并将它们规整到Alphabet公司旗下。而以前的Google只保留搜索业务，成为了一个比较单纯的公司。

ActionBar就相当于以前的Google公司；AppBar相当于Alphabet；ToolBar就是Alphabet成立后的Google。AppBar除了ToolBar以外，还可能包含更多组件在其中。

应用栏的高度根据屏幕横竖状态的不同而不同，

屏幕状态	高度
竖屏	56dp
横屏	48dp

应用栏可以根据开发者的要求，变成透明的、半透明的、甚至不显示。

AppBar除了显示标题、菜单等功能外，还有令人炫目的滑动效果，这也是安卓系统使用Material Design的重要特色。

AppBar除了Toolbar以外，可以包含分页标签Tabs 图片等等内容。图片占用的空间叫做可变空间-Flexible space，不一定就是放图片，也可以放其他的元素，只不过就界面设计来讲，显示图片的效果要很多。

• AppBar只有Toolbar：内容滚动的过程中，Toolbar可以被顶到消失；也可通过下拉再次出现。

  Image may be NSFW.
  Clik here to view.

• AppBar有Toolbar和Tab：

  1. 内容滚动的过程中，Toolbar可以被顶到消失，只留下Tab；也可通过下拉再次出现。

  2. 内容滚动的过程中，Toolbar和Tab都被顶到消失；也可通过下拉再次出现。

  Image may be NSFW.
  Clik here to view.

• AppBar有Toolbar和可变区域：

  1. 内容滚动的过程中，可变区域可以被顶到消失，只留下Toolbar；也可通过下拉再次出现。

  2. 内容滚动的过程中，Toolbar和可变区域都被顶到消失；也可通过下拉再次出现。

     Image may be NSFW.
     Clik here to view.
     Image may be NSFW.
     Clik here to view.

状态栏与导航栏

用过智能手机的同学对状态栏和导航栏一定不会陌生，

状态栏贯穿了整个屏幕的宽度，高度是24dp。
导航栏同样贯穿了整个屏幕的宽度，高度是48dp。不过在很多国内定制的系统当中，因为手机已经有了实体按键，就取消了导航栏。

状态栏和导航栏的背景颜色是可以各自改变的，透明、半透明、不透明。

为了配合不同应用的使用场景，状态栏和导航栏的显示也有不同的表现，

• 沙发模式（Lean back）：就像在瘫坐在沙发上看电影时一样，屏幕尽可能的呈现视频内容，把状态栏和导航栏都藏起来。这个过程中你几乎不会去接触到屏幕，当你碰触屏幕的时候，状态栏和导航栏才会出现。

  Image may be NSFW.
  Clik here to view.

• 沉浸模式（Immersive）：比如当你在使用阅读软件看书的时候，屏幕只显示书本的内容，把状态栏和导航栏隐藏起来，让你沉浸在阅读的快乐当中。但每次翻页的时候，你还是需要接触屏幕的。虽然翻页的过程中接触了屏幕，状态栏和导航栏也不会出现，除非你在屏幕的边缘做了一个滑动的动作，才能将它们再次唤出。

  Image may be NSFW.
  Clik here to view.

• 关灯模式（Light out）：当你不碰触屏幕超过一定的时间，状态栏会自动的隐退；导航栏虽然还在那里，但是那三个操作的按钮却变成了三个小点。这个过程就好像是关闭了照亮屏幕的灯，状态栏和导航栏似乎还在那里，只是没有了灯光，已经看的不真切了。

---

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。