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

Wear OS 版本的資訊方塊 2.5 3

---

應用程式方塊應可在各種大小的 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 時顯示不同的版面配置，請按照下列步驟操作：

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

設計指南說明其他商機。

使用預覽畫面在不同螢幕大小上測試圖塊

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

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

這樣一來，您就能直接在 Android Studio 中預覽資訊方塊版面配置。上一個中斷點範例說明在預覽畫面時，如何在螢幕空間允許的情況下顯示其他按鈕：

顯示小型和大型顯示器的斷點效果

如需完整範例，請參閱 GitHub 上的媒體圖塊範例。