Android TV で Jetpack Compose を使用する

Compose for TV は Android TV を作成するための最新のアプローチ 作成しました。Compose for TV は、Android の Jetpack Compose のすべてのメリットを アプリの UI を美しく機能的なものにし、 簡単になります。

Compose for TV を使用する具体的なメリットは次のとおりです。

• 柔軟性: Compose では、シンプルな UI から 複雑なアニメーションに変換できますコンポーネントはすぐに使用できますが、 アプリのニーズに合わせてカスタマイズやスタイルを設定できます。
• 簡素化と開発を加速: Compose は、 デベロッパーが独自のコードを使ってより効率的にアプリを できます。
• 直感的: Compose では宣言型構文が使用されており、 コードのデバッグ、理解、レビューを行えます。

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

互換性

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

設定

Android TV で Jetpack Compose を使用することは、 実行することもできます。主な違いは Compose for TV が テレビ用に最適化されたコンポーネントを提供するライブラリを追加し、 テレビに合わせて調整された ユーザーインターフェースです場合によっては、これらのコンポーネントは同じ ブランド名を、たとえば androidx.tv.material3.Button および androidx.compose.material3.Button。

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

Compose for TV を使用するには、Jetpack Compose ツールキットを組み込む 次のように、アプリの build.gradle ファイルで依存関係を指定します。

Kotlin

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

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

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

   // Compose for TV dependencies.
   implementation("androidx.tv:tv-material:1.0.0-rc01")
}

Groovy

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

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

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

   // Compose for TV dependencies.
   implementation 'androidx.tv:tv-material:1.0.0-rc01'
}

相違点

テレビの素材はリビングルーム向けとして、焦点が明確になるようにデザインされています。 インジケーターとリモート フレンドリーな入力動作をご覧ください。P-MAX の これらの特定のコンポーネントを使用するには、TV UI デザインガイドをご覧ください。

図 1. TV マテリアル ライブラリのサンプル コンポーネント。

メリットを享受できる場合は常に TV 版の API を使用してください。 利用できます。

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

次の表に、テレビと モバイル:

TV の依存関係 （androidx.tv.*）	比較	モバイルの依存関係 （androidx.compose.*）
androidx.tv:tv-material	変更	androidx.compose.material3:material3

参考情報

• テレビ向けデザインガイド
  ユーザー インターフェースを構築するための専用の TV コンポーネントの概要。 関連するデベロッパー リソースへのリンク。

• TV マテリアル カタログのサンプル
  実装方法を示すカタログアプリ Compose for TV を使用したマテリアル デザインの原則。

• JetStream サンプル
  TV Compose を使用するメディア ストリーミング アプリ 典型的なマテリアル アプリと実際のアーキテクチャです。

• Compose for TV の概要
  この Codelab では、カタログ ブラウザを使用して動画プレーヤー アプリを作成する手順を説明します。 詳細画面です

参考資料

テレビ向けに最適化された優れたエクスペリエンスの構築について詳しくは、以下のガイドをご覧ください。

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