應用程式圖塊應在各種尺寸的 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 上的媒體資訊方塊範例。