您的應用程式應善用以下優勢,在各種尺寸的 Wear OS 裝置上順利運作 因此即使有額外空間,在小螢幕上依然清晰可見。 本指南提供改善使用者體驗的建議。
如要進一步瞭解自動調整式版面配置的設計原則,請參閱 設計指南。
使用 Horologist 建構回應式版面配置
版面配置應具有百分比邊界。由於 Compose 的運作方式 預設值為絕對值,而請使用 Horologist 程式庫,其具備以下功能:
- 水平邊界已根據裝置螢幕的百分比正確設定 大小
- 頂端和底部間距已正確設定。但也面臨嚴峻挑戰
因為建議的頂端和底部間距會取決於要導入的元件
舉例來說,
Chip
應與Text
使用不同的間距 合併使用 .AR 元件 - 已正確設定
TimeText
個邊界。
下列程式碼片段使用 Horologist 版本的
ScalingLazyColumn
版面配置可製作各種不同格式的精彩內容
Wear OS 螢幕大小:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
這個範例也示範 ScreenScaffold
和 AppScaffold
。
應用程式畫面和個別畫面之間的座標
(導覽路徑) 確保正確的捲動行為並
TimeText
定位。
另外,頂端和底部邊框間距也請注意:
- 第一個和最後一個
ItemType
的規格,用來判斷正確的 邊框間距。 - 對清單中第一個項目使用
ResponsiveListHeader
,因為Text
標頭不應有邊框間距。
如需完整規格資訊,請參閱 Figma 設計套件。如要 詳細資料和範例,請參閱:
- Horologist 程式庫 - 提供可協助建構的元件 專為 Wear OS 打造且與眾不同的應用程式。
- ComposeStarter 範例 - 這個範例說明 本指南概述的原則
- JetCaster 範例 - 這個更複雜的範例的建構範例 應用程式可以透過 Horologist 程式庫處理各種螢幕大小。
在應用程式中使用捲動版面配置
將預設選項設為捲動版面配置 (如本頁前文所示) 。如此一來,使用者就能存取應用程式的元件 無論螢幕偏好設定或 Wear OS 裝置的螢幕大小為何都一樣。
![不同裝置大小和字型縮放的影響](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=3&hl=zh-tw)
不同裝置大小的影響 以及調整字型
對話方塊
對話方塊也應可供捲動,除非有很大的理由。
Horologist 提供的 ResponsiveDialog
元件會將
包括:
- 預設為捲動。
- 正確的百分比利潤。
- 按鈕會在空間允許時調整寬度,提供放大 點按目標
![Horologist 中的自動調整對話方塊行為](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=3&hl=zh-tw)
回應式對話方塊,預設提供捲動功能及可自動調整的按鈕 並釋出可用空間
自訂畫面可能需要非捲動式版面配置
部分畫面可能仍適用於非捲動版面配置。以下提供幾個範例 在媒體應用程式中加入主要播放器畫面,並且在 健身 App。
在這種情況下,請參閱 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 ComposeListPreview() { ComposeList() }
螢幕截圖測試
除了預覽測試之外,螢幕截圖測試也能用來 現有的硬體大小這對這些裝置來說特別實用 不會立即提供給您,而且問題本身不一定會在 或適合其他螢幕大小的螢幕
螢幕截圖測試也可協助您找出下列位置特定位置的迴歸: 程式碼集
我們的範例使用 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 範例。