2017 Material Design完整中文版：第四章节《布局》 第二部分
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
Material Design中的响应式布局适用于任何尺寸的屏幕。响应式UI包括：确保布局一致性的响应式栅格、内容在不同屏幕上的断点（breakpoint）设置以及应用从小屏幕到超大屏幕的缩放。
为了最优的用户体验，Material 用户界面应该满足以下宽度端点的自适应布局：480、600、840、960、1280、1440 以及 1600 dp。
尺寸效果（预览移动、桌面和平板端material design各端点的界面视图）
1.布局中的概要和详细视图内容
600dp宽度以下的屏幕布局由单一层级的内容填充（要么显示概要内容，要么显示详细内容，但不能两者同时显示）。
超过600dp宽度的屏幕布局可以放置两个层级的内容（包括概要和详细内容两者）。
2.最大屏幕宽度
超过1600dp宽度的布局可以放大至最大宽度。此时，网格可以执行以下操作：
外边距（margins）增大的同时保持居中对齐
右外边距增加的同时保持居左对齐
尺寸增加的同时显示追加内容
断点系统
断点描述了不同屏幕、设备和方向上长和宽的尺寸说明。
对于某些尺寸，即使设备旋转了值也是不变的。因此，这两个方向的最小宽度是个定值。
*当设备屏幕小于600dp时，断点为16dp
**低于以下所列值时，桌面断点设为16dp来适应chrome浏览器的变化。
以上动画显示了下面这些不同搭配的外边距和间隔宽度的变化：
8dp外边距和间隔
16dp外边距和间隔
24dp外边距和间隔
40dp外边距和间隔
40dp外边距和24dp间隔
全宽网格vs居中栅格
全宽栅格使用流体布局和断点来决定一个布局是否需要变化。
居中栅格使用固定的列宽，当所有列（加上固定的外边距）不再适应屏幕时将会重新调整布局。
全宽栅格
居中栅格
面板对栅格的影响
如 导航模式 中描述的，侧边导航可以是永久、持续或者暂时出现的。这些导航行为适用于任何面板，不仅仅是侧边导航。
永久性面板
一个永久显示的面板存在于响应式栅格之外。面板在一个固定的断点处显示（当屏幕可以容纳面板时）并对内容进行压缩。这里不存在显示或隐藏面板的控件。
一个永久性面板对响应式栅格的影响
侧边面板对栅格的影响
以下动画分为两个部分：
当出现一个持续性的侧边面板时，内容和栅格被压缩。当面板一直保持可见时，内容也一直保持可访问。轻触切换隐藏面板。
当出现一个临时性的侧边面板时，内容和栅格一部分被推离屏幕。轻触面板外部区域或面板内任意项隐藏面板。
持续性和临时性面板对响应式栅格的影响
临时性面板对响应式栅格的影响
当屏幕尺寸变化时，UI需要遵循以下行为。
可见性
| 行为 | 解释 |
| 永久性 | 当屏幕控件足够容纳时，面会一直出现。 |
| 持续性 | 面可以显示或隐藏。显示时，与屏幕上其他元素进行交互时不会改变其可见性。 |
| 临时性 | 面可以显示或隐藏。显示时，与屏幕上其他元素进行交互时变成隐藏或最小化。 |
宽度
| 行为 | 解释 |
| 固定 | 当屏幕尺寸发生改变时，元素宽度保持不变。 |
| 流动 | 当屏幕尺寸发生改变时，元素宽度跟随增减。 |
| 粘连 | 在受到另一个元素或断点的影响之前，元素宽度是固定的。 |
| 压缩 | 面出现后，元素宽度被压缩。 |
| 推开 | 面出现后，元素宽度保持不变的同时一部分被推理屏幕 |
| 覆盖 | 面出现后，元素的宽度和位置保持不变。 |
描述
| 行为 | 解释 |
| 上面、下面 | 元素的y轴。 |
| 在…之上、在...之下 | 运动中元素的z轴。 |
| 在...前面、在...后面 | 静止状态下元素的z轴 |
| 左边、右边、居中 | 元素的x轴。 |
| 顶部、底部 | y轴方向上元素相对于屏幕边缘的位置。 |
| 扁平、抬起 | 元素的z轴和投影。扁平元素没有阴影。 |
| 嵌入、全幅 | 图像或元素的内边距 |
| 摘要、详情 | 内容的摘要，展开的内容 |
当屏幕空间增加时，可应用以下响应式模式。
显示
转换
分割
重构
扩大
位置
显示（Reveal）
小屏幕随着可用空间的增加逐渐显示隐藏的UI。
小屏幕上显示不完全的内容需要点击屏幕某个元素才会完全展开显示
转换（Transform）
UI元素可能从一种版式转换成另一种版式。
侧边导航可能转变成tab
列表可能转变成宫格列表
工具栏中的菜单项可能转变成icons。
分割（Divide）
层叠式UI可以分割成新可用空间。
侧边导航、列表内容以及详情内容分割组成单个视图。
随着空间的增加，左面板、列表内容和右面板分割组成单一视图。
同级的tab内容分割组成单一视图。
重构（Reflow）
在可用空间中重构UI。
元素可以从单列显示形式重构为满屏显示形式。
水平tab显示形式重构为垂直列表显示形式。
元素可以基于新屏幕的比例或设备的方向在组件内进行重构。
扩大（Expand）
在更大的空间中UI可以扩大。
内容卡片可以扩大以填补新的屏幕空间。
对话框可以随着内容或具体的增量来进行扩大。
位置（Position）
UI组件可以根据需要改变位置。
在小屏环境中，底部sheet位置发生变化的同时变为菜单形式。
可以将一个浮动按钮移动到相对其他UI元素更明显的位置。
只针对Android
分屏模式允许在屏幕上同时出现两个应用活动。
交互要求
应用本身是不允许调用多屏模式，需要用户自行激活。
开启新的活动
当应用开启新的活动时，默认在同一屏幕部分启动。应用会调整大小适应分屏视图。（除非应用不支持分屏）
启用分屏模式时，如果满足以下条件，应用会在屏幕的另一部分中开启新的活动：
在分屏模式下，原活动和新活动相互关联，并都可用
应用帮助完成显示两个活动的授权任务并隐藏正在打开的其他应用
让用户清楚的知道应用将进入分屏模式，比如有个按钮表示“在新窗口中打开”。
分屏显示方式：在移动设备下以竖屏模式进行显示（左）、在平板设备下是以横屏模式进行显示（右）
除非用户将分屏取消或者被切换至一个不兼容分屏的应用，否则分屏模式会一直保持。
调整分屏
在分屏模式下，用户可以通过拖动两个屏幕之间的分割线来移动和调整大小。
边缘滑动手势
当分屏模式被激活时，边缘滑动手势可能无法按原来的方式进行操作。因为分屏模式依靠滑动来调整分屏大小，如果你的应用还依赖边缘滑动来执行操作的话，那么滑动操作可能会误触发分屏调整或其他应用操作。
为了避免这种情况发生，边缘滑动不应是执行某项应用操作的唯一方式，它应该准备有其他的替代方案。
举个例子，抽屉式导航可以使用边缘滑动手势来打开，同时它也可以通过点击icon来打开。
分屏模式启用时，能被用户看见的内容应该缩放至合适的大小和密度。
主控件应该需要适配分屏模式。例如，tab导航可以嵌在菜单里面。
响应式UI
应用在分屏模式下需要适配不同设备大小和方向。
改变设备的方向不能导致UI突然发生变化。例如，视频显示在其中一个分屏上（竖向显示），如果设备发生旋转变成横向显示，那视频不能以全屏模式开始播放。
应用在移动或平板设备上可以使用相同或不同的布局。
在移动或平板设备上使用相似的布局时，在平板和移动端UI之间切换时，过渡不会显得太过突兀。
在移动或平板设备上使用完全不同的布局时，应用应避免在平板端上使用移动端的UI。相反，现有的平板端UI需要适配小屏幕尺寸以确保在跨设备环境下拥有一致的用户体验。
应用在移动或平板端上使用相同的界面布局
应用在移动或平板端上使用不同的界面布局
为了更加方便的适配不同尺寸的分屏模式，建议先设计最小的尺寸。
通过简化或删除不必要的元素来创建一个220dp宽或高的布局。以此为标准向上适配。
当分屏模式被启动时，竖向显示下平板端上应用的屏幕比例是34.15%
