Katalogbrowser erstellen

Eine Media-App, die auf einem Fernseher ausgeführt wird, muss es Nutzern ermöglichen, die Inhalte zu durchsuchen, eine Auswahl zu treffen und die Wiedergabe zu starten. Die Suche nach Inhalten in Apps dieser Art sollte intuitiv, visuell ansprechend und fesselnd sein.

Katalogbrowser bestehen 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 Benutzeroberfläche zum Durchsuchen von Musik oder Videos aus dem Media-Katalog Ihrer App implementieren.

Composable-Funktion für Katalog erstellen

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

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

CatalogBrowser ist die Composable-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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt

Im Beispiel definiert die Composable-Funktion SectionRow, 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 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 Composable-Funktion SectionRow wird die Komponente Text 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:

@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 zuvor 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 wie neu verfügbare Filme oder neue Folgen von TV-Sendungen hervorheben.

Carousel erfordert, dass Sie mindestens die Anzahl der Elemente im Carousel 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:

@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. TvLazyColumn. Das folgende Snippet zeigt die Composable-Funktion FeaturedCarousel über allen Composable-Funktionen SectionRow:

@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