このページは Cloud Translation API によって翻訳されました。

さまざまな画面サイズに合わせて開発する

アプリは、以下のメリットを活用して、あらゆるサイズの Wear OS デバイスで適切に動作する必要があります。小さな画面でも適切に表示されますこのガイドでは、このようなユーザーエクスペリエンスを実現するための推奨事項について説明します。

アダプティブレイアウトのデザイン原則について詳しくは、設計ガイダンスをご覧ください。

Horologist を使用してレスポンシブレイアウトを作成する

レイアウトには割合ベースのマージンを設定する必要があります。Compose は使用する場合は、Terraform のコンポーネントを使用して、 Horologist Library: 次の機能を備えています。

水平方向の余白が、デバイス画面に対する割合に基づいて正しく設定されている指定します。
上下のスペースが正しく設定されている。これには特定の課題が伴います推奨される上下のスペースは、表示するコンポーネントによって分析できますたとえば、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 サンプル - 優れた AI モデルの 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.
    }
    // ...List.kt

設計ガイダンスでは、このような機会について詳しく説明しています。

プレビューを使用して画面とフォントサイズの組み合わせをテストする

Compose のプレビューを使用すると、Wear OS のさまざまな画面サイズに対応した開発が可能になります。デバイスとフォントスケーリングのプレビュー定義の両方を使用して、以下を確認します。

極端なサイズ設定（最大フォントなど）に対する画面の見方最小の画面で楽しめます。
差別化されたエクスペリエンスがブレークポイントをまたいでどのように動作するか。

必ず WearPreviewDevices を使用してプレビューを実装し、アプリ内のすべての画面用の WearPreviewFontScales。

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}List.kt

スクリーンショットのテスト

プレビューテストだけでなく、スクリーンショットテストでは、さまざまな条件でテストできます。対応しています。これは、これらのデバイスがすぐには利用できない場合や、対応しています

スクリーンショットテストは、特定の場所における回帰の特定にも役立ちます。説明します。

サンプルでは、スクリーンショットテストに 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 サンプルをご覧ください。