Una app de música que se ejecute en una TV debe permitir que los usuarios exploren su contenido ofertas, hacer una selección y comenzar a reproducir contenido. El contenido que explora para este tipo de apps debe ser simple, intuitiva y visualmente agradable y atractivo.
Un navegador de catálogos de medios tiende a tener varias secciones tiene una lista de contenido multimedia. Estos son algunos ejemplos de secciones en un catálogo de contenido multimedia: playlists, contenido destacado, categorías recomendadas.
Usa las funciones que proporciona Compose para TV para implementar un usuario interfaz para explorar música o videos desde el catálogo de contenido multimedia de tu app.
Cómo crear una función de componibilidad para un catálogo
Todo lo que aparece en una pantalla se implementa como una función de componibilidad en Compose para TV Comienza por definir un elemento componible para el navegador de catálogo de medios:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser es la función de componibilidad que implementa tu catálogo de contenido multimedia.
navegador. La función toma los siguientes argumentos:
- Es la lista de contenido destacado.
- Lista de secciones.
- Es un objeto Modifier.
- Una función de devolución de llamada, que activa una transición de pantalla
Cómo establecer elementos de IU
Compose para TV ofrece listas diferidas, un componente para mostrar una pantalla grande
cantidad de elementos (o una lista de longitud desconocida). Llamada
LazyColumn
las secciones verticalmente. LazyColumn proporciona un
LazyListScope.() -> Unit
que ofrece un DSL para definir el contenido del elemento. En el siguiente ejemplo,
cada sección se coloca en una lista vertical con un espacio de 16 dp entre las secciones:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
LazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}
En el ejemplo, la función de componibilidad Section define cómo mostrar secciones.
En la siguiente función, LazyRow demuestra cómo esta
la versión horizontal de LazyColumn se usa de manera similar para
definir una lista horizontal con un bloque LazyListScope.() -> Unit llamando
la DSL proporcionada:
@Composable
fun Section(
section: Section,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
Text(
text = section.title,
style = MaterialTheme.typography.headlineSmall,
)
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(section.movieList){ movie ->
MovieCard(
movie = movie,
onClick = { onItemSelected(movie) }
)
}
}
}
En el elemento componible Section, se usa el componente Text.
Texto y otros componentes
definidos en Material Design se ofrecen en la biblioteca tv-material . Puedes
cambiar los textos estilo, tal como se define en Material Design al hacer referencia al
Objeto MaterialTheme.
La biblioteca de tv-material también proporciona este objeto.
Card es parte de la biblioteca de tv-material.
MovieCard define cómo se renderizan los datos de cada película en el catálogo definido.
como el siguiente fragmento:
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
Destaca el contenido destacado
En el ejemplo descrito anteriormente, todas las películas se muestran de la misma manera.
Tienen la misma área, no hay diferencia visual entre ellos.
Puedes destacar algunos con Carousel.
El carrusel muestra la información en un conjunto de elementos que se pueden deslizar, atenuar o a la vista. Usarás este componente para destacar contenido destacado, como películas disponibles recientemente o episodios nuevos de programas de TV.
Carousel
espera que, al menos, especifiques la cantidad de elementos que contiene Carousel y que
dibujar cada elemento. El primero se puede especificar con itemCount. El segundo
se puede pasar como lambda. El número de índice del elemento mostrado es
dado a la lambda. Puedes determinar el elemento que se muestra con el
valor de índice dado:
@Composable
function FeaturedCarousel(
featuredContentList: List<Movie>,
modifier: Modifier = Modifier,
) {
Carousel(
itemCount = featuredContentList.size,
modifier = modifier,
) { index ->
val content = featuredContentList[index]
Box {
AsyncImage(
model = content.backgroundImageUrl,
contentDescription = content.description,
placeholder = painterResource(
id = R.drawable.placeholder
),
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
Text(text = content.title)
}
}
}
Carousel puede ser un elemento de una lista diferida, como TvLazyColumn.
En el siguiente fragmento, se muestra el elemento componible FeaturedCarousel sobre el
Todos los elementos Section componibles:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
TvLazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
FeaturedCarousel(featuredContentList)
}
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}