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">
</ph> Abbildung 1: Typischer Katalogbildschirm. Nutzer k�nnen Videokatalogdaten durchsuchen.

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

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