Material Design基础 - spacing methods

spacing methods

spacing methods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。

基准网格

8dp网格

所有组件都与移动设备、平板电脑和台式机的8dp方形基线网格对齐。

4dp网格

组件中的图标、type和某些元素可以与4dp网格对齐。

间距方法

间距方法比响应式布局网格更精细。间距方法是一组关于如何在layout和组件中放置元素的规则。

padding

padding是组件和元素之间的空间.
padding指的是UI元素之间的空间。padding是关键线的另一种间距方法，以8dp或4dp为增量进行测量。
padding可以垂直和水平测量，不需要跨越布局的整个高度。

Dimensions

Dimensions描述了构件的宽度和高度。
Dimensions是指构件的宽度和高度。
某些组件（如应用程序栏或列表）仅列出元素的高度。这些元件的高度应与8dp网格对齐。它们的宽度没有指定，因为它响应于视口宽度。

Alignment

Alignment在组件中放置元素。

关键线

关键线是一种对齐工具，可以在布局网格之外一致地放置元素。它们是垂直线，显示元素不与网格对齐时放置的位置。关键线由每个元素与屏幕边缘的距离决定，并以8dp的增量测量。
关键线可以在布局中的元素之间创建更多或更少的空间。它们可以根据断点范围进行调整。

Containers and ratios

Containers

容器是用来表示封闭区域的形状。容器可以保存图像、图标或曲面等UI元素。
容器可以是刚性的，并限制其中元素的大小或裁剪。或者，它们可以是灵活的，并且可以扩展以支持它们所持有的内容的大小。

Aspect ratios

纵横比是元素宽度与高度的比例。纵横比写为宽度：高度。
要保持布局的一致性，请在图像、曲面和屏幕大小等元素上使用一致的纵横比。
建议在整个UI中使用以下纵横比：16:9；3:2; 4:3; 1:1; 3:4; 2:3

Flexible ratios

灵活的比例大小由布局网格决定：
容器宽度由屏幕布局决定，并会增大以填充最大可用空间
容器高度由容器中图像的高度决定
使用灵活的比例，让内容形式决定容器的高度。

Responsive cropping

要相应地显示图像，请定义如何在不同的断点范围内裁剪图像。在不同的断点范围内，裁剪可以：
保持一个固定的比率
适应不同的比率
固定图像高度

保持一个比率 - 图像大小可以在分界点范围内保持一个固定比率。
适应不同的比率 - 图像比率也可以通过适应不同的断点范围而改变。
固定图像高度 - 图像大小可以在断点范围内保持固定的高度和流体宽度。

触碰目标

触摸目标适用于接收触摸和非触摸输入的任何设备。为了平衡信息密度和可用性，触摸目标应至少为48 x 48 dp，目标之间的空间至少为8 dp。

参考文档

Material System - layout spacing method