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

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

アプリは、利用可能な場合は追加のスペースを活用して、あらゆるサイズの 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 の仕様（正しいパディングを決定します）。
Text ヘッダーにはパディングがあってはいけないため、リスト内の最初のアイテムに対する ResponsiveListHeader の使用。

詳細な仕様については、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 を使用しています。

Roborazzi を使用するようにプロジェクトとアプリの build.gradle ファイルを構成します。
アプリの画面ごとにスクリーンショットテストを作成します。たとえば、ComposeStarter サンプルでは、GreetingScreenTest に示すように、GreetingScreen のテストが実装されています。

@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 サンプルをご覧ください。