为不同屏幕尺寸开发磁贴

您的应用磁贴应该在所有尺寸的 Wear OS 设备上都能很好地工作，在有额外空间的情况下利用这些空间，并且在较小的屏幕上也看起来很棒。本指南提供了实现这种用户体验的建议。

要了解有关自适应布局的设计原则的更多信息，请阅读设计指南。

使用 ProtoLayout 构建响应式布局

该 ProtoLayout Material 库提供预定义的布局来帮助您构建磁贴。这些布局已经过设计，可以适应屏幕尺寸。

参考 Figma 设计布局，它展示了可用的规范布局以及如何使用它们构建您的设计

我们建议 PrimaryLayout 或 EdgeContentLayout 作为大多数用例的顶级布局。使用 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()

该设计指南说明了其他机会。

使用预览在不同屏幕尺寸上测试磁贴

在不同屏幕尺寸上测试您的布局非常重要。使用磁贴预览注释以及 TilePreviewHelper 和 TilePreviewData 类

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

这使您能够直接在 Android Studio 中预览您的磁贴布局。之前的断点示例说明了当预览时，当屏幕空间允许时，如何显示额外的按钮

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

有关完整示例，请参阅 GitHub 上的媒体磁贴示例。