调整布局

自适应设计是一种针对特定断点和设备调整布局的做法。

如需有效实现自适应布局,请执行以下操作:

  • 首先,考虑设备的窗口类宽度以确定布局更改,然后根据高度进行调整。支持不同的屏幕尺寸

  • Android 采用与 Web 开发类似的自适应设计理念,使用灵活的网格和图片来创建可有效响应其上下文的布局。

  • 允许布局通过自适应方法(重排、显示、呈现方式更改)响应各种尺寸。

  • 避免将应用锁定为仅纵向模式。这样做会导致应用在调整大小时出现黑边。

移动设备和平板电脑上的效率提升应用界面。

仅针对纵向手机布局进行设计,这会产生黑边。您的应用将在各种设备、窗口化模式和多任务处理中调整大小。

如需了解有关使布局适应扩展屏幕尺寸的设计指南,请参阅 Compose 中的 支持不同的屏幕尺寸开发者指南和 M3 应用布局页面。您还可以查看 Android 大屏设备规范图库,以获取有关 大屏设备布局的灵感和实现方法。

自适应思维

在设计应用时,应将自适应作为默认设置。Android 移动市场不断发展,因此您不能只将移动设备视为手机。相反,它应包括手机、可折叠设备、平板电脑以及介于两者之间的所有设备。

虽然某些功能和用例可能不适用于每种屏幕尺寸或外形规格, 但自适应设计可让用户在工效学设计、易用性和应用质量方面拥有更大的自由度。

方法与质量

您可以先设计关键屏幕(传达应用的基本概念),并以类大小作为断点,作为应用其余部分的指南。这些英雄体验可以突出显示差异化的自适应和外形规格质量。或者,通过注明内容应如何约束、展开或重排,在基础级别设计自适应内容。

布局自动重排

在此示例中,导航和内容会重排、伸缩和缩放,以实现更符合工效学的导航。布局网格从纵向扩展到多列。应用栏中的地址和过滤条件会重排和伸缩以适应布局网格。

为内容和组件设置最大宽度,以防止拉伸到全宽。
允许内容拉伸到全宽。
从划归或窗格的角度进行思考。
允许组件更改其呈现方式。例如,底部动作条在较大尺寸下可以变为侧边工作表。
不要拉伸组件,而是允许组件更改 呈现方式并设置最大宽度。

拉伸的界面元素 确保输入和按钮不会拉伸。

从划归和窗格的角度进行思考。

使用窗格的划归概念对内容进行分组,以实现自适应布局。例如,所使用的示例是详情屏幕,该屏幕是一个窗格,可以在列表详情布局中显示。

紧凑型尺寸应坚持采用单窗格布局。

中等尺寸可以使用 1-2 个窗格布局。

大型和超大型尺寸可以使用多个窗格布局。

列表详情窗格

使用内在容器和视觉容器将元素分组在一起。窗格可以移入、隐藏、展开、受限或弹出。使用窗格进行思考可以更轻松地在所有移动设备上进行设计。

虽然窗格在大屏幕上不是必需的,但您仍应将内容视为划归分组,以实现灵活性。

具有自适应行为的布局

允许元素通过关注元素如何适应网格来移动和重新排列。考虑元素的垂直变化,并结合约束和呈现方式更改。

根据屏幕尺寸和距离缩放界面

考虑显示的内容的比例和数量。

手机上显示的小视频网格在平板电脑上变得拥挤不堪

手机上的小视频网格在平板电脑上会变得紧凑且令人难以接受。 根据屏幕尺寸、密度和输入更新界面元素的比例。

高质量的应用应满足核心应用大屏设备质量指南中的差异化层级。

如需详细了解布局,请查看 Material Design 3 (M3) 了解布局 页面

充分利用独特的外形规格尺寸。

不要忘记较小的屏幕尺寸和不同的宽高比,因为 Android 手机的尺寸各不相同,可折叠设备可以包含一个可以显示应用的小封面屏幕。

横向布局

对于基于控件的布局(例如媒体播放器),允许控件重排和内容显示。

封面屏幕布局

为了帮助用户进行调整,请使用锚点元素(例如大型播放按钮)来调整周围的内容,英雄艺术作品将成为封面屏幕上的背景。

超出大小类

虽然窗口大小是自适应设计的常见因素,但您的应用还必须为用户插入显示器和输入设备、在不同距离处观看以及更改设备姿态做好准备。您可以使用 mediaQuery API 检查这些 更改,该 API 可让您在设计应用如何使特定界面元素适应特定用例时添加细微差别。 在组件或窗格级别调整应用的设计,而不是针对每种尺寸、输入、外形规格和姿态设计整个屏幕。

如需详细了解输入互动,请参阅桌面体验互动 指南

键盘输入

查看示例案例研究 Pawparrazzi,该研究使用 最新的自适应 API 和设计指南构建和设计。

Pawparazzi 案例研究