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

Kotlin

dependencies {
    // General compose dependencies
    implementation("androidx.activity:activity-compose:1.8.2")
    implementation("androidx.compose.ui:ui-tooling-preview:1.6.4")
    // Other compose dependencies

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

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

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.3.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.3.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")
}

相違点

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

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

Wear OS の依存関係

(androidx.wear.*)

比較 モバイルの依存関係

(androidx.*)

androidx.wear.compose:compose-material 代替 androidx.compose.material:material
androidx.wear.compose:compose-navigation 代替 androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation 追加 androidx.compose.foundation:foundation

以下に、build.gradle ファイルの例を示します。

// 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...
}

フィードバック

Wear OS 向け Compose を試して、Issue Tracker で提案やフィードバックをお寄せください。

Kotlin Slack の #compose-wear チャンネルに参加して、デベロッパー コミュニティとつながり、ご意見をお寄せください。