本部分将介绍可针对各种屏幕尺寸缩放的屏幕布局的设计准则。
此处定义的内边距和框线值会用在组件、媒体规范、通知中心规范和拨号器规范中。
指南一览表 (TL:DR)：
- 根据相应的屏幕尺寸类别设计布局
- 使用 8dp 网格对齐
- 将边距宽度设为应用工作区的 12%
- 在页边距中放置滚动条和导航辅助工具
- 使用内边距来设置元素之间的固定间距
按键布局概念
- 应用工作空间：在将汽车制造商和系统界面功能占用的屏幕空间考虑在内后，应用可用的屏幕区域。
- 屏幕尺寸类别：一组 4 个屏幕宽度范围（标准、宽度、超宽和超宽）和 3 个屏幕高度范围（短、标准和高）的，其中“屏幕”是指应用的工作空间，而不是边缘之间的完整空间
- Padding：一组间距值，用于指定布局中元素与组件之间的固定垂直和水平间距
- 框线：一组可变宽度的间距值（由宽度类别确定），用于表明边距或组件边缘与布局中的元素之间的水平空间
- 灵活区域：组件的一部分，有时分配有最小值或最大值，可按比例缩放以适应屏幕尺寸
应用工作区
应用工作区是指在考虑汽车制造商和系统界面功能占用的屏幕空间后剩余的可用屏幕区域。应用工作区应包含左右外边距和应用画布，这是应用的主要内容区域。
每个外边距应等于应用工作空间宽度的 12%。外边距通常包含应用的滚动条和导航功能。
屏幕尺寸
参考规范布局是根据一组应用工作空间的宽度和高度与一组屏幕尺寸类别进行键控。
在整个准则的规范中，这些类别均通过名称进行引用。例如，“宽”是指介于 930dp 到 1279dp 之间的所有屏幕宽度。
屏幕尺寸类别会影响针对以下内容的建议：
- 组件和元素的框线间距
- 组件柔性区域的缩放
- 何时在最小化控件栏中隐藏或显示可选元素，例如专辑封面
宽度类别
| 标准 | 广泛 | 超宽 | 超宽 | |
|---|---|---|---|---|
| 屏幕宽度范围 | 690-929dp | 930 - 1279dp | 1280 – 1919dp | ≥ 1920dp |
身高类别
| 短片 | 标准 | 竖版 | |
|---|---|---|---|
| 屏幕高度范围 | 0 - 609dp | 610 - 1199dp | ≥ 1200dp |
间距
参考规范布局采用 8dp 网格结构。实际上，这意味着规范中的界面组件和元素之间相隔 8dp 的倍数。
间距分为两种类型：
Padding，用于固定宽度和固定高度的间距
框线（适用于可变宽度间距）
内边距
内边距在参考规范布局中的组件之间建立了固定宽度和固定高度的间距。它还可以指定组件中元素之间的固定间距，例如拨号键盘组件上相邻数字目标之间的间距。通常，两个元素之间的关系越紧密，它们之间的内边距就越窄。
内边距有 9 个，指定为 P0 - P8。
以下是内边距值及其对应的尺寸：
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
与根据屏幕宽度类别更改间距值的框线不同，内边距值保持不变。例如，P1 始终为 8dp。不过，在某些情况下，参考组件布局中针对一组不同的屏幕尺寸，一组特定组件或元素之间的距离可能具有不同的内边距值。例如，对于网格屏幕，建议网格项目之间的垂直间距为 P4；对于标准屏幕和高屏幕，建议为 P5。
框线
框线指定了元素与组件的最近外边距或边缘之间的距离，而不是在参考规范中指示元素之间的内边距。框线会根据屏幕宽度改变值。它们提供了一种便捷的方式，可将布局缩放到不同的屏幕尺寸，同时保持元素的比例水平间距。
有 5 个框线，分别指定为 KL0 到 KL4。
以下是每种屏幕宽度的框线值：
| 屏幕宽度 | 标准 | 广泛 | 超宽 | 超宽 |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | 112dp |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | 168dp |
扩缩策略
参考规范布局提供了将应用调整为不同屏幕尺寸的准则。为帮助顺利实现扩缩，规范通常包括：
- 灵活区域，是汽车制造商应根据其特定屏幕尺寸进行扩展或收缩的组件的一部分
- 弹性区域的推荐最小宽度和最大宽度，用于防止将组件缩放到不良尺寸
- 用于保持元素的比例水平间距的框线，这些元素会根据屏幕宽度类别以不同的方式缩放
- Padding，用于指定组件和元素之间的固定间距
（可选）某些规范会根据屏幕宽度指定是隐藏还是显示某些元素。
示例 1：最小化控件栏
最小化控件栏就是一个组件示例，参考规范布局建议以较小的尺寸折叠组件宽度，并隐藏非必需元素。
最小化控件栏的规范包括 2 个缩放比例准则：
- 左侧的方形元素（通常用于专辑封面）应仅在屏幕宽度不小于 930dp 时显示，并且
- 中间的灵活宽度部分不得小于 440dp，并且只要整个组件宽度不超过 1028dp，这种部分就可以放大到更宽的屏幕。
示例 2：网格
网格是可以在布局中的列和行中放置组件和调整组件大小的一个示例。
建议的列数（在较窄的屏幕上占 3 列，在更宽的屏幕上占 4 列）取决于屏幕尺寸。只要网格宽度始终不低于建议的最小宽度，您就可以在屏幕类别中调整列宽和行高。 以下动画展示了如何按照参考布局中的建议将网格缩放到较宽的屏幕。
