网格和单位

密度无关像素 (dp) 和可缩放像素 (sp) 对于构建布局和呈现字体至关重要,因为它们可以统一响应构成 Android 设备的各种屏幕密度、大小类别、设备类型和宽高比。

要点总结

  • 如果使用基准网格,请坚持使用 4 和 8 的测量值。
  • 以 dp 和 sp(而不是像素)为单位标注规范。
  • 为所有存储分区导出位图(栅格)图形。
  • 在设计时,请采用自适应思维模式,并考虑不同的尺寸类别、分辨率和宽高比。
  • 密度无关像素 (dp):密度无关像素是灵活的 单位,可以缩放,以便在任何屏幕上具有统一的尺寸。它们基于屏幕的物理密度。这些单位相对于 160 dpi(每英寸的点数)屏幕确立,在该屏幕上 1 dp 大致等于 1 px。
  • 可缩放像素 (sp):可缩放像素的功能与 dp 相同,但 适用于字体。sp 的默认值与 dp 的默认值相同。Android 系统会根据设备以及用户在设备设置中设置的偏好设置来计算要使用的实际字体大小。
dp 与 sp 的标注

这些测量单位之间的主要区别在于,可缩放像素会保留用户的字体设置。对于为无障碍功能设置了较大字体的用户,字体大小会与他们的字体大小偏好设置相符。了解如何在 Compose 中 更改字体大小

Android 使用这些单位来帮助在各种设备和分辨率之间进行缩放和转换。

密度存储分区

高密度屏幕的每英寸像素数比低密度屏幕的高。因此,像素尺寸相同的界面元素在低密度屏幕上会显得较大,而在高密度屏幕上会显得较小。这就是不应以像素为单位声明测量值的原因。

Android 会将一系列屏幕密度分组到“存储分区”中,并使用这些存储分区向您的设备提供最佳的资源集。最常用的密度 存储分区是 mdpihdpixhdpixxhdpixxxhdpinodpianydpi 是指不按设备分辨率缩放的存储分区,通常 用于矢量可绘制对象),每个存储分区都对应于应用的资源文件。

mdpi 的密度为 x1,hdpi 的密度为 x1.5,xhdpi 的密度为 x2,xxhdpi 的密度为 x3,xxxhdpi 的密度为 x4
各种密度的哈密瓜

dp 的计算公式如下:

dp =(以像素为单位的宽度 * 160)/ 屏幕密度

基准网格

使用底层网格进行构建有助于在整个界面中创建一致的间距和对齐方式。Android 界面使用 8 dp 网格进行布局、组件和间距设置。

显示 8 dp 网格,突出显示 8 dp 增量

图标、文字和组件中的某些元素等较小元素最好与 4 dp 网格对齐。

8 dp 网格非常适合大多数界面元素,而 4 dp 网格更适合图标等较小元素

布局网格

网格是任何布局的支柱。请考虑内容的层次结构、数量,甚至是消息。

分层网格

分层网格是根据内容的层次结构或重要性创建的。以报纸布局为例:一致的头条新闻占据了大部分布局,而较小的列则显示了过往文章。

紧凑型设备和大屏设备上的分层网格示例

在适应不同屏幕尺寸时,分层布局可以重排、调整大小和显示网格单元格。

模块化网格

模块化网格以一致的列和行进行设置,从而创建一个矩形网格系统以对齐内容。模块化网格非常适合重要性和大小相似的内容,例如卡片库。

紧凑型设备和大屏设备上的模块化网格示例

自适应模块化网格可以添加更多网格单元格,并且其中的内容可以吸附或换行到不同的网格单元格。网格单元格可以在不同尺寸之间保持一致,也可以根据内容的需求调整大小。

列网格

列构建网格结构,通过划分正文区域中的内容,为布局提供垂直定义。内容放置在包含列的屏幕区域中。与底层网格对齐以对齐内容,但应保持灵活的大小。

紧凑型设备和大屏设备上的列网格示例

布局基础知识中了解如何设置列网格和 应用内容的基础知识。列网格可以通过在某些点根据屏幕尺寸更改列大小和列数来适应不同的设备类型,同时允许内容也进行缩放。

四列网格

大小类别

窗口大小类别是一组主观的视口划分点,有助于您设计、开发和测试自适应的应用布局。Android 将窗口大小类别分为 3 类:较小、中等和较大。详细了解 窗口大小类别

宽高比

宽高比是指元素的宽度与高度的比例。宽高比的格式为宽度:高度。

如需在布局中保持一致性,请在图片、表面和屏幕尺寸等元素上使用一致的宽高比。

建议在整个界面中使用以下宽高比:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3