Créer un navigateur de catalogue

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.

Figure 1. Écran de catalogue classique. Les utilisateurs peuvent parcourir les données du catalogue vidéo.

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,
     )
   }
}

Remarque :AsyncImage est un composable qui charge une image depuis Internet. Pour en savoir plus, consultez la section Charger des images.

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)
    }
  }
}