本节提供了可在不同屏幕尺寸范围内缩放的屏幕布局的设计指南。

此处定义的padding和keyline值用于Components，Media规范、Notification Center规范和Dialer规范中。

指南概览（TL：DR）：

• 基于适当的屏幕尺寸类别的基本布局
• 使用8dp网格进行对齐
• 将边距宽度设置为应用程序工作空间的12％
• 在页边距中放置滚动条和导航辅助工具
• 对元素之间的固定间距使用填充

布局的关键概念

• 应用程序工作空间：计算汽车厂商占用的屏幕空间和系统UI功能后，可用于应用的屏幕区域
• 屏幕尺寸类别：4个屏幕宽度范围(标准、宽、超宽、超宽)，3个屏幕高度范围(短、标准、高)，其中“屏幕”指的是app工作空间，而不是从边框到边框的整个空间
• 填充：一组间距值，用于指定布局中元素和组件之间的固定垂直和水平间距
• 关键字：一组宽度可变的间距值——由宽度类别决定——指示布局中页边距或组件边与元素之间的水平间距
• 弹性区域：组件的一部分，有时指定最小值或最大值，可缩放以适应屏幕大小

应用工作空间

应用程序的工作空间是指在考虑到汽车制造商和系统UI功能占用的屏幕空间之后剩余的可用屏幕区域。应用程序工作空间旨在包含左右边距和应用程序画布，这是应用程序的主要内容区域。

每个边距应等于应用程序工作空间宽度的12％。边距通常包含应用程序的滚动条和导航功能。

注意：为了在更小的屏幕尺寸下使用更宽的应用程序画布，可以省略乘客侧边距。

屏幕尺寸

参考规范布局基于应用程序工作空间的宽度和高度，被设置为一组屏幕尺寸类别。

在整个指南中的规格中，这些类别均按名称指代。例如，“宽”是指从930dp到1279dp的所有屏幕宽度。

屏幕大小类别影响的建议:：

• 组件和元素中的键线间距
• 缩放元件柔性区域
• 何时隐藏或显示可选元素，例如最小化控制栏上的专辑封面

注意：不同屏幕尺寸的参考布局有时可能会建议元素之间使用不同的填充值。

宽度类别

高度类别

间距

参考规范的布局是在8dp网格上构造的。在实践中，这意味着规范中的UI组件和元素之间的间隔是8dp的倍数。

间距有两种：

• 填充，用于固定宽度和高度的间距
• 关键线，用于可变宽度的间距

填充

填充可在参考规格布局中的组件之间建立固定宽度和固定高度的间距。它还可以规定组件内元素之间的固定间距，如在拨号板组件上的相邻数字目标之间的空间。通常，两个元素之间的关系越紧密，它们之间的填充越窄。

有9个填充值，指定为P0 – P8。

以下是填充值及其相应的大小：

注意：提供了4dp和12dp的填充大小，以更好地对齐较小组件中的元素。这些值应谨慎使用，因为它们不是8dp的倍数。如果需要较大的填充值（高于96dp），则可以使用与8dp网格对齐的自定义数字。

与根据屏幕宽度类别改变间距值的键不同，填充值保持不变，例如，P1始终为8dp。但是，在某些情况下，特定组件或元素集之间的距离在参考规格布局中针对不同的屏幕尺寸可能具有不同的填充值。例如，对于短屏幕、网格项之间的建议垂直间隔为P4，对于标准屏幕和高屏幕，建议为P5。

Keylines

Keylines不是指定参考规范中元素之间的填充，而是指定元素离组件的最近边距或边缘有多远。Keylines会根据屏幕宽度更改值。它们提供了一种方便的方式来将布局缩放到不同的屏幕尺寸，同时保持元素的比例，水平间距。

有5个关键点，分别指定为KL0至KL4。

以下是每个屏幕宽度的关键点值：

扩展策略

参考规格布局提供了将应用程序缩放到不同屏幕尺寸的指南。为了帮助顺利扩展，规格通常包括：

• 伸缩区域，这是一个组件的一部分，汽车制造商应该扩大或收缩以适应他们特定的屏幕大小
• 柔性区域的可选建议最小和最大宽度，旨在防止将组件缩放到不希望的尺寸
• Keylines用于保持元素的比例水平间距，根据屏幕宽度类别的不同而缩放
• 填充，用于指定组件和元素之间的固定间距

有些规范可以根据屏幕宽度指定是否隐藏或显示某些元素。

示例1：最小化控制栏

最小化的控制栏是一个组件的例子，参考规范的布局建议在更小的屏幕尺寸下弯曲组件的宽度并隐藏不必要的元素。

最小化控制栏的规范包括2个缩放指南：

1.左边的方形元素(通常用于相册图片)应该只在屏幕宽度为930dp或更大时出现；

2.中间的可伸缩宽度部分绝对不能比440dp窄，只要整个组件的宽度不超过1028dp，就可以放大以适应更大的屏幕。

下面的动画显示了如何按照参考布局中的建议将最小化的控制栏缩放到更大或更窄的屏幕。

示例2：网格

网格是可以在布局中的列和行中放置和调整大小的组件示例。

推荐的列数（在较窄的屏幕上为3，在较宽的屏幕上为4）取决于屏幕尺寸。只要网格不小于建议的最小宽度，就可以在屏幕类别中调整列宽和行高。下面的动画显示了如何按照参考布局中的建议将网格缩放到更大或更窄的屏幕。

文中部分图片来自网络，如侵权，请联系删除

想要了解汽车更多内容，就留言联系我们吧！

来源：google

- 服务内容 -