Creare un browser del catalogo

Un'app multimediale che viene eseguita su una TV deve consentire agli utenti di sfogliare le offerte di contenuti, effettuare una selezione e avviare la riproduzione dei contenuti. L'esperienza di navigazione tra i contenuti per le app di questo tipo deve essere semplice, intuitiva, accattivante e coinvolgente.

Un browser di cataloghi multimediali tende a essere composto da diverse sezioni e ogni sezione contiene un elenco di contenuti multimediali. Esempi di sezioni in un catalogo di contenuti multimediali includono: playlist, contenuti in primo piano, categorie consigliate.

Utilizza le funzioni fornite da Compose for TV per implementare un'interfaccia dell'utente per sfogliare musica o video dal catalogo multimediale della tua app.

Creare una funzione componibile per il catalogo

Tutto ciò che viene visualizzato su un display è implementato come funzione componibile in Compose per TV. Per iniziare, definisci una funzione componibile per il browser del catalogo multimediale:

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}

CatalogBrowser è la funzione componibile che implementa il browser del catalogo multimediale. La funzione accetta i seguenti argomenti:

• Elenco dei contenuti in primo piano.
• Elenco di sezioni.
• Un oggetto Modificatore.
• Una funzione di callback che attiva una transizione tra le schermate.

Impostare gli elementi dell'interfaccia utente

Compose for TV offre elenchi lazy, un componente per visualizzare un gran numero di elementi (o un elenco di lunghezza sconosciuta). Chiama LazyColumn per posizionare le sezioni verticalmente. LazyColumn fornisce un blocco LazyListScope.() -> Unit, che offre un DSL per definire i contenuti degli elementi. Nell'esempio seguente, ogni sezione è inserita in un elenco verticale con uno spazio di 16 dp tra le sezioni:

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

Nell'esempio, la funzione componibile Section definisce come visualizzare le sezioni. Nella seguente funzione, LazyRow mostra come questa versione orizzontale di LazyColumn viene utilizzata in modo simile per definire un elenco orizzontale con un blocco LazyListScope.() -> Unit chiamando il DSL fornito:

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

Nel composable Section viene utilizzato il componente Text. Il testo e altri componenti definiti in Material Design sono offerti nella raccolta tv-material . Puoi modificare lo stile dei testi come definito in Material Design facendo riferimento all'oggetto MaterialTheme. Questo oggetto è fornito anche dalla libreria tv-material. Card fa parte della raccolta di materiale TV. MovieCard definisce il modo in cui i dati di ogni film vengono visualizzati nel catalogo definito come segue:

@Composable
fun MovieCard(
   movie: Movie,
   modifier: Modifier = Modifier,
   onClick: () -> Unit = {}
) {
   Card(modifier = modifier, onClick = onClick){
    AsyncImage(
       model = movie.thumbnailUrl,
       contentDescription = movie.title,
     )
   }
}

Mettere in evidenza i contenuti in primo piano

Nell'esempio descritto in precedenza, tutti i film vengono visualizzati allo stesso modo. Hanno la stessa area, ma non c'è alcuna differenza visiva. Puoi evidenziarne alcune con Carousel.

Il carosello mostra le informazioni in un insieme di elementi che possono scorrere, dissolversi o entrare nel campo visivo. Utilizza il componente per mettere in evidenza i contenuti in primo piano, ad esempio film di nuova uscita o nuove puntate di programmi TV.

Carousel ti chiede di specificare almeno il numero di elementi del carosello e come disegnare ciascuno di essi. Il primo può essere specificato con itemCount. Il secondo puoi essere passato come funzione lambda. Il numero di indice dell'elemento visualizzato viene dato al parametro lambda. Puoi determinare l'elemento visualizzato con il dato valore di indice:

@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 può essere un elemento di un elenco lazy, ad esempio TvLazyColumn. Lo snippet seguente mostra il composable FeaturedCarousel sopra tutti i composable 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)
    }
  }
}