【Material Design视觉设计语言】应用自适应布局

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

应用自适应布局指布局可以在不同屏幕上保持一致性、内容可以在不同屏幕上重绘断点细节以及应用可以从小的屏幕缩放到超大屏幕。

Material Design中的响应式布局可以适用于任何尺寸的屏幕。我们在做布局的自适应的时候有几个通用的准则可以参考，如下所示：

• 遵循用户的习惯
• 更大的屏幕 ≠ 更大的认知能力
• 线条长度应该是适宜的
• 考虑到角距离
• 允许空白，不要把局限于固定的工具栏。

关于自适应布局，Google官方给出了布局自适应模板，大家可以作参考。

一 断点系统

Material用户界面可以适应如下断点宽度的布局：

• 480 dp
• 600 dp
• 840 dp
• 960 dp
• 1280 dp
• 1440 dp
• 1600 dp

关于不同尺寸的处理方法：

• 600 dp 以下的布局可以通过单个级别的内容层次充满屏幕（要么总结内容，要么细节内容，但不是全部）。
• 超过 600 dp 宽度的布局可以放置两个等级的内容层次（总结和细节内容两者）。
• 超过 1600 dp 宽度的布局可以变大直到最大宽度。目前，网格可以实现下列事情中的一种：边距增大时保持居中对齐、右边距增加时，居左对齐、显示额外内容时，保持增长。

二 栏栅布局

栏栅提供了不同布局之间的视觉一致性，而又保持了多样化设计的灵活性。栏栅列的数量基于系统断点而变化。

Material design的自适应UI是基于一个12列的栏栅布局，下面演示了不同平面和面板是如何排列在一起从而影响这12列栏栅的。

2.1 外边距和组件间隔

适应性栏栅指的是具有恒定的外边距和组件间隔宽度，而不是列宽度，外边距和组件间隔宽度不用相等。

下面演示一下不同宽度的外边距和间隔的搭配方案：

• 8 dp外边距和间隔
• 16 dp外边距和间隔
• 24 dp外边距和间隔
• 40 dp外边距和间隔
• 40 dp外边距和 24 dp间隔

2.2 完全宽度栏栅与居中栏栅

完全宽度栏栅使用流体列以及断点来决定一个布局是否需要变化。
居中栏栅使用固定列，当所有列（加上一个固定的外边距）不再适应屏幕，将会重绘布局。

下面演示一下完全宽度栏栅与居中栏栅的布局变化

2.3 面板对栏栅的影响

侧边导航可能是永久、持续或者暂时的。这些行为适用于任何面板，不仅仅是侧边导航。

2.3.1 永久性面板对栏栅的影响

一个永久的面板存在于自适应栏栅的外面。面板以一个固定的断点显示（当屏幕可以容纳面板）并且排布内容。不存在显示、隐藏面板的控制。

2.3.2 持续性面板对栏栅的影响

下面用个动画来演示一下持续性面板对栏栅的影响，这个动画有两个阶段：

1. 一个永久侧边面板出现，挤压内容和栏栅。当面板保持可视时，内容是可获取的。切换时面板隐藏。
2. 一个临时侧边面板出现，加栏栅内容推出屏幕。点击面板外面，或者面板内的一个条目，隐藏面板。

2.3.3 临时性面板对栏栅的影响

临时面板在不显示时，不会影响栏栅和内容。当被切换到可视时，可以通过点击面板之外的任何地方或者面板内的一个条目来隐藏面板。

三 布局自适应行为

当屏幕尺和分辨率发生变化时，布局会采用哪些行为来做布局的自适应呢？

3.1 展现隐藏UI

3.2 转换UI形式

3.3 分割UI

3.4 重绘UI

3.5 扩展UI