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 Durchsuchen von Inhalten für Apps dieser Art sollte einfach, intuitiv, optisch ansprechend und ansprechend sein.

Ein Medienkatalogbrowser besteht in der Regel aus mehreren Abschnitten, die jeweils eine Liste mit Medieninhalten enthalten. Beispiele für Abschnitte in einem Medienkatalog: Playlists, angesagte Inhalte, empfohlene Kategorien.

Mit den Funktionen von Compose for TV kannst du eine Benutzeroberfläche zum Durchsuchen von Musik oder Videos aus dem Medienkatalog deiner 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 Browser Ihres Medienkatalogs implementiert. 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, eine Komponente zur Anzeige einer großen Anzahl von Elementen (oder einer Liste mit unbekannter Länge). Rufen Sie TvLazyColumn auf, um Abschnitte vertikal zu platzieren. TvLazyColumn stellt einen TvLazyListScope.() -> Unit-Block bereit, der eine DSL zur Definition 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 = {},
) {
  TvLazyColumn(
    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 TvLazyRow, wie diese horizontale Version von TvLazyColumn auf ähnliche Weise zum Definieren einer horizontalen Liste mit einem TvLazyListScope.() -> Unit-Block verwendet wird, 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,
  )
  TvLazyRow(
     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 in Material Design definierte Komponenten sind in der Bibliothek für TV-Material verfügbar . Du kannst den Stil des Textes gemäß der Definition in Material Design ändern, indem du auf das MaterialTheme-Objekt verweist. 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, definiert als folgendes 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 in den sichtbaren Bereich verschieben können. Mit der Komponente können Sie angesagte Inhalte hervorheben, z. B. neue Filme oder Folgen von TV-Programmen.

Für Carousel musst du mindestens die Anzahl der Elemente im Karussell angeben und angeben, wie die einzelnen Elemente gezeichnet werden sollen. 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 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 Section-Elementen:

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