Wear OS で Jetpack Compose を使用する

Wear OS 向け Compose は、モバイル向け Compose に似ています。ただし、いくつか重要な違いがあります。このガイドでは、類似点と相違点について説明します。

Wear OS 向け Compose は Android Jetpack の一部であり、他の Wear Jetpack ライブラリと同様に、質の高いコードを短時間で作成できます。これは、Wear OS アプリのユーザー インターフェースを作成するための、おすすめの方法です。

Jetpack Compose ツールキットの使用に慣れていない場合は、Compose のパスウェイをご覧ください。モバイル向け Compose の開発原則の多くは、Wear OS 向け Compose にも当てはまります。宣言型 UI フレームワークの一般的なメリットについて詳しくは、Compose を導入する理由をご覧ください。Wear OS 向け Compose の詳細については、Wear OS 向け Compose のパスウェイと GitHub の Wear OS サンプル リポジトリをご覧ください。

Wear OS の Jetpack Compose でのマテリアル デザイン

Wear OS の Jetpack Compose には、マテリアル 2.5 の実装が用意されており、より魅力的なアプリ エクスペリエンスを設計できます。Wear OS のマテリアル デザイン コンポーネントは、Wear マテリアル テーマ設定に基づいて構築されています。このテーマ設定は、マテリアル デザインをカスタマイズしてプロダクトのブランドを適切に反映するための体系的な方法です。

互換性

Wear OS 向け Compose は、Wear OS 3.0（API レベル 30）をサポートするスマートウォッチと、Wear OS 2.0（API レベル 25 以上）を使用するスマートウォッチで動作します。Wear OS 向け Compose のバージョン 1.4 を使用するには、androidx.compose ライブラリのバージョン 1.7 と Kotlin 1.9.0 を使用する必要があります。BOM マッピングと Compose と Kotlin の互換性マップを使用して、Compose の互換性を確認できます。

サーフェス

Wear OS 向け Compose を使用することで、Wear OS 上でのアプリの作成がより簡単になります。詳細については、アプリをご覧ください。Google の組み込みコンポーネントを使用して、Wear OS のガイドラインに準拠したユーザー エクスペリエンスを構築します。コンポーネントの詳細については、設計に関するガイダンスをご覧ください。

セットアップ

Wear OS で Jetpack Compose を使用することは、他の Android プロジェクトで Jetpack Compose を使用することと似ています。主な違いは、Wear 向け Jetpack Compose では Wear 固有のライブラリが追加され、スマートウォッチ向けにカスタマイズしたユーザー インターフェースを簡単に作成できる点です。場合によっては、これらのコンポーネントが Wear 以外のコンポーネントと同じ名前を共有することもあります（androidx.wear.compose.material.Button や androidx.compose.material.Button など）。

Android Studio で新しいアプリを作成する

Jetpack Compose を含む新規プロジェクトを作成する手順は、次のとおりです。

1. [Welcome to Android Studio] ウィンドウが開いている場合は、[Start a new Android Studio project] をクリックします。Android Studio プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [Import Sample] を選択します。
2. 「Compose for Wear」を検索し、[Compose for Wear OS Starter] を選択します。
3. [Configure your project] ウィンドウで、以下を行います。
   1. [Application name] を設定します。
   2. サンプルの [Project location] を選択します。
4. [Finish] をクリックします。
5. Gradle プロパティ ファイルの説明に沿って、プロジェクトの build.gradle ファイルが正しく構成されていることを確認します。

これで、Wear OS 向け Compose を使用してアプリを開発する準備が整いました。

Jetpack Compose ツールキットの依存関係

Wear OS で Jetpack Compose を使用するには、アプリの build.gradle ファイルに Jetpack Compose ツールキットの依存関係を追加する必要があります。Wear OS に関連する依存関係の変更のほとんどは、最上位のアーキテクチャ レイヤにあります（次の図の赤い枠で囲まれた部分）。

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

つまり、すでに Jetpack Compose で使用している依存関係の多くは、Wear OS をターゲットにしても変更されません。たとえば、UI、ランタイム、コンパイラ、アニメーションの依存関係に変更はありません。

ただし、Wear OS には独自のバージョンの material、foundation、navigation ライブラリがあるため、適切なライブラリを使用していることを確認してください。

可能であれば、WearComposeMaterial バージョンの API を使用してください。モバイル版の Compose Material を使用することも技術的には可能ですが、Wear OS 固有の要件に合わせて最適化されているわけではありません。また、Compose Material と Wear OS 向け Compose Material を混在させると、予期しない動作が発生する可能性があります。たとえば、各ライブラリに独自の MaterialTheme クラスがあるため、両方のバージョンを使用した場合、色、タイポグラフィ、図形に一貫性がなくなる可能性があります。

次の表に、Wear OS とモバイルの依存関係の違いを示します。

次のスニペットは、これらの依存関係を含む build.gradle ファイルの例を示しています。

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.6")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}