在 Android TV 上使用 Jetpack Compose

Compose for TV 是建構 Android TV 的新型方法 存取 APICompose for TV 發揮 Android Jetpack Compose 的一切優勢， 為 TV 應用程式打造美觀且實用的 UI 讓您更容易

使用 Compose for TV 的一些特定優點包括：

  • 靈活彈性：Compose 可用來建立任何類型的 UI，只需簡單 將版面配置轉換成複雜的動畫元件可立即使用 根據應用程式需求自訂及調整樣式。
  • 簡化與加速開發：Compose 與 還能幫助開發人員更有效率地建構應用程式 程式碼越少越好
  • 直覺式：Compose 會使用宣告式語法，方便您建立 以及對 UI 進行的變更、偵錯、理解及檢查程式碼。

如果您對 Jetpack Compose 工具包的使用方式不太熟悉，請參閱 Compose 課程。多個 行動版 Compose 開發原則 也適用於 TV。詳情請參閱為什麼 Compose 有關宣告式 UI 架構一般優點的資訊。學習 另請參閱 Compose 的 GitHub 上的電視範例存放區。

相容性

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 與 Jetpack Compose 類似 和其他 Android 專案主要差別在於 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'
}

不同點

電視材質元件專為客廳打造，且焦點清晰 指標和遠端支援的輸入行為。如要進一步瞭解 如要使用這些特定元件，請參閱 TV UI 設計指南。

圖 1. 電視素材庫中的元件範例。

盡可能使用電視版本的 API 這些功能。

雖然就技術上來說，您也可以使用行動版 Compose Material， 並未針對 Android TV 獨特的互動方式進行最佳化於 此外，將 Compose Material 與 Compose Material 搭配使用 Compose for TV 可能會導致非預期的行為。例如： 每個程式庫都有專屬的 MaterialTheme 物件 如果同時使用兩種版本，顏色、字體排版和形狀不一致。

下表列出電視和 行動裝置：

電視依附元件
(androidx.tv.*)。 		比較 Mobile 依附元件
(androidx.compose.*)。
androidx.tv:tv-material 而非 androidx.compose.material3:material3

其他資源

  • 電視設計指南
    概略說明如何透過 相關開發人員資源的連結

  • 電視 Material Catalog 範例
    示範實作方式的目錄應用程式 使用 Compose for TV 的質感設計原則。

  • JetStream 範例
    一種媒體串流應用程式，可示範如何將 TV Compose 與 典型的 Material Design 應用程式和實際架構

  • Compose for TV 簡介
    本程式碼研究室將逐步說明如何使用目錄瀏覽器建構影片播放器應用程式 以及一個詳細資料畫面

其他資訊

歡迎瀏覽這些指南，瞭解如何為以下使用者打造優質的電視體驗：

下一頁
建立目錄瀏覽器