Katalogbrowser erstellen

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

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

Verwenden Sie die von Compose for TV bereitgestellten Funktionen, um eine Benutzeroberfläche zum Durchsuchen von Musik oder Videos aus dem Medienkatalog Ihrer App zu 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 Medienkatalog-Browser:

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

CatalogBrowser ist die zusammensetzbare Funktion, die den Medienkatalog-Browser implementiert. Die Funktion akzeptiert folgende Argumente:

• Liste der empfohlenen Inhalte.
• Liste der Abschnitte.
• Ein Modifier-Objekt.
• Eine Callback-Funktion, die einen Bildschirmwechsel 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 bereitstellt. 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt

Im Beispiel wird mit der zusammensetzbaren Funktion SectionRow definiert, wie Abschnitte angezeigt werden. In der folgenden Funktion wird mit LazyRow gezeigt, wie diese horizontale Version von LazyColumn ähnlich verwendet wird, um eine horizontale Liste mit einem LazyListScope.() -> Unit-Block zu definieren, indem die bereitgestellte DSL aufgerufen wird:

@Composable
fun SectionRow(
    section: Section,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    Text(
        text = section.title,
        style = MaterialTheme.typography.headlineSmall,
    )
    MovieCatalog(
        section.movieList,
        onClick = { movie -> onItemSelected(movie) },
        modifier
    )
}
TvMoviesActivity.kt

@Composable
fun MovieCatalog(
    movies: List<Movie>,
    onClick: (Movie) -> Unit,
    modifier: Modifier = Modifier,
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(movies.size) { index ->
            val movie = movies[index]
            MovieCard(
                movie = movie,
                onClick = { onClick(movie) }
            )
        }
    }
}
TvMoviesActivity.kt

In der zusammensetzbaren Funktion SectionRow wird die Komponente Text verwendet. Text und andere in Material Design definierte Komponenten werden in der tv-material-Bibliothek angeboten . Sie können den Stil der Texte wie in Material Design definiert ändern, indem Sie auf das Objekt MaterialTheme 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. Dies wird im folgenden Snippet definiert:

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

Empfohlene Inhalte hervorheben

Im oben beschriebenen Beispiel werden alle Filme gleich dargestellt. Sie haben dieselbe Fläche und es gibt keinen visuellen Unterschied zwischen ihnen. Sie können einige davon mit Carousel hervorheben.

Im Karussell werden die Informationen in einer Reihe von Elementen angezeigt, die eingeblendet 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 erwartet, dass du mindestens die Anzahl der Elemente im Karussell angibst und wie jedes Element dargestellt werden soll. Der erste kann mit itemCount angegeben werden. Das zweite kann als Lambda übergeben werden. Die Indexnummer des angezeigten Elements wird an den Lambda-Ausdruck übergeben. Sie können das angezeigte Element mit dem angegebenen Indexwert bestimmen:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}
TvMoviesActivity.kt

Carousel kann ein Element einer Lazy List sein, z. B. LazyColumn. Das folgende Snippet zeigt das Composable FeaturedCarousel über allen SectionRow-Composables:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt