開發不同螢幕大小的資訊方塊

應用程式圖塊應在各種尺寸的 Wear OS 裝置上順利運作，盡可能享有額外空間，在螢幕較小的裝置上也能呈現最佳顯示效果。本指南提供實現這項使用者體驗的建議。

如要進一步瞭解自動調整式版面配置的設計原則，請參閱設計指南。

使用 ProtoLayout 建構回應式版面配置

ProtoLayout Material 程式庫提供預先定義的版面配置，可協助您建構資訊方塊。這些版面配置已專為配合螢幕大小而設計。

請參閱 Figma 設計版面配置，瞭解可用的標準版面配置，以及如何使用這類版面配置建構設計：

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

針對多數用途，我們建議使用 PrimaryLayout 或 EdgeContentLayout 做為頂層版面配置。使用 setResponsiveContentInsetEnabled 設定回應式行為，例如：

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

透過中斷點提供與眾不同的體驗

你可以使用更大的螢幕來介紹其他內容和功能。如要實作這種與眾不同的體驗，請使用螢幕大小中斷點，以便在螢幕大小超過 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 上的媒體資訊方塊範例。