Katalogbrowser erstellen

Eine Media-App, die auf einem Fernseher ausgeführt wird, muss Nutzern die Möglichkeit bieten, die Inhalte zu durchsuchen, eine Auswahl zu treffen und die Wiedergabe zu starten. Das Durchsuchen von Inhalten in solchen Apps sollte einfach, intuitiv und visuell ansprechend sein.

Ein Browser für einen Media-Katalog besteht in der Regel aus mehreren Abschnitten, die jeweils eine Liste mit Media-Inhalten enthalten. Beispiele für Abschnitte in einem Media-Katalog sind Playlists, empfohlene Inhalte und empfohlene Kategorien.

Mit den von Compose for TV bereitgestellten Funktionen können Sie eine Benutzer oberfläche zum Durchsuchen von Musik oder Videos aus dem Media-Katalog Ihrer App implementieren.

Zusammensetzbare Funktion für den Katalog erstellen

Alles, was auf einem Display angezeigt wird, wird in Compose for TV als zusammensetzbare Funktion implementiert. Definieren Sie zuerst eine zusammensetzbare Funktion für den Media-Katalogbrowser:

@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 Media-Katalogbrowser implementiert. Die Funktion verwendet die folgenden Argumente:

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

UI-Elemente festlegen

Compose for TV bietet Lazy Lists, 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 bietet einen LazyListScope.() -> Unit Block, der eine DSL zum Definieren von Elementinhalten bietet. Im folgenden Beispiel wird 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 definiert die zusammensetzbare Funktion Section, wie Abschnitte angezeigt werden. In der folgenden Funktion zeigt LazyRow, wie diese horizontale Version von LazyColumn auf ähnliche Weise 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 zusammensetzbaren Funktion wird die Text Komponente verwendet. Text und andere in Material Design definierte Komponenten sind in der tv-material-Bibliothek verfügbar . Sie können den Stil der Texte gemäß Material Design ändern, indem Sie auf das MaterialTheme Objekt verweisen. Dieses Objekt wird auch von der tv-material-Bibliothek bereitgestellt. Card ist Teil der tv-material-Bibliothek. MovieCard definiert, wie die einzelnen Filmdaten im Katalog gerendert werden, wie im folgenden Snippet definiert:

@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 gleich angezeigt. Sie haben denselben Bereich und es gibt keinen visuellen Unterschied zwischen ihnen. Mit Carousel können Sie einige davon hervorheben.

Carousel zeigt die Informationen in einer Reihe von Elementen an, die verschoben, ausgeblendet oder eingeblendet werden können. Mit der Komponente können Sie empfohlene Inhalte hervorheben, z. B. neu verfügbare Filme oder neue Folgen von TV-Sendungen.

Carousel Für müssen Sie mindestens die Anzahl der Elemente und die Darstellung der einzelnen Elemente angeben. Die erste Angabe kann mit itemCount erfolgen. Die zweite Angabe kann als Lambda übergeben werden. Die Indexnummer des angezeigten Elements wird an das Lambda übergeben. Sie können das angezeigte Element mit dem angegebenen Indexwert bestimmen:

@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 die zusammensetzbare Funktion FeaturedCarousel über allen zusammensetzbaren Funktionen 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)
    }
  }
}