组件与常用模式

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

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

例如， 等等，都是可以直接拿过来用的砖块。

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

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

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

我这里选取了 来详细的讨论。

按钮

中有3类按钮：

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

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

  它的设计规范如下，

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

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

  Raised按钮

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

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

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

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

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

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

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

  它的设计规范如下，

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

  列表

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

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

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

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

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

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

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

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

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

  • 有的没有分隔；

  to

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

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

  • 有和可变区域：

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

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

  状态栏与导航栏

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

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

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

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

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

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

  ---

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

  声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！