在 Android TV 上使用 Jetpack Compose

建議您使用 Compose for TV 建構 Android TV 使用者介面。此架構可讓您的電視應用程式使用 Android Jetpack Compose 的所有優勢,更輕鬆地為應用程式建構美觀且實用的 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。使用 1.0 版的 Compose for TV 需要 1.3.0 版的 androidx.compose 程式庫和 Kotlin 1.7.10。

設定

在 Android TV 上使用 Jetpack Compose 的方法和其他 Android 專案使用 Jetpack Compose 的方式非常類似。主要的差別在於 Compose for TV 新增了提供電視最佳化元件的程式庫,方便您建立電視專用使用者介面。在某些情況下,這些元件的名稱會與非電視的對應項目使用相同的名稱,例如 androidx.tv.material3.Buttonandroidx.compose.material3.Button

Jetpack Compose 工具包依附元件

如要使用 Compose for TV,您必須在應用程式的 build.gradle 檔案中加入 Jetpack Compose 工具包依附元件,如下所示:

Kotlin

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

Groovy

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 for TV 混用 Compose Material 和 Compose Material 也可能導致非預期行為。舉例來說,每個程式庫都有專屬的 MaterialTheme 物件,因此如果您同時使用這兩種版本,顏色、字體排版或形狀可能會不一致。

下表列出電視和行動裝置之間的依附元件差異:

電視依附元件
(androidx.tv.*)
比較 Mobile 依附元件
(androidx.compose.*)
androidx.tv:tv-material 而非 androidx.compose.material3:material3
androidx.tv:tv-foundation 搭配使用 androidx.compose.foundation:foundation

其他資訊

歡迎瀏覽以下指南,瞭解如何打造最適合電視觀看的體驗: