您的應用程式在各種尺寸的 Wear OS 裝置上都應該要能順利運作,並盡可能善用額外的空間,在小螢幕上也同樣美觀。本指南提供改善使用者體驗的建議。
如要進一步瞭解自動調整式版面配置的設計原則,請參閱設計指南。
使用 Horologist 建構回應式版面配置
版面配置應具有百分比邊界。由於 Compose 預設為以絕對值運作,因此請使用 Horologist 程式庫中的元件,該程式庫具備下列功能:
- 水平邊界已根據裝置螢幕大小的百分比正確設定。
- 頂端和底部間距已正確設定。這會帶來一些特定挑戰,因為建議的頂端和底部間距可能會取決於使用的元件。例如,在清單中使用
Chip
時,Text
元件應有不同的間距。 - 已正確設定
TimeText
個邊界。
下列程式碼片段使用 Horologist 版本的 ScalingLazyColumn
版面配置,建立在各種 Wear OS 螢幕大小上都美觀的內容:
import com.google.android.horologist.compose.layout.ScalingLazyColumn
val columnState = rememberResponsiveColumnState(
contentPadding = ScalingLazyColumnDefaults.padding(
first = ItemType.Text,
last = ItemType.SingleButton
)
)
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
columnState = columnState,
modifier = Modifier.fillMaxSize()
) {
item {
ResponsiveListHeader(contentPadding = firstItemPadding()) {
Text(text = "Header")
}
}
// ... other items
item {
Button(...)
}
}
}
本例也示範 ScreenScaffold
]3 和 AppScaffold
。應用程式和個別畫面 (導覽路徑) 之間的座標,可確保正確的捲動行為和 TimeText
定位。
另外,頂端和底部邊框間距也請注意下列事項:
- 第一個和最後一個
ItemType
的規格,用來決定正確的邊框間距。 - 對清單中的第一個項目使用
ResponsiveListHeader
,因為Text
標頭不應有邊框間距。
如需完整規格資訊,請參閱 Figma 設計套件。如需更多詳細資料和範例,請參閱:
- Horologist 程式庫:提供元件,可協助您為 Wear OS 建構經過最佳化且與眾不同的應用程式。
- ComposeStarter 範例:以範例顯示本指南所述的原則。
- JetCaster 範例 - 使用 Horologist 程式庫建構適用於不同螢幕大小的應用程式,這個更複雜的範例。
在應用程式中使用捲動版面配置
如本頁先前所示,使用捲動版面配置做為實作畫面時的預設選項。如此一來,無論顯示偏好設定或 Wear OS 裝置螢幕大小,使用者都能存取應用程式的元件。
不同裝置大小和字型縮放的效果。
對話方塊
對話方塊也應可供捲動,除非有很大的理由。Horologist 提供的 ResponsiveDialog
元件會新增下列項目:
- 預設為捲動。
- 正確的百分比利潤。
- 可在空間允許的範圍內調整寬度的按鈕,以提供增加輕觸目標。
回應式對話方塊,預設提供捲動功能,以及可配合可用空間的按鈕。
自訂畫面可能需要非捲動式版面配置
部分畫面可能仍適用於非捲動版面配置。以下提供幾個範例,包括媒體應用程式中的主畫面以及健身應用程式中的健身畫面。
在這類情況下,請參考 Figma 設計套件提供的標準指南,並使用正確的邊界實作符合螢幕尺寸的設計。
透過中斷點提供與眾不同的體驗
你可以使用更大的螢幕來介紹其他內容和功能。如要實作這種與眾不同的體驗,請使用螢幕大小中斷點,以便在螢幕大小超過 225 dp 時顯示不同的版面配置:
const val LARGE_DISPLAY_BREAKPOINT = 225
@Composable
fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT
// ... use in your Composables:
if (isLargeDisplay()) {
// Show additional content.
} else {
// Show content only for smaller displays.
}
設計指南說明瞭這些商機。
使用預覽畫面測試螢幕大小和字型大小的組合
Compose 預覽可協助您針對各種 Wear OS 螢幕大小進行開發。同時使用裝置和字型縮放預覽定義來查看以下資訊:
- 畫面如何呈現調整大小的極端內容,例如與最小螢幕搭配的最大字型。
- 差異化體驗在不同中斷點的運作方式。
請務必使用 WearPreviewDevices
和 WearPreviewFontScales
,為應用程式的所有畫面實作預覽。
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
螢幕截圖測試
除了預覽測試之外,螢幕截圖測試也能用來針對現有的多種硬體大小進行測試。如果這些裝置可能無法立即取得,且問題不一定會出現在其他螢幕大小上,這項功能就特別實用。
螢幕截圖測試也可以協助您找出程式碼集中特定位置的迴歸問題。
我們的範例使用 Roborazzi 進行螢幕截圖測試:
- 設定專案和應用程式
build.gradle
檔案,以便使用 Roborazzi。 - 為應用程式中的每個畫面建立螢幕截圖測試。例如,在 ComposeStarter 範例中,系統會實作
GreetingScreen
的測試,如GreetingScreenTest
所示:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
注意事項:
FixedTimeSource
可讓您產生螢幕截圖,其中TimeText
不會變動,且不小心造成測試失敗。WearDevice.entries
包含大部分熱門 Wear OS 裝置的定義,可在代表大小的螢幕上執行測試。
產生黃金圖片
如要產生畫面圖片,請在終端機中執行下列指令:
./gradlew recordRoborazziDebug
驗證圖片
如要驗證現有映像檔的變更,請在終端機中執行下列指令:
./gradlew verifyRoborazziDebug
如需完整的螢幕截圖測試範例,請參閱 ComposeStarter 範例。