Une application multimédia exécutée sur un téléviseur doit permettre aux utilisateurs de parcourir son contenu des offres, faire une sélection et commencer à regarder du contenu. La navigation dans le contenu pour les applications de ce type, l'expérience utilisateur doit être simple, intuitive et visuelle. agréables et engageantes.
Un navigateur de catalogue multimédia se compose généralement de plusieurs sections, contient une liste de contenus multimédias. Voici quelques exemples de sections d'un catalogue multimédia: les playlists, la sélection de contenus et les catégories recommandées.
![](https://developer.android.google.cn/static/training/tv/images/compose-catalogbrowser-example.png?authuser=7&hl=fr)
Implémentez un utilisateur à l'aide des fonctions fournies par Compose pour TV. permettant de parcourir de la musique ou des vidéos du catalogue multimédia de votre application.
Créer une fonction composable pour le catalogue
Tout ce qui apparaît sur un écran est implémenté en tant que fonction modulable dans Compose pour la télévision. Commencez par définir un composable pour le navigateur Media Catalog:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
est la fonction composable qui implémente votre catalogue multimédia.
navigateur. La fonction utilise les arguments suivants:
- Liste des contenus sélectionnés.
- Liste des sections.
- Objet Modificateur.
- Une fonction de rappel qui déclenche une transition d'écran
Définir les éléments d'interface utilisateur
Compose pour la télévision propose des listes différées, un composant permettant d'afficher un grand
d'éléments (ou une liste de longueur inconnue). Appeler
LazyColumn
pour placer des sections verticalement. LazyColumn
fournit une
LazyListScope.() -> Unit
qui propose un DSL pour définir le contenu des éléments. Dans l'exemple suivant,
chaque section est placée dans une liste verticale avec un écart de 16 dp entre les sections:
@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)
}
}
}
Dans l'exemple, la fonction composable Section
définit comment afficher les sections.
Dans la fonction suivante, LazyRow
montre comment
la version horizontale de LazyColumn
est également utilisée pour
définissez une liste horizontale avec un bloc LazyListScope.() -> Unit
en appelant
le DSL fourni:
@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) }
)
}
}
}
Dans le composable Section
, le composant Text
est utilisé.
Texte et autres composants
définis dans Material Design sont proposés dans la bibliothèque tv-material . Vous pouvez
modifier les textes" tel que défini dans Material Design en se référant aux
objet MaterialTheme
.
Cet objet est également fourni par la bibliothèque tv-material.
Card
fait partie de la bibliothèque tv-material.
MovieCard
définit la manière dont les données de chaque film sont affichées dans le catalogue défini.
comme l'extrait de code suivant:
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
Mettre en avant la sélection de contenus
Dans l'exemple décrit précédemment, tous les films sont affichés de manière égale.
Ils ont la même zone, sans différence visuelle entre eux.
Vous pouvez mettre en avant certaines d'entre elles avec Carousel
.
Le carrousel affiche les informations sous la forme d'un ensemble d'éléments qui peuvent glisser, dans la vue. Le composant vous permet de mettre en avant du contenu sélectionné : de nouveaux films ou de nouveaux épisodes de séries TV.
Carousel
attend au moins que vous spécifiiez le nombre d'éléments que contient le carrousel et comment
dessiner chaque élément. La première peut être spécifiée avec itemCount
. Le deuxième
peut être transmis en tant que lambda. Le numéro d'index de l'élément affiché est
donné au lambda. Vous pouvez déterminer l'élément affiché à l'aide de la
valeur d'index donnée:
@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
peut être un élément d'une liste différée, telle que TvLazyColumn
.
L'extrait de code suivant montre le composable FeaturedCarousel
au-dessus du
tous les composables Section
:
@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)
}
}
}