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

您的應用程式在各種尺寸的 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 進行螢幕截圖測試：

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 範例。