滚动应用常用布局

滚动应用视图布局包括列表(TransformingLazyColumn)和对话框。这些布局构成了大多数应用屏幕,并且代表了需要适应更大屏幕尺寸的组件集合。检查组件是否具有响应性——也就是说,它们是否填充可用宽度,并在屏幕高度增加时采用 TransformingLazyColumn 调整。这些布局本身已经构建为响应式,我们还有一些额外的建议来进一步利用扩展的屏幕空间。

构建响应式和优化的设计

为了帮助你的设计布局适应更大的屏幕尺寸,我们更新了布局和组件的行为,使其具有内置的响应行为,包括基于百分比的边距和内边距。为此,我们更新了 Android UI 库布局和组件,使其具有内置的响应行为,包括基于百分比的边距和内边距。如果你使用我们的 Compose 组件,可以自动继承此响应能力。

对于独特的屏幕设计,请在各种屏幕尺寸上进行彻底测试,确保组件和元素平滑适应并避免内容裁剪。我们的百分比边距有助于间隔器有效缩放,并且我们建议在 225dp 处使用断点,以便在较大的手表屏幕上引入额外信息和增强功能。

检查组件是否填充可用宽度

所有组件都构建为响应式,这意味着它们会填充可用宽度和高度。请确保你有必要的边距,以确保内容不会被圆形屏幕边缘裁剪。

显示更多文本字符

大多数组件都有填充可用宽度的文本框。这意味着随着屏幕宽度的增加,它们会自动增加字符计数。

构建自适应和差异化的设计

由于滚动布局会自动显示屏幕折叠下方先前隐藏的更多内容,因此无需额外操作即可增加价值。每个组件都会填充可用宽度,在某些情况下,组件可能会增加额外的文本行(例如卡片),或者组件会拉伸以填充可用宽度(例如图标按钮)。

为了最好地利用较大屏幕尺寸上的额外空间,请在 225dp 处添加尺寸断点。此断点可以显示额外内容、包含更多按钮或数据,或更改布局以更好地适应更大屏幕。这需要为每个断点设计不同的布局。较大屏幕的设计 (225+) 可以包含以下附加元素

增加现有组件的尺寸或改变其状态

这样做可以显示更多细节或使内容更易于浏览。

优化和差异化的布局

在 225dp 断点之后,布局可以稍作调整,以便默认视图中折叠上方的內容得到优化,但折叠下方所有相同内容应无论屏幕尺寸如何均可访问。

响应式和自适应行为

Compose 库中的所有组件都会自动适应更宽的屏幕尺寸,并获得宽度和高度。使用响应式设计实践的滚动视图通常会适应各种屏幕尺寸。但是,在某些特殊情况下,你可以使用断点来覆盖尺寸并增强布局,从而扩展功能、提高可浏览性或使内容更好地适应屏幕。

所有顶部、底部和侧面边距应以百分比定义,以避免裁剪并提供元素的比例缩放。请注意,PositionIndicator 会在用户滚动时出现,并且无论屏幕尺寸如何,它都会自动紧贴屏幕边框。

清单

  • 应用推荐的顶部、底部和侧面边距。
  • 以百分比值定义外部边距,以防止可滚动容器的开头和结尾被裁剪。
  • 在 UI 元素之间应用固定 DP 值的边距。
  • 考虑在 225dp 处应用断点,以便在较大屏幕尺寸上引入额外内容或使现有内容更易于浏览。

创建差异化体验

滚动视图高度可定制,可以按任意顺序添加任意组合的组件。顶部和底部边距可以根据位于顶部和底部的组件而变化。这是为了防止内容被屏幕不断弯曲的边缘裁剪。