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

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

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

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

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

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

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

針對多數用途，我們建議使用 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 上的媒體圖塊範例。