Cómo usar Jetpack Compose en Android TV

Compose para TV es el enfoque moderno para crear Android TV. interfaces de usuario. Compose para TV ofrece todos los beneficios de Jetpack Compose de Android para tus apps para TV, lo que permite crear IU atractivas y funcionales para tu app. y fácil de usar.

Estos son algunos beneficios específicos de usar Compose para TV:

  • Flexibilidad: Compose se puede usar para crear cualquier tipo de IU, desde simples diseños a animaciones complejas. Los componentes funcionan de inmediato, pero también personalizarse y ajustarse a las necesidades de tu app.
  • Simplificación Desarrollo acelerado: Compose es compatible con el código existente y permite a los desarrolladores compilar apps de forma más eficiente con menos código.
  • Intuitiva: Compose usa una sintaxis declarativa que te permite crear en tu IU, depurar, comprender y revisar tu código.

Si nunca usaste el kit de herramientas de Jetpack Compose, consulta la ruta de aprendizaje de Compose. Muchos de los principios de desarrollo de Compose para dispositivos móviles también se aplican a la TV. Consulta Por qué Compose para obtener más información sobre las ventajas generales de un framework declarativo de IU. Para aprender más, consulta el documento Repositorio de muestras de TV en GitHub.

Compatibilidad

Compose para TV funciona en Android TV con Android 5.0 (nivel de API 21) o versiones posteriores. Para usar la versión 1.0 de Compose para TV, se requiere la versión 1.3.0 de Bibliotecas androidx.compose y Kotlin 1.7.10.

Configuración

El uso de Jetpack Compose en Android TV es similar a usar Jetpack Compose para cualquier otro proyecto de Android. La principal diferencia es que Compose para TV agrega bibliotecas que ofrecen componentes optimizados para TV y facilitan la creación interfaces de usuario adaptadas a la TV. En algunos casos, esos componentes comparten la misma como sus contrapartes que no son de TV, por ejemplo, androidx.tv.material3.Button y androidx.compose.material3.Button

Dependencias del kit de herramientas de Jetpack Compose

Si quieres usar Compose para TV, incluye el kit de herramientas de Jetpack Compose dependencias en el archivo build.gradle de tu app de la siguiente manera:

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

Qué cambió

Los componentes materiales de la TV están diseñados para la sala de estar, con un enfoque claro. indicadores y comportamiento de entrada remoto. Para obtener detalles sobre cómo Para usar estos componentes específicos, consulta las guías de diseño de IU de TV.

Figura 1: Componentes de muestra de la biblioteca de material de TV.

Use la versión para TV de las APIs siempre que sea posible para beneficiarse de estas funciones.

Si bien es técnicamente posible usar la versión para dispositivos móviles de Compose Material, No está optimizado para el estilo único de las interacciones en Android TV. En incorporación y la combinación de Compose Material con Compose Material Compose para TV puede generar un comportamiento inesperado. Por ejemplo: Como cada biblioteca tiene su propio objeto MaterialTheme, existe la posibilidad de colores, tipografía o formas incoherentes si se usan ambas versiones.

La siguiente tabla describe las diferencias de dependencia entre la TV y Dispositivos móviles:

Dependencia de TV
(androidx.tv.*)
Comparación Dependencia de dispositivos móviles
(androidx.compose.*)
androidx.tv:tv-material en lugar de androidx.compose.material3:material3

Recursos adicionales

  • Guías de diseño para TV
    Descripción general de los componentes de TV exclusivos para crear interfaces de usuario con vínculos a recursos relevantes para desarrolladores.

  • Ejemplo de catálogo de material de TV
    Una app de catálogo que muestra cómo implementar Principios de Material Design con Compose para TV.

  • Ejemplo de JetStream
    Una app de transmisión de contenido multimedia que demuestra el uso de TV Compose con una la app típica de Material y la arquitectura del mundo real.

  • Introducción a Compose para TV
    En este codelab, se explica cómo compilar una app de reproducción de video con un navegador de catálogos. y una de detalles.

Lecturas adicionales

Explora estas guías y descubre cómo crear excelentes experiencias optimizadas para TV para: