Katalogbrowser erstellen

Eine Medien-App, die auf einem Fernseher ausgeführt wird, muss es Nutzern ermöglichen, die Inhalte zu durchsuchen Angebote, triff eine Auswahl und beginne mit der Wiedergabe von Inhalten. Inhalte, die durchsucht werden für Apps dieser Art einfach, intuitiv und visuell sein, ansprechend und interessant sein.

Ein Medienkatalog-Browser besteht tendenziell aus mehreren Abschnitten, die jeweils enthält eine Liste mit Medieninhalten. Beispiele für Bereiche in einem Medienkatalog: Playlists, angesagte Inhalte und empfohlene Kategorien.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Nutzer mithilfe der Funktionen von Compose for TV implementieren zum Durchsuchen von Musik oder Videos aus dem Medienkatalog Ihrer App.

Zusammensetzbare Funktion für Katalog erstellen

Alles, was auf einer Anzeige angezeigt wird, ist als zusammensetzbare Funktion in Für TV erstellen. Definieren Sie zunächst eine zusammensetzbare Funktion für den Browser des Medienkatalogs:

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

CatalogBrowser ist die zusammensetzbare Funktion, die Ihren Medienkatalog implementiert. Browser. Für die Funktion werden folgende Argumente verwendet:

• Liste der empfohlenen Inhalte.
• Liste der Abschnitte.
• Ein Modifikatorobjekt.
• Eine Callback-Funktion, die einen Bildschirmübergang auslöst.

UI-Elemente festlegen

Compose for TV bietet Lazy Listen, mit denen eine große Anzahl von Elementen (oder eine Liste mit unbekannter Länge) Anruf LazyColumn um Abschnitte vertikal zu platzieren. LazyColumn bietet eine LazyListScope.() -> Unit -Block, der eine DSL zur Definition von Artikelinhalten bietet. Im folgenden Beispiel Jeder Abschnitt wird in einer vertikalen Liste mit einem Abstand von 16 dp zwischen den Abschnitten platziert:

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

Im Beispiel definiert die zusammensetzbare Funktion Section, wie Abschnitte angezeigt werden. In der folgenden Funktion zeigt LazyRow, wie dies Die horizontale Version von LazyColumn wird ähnlich verwendet für definieren Sie eine horizontale Liste mit einem LazyListScope.() -> Unit-Block, indem Sie bereitgestellte DSL:

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

In der zusammensetzbaren Funktion Section wird die Komponente Text verwendet. Text und andere Komponenten definiert wurden, findest du in der Bibliothek für TV-Materialien . Sie können ändere die Texte wie in Material Design definiert, indem auf den MaterialTheme-Objekt. Dieses Objekt wird auch von der tv-material-Bibliothek bereitgestellt. Card ist Teil der TV-Material-Bibliothek. MovieCard definiert, wie die einzelnen Filmdaten im definierten Katalog gerendert werden wie das folgende Snippet:

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

Vorgestellte Inhalte hervorheben

Im zuvor beschriebenen Beispiel werden alle Filme gleich angezeigt. Sie haben den gleichen Bereich und unterscheiden sich nicht optisch. Einige davon können Sie mit Carousel hervorheben.

Das Karussell zeigt die Informationen in einer Gruppe von Elementen an, die sich verschieben, ausblenden oder ausblenden lassen. in den sichtbaren Bereich. Sie verwenden die Komponente, um vorgestellten Content wie Neu verfügbare Filme oder neue Folgen von TV-Sendungen

Carousel dass Sie mindestens die Anzahl der im Karussell enthaltenen Elemente angeben zeichnen Sie die einzelnen Elemente. Die erste kann mit itemCount angegeben werden. Die zweite Option als Lambda übergeben werden. Die Indexnummer des angezeigten Elements ist dem Lambda gegeben. Sie können das angezeigte Element mithilfe der gegebener Indexwert:

@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 kann ein Element einer Lazy List sein, z. B. TvLazyColumn. Das folgende Snippet zeigt, wie FeaturedCarousel über den Alle Section zusammensetzbaren Funktionen:

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