Katalogbrowser erstellen

Eine Medien-App, die auf einem Fernseher ausgeführt wird, muss es Nutzern ermöglichen, die Inhaltsangebote zu durchsuchen, eine Auswahl zu treffen und Inhalte abzuspielen. Das Suchen nach Inhalten in Apps dieser Art sollte einfach, intuitiv, visuell ansprechend und ansprechend sein.

Ein Mediakatalog-Browser besteht in der Regel aus mehreren Abschnitten, von denen jeder eine Liste von Medieninhalten enthält. Beispiele für Abschnitte in einem Medienkatalog: Playlists, angesagte Inhalte, empfohlene Kategorien.

Mit den Funktionen von Compose for TV können Sie eine Benutzeroberfläche zum Stöbern nach Musik oder Videos aus dem Medienkatalog Ihrer App implementieren.

Zusammensetzbare Funktion für Katalog erstellen

Alles, was auf einem Bildschirm angezeigt wird, ist in Composer for TV als zusammensetzbare Funktion implementiert. Definieren Sie zuerst 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 den Mediakatalog-Browser implementiert. Die Funktion verwendet folgende Argumente:

• Liste der empfohlenen Inhalte.
• Liste der Abschnitte.
• Ein Modifier-Objekt.
• Eine Rückruffunktion, die einen Bildschirmübergang auslöst.

UI-Elemente festlegen

„Für TV erstellen“ bietet Lazy-Listen, eine Komponente zum Anzeigen einer großen Anzahl von Elementen (oder einer Liste mit unbekannter Länge). Rufen Sie LazyColumn auf, um Abschnitte vertikal zu platzieren. LazyColumn stellt einen LazyListScope.() -> Unit-Block bereit, der eine DSL zur Definition von Elementinhalten bietet. Im folgenden Beispiel ist jeder Abschnitt 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 wird mit der zusammensetzbaren Funktion Section festgelegt, wie Abschnitte angezeigt werden. In der folgenden Funktion wird mit LazyRow gezeigt, wie diese horizontale Version von LazyColumn verwendet wird, um eine horizontale Liste mit einem LazyListScope.() -> Unit-Block zu definieren, indem die bereitgestellte DSL aufgerufen wird:

@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 Section-Komponente wird die Komponente Text verwendet. Text und andere in Material Design definierte Komponenten sind in der TV-Materialbibliothek verfügbar . Sie können den Stil des Texts gemäß Material Design ändern, indem Sie sich auf das Objekt MaterialTheme beziehen. Dieses Objekt wird auch von der TV-Materialbibliothek bereitgestellt. Card ist Teil der TV-Materialbibliothek. In MovieCard wird definiert, wie die einzelnen Filmdaten im Katalog gerendert werden. Das ist im folgenden Snippet dargestellt:

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

Empfohlene Inhalte hervorheben

Im oben beschriebenen Beispiel werden alle Filme gleichmäßig angezeigt. Sie haben dieselbe Fläche und sind visuell nicht zu unterscheiden. Mit Carousel können Sie einige davon hervorheben.

Im Karussell werden die Informationen in einer Reihe von Elementen angezeigt, die eingeblendet, eingeblendet oder eingeblendet werden können. Mit der Komponente können Sie ausgewählte Inhalte hervorheben, z. B. neu verfügbare Filme oder neue Folgen von TV-Sendungen.

Bei Carousel müssen Sie mindestens die Anzahl der Elemente im Karussell und die Darstellungsweise der einzelnen Elemente angeben. Die erste kann mit itemCount angegeben werden. Die zweite kann als Lambda übergeben werden. Die Indexnummer des angezeigten Elements wird der Lambda-Funktion zugeordnet. Sie können den angezeigten Artikel mit dem angegebenen Indexwert ermitteln:

@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-Liste sein, z. B. TvLazyColumn. Im folgenden Snippet wird das FeaturedCarousel-Kompositelement über allen Section-Kompositelementen angezeigt:

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