开发适用于不同屏幕尺寸的功能块

应用的功能块应该能够在各种尺寸的 Wear OS 设备上正常运行, 以便充分利用额外的空间(如果有),在较小的空间 。本指南提供了一些建议,帮助您获得 体验

如需详细了解自适应布局的设计原则,请参阅 设计指南

使用 ProtoLayout 构建自适应布局

ProtoLayout Material 库提供了预定义的布局来帮助您 构建功能块。这些布局已设计为适应屏幕 。

请参阅 Figma 设计布局,其中展示了规范化 可用的布局以及如何使用这些布局进行设计:

我们建议使用 PrimaryLayoutEdgeContentLayout 作为顶级单位 来满足大多数应用场景的需求使用 setResponsiveContentInsetEnabled,例如:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

通过断点提供差异化的体验

ProtoLayout Material 库中的布局已实现自适应, 确保元素的位置和可见性正确无误但在某些情况下 您可能需要改变可见元素的数量以达到最佳效果。对于 例如,你可能希望在较小的显示屏上放置 3 个按钮,在较大的显示屏上放置 5 个按钮 。

要实现这种差异化体验,请使用屏幕尺寸 断点。如需在屏幕尺寸超过 225 dp 时显示其他布局,请执行以下操作:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

设计指南展示了额外的机会。

使用预览功能在不同尺寸的屏幕上测试功能块

请务必在不同屏幕尺寸上测试您的布局。使用 功能块预览注解,以及 TilePreviewHelperTilePreviewData 类:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

这样,您就可以直接在 Android Studio 中预览功能块布局。通过 之前的断点示例展示了附加按钮 在屏幕空间允许的情况下显示,预览时为:

在更大的显示屏上提供更多按钮

显示断点效果的小型和大型显示屏

如需查看完整示例,请参阅 GitHub 上的媒体图块示例