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 向け Compose は、Wear OS 3.0（API レベル 30）をサポートするスマートウォッチと、Wear OS 2.0（API レベル 25 以上）を使用するスマートウォッチで動作します。Wear OS 向け Compose のバージョン 1.0 を使用するには、androidx.compose ライブラリのバージョン 1.2 と Kotlin 1.7.0 を使用する必要があります。

サーフェス

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 ツールキットの依存関係を追加する必要があります。

dependencies {

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

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

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

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

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

    // 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.3.1")

    // 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")
}

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    implementation "androidx.wear.compose:compose-material:$rootProject.wearVersion"
    implementation "androidx.wear.compose:compose-foundation:$rootProject.wearVersion"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$rootProject.wearVersion"

    // Other dependencies...
}