滚动应用视图布局包括列表(TransformingLazyColumn)和对话框。这些布局构成了应用屏幕的主体,代表了一系列需要适应更大屏幕尺寸的组件集合。请检查组件是否具有响应性,即它们是否能填满可用宽度,并在屏幕高度增加时采用 TransformingLazyColumn 的调整。这些布局本身已内置响应式设计,此外,我们还提供了一些额外建议,以帮助您进一步利用扩展后的显示空间。

构建响应式且经过优化的设计
为了帮助您的设计布局适应更大的屏幕尺寸,我们更新了布局和组件的行为,使其具备内置的响应式特性,包括基于百分比的边距和内边距。为此,我们已在 Android UI 库的布局和组件中集成了这些特性。如果您正在使用我们的 Compose 组件,则可以自动继承这种响应能力。
对于独特的屏幕设计,请在各种屏幕尺寸上进行全面测试,确保组件和元素能平滑适配,并避免内容被裁剪。我们的百分比边距有助于间隔符(spacer)有效缩放;我们建议在 225dp 处设置断点,以便在更大的手表屏幕上展示更多信息并增强功能。
确保组件填满可用宽度
所有组件均采用响应式构建,这意味着它们会自动填满可用宽度和高度。请务必设置必要的边距,以确保内容不会被圆形屏幕裁剪。

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

构建自适应和差异化的设计
由于滚动布局会自动显示更多之前在屏幕折叠处下方隐藏的内容,因此您无需进行太多操作即可提升用户体验。每个组件都会填满可用宽度;在某些情况下,组件可能会增加额外的文本行数(例如卡片),或者组件会拉伸以填满可用宽度(例如图标按钮)。
为了充分利用大屏幕上的额外空间,请在 225dp 处添加尺寸断点。该断点可以显示更多内容、包含更多按钮或数据,或者更改布局以更好地适应大屏幕。这需要针对每个断点进行不同的设计。大屏幕设计(225dp 以上)可以包含以下附加元素:
增大现有组件的尺寸或更改其状态
这样做可以展示更多细节或使内容更易于一目了然地阅读。

经过优化和差异化的布局
布局在 225dp 断点后可以略有改变,以便优化默认视图中折叠处上方的内容;但无论屏幕尺寸如何,折叠处下方的所有相同内容都应保持可用。

响应式和自适应行为
Compose 库中的所有组件都会自动适应更宽的屏幕尺寸,并增加宽度和高度。使用响应式设计实践的滚动视图通常可以适配多种屏幕尺寸。但在某些特殊情况下,您可以使用断点来覆盖尺寸并扩展布局,从而增强功能、提高可读性或使内容更适合屏幕显示。
所有顶部、底部和侧边边距都应定义为百分比,以避免裁剪并实现元素的比例缩放。请注意,PositionIndicator 会在用户滚动时出现,并且无论屏幕尺寸如何,它都会自动贴合屏幕边缘。
检查清单
- 应用推荐的顶部、底部和侧边边距。
- 请以百分比值定义外边距,以防止滚动容器的开头和结尾处出现内容被裁剪的情况。
- 在 UI 元素之间应用固定的 DP 值边距。
- 考虑在 225dp 处应用断点,以便在大屏幕上引入额外内容或使现有内容更易于一眼即知。

打造差异化体验
滚动视图具有高度可定制性,能够以任何顺序添加任意组件组合。顶部和底部边距可能会根据位于顶部和底部的组件而有所变化,这是为了防止内容被屏幕的圆角曲线所裁剪。
