針對不同的螢幕大小進行開發

您的應用程式應善用以下優勢，在各種尺寸的 Wear OS 裝置上順利運作 因此即使有額外空間，在小螢幕上依然清晰可見。 本指南提供改善使用者體驗的建議。

如要進一步瞭解自動調整式版面配置的設計原則，請參閱 設計指南。

使用 Horologist 建構回應式版面配置

版面配置應具有百分比邊界。由於 Compose 的運作方式 預設值為絕對值，而請使用 Horologist 程式庫，其具備以下功能：

  • 水平邊界已根據裝置螢幕的百分比正確設定 大小
  • 頂端和底部間距已正確設定。但也面臨嚴峻挑戰 因為建議的頂端和底部間距會取決於要導入的元件 舉例來說，Chip 應與 Text 使用不同的間距 元件。
  • 已正確設定 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 = { }
            )
        }
    }
}
List.kt

這個範例也示範 ScreenScaffold 和 AppScaffold。 應用程式畫面和個別畫面之間的座標 (導覽路徑) 確保正確的捲動行為並 TimeText 定位。

另外，頂端和底部邊框間距也請注意下列事項：

  • 第一個和最後一個 ItemType 的規格，用來判斷正確的 邊框間距。
  • 對清單中第一個項目使用 ResponsiveListHeader，因為 Text 標頭不應有邊框間距。

如需完整規格資訊，請參閱 Figma 設計套件。如要 詳細資料和範例，請參閱：

  • Horologist 程式庫 - 提供可協助建構的元件 專為 Wear OS 打造且與眾不同的應用程式。
  • ComposeStarter 範例 - 這個範例說明 本指南概述的原則
  • JetCaster 範例 - 這個更複雜的範例的建構範例 應用程式可以透過 Horologist 程式庫處理各種螢幕大小。

在應用程式中使用捲動版面配置

將預設選項設為捲動版面配置 (如本頁前文所示) 。如此一來，使用者就能存取應用程式的元件 無論螢幕偏好設定或 Wear OS 裝置的螢幕大小為何都一樣。

不同裝置大小和字型縮放的影響

不同裝置大小的影響 以及調整字型

對話方塊

對話方塊也應可供捲動，除非有很大的理由。 Horologist 提供的 ResponsiveDialog 元件會將 包括：

  • 預設為捲動。
  • 正確的百分比利潤。
  • 按鈕會在空間允許時調整寬度，提供放大 點按目標
Horologist 中的自動調整對話方塊行為

回應式對話方塊，預設提供捲動功能及可自動調整的按鈕 並釋出可用空間

自訂畫面可能需要非捲動式版面配置

部分畫面可能仍適用於非捲動版面配置。以下提供幾個範例 在媒體應用程式中加入主要播放器畫面，並且在 健身應用程式

在這種情況下，請參閱 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 進行螢幕截圖測試：

  1. 設定要使用的專案和應用程式 build.gradle 檔案 Roborazzi。
  2. 針對應用程式中的每個畫面建立螢幕截圖測試。例如： 在 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 範例。