网格和单位

密度无关像素 (dp) 和可缩放像素 (sp) 对于构建布局和呈现字体至关重要,这些布局和字体可以统一响应构成 Android 设备的各种屏幕密度、尺寸类别、尺寸规格和纵横比。

要点

  • 如果使用基线网格,请坚持使用 4 和 8 的测量值。
  • 使用 dp 和 sp 来标注规格,而不是像素。
  • 为所有桶导出位图/光栅图形。
  • 以响应式思维设计,考虑不同的尺寸类别、分辨率和纵横比。
  • **密度无关像素 (dp):** 密度无关像素是灵活的单位,可以在任何屏幕上缩放以具有统一的尺寸。它们基于屏幕的物理密度。这些单位相对于 160 dpi(每英寸点数)屏幕,在该屏幕上,1 dp 大致等于 1 px。
  • **可缩放像素 (sp):** 可缩放像素与 dp 执行相同的函数,但用于字体。sp 的默认值与 dp 的默认值相同。Android 系统根据设备和用户在其 Android 设备的“设置”应用中设置的首选项来计算要使用的实际字体大小。
图 1:标注 dp 与 sp

这些测量单位之间的主要区别在于,可缩放像素保留了用户的字体设置。将文本设置调整为较大的用户会看到字体大小与他们的文本大小偏好相匹配。了解如何在 Compose 中更改字体大小

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

密度桶

高密度屏幕每英寸的像素数比低密度屏幕多。因此,相同像素尺寸的 UI 元素在低密度屏幕上显示更大,在高密度屏幕上显示更小。这就是您不应以像素声明测量值的原因。

Android 将屏幕密度的范围分组到“桶”中,并使用它们为您的设备提供最佳的资产集。最常用的密度桶是 mdpihdpixhdpixxhdpixxxhdpinodpianydpi 指的是不根据设备分辨率缩放的桶,通常用于矢量绘图),每个都对应于您的应用的资源文件。

图 2:各自密度下的派对甜瓜

计算 dp

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

网格

基线网格

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

视频 1:显示突出显示 8 dp 增量的 8 dp 网格

图标、文字以及组件内的一些元素等较小的元素最好与 4 dp 网格对齐。

图 3:8 dp 网格非常适合大多数 UI 元素,而 4 dp 网格更适合图标等较小的元素

列网格

列构建网格结构,通过划分正文区域内的内容为布局提供垂直定义。内容放置在包含列的屏幕区域中。与底层网格对齐以对齐内容,但应保持灵活的大小调整。在布局基础中了解如何设置列网格和应用内容的基础知识。

图 4:四列网格

查看 Material 3 的规范布局页面,了解有关在各种尺寸规格中创建灵活布局的详细信息。

尺寸类别

窗口大小类是一组带有主观意见的视口断点,可帮助您设计、开发和测试响应式和自适应应用程序布局。Android 将窗口大小类分为三类:紧凑型、中等和扩展型。更多信息请阅读窗口大小类

纵横比

纵横比是指元素宽度与其高度的比例。纵横比的写法为宽度:高度。

为了保持布局的一致性,请在图像、界面和屏幕尺寸等元素上使用一致的纵横比。

以下纵横比建议在您的UI中使用

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