本文中的 Android 特指原生 Android 系统
什么是网格系统
网格系统最早来源于排版印刷，是一种组织页面元素的骨架，如图：
“网格系统的特点是重视比例、秩序、连续感和现代感。以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是网格系统当中非常重要的部分。 —— 引用自维基百科”
更多关于网格系统的内容，可以参阅《Grid Systems》（ 中文版《平面设计中的网格系统》 ）
Android 中的网格系统
Android 从 Holo 风格（3.x ~ 4.x）到 Material Design（5.x 以上），视觉上发生了质变，但有一点从未发生改变，这就是 Android 的 8dp 网格系统（8dp grid）。
dp 是 Android 的一种度量单位（类似于 iOS 的 pt），不同设备生产商的配置会有所差异，大部分 Android 手机的宽度为 320dp 或者 360dp
熟悉 Android 的同学应该都知道 8dp 在 Android 的布局中是一个神奇的数字，比如：
• 最外围布局离屏幕左右两边的间距为 16dp
• 控件之间的间距通常为 8dp
• Holo 风格中的 Action Bar 高度为 48dp，Material Design 中的 Action Bar 高度为 56dp
• Material Design 中 Floating Action Button 的尺寸为 56dp x 56dp 或者 40dp x 40dp
注：以上为「手机」布局中的尺寸
可以看到，Android 中有很多与间距和尺寸相关的值均为 8dp 的倍数，这当然不是巧合。
Android 的网格系统的特点在于：将 8dp 作为基准尺寸，不仅用作元素之间的间距规范，同时也用作元素的尺寸规范。
但这并不意味着将屏幕划分为 8dp x 8dp 的小格子，下图具有一定的误导性：
原因在于并非所有的设备屏幕尺寸都是 8dp 的倍数，比如 Pixel 一代 的尺寸是 411dp x 731dp。
网格系统优势
视觉一致性
用户在不同的 应用/页面 间切换时，保证了整体布局的一致性。同时像 Action Bar、Floating Action Button 这些通用控件尺寸的一致性，可以在一定程度上减少用户的学习成本。
加速设计流程、减少沟通成本
设计过程中，网格系统建立了一套统一标准，可以有效减少设计验收阶段各种需要回炉微调的情况（不少前端开发者应该都遇到过设计师要求调整几个像素间距的情况）。
开发过程中，开发者最痛苦的莫过于设计师没提供标注，这种情况下，网格系统的优势是非常明显的，大部分情况下，普通人肉眼就能判断出元素之间的间距大小。
网格系统有助于开发者实现设计师要求的像素级完美。
这里的像素级完美不是指页面等比例放大，试想你换了一台大屏手机用来看小说，结果字体变大了，但是字数没发生任何变化
可复用性
开发者仅需定义少量的尺寸即可满足大部分使用情况，如图：
响应式设计
示例1:
上图中，假设页面的宽度为 360dp，按钮的宽度为 320dp，开发者很有可能会这样来布局
在屏幕较小的设备上，这将导致按钮沾满整个横向空间，导致这种问题的原因在于标注很难表现多种设备的显示效果（意味着需要多套图）。正确的写法如下：
示例2：
上图为比较常见的一种布局，开发者有可能会这样来布局
假如 text1 的文字量超过一行，问题就出现了
导致这种问题的原因在于 text1 与 text2 之间的间距一般在效果图的标注上是得不到体现的。正确的写法可以是这样：
/drawable/space_16dp.xml
效果如下：
这种写法的另一个优势在于当某个元素需要动态隐藏时，布局仍然不会出错。
总结
Android 的网格系统提供了一套页面布局的规范，理解并应用这套规范，即便是一般的开发者也可以写出统一工整的界面。在分工明确的开发流程中，网格系统能够有效地减少沟通成本，提升工作效率，避免很多常见的错误发生。规则是用来打破的！
今日推荐
