應用程式圖塊應在各種尺寸的 Wear OS 裝置上順利運作,盡可能享有額外空間,在螢幕較小的裝置上也能呈現最佳顯示效果。本指南提供實現這項使用者體驗的建議。
如要進一步瞭解自動調整式版面配置的設計原則,請參閱設計指南。
使用 ProtoLayout 建構回應式版面配置
ProtoLayout Material 程式庫提供預先定義的版面配置,可協助您建構資訊方塊。這些版面配置已專為配合螢幕大小而設計。
請參閱 Figma 設計版面配置,瞭解可用的標準版面配置,以及如何使用這類版面配置建構設計:
針對多數用途,我們建議使用 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 上的媒體資訊方塊範例。