Android TV で Jetpack Compose を使用する

Android TV ユーザー インターフェースを作成するためのおすすめの方法は、TV 向け Compose です。Android の Jetpack Compose の機能を TV アプリ向けに提供し、アプリの美しく機能的な UI をはるかに簡単に構築できるようになります。Compose for TV を使用する具体的なメリットは次のとおりです。

• 柔軟性: Compose を使用すると、シンプルなレイアウトから複雑なアニメーションまで、あらゆる種類の UI を作成できます。コンポーネントはすぐに使用できますが、アプリのニーズに合わせたカスタマイズやスタイル設定も可能です。
• 開発の簡素化と加速: Compose は既存のコードと互換性があるため、デベロッパーは少ないコードでより効率的にアプリを構築できます。
• 直感的: Compose は宣言型構文を使用して、コードの UI の変更、デバッグ、理解、レビューを行うことができます。

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

互換性

Compose for TV は、API レベル 21 以降の Android TV で動作します。 Compose for TV のバージョン 1.0 を使用するには、androidx.compose ライブラリのバージョン 1.3.0 と Kotlin 1.7.10 が必要です。

セットアップ

Android TV で Jetpack Compose を使用することは、他の Android プロジェクトで Jetpack Compose を使用することと似ています。主な違いは、Compose for TV では、TV 向けに最適化されたコンポーネントを提供するライブラリが追加され、TV に合わせたユーザー インターフェースを簡単に作成できるようになることです。場合によっては、これらのコンポーネントはテレビ以外のコンポーネントと同じ名前を共有することがあります（androidx.tv.material3.Button や androidx.compose.material3.Button など）。

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

Compose for TV を使用するには、次のように、アプリの build.gradle ファイルに Jetpack Compose ツールキットの依存関係を含める必要があります。

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2024.04.01")
   implementation(composeBom)

   // General compose dependencies
   implementation("androidx.activity:activity-compose:1.8.2")

   implementation("androidx.compose.ui:ui-tooling-preview")
   debugImplementation("androidx.compose.ui:ui-tooling")

   // Compose for TV dependencies
   val tvCompose = "1.0.0-alpha10"
   implementation("androidx.tv:tv-foundation:$tvCompose")
   implementation("androidx.tv:tv-material:$tvCompose")
}

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2024.04.01')
   implementation composeBom

   // General compose dependencies
   implementation 'androidx.activity:activity-compose:1.8.2'

   implementation 'androidx.compose.ui:ui-tooling-preview'
   debugImplementation 'androidx.compose.ui:ui-tooling'

   // Compose for TV dependencies
   def tvCompose = '1.0.0-alpha10'
   implementation 'androidx.tv:tv-foundation:$tvCompose'
   implementation 'androidx.tv:tv-material:$tvCompose'
}

相違点

可能な限り、TV 向けの API を使用してください。 モバイル版の Compose Material を使用することも技術的には可能ですが、Android TV の独自の操作スタイル向けに最適化されていません。また、Compose Material と Compose for TV の Compose Material を混在させると、予期しない動作が発生する可能性があります。たとえば、各ライブラリには独自の MaterialTheme オブジェクトがあるため、両方のバージョンを使用すると、色、タイポグラフィ、シェイプに一貫性がなくなる可能性があります。

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

参考資料

以下のガイドでは、テレビ向けに最適化されたエクスペリエンスを構築する方法を以下にご紹介します。

• カタログ閲覧画面
• 詳細画面