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

19/05/2023


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

Publicado por Paul Lammertsma, ingeniero de relaciones con los desarrolladores

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

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. De hecho, según Análisis de estrategiala plataforma de transmisión de Android TV se distribuyó en más dispositivos en todo el mundo que cualquier otra plataforma de transmisión de TV en 2022.

Hoy lanzamos la versión Alpha de componer para tvel marco de interfaz de usuario más reciente para desarrollar aplicaciones atractivas y funcionales para Android TV.

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

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

  • Menos código: Haga más con menos código y evite clases enteras de errores, por lo que el código es simple y fácil de mantener.
  • Intuitivo: Describe tu interfaz de usuario y Compose se encarga del resto. A medida que cambia el estado de la aplicación, su interfaz de usuario se actualiza automáticamente.
  • Acelerar el desarrollo: Compose for TV es compatible con todo su código existente para que pueda adoptar cuando y donde quiera. Itere rápidamente 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 las interfaces de su dispositivo móvil, tableta, plegable, portátil y de TV.
Índice de Contenidos
  1. Crea experiencias de sala de estar con píxeles perfectos con Compose para TV
  • Pautas de diseño de televisores
  • Componentes que puede usar hoy
  • Lista inmersiva
  • carrusel destacado
  • Navegación
  • Navegación lateral con cajón de navegación
  • Componentes optimizados para TV
    1. Construido con desarrolladores
    2. Aprendiendo más
    3. Comentarios de desarrolladores y diseñadores como tú

    • Pautas de diseño de televisores

    También nos complace anunciar el lanzamiento de nuestro nuevo Directrices de diseño de TV para Android TV. Esta guía integral le brinda las herramientas que necesita para crear aplicaciones de TV que sean visualmente atractivas, 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 alta calidad que sean fáciles de usar.

    imagen de un televisor de pantalla plana montado en la pared en una casa moderna. La pantalla muestra la vista previa de un programa titulado 'Paws' con un adorable cachorro como la estrella del programa y un botón Ver ahora

    Componentes que puede usar hoy

    Aquí hay algunos componentes de la biblioteca de TV que están optimizados para la experiencia de la sala de estar. Puedes usarlos junto con el Componentes de material en Compose ya estás familiarizado.

    Contenedores de desplazamiento

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

    imagen en movimiento 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 en movimiento 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 en movimiento de una cuadrícula de tarjetas de contenido
    ImmersiveList permite que TvLazyRows se combine con contenido que presenta

    carrusel destacado

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

    imagen en movimiento de una cuadrícula de tarjetas de contenido
    Carrusel presenta 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 en movimiento de una cuadrícula de tarjetas de contenido
    TabRows se puede colocar en la parte superior de la pantalla para proporcionar una navegación superior
    NavigationDrawer(
    drawerContent = {
    if (DrawerValue.Open == it) {
    MyExpandedSideMenu()
    } else {
    MyCompactSideMenu()
    }
    }
    ){
    MyContentBody()
    }

    imagen en movimiento de una cuadrícula de tarjetas de contenido
    NavigationDrawer facilita la implementación de navegación lateral que se expande y contrae

    Componentes optimizados para TV

    Sutiles sugerencias de enfoque que funcionan en teléfonos y tabletas pueden no ser óptimos para televisores, debido a factores ambientales como la distancia a la pantalla y la relación de contraste. Para abordar esto, hemos creado componentes dedicados inspirados en Material3 que brindan un enfoque grande y audaz para elementos seleccionados como botones y tarjetas, diseñados teniendo en cuenta la accesibilidad. También puede utilizar estas indicaciones para sus propias superficies personalizadas.

    imagen en movimiento de una cuadrícula de tarjetas de contenido
    El enfoque del componente se puede personalizar a través de diferentes tipos de indicación: Escala, Borde, Resplandor y Color

    Construido con desarrolladores

    Trabajamos 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:

    Citar la tarjeta con la foto de Dai Williams, Plex, sonriendo y el texto dice: 'El enfoque de TV y la compatibilidad con el desplazamiento en Compose de Google han mejorado enormemente la productividad de nuestros desarrolladores y el rendimiento de la aplicación. Estamos emocionados de lanzar más y más características usando Compose este año.'

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

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

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

    Aprendiendo más

    Para empezar, echa un vistazo a la guías para desarrolladores, referencia de diseñonuestro nuevo laboratorio de código y Código de muestra. Asegúrese de consultar 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ú

    Hemos escuchado sus comentarios sobre la API de Leanback y su deseo de utilizar un marco de interfaz de usuario moderno que se vea muy bien desde el primer momento, pero que también se presta para ser tematizado y personalizado a fondo. Por favor continúa dándonos tu opinión para que podamos seguir dando forma a Compose for TV para que se adapte a sus necesidades.

    Te puede interesar

    Subir