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

應用程式的動態磚應能在各種大小的 Wear OS 裝置上正常運作，並充分利用額外空間，同時在較小的螢幕上呈現美觀的畫面。本指南提供相關建議，協助您打造這種使用者體驗。

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

透過中斷點提供差異化體驗

ProtoLayout Material 程式庫的版面配置具有回應性，可確保元素位置和顯示狀態正確無誤。不過，在某些情況下，您可能需要調整顯示的元素數量，才能獲得最佳成效。舉例來說，您可能希望在較小的螢幕上顯示 3 個按鈕，在較大的螢幕上顯示 5 個按鈕。

如要實作這類差異化體驗，請使用螢幕大小中斷點。如要在螢幕大小超過 225 dp 時顯示不同版面配置，請按照下列步驟操作：

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

設計指南說明瞭其他商機。

使用「預覽」功能，測試不同螢幕大小的動態磚

請務必在不同大小的螢幕上測試版面配置。使用「圖塊預覽」註解，以及 TilePreviewHelper 和 TilePreviewData 類別：

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

這樣一來，您就能直接在 Android Studio 中預覽動態磚版面配置。

如需完整範例，請參閱 GitHub 上的計時器動態磚範例。