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

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

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

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

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

  • 水平方向の余白が、デバイス画面に対する割合に基づいて正しく設定されている 指定します。
  • 上下のスペースが正しく設定されている。これには特定の課題が伴います 推奨される上下のスペースは、表示するコンポーネントによって 分析できますたとえば、ChipText の間隔は異なります。 使用しないでください。
  • 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 = { }
            )
        }
    }
}

この例では、ScreenScaffoldAppScaffold も示しています。 これらはアプリと個々の画面間の (ナビゲーション ルート)を作成して、正しいスクロール動作を確保し、 TimeText の位置付け。

上下のパディングについては、次の点に注意してください。

  • 最初と最後の ItemType の仕様(正しい値を決定するために必要)。 調整できます。
  • リストの最初のアイテムに ResponsiveListHeader を使用すると、次のようになります。 Text ヘッダーにパディングを含めることはできません。

詳細な仕様については、Figma デザインキットをご覧ください。詳細 詳細と例については、以下をご覧ください。

  • Horologist ライブラリ - 構築に役立つコンポーネントが提供されます。 Wear OS 向けに最適化された 差別化されたアプリをご紹介します
  • ComposeStarter サンプル - 基本原則について説明しました。
  • JetCaster サンプル - 優れた AI モデルの 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 ComposeListPreview() {
    ComposeList()
}

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

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

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

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