Utilizzare Jetpack Compose su Android TV

Compose per la TV è l'approccio consigliato per creare interfacce utente per Android TV. Questa funzionalità sblocca tutti i vantaggi di Jetpack Compose per Android per le tue app TV, in modo da semplificare la creazione di UI funzionali e funzionali per le tue app. Ecco alcuni vantaggi specifici dell'utilizzo di Compose per la TV:

  • Flessibilità: Compose può essere utilizzato per creare qualsiasi tipo di UI, da semplici layout ad animazioni complesse. I componenti sono pronti all'uso, ma possono anche essere personalizzati e personalizzati in base alle esigenze della tua app.
  • Sviluppo semplificato e accelerato: Compose è compatibile con il codice esistente e consente agli sviluppatori di creare app in modo più efficiente con meno codice.
  • Intuitiva: Compose utilizza una sintassi dichiarativa che ti consente di apportare modifiche alla UI, eseguire il debug, comprendere ed esaminare il codice.

Se non hai dimestichezza con l'utilizzo del toolkit di Jetpack Compose, consulta il percorso di Compose. Molti dei principi di sviluppo di Scrittura per dispositivi mobili si applicano anche alla TV. Consulta Perché scrivere per ulteriori informazioni sui vantaggi generali di un framework di UI dichiarativo. Per scoprire di più, consulta anche il repository di esempi di Compose per TV su GitHub.

Compatibilità

Compose per la TV funziona su Android TV con livello API 21 o versioni successive. L'utilizzo della versione 1.0 di Compose per la TV richiede la versione 1.3.0 delle librerie androidx.compose e Kotlin 1.7.10.

Configura

L'utilizzo di Jetpack Compose su Android TV è simile all'utilizzo di Jetpack Compose per qualsiasi altro progetto Android. La differenza principale è che Compose per la TV aggiunge librerie che offrono componenti ottimizzati per la TV e semplificano la creazione di interfacce utente su misura per la TV. In alcuni casi, questi componenti condividono lo stesso nome delle controparti non TV, ad esempio androidx.tv.material3.Button e androidx.compose.material3.Button.

Dipendenze del toolkit Jetpack Compose

Per utilizzare Compose per la TV, devi includere le dipendenze del toolkit di Jetpack Compose nel file build.gradle dell'app come segue:

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

trendy

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

Differenze

Se possibile, utilizza la versione TV delle API. Sebbene sia tecnicamente possibile utilizzare la versione mobile di Compose Material, non è ottimizzata per lo stile unico di interazione su Android TV. Inoltre, la combinazione di Compose Material e Compose Material di Compose per la TV può causare comportamenti imprevisti. Ad esempio, poiché ogni libreria ha il proprio oggetto MaterialTheme, c'è la possibilità che colori, tipografia o forme siano incoerenti se vengono utilizzate entrambe le versioni.

La seguente tabella illustra le differenze di dipendenza tra TV e dispositivi mobili:

Dipendenza TV
(androidx.tv.*)
Confronto Dipendenza da dispositivi mobili
(androidx.compose.*)
androidx.tv:materiale-tv invece di androidx.compose.material3:materiale3
androidx.tv:tv-fondamenta oltre a androidx.compose.foundation:foundation

Continua a leggere

Esplora queste guide per scoprire come creare fantastiche esperienze ottimizzate per la TV per: