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.
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.
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)
}
}
} |
 |
| Una cuadrícula de tarjetas de contenido |
TvLazyRow(
pivotOffsets = PivotOffsets(0.0f)
) {
items(movie) { movie ->
MyContentCard(movie)
}
} |
 |
| 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]
)
}
}
} |
|
| 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])
}
)
} |
|
| Carousel ofrece contenido con contenido y fondos personalizados. |
navegación
var selectedTabIndex by remember { mutableStateOf(0) }
TabRow(selectedTabIndex = selectedTabIndex) {
tabs.forEachIndexed { index, tab ->
Tab(
selected = selectedTabIndex == index,
onFocus = {
selectedTabIndex = index
},
) {
Text(tab)
}
}
}
MyContentBody(selectedTabIndex) |
|
| TabRows se puede colocar en la parte superior de la pantalla para la navegación superior |
Navegación lateral con cajón de navegación
NavigationDrawer(
drawerContent = {
if (DrawerValue.Open == it) {
MyExpandedSideMenu()
} else {
MyCompactSideMenu()
}
}
){
MyContentBody()
} |
|
| 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.
 |
| 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:
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.
Deja una respuesta