您应充分利用以下优势,让您的应用能够在各种尺寸的 Wear OS 设备上正常运行 在可用的空间中额外增加空间,在小屏幕设备上也能获得出色的显示效果。 本指南提供了一些有助于实现这一用户体验的建议。
如需详细了解自适应布局的设计原则,请参阅 设计指南。
使用 Horologist 构建响应式布局
布局应具有基于百分比的外边距。由于 Compose 默认设置为绝对值,请使用 Horologist 库,它具有以下功能:
- 根据设备屏幕的百分比正确设置水平外边距 。
- 顶部和底部间距设置正确。这带来了特殊的挑战,
建议的顶部间距和底部间距可能取决于要放置的组件
。例如,
Chip
的间距应与Text
不同 组件。 TimeText
外边距设置正确。
以下代码段使用 Horologist 版本的
ScalingLazyColumn
布局,用于创建在各种情况下都能完美呈现的内容
的 Wear OS 屏幕尺寸:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
此示例还演示了 ScreenScaffold
和 AppScaffold
。
这些应用和各个屏幕之间的坐标
(导航路线),以确保正确的滚动行为和
TimeText
定位。
对于顶部和底部内边距,另请注意以下事项:
- 第一个和最后一个
ItemType
的规范,用于确定正确的 内边距。 - 对列表中的第一项使用
ResponsiveListHeader
,因为Text
标头不应有内边距。
如需查看完整规范,请参阅 Figma 设计套件。有关 详情和示例,请参阅:
- Horologist 库 - 提供了有助于构建 针对 Wear OS 进行优化和差异化的应用。
- ComposeStarter 示例 - 此示例展示了 基本原则。
- JetCaster 示例 - 通过这个更为复杂的示例 让应用支持 Horologist 库,以适应不同的屏幕尺寸。
在应用中使用滚动布局
使用本页前面部分介绍的滚动布局作为默认布局 需要注意的一点是这样,用户便可以使用应用的组件 无论显示偏好设置或 Wear OS 设备的屏幕尺寸如何。
![不同设备尺寸和字体缩放的影响](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=5&hl=lv)
不同设备尺寸的影响 和字体缩放。
对话框
对话框还应该可滚动,除非有充分的理由不这样做。
Horologist 提供的 ResponsiveDialog
组件添加了
以下:
- 默认情况下会滚动。
- 更正了百分比形式的利润率。
- 在空间允许的情况下调整宽度的按钮,可提供更大尺寸 点按目标。
![Horologist 中的自适应对话框行为](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=5&hl=lv)
自适应对话框,默认提供滚动功能以及具有自适应能力的按钮 可用空间。
自定义屏幕可能需要非滚动布局
某些屏幕可能仍适合采用非滚动布局。一些示例 在媒体应用中加入主播放器屏幕,在 健身应用。
在这种情况下,请参阅 Figma 设计套件,并实现能够根据尺寸进行调整的设计 使用正确的外边距。
通过断点提供差异化的体验
借助更大的显示屏,您可以引入更多内容和功能。接收者 要实现这种差异化体验,请使用屏幕尺寸断点, 在屏幕尺寸超过 225 dp 时显示不同的布局:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
设计指南详细介绍了这些优化建议。
使用预览功能测试屏幕和字体大小的组合
Compose 预览可帮助您针对各种 Wear OS 屏幕尺寸进行开发。 同时使用设备和字体缩放预览定义,查看以下内容:
- 屏幕如何呈现各种尺寸的极端情况,例如最大字体 与最小屏幕配对
- 您的差异化体验在不同断点处的行为。
确保使用 WearPreviewDevices
和
WearPreviewFontScales
应用于应用中的所有屏幕。
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
屏幕截图测试
除了预览测试外,屏幕截图测试还支持 现有的硬件尺寸当这些设备可能 且该问题可能不会立即出现在 其他屏幕尺寸
屏幕截图测试还可以帮助您识别 代码库
我们的示例使用 Roborazzi 进行屏幕截图测试:
- 配置要使用的项目和应用
build.gradle
文件 机械舞。 - 为应用中的每个屏幕创建屏幕截图测试。例如:
在 ComposeStarter 示例中,
GreetingScreen
的测试为 如GreetingScreenTest
所示:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
请注意以下要点:
- 借助
FixedTimeSource
,您可以生成TimeText
不 变化,并无意间导致测试失败。 WearDevice.entries
包含大多数热门 Wear OS 设备的定义,因此 确保测试在具有代表性的屏幕尺寸上运行。
生成黄金图片
如需为您的屏幕生成图片,请在终端中运行以下命令:
./gradlew recordRoborazziDebug
验证图片
如需针对现有映像验证更改,请在以下位置运行以下命令: 终端:
./gradlew verifyRoborazziDebug
如需查看屏幕截图测试的完整示例,请参阅 ComposeStarter 示例。