Jetpack Compose auf Android TV verwenden

Wir empfehlen Compose for TV für die Erstellung von Android TV-Benutzeroberflächen. Damit können Sie alle Vorteile von Jetpack Compose von Android für Ihre TV-Apps nutzen, was das Erstellen ansprechender und funktionaler Benutzeroberflächen für Ihre App erheblich erleichtert. Hier einige Vorteile der Funktion „Compose for TV“:

  • Flexibilität: Mit Compose können Sie jede Art von UI erstellen, von einfachen Layouts bis hin zu komplexen Animationen. Komponenten sind sofort einsatzbereit, können aber auch an die Anforderungen Ihrer App angepasst und gestaltet werden.
  • Vereinfachte und beschleunigte Entwicklung: Compose ist mit vorhandenem Code kompatibel und ermöglicht Entwicklern, Anwendungen mit weniger Code effizienter zu erstellen.
  • Intuitiv: Compose verwendet eine deklarative Syntax, mit der Sie Änderungen an der Benutzeroberfläche vornehmen, Fehler beheben, Ihren Code verstehen und überprüfen können.

Wenn Sie mit dem Jetpack Compose-Toolkit nicht vertraut sind, lesen Sie den Compose-Pfad. Viele der Entwicklungskriterien für die Funktion „Compose“ für Mobilgeräte gelten auch für das Fernsehen. Weitere Informationen zu den allgemeinen Vorteilen eines deklarativen UI-Frameworks finden Sie unter Gründe für Erstellung. Weitere Informationen finden Sie im GitHub-Repository zu Compose for TV-Beispielen.

Kompatibilität

Die Funktion „Compose for TV“ ist auf Android TV-Geräten mit API-Level 21 oder höher verfügbar. Für Version 1.0 von Compose for TV sind Version 1.3.0 der androidx.compose-Bibliotheken und Kotlin 1.7.10 erforderlich.

Einrichten

Jetpack Compose wird auf Android TV ähnlich verwendet wie Jetpack Compose für jedes andere Android-Projekt. Der Hauptunterschied besteht darin, dass Compose for TV Bibliotheken hinzufügt, die für TV optimierte Komponenten bereitstellen und die Erstellung von auf das Fernsehen zugeschnittenen Benutzeroberflächen vereinfachen. In einigen Fällen haben diese Komponenten denselben Namen wie die Nicht-TV-Komponenten, z. B. androidx.tv.material3.Button und androidx.compose.material3.Button.

Abhängigkeiten des Jetpack Compose-Toolkits

Damit Sie Compose for TV verwenden können, müssen Sie die Abhängigkeiten des Jetpack Compose-Toolkits in die build.gradle-Datei Ihrer Anwendung aufnehmen:

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

Groovig

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'
}

Was ist anders?

Verwenden Sie nach Möglichkeit die TV-Version der APIs. Es ist zwar technisch möglich, die mobile Version von Compose Material zu verwenden, sie ist jedoch nicht für den einzigartigen Interaktionsstil von Android TV optimiert. Wenn Sie „Compose Material“ mit „Compose Material“ aus Compose für Fernseher kombinieren, kann das außerdem zu unerwartetem Verhalten führen. Beispiel: Da jede Bibliothek ein eigenes MaterialTheme-Objekt hat, besteht die Möglichkeit, dass Farben, Typografie oder Formen uneinheitlich sind, wenn beide Versionen verwendet werden.

In der folgenden Tabelle sind die Abhängigkeitsunterschiede zwischen TV- und Mobilgerät aufgeführt:

TV-Abhängigkeit
(androidx.tv.*)
Vergleich Abhängig von Mobilgeräten
(androidx.compose.*)
androidx.tv:tv-material anstatt androidx.compose.material3:material3
androidx.tv:tv-foundation zusätzlich zu androidx.compose.foundation:foundation

Weitere Informationen

In diesen Leitfäden erfahren Sie, wie Sie hochwertige TV-Inhalte für folgende Kunden entwickeln: