网格与单位

密度无关像素 (dp) 和可缩放像素 (sp) 对于构建布局和呈现字体至关重要,它们能确保界面在构成 Android 设备的各种屏幕密度、尺寸类别、外形规格和宽高比中保持统一的显示效果。

要点

  • 如果使用基准网格,请遵循 4 和 8 的倍数进行测量。
  • 规格标注请使用 dp 和 sp,而不是像素。
  • 为所有密度桶导出位图(栅格)图形。
  • 以响应式思维进行设计,并兼顾不同的尺寸类别、分辨率和宽高比。
  • 密度无关像素 (dp):密度无关像素是灵活的单位,可在任何屏幕上缩放以保持统一的尺寸。它们基于屏幕的物理密度。这些单位是相对于 160 dpi(每英寸点数)屏幕而言的,在该屏幕上 1 dp 约等于 1 px。
  • 可缩放像素 (sp):可缩放像素的作用与 dp 相同,但用于字体。sp 的默认值与 dp 的默认值相同。Android 系统会根据设备以及用户在设备设置中偏好设置,计算出实际使用的字体大小。
dp 与 sp 的标注区别

这些度量单位之间的主要区别在于,可缩放像素会保留用户的字体设置。为了辅助功能而设置了较大文本的用户,其看到的字体大小会符合他们的偏好。请参阅如何在 Compose 中更改字体大小

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

密度桶

高密度屏幕每英寸的像素点数比低密度屏幕多。因此,相同像素尺寸的 UI 元素在低密度屏幕上看起来较大,在高密度屏幕上则显得较小。这就是为什么你不应该使用像素来定义尺寸的原因。

Android 将屏幕密度范围划分为“密度桶”,并利用它们向你的设备提供最合适的资源集。最常用的密度桶包括 mdpihdpixhdpixxhdpixxxhdpinodpianydpi 指的是不随设备分辨率缩放的桶,通常用于矢量绘图),每个桶对应你应用的一个资源文件。

mdpi has a density of x1, hdpi has a density of x1.5,
            xhdpi has a density of x2, xxhdpi has a density of x3, and
            xxxhdpi has a density of x4
不同密度下的甜瓜示例

计算 dp 的公式

dp = (像素宽度 * 160) / 屏幕密度

基准网格

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

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

较小的元素(如图标、文字以及组件内的某些元素)最适合对齐到 4 dp 网格。

8-dp 网格适用于大多数 UI 元素,而 4-dp 网格则更适合较小的元素(如图标)

布局网格

网格是任何布局的骨干。请考虑内容的层级、数量以及所传达的信息。

层级网格

层级网格是在考虑内容层级或重要性的基础上创建的。想象一下报纸的排版:一个醒目的头条新闻占据了大部分布局,而较窄的栏目则展示过往文章。

A hierarchical grid example on compact and large

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

模块化网格

模块化网格由一致的列和行组成,创建了一个矩形网格系统用于对齐内容。模块化网格非常适合具有相似重要性和尺寸的内容,例如卡片库。

A modular grid example on compact and large

自适应模块化网格可以增加更多的网格单元,其中的内容可以捕捉或折行到不同的网格单元中。网格单元可以在不同尺寸下保持一致,也可以根据内容需求进行调整。

列网格

列通过划分主体区域内的内容,构建网格结构以提供垂直定义。内容被放置在包含列的屏幕区域中。请结合底层网格对齐内容,但应保持灵活的尺寸设定。

A column grid example on compact and large

布局基础中了解如何设置列网格并应用内容。列网格可以通过在特定断点处根据屏幕尺寸更改列大小和数量来适应不同的外形规格,同时允许内容进行缩放。

四列网格

尺寸类别

窗口尺寸类别是一组预设的视口断点,旨在帮助你设计、开发和测试响应式与自适应的应用程序布局。Android 将窗口尺寸类别分为 3 类:紧凑 (Compact)、中等 (Medium) 和扩展 (Expanded)。阅读更多关于窗口尺寸类别的内容。

宽高比

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

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

建议在整个 UI 中使用以下宽高比

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