Creare un browser del catalogo

Un'app multimediale eseguita su una TV deve consentire agli utenti di sfogliarne i contenuti offerte, effettuare una selezione e iniziare a riprodurre i contenuti. La navigazione dei contenuti per app di questo tipo deve essere semplice, intuitiva e visivamente piacevole e coinvolgente.

Un browser di cataloghi multimediali tende a essere composto da diverse sezioni, ciascuna delle quali include un elenco di contenuti multimediali. Ecco alcuni esempi di sezioni in un catalogo di contenuti multimediali: playlist, contenuti in primo piano, categorie consigliate.

Utilizzare le funzioni fornite da Compose per la TV per implementare un utente per sfogliare musica o video dal catalogo multimediale della tua app.

Creare una funzione componibile per il catalogo

Tutto ciò che appare su un display è implementato come funzione componibile Scrivi per la TV. Per iniziare, definisci un 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 catalogo di contenuti multimediali del browser. La funzione accetta i seguenti argomenti:

• Elenco dei contenuti in primo piano.
• Elenco delle sezioni.
• Un oggetto Modificatore.
• Una funzione di callback, che attiva una transizione sullo schermo.

Impostare gli elementi dell'interfaccia utente

Compose per TV offre elenchi lenti, un componente per visualizzare una numero di elementi (o un elenco di lunghezza sconosciuta). Chiama LazyColumn per posizionare le sezioni verticalmente. LazyColumn offre un LazyListScope.() -> Unit che offre un DSL per definire i contenuti degli articoli. Nell'esempio seguente, ogni sezione è collocata 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 funzione seguente, LazyRow mostra come questo la versione orizzontale di LazyColumn è simile a quella utilizzata per definisci un elenco orizzontale con un blocco LazyListScope.() -> Unit chiamando sul 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 componibile Section viene utilizzato il componente Text. Testo e altri componenti definiti in Material Design sono offerti nella libreria tv-materiale . Puoi cambia gli SMS come definito in Material Design facendo riferimento alle MaterialTheme. Questo oggetto è fornito anche dalla libreria tv-material. Card fa parte della raccolta tv-materiale. MovieCard definisce il modo in cui i dati di ogni film vengono visualizzati nel catalogo definito come il seguente snippet:

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

Metti in evidenza i contenuti in primo piano

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

Carosello mostra le informazioni in un insieme di elementi che possono scorrere, in dissolvenza o nella visualizzazione. Utilizzerai il componente per mettere in evidenza i contenuti in primo piano, ad esempio film o nuovi episodi di programmi TV appena resi disponibili.

Carousel richiede che tu specifichi almeno il numero di elementi del carosello e come disegna ciascun elemento. Il primo può essere specificato con itemCount. Il secondo può essere passato come lambda. Il numero di indice dell'elemento visualizzato è dato al lambda. Puoi determinare l'elemento visualizzato con un determinato 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 lento, come TvLazyColumn. Il seguente snippet mostra FeaturedCarousel componibile nella parte superiore della tutti i Section componibili:

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