Cree experiencias de sala de estar con píxeles perfectos con Compose para TV

Ashley Patterson

10/05/2023



Publicado por Paul Lammertsma, ingeniero de relaciones con los desarrolladores

Durante el año pasado, continuamos viendo un crecimiento significativo en el sistema operativo Android TV, ahora con más de 150 millones de dispositivos activos mensuales. Según Strategy Analytics, la plataforma de transmisión de Android TV se envió a más dispositivos a nivel mundial en 2022 que cualquier otra plataforma de transmisión de TV.

Hoy lanzamos la versión alfa de Compose para TV, el marco de interfaz de usuario más reciente para desarrollar aplicaciones atractivas y funcionales para Android TV.

Cree experiencias de sala de estar con píxeles perfectos con Compose para TV

Compose para TV trae todos los beneficios de Jetpack Compose a sus aplicaciones de TV, lo que le permite crear aplicaciones con menos código, un mantenimiento más fácil y una apariencia moderna de Material 3 desde el primer momento:

  • Menos código: Haga más con menos código y evite toda clase de errores, por lo que el código es simple y fácil de mantener.
  • Intuitivo: Describe tu IU y Compose se encargará del resto. Cuando cambie el estado de la aplicación, tu IU se actualizará automáticamente.
  • Acelerar el desarrollo: Compose for TV funciona con todo su código existente, por lo que puede llevarlo cuando y donde quiera. Iteración rápida con vistas previas en vivo y soporte completo de Android Studio.
  • Potente y flexible: Cree hermosas aplicaciones con acceso directo a las API de la plataforma Android que se pueden reutilizar fácilmente entre otros factores de forma, incluidas sus interfaces existentes para dispositivos móviles, tabletas, plegables, portátiles y de TV.
Índice del contenido
  • Directrices de diseño de televisores
  • Componentes que puede usar hoy
  • Lista inmersiva
  • carrusel especial
  • navegación
  • Navegación lateral con cajón de navegación
  • Componentes optimizados para TV

    • Directrices de diseño de televisores

    También nos complace anunciar el lanzamiento de nuestras nuevas pautas de diseño de TV para Android TV. Esta guía completa le brinda las herramientas que necesita para crear aplicaciones de TV que sean visualmente sorprendentes, intuitivas y envolventes. Las pautas cubren todo, desde la tipografía y el color hasta la navegación y el diseño. Siga estas pautas para crear aplicaciones de TV de calidad que sean fáciles de usar.

    Imagen de un televisor de pantalla plana montado en la pared en una casa moderna. La pantalla mostrará una vista previa de un programa titulado

    Componentes que puede usar hoy

    Aquí hay algunos componentes de la biblioteca de TV optimizados para la experiencia de la sala de estar. Puede usarlos junto con los componentes de material en Compose con los que ya está familiarizado.

    contenedor de desplazamiento

    TvLazyColumn {
      items(contentList) { content ->
        TvLazyRow {
    items(content) { cardItem ->
    Card(cardItem)
    }
      }
    }

    Imagen animada de una cuadrícula de tarjetas de contenido.
    Una cuadrícula de tarjetas de contenido
    TvLazyRow(
    pivotOffsets = PivotOffsets(0.0f)
    ) {
    items(movie) { movie ->
    MyContentCard(movie)
    }
    }

    Imagen animada de una cuadrícula de tarjetas de contenido.
    Ajuste del pivote de un TvLazyRow

    Lista inmersiva

    ImmersiveList(
    modifier = Modifier.height(130.dp).fillMaxWidth(),
    background = { index, _ ->
    AnimatedContent(targetState = index) {
    MyImmersiveListBackground(it)
    }
    },
    ) {
    TvLazyRow {
    items(featuredContentList.size) { index ->
    MyCard(
    Modifier.focusableItem(index),
    featuredContentList[index]
    )
    }
    }
    }

    Imagen animada de una cuadrícula de tarjetas de contenido.
    Con ImmersiveList, TvLazyRows se puede combinar con presentaciones de contenido

    carrusel especial

    Carousel(
    itemCount = featuredContentList.size,
    ) { index ->
    CarouselItem(
    background = {
    MyBackground(index)
    },
    content = {
    MyFeaturedContent(featuredContentList[index])
    }
    )
    }

    Imagen animada de una cuadrícula de tarjetas de contenido.
    Carousel ofrece contenido con contenido y fondos personalizados.
    var selectedTabIndex by remember { mutableStateOf(0) }
    TabRow(selectedTabIndex = selectedTabIndex) {
    tabs.forEachIndexed { index, tab ->
    Tab(
    selected = selectedTabIndex == index,
    onFocus = {
    selectedTabIndex = index
    },
    ) {
    Text(tab)
    }
    }
    }
    MyContentBody(selectedTabIndex)

    Imagen animada de una cuadrícula de tarjetas de contenido.
    TabRows se puede colocar en la parte superior de la pantalla para la navegación superior
    NavigationDrawer(
    drawerContent = {
    if (DrawerValue.Open == it) {
    MyExpandedSideMenu()
    } else {
    MyCompactSideMenu()
    }
    }
    ){
    MyContentBody()
    }

    Imagen animada de una cuadrícula de tarjetas de contenido.
    NavigationDrawer facilita la implementación de la navegación de páginas que se puede expandir y contraer

    Componentes optimizados para TV

    Las señales de enfoque sutiles que funcionan en teléfonos y tabletas pueden no ser óptimas para los televisores debido a factores ambientales como la distancia a la pantalla y la relación de contraste. Para abordar este problema, hemos desarrollado componentes especiales inspirados en Material3 que ponen un gran y llamativo enfoque en elementos selectos como botones y tarjetas, mientras se diseñan teniendo en cuenta la accesibilidad. También puede usar esta información para sus propias máscaras personalizadas.

    Imagen animada de una cuadrícula de tarjetas de contenido.
    El enfoque del componente se puede personalizar a través de diferentes tipos de visualización: escala, borde, brillo y color

    Construido con desarrolladores

    Hemos estado trabajando en estrecha colaboración con un grupo de usuarios pioneros para obtener sus comentarios sobre Compose para TV. Esto es lo que tienen que decir:

    La tarjeta de cotización que muestra una foto de retrato de Dai Williams, Plex, sonriendo y el texto dice:

    Cita la tarjeta con una foto de retrato de Danny Preussler, líder de la plataforma Android, Soundcloud, sonriendo y el texto dice:

    Tarjeta de cotización con foto de retrato de Petr Introvič, Showmax, sonrisa y texto que dice:

    Tarjeta de cotización con una foto de retrato de Kishore AK, CTO, Zee5, sonriendo y texto que dice

    Aprende más

    Primero, consulte las guías para desarrolladores, la referencia de temas, nuestro nuevo laboratorio de código y el código de muestra. Asegúrese de leer las últimas notas de la versión para mantenerse al día con las últimas actualizaciones de Compose para TV.

    Comentarios de desarrolladores y diseñadores como tú

    Escuchamos sus comentarios sobre la API de Leanback y su deseo de usar un marco de interfaz de usuario moderno que se vea bien desde el primer momento, pero que también sea altamente tematizable y personalizable. Continúe enviándonos sus comentarios para que podamos seguir adaptando Compose para TV a sus necesidades.

    Si quieres conocer otros artículos parecidos a Cree experiencias de sala de estar con píxeles perfectos con Compose para TV puedes visitar la categoría Android.

    Ashley Patterson

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir