Aplikacja do multimediów obsługiwana na telewizorze musi umożliwiać użytkownikom przeglądanie treści wybierz ofertę i zacznij odtwarzać treści. Przeglądanie treści korzystanie z aplikacji tego typu powinno być proste, intuicyjne i wizualne atrakcyjne i angażujące.
Przeglądarka katalogu multimediów składa się zwykle z kilku sekcji, a każda z nich ma listę treści multimedialnych. Przykłady sekcji w katalogu multimediów: playlisty, polecane treści, polecane kategorie.
![](https://developer.android.google.cn/static/training/tv/images/compose-catalogbrowser-example.png?authuser=6&hl=pl)
Użyj funkcji dostępnych w funkcji tworzenia wiadomości dla TV, by zaimplementować użytkownika interfejs do przeglądania muzyki lub filmów z katalogu multimediów aplikacji.
Tworzenie funkcji kompozycyjnej dla katalogu
Wszystko, co jest widoczne na ekranie, jest implementowane jako funkcja kompozycyjna w Utwórz wiadomość na telewizorze. Zacznij od zdefiniowania funkcji kompozycyjnej w przeglądarce katalogu multimediów:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
to funkcja kompozycyjna implementująca katalog multimediów
przeglądarki. Funkcja przyjmuje następujące argumenty:
- Lista polecanych treści.
- Lista sekcji.
- Obiekt modyfikatora.
- Funkcja wywołania zwrotnego, która aktywuje przejście ekranu.
Ustawianie elementów interfejsu
Funkcja tworzenia wiadomości na telewizorze udostępnia leniwe listy, czyli komponent do wyświetlania
liczby elementów (lub listy o nieznanej długości). Zadzwoń do nas
LazyColumn
w celu rozmieszczenia sekcji w pionie. LazyColumn
udostępnia
LazyListScope.() -> Unit
.
udostępnia blok DSL do definiowania treści elementu. W poniższym przykładzie
każda sekcja zostanie umieszczona na pionowej liście z odstępą 16 dp między sekcjami:
@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)
}
}
}
W przykładzie funkcja kompozycyjna Section
określa sposób wyświetlania sekcji.
W tej funkcji LazyRow
pokazuje, jak to działa
wersja pozioma LazyColumn
jest podobna do
zdefiniuj poziomą listę z blokiem LazyListScope.() -> Unit
, wywołując
podany 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) }
)
}
}
}
W funkcji kompozycyjnej Section
używany jest komponent Text
.
Tekst i inne komponenty
zdefiniowanych w Material Design są dostępne w bibliotece materiałów telewizyjnych . Dostępne opcje
zmień tekst zgodnie z definicją w stylu Material Design,
odwołując się do
MaterialTheme
.
Ten obiekt jest też udostępniany przez bibliotekę tv-material.
Card
jest częścią biblioteki materiałów telewizyjnych.
MovieCard
określa sposób renderowania danych każdego filmu w określonym katalogu
jako następujący fragment:
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
Wyróżnij polecane treści
W przykładzie opisanym wcześniej wszystkie filmy są wyświetlane tak samo.
Znajdują się w tym samym obszarze i nie różnią się wyglądem.
Niektóre z nich możesz wyróżnić za pomocą narzędzia Carousel
.
Karuzela wyświetla informacje w zestawie elementów, które można przesuwać, zanikać lub umieść je w widoku. Komponent służy do wyróżniania polecanych treści, np. nowo dostępnych filmów czy odcinków programów telewizyjnych.
Carousel
wymaga określenia co najmniej liczby elementów zawartych w karuzeli oraz sposobu
narysować każdy element. Pierwszą można określić za pomocą atrybutu itemCount
. Drugi
można przekazać jako lambda. Numer indeksu wyświetlanego elementu to
funkcji lambda. Wyświetlany element możesz określić za pomocą
podana wartość indeksu:
@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
może być elementem leniwej listy, np. TvLazyColumn
.
Ten fragment kodu pokazuje funkcję FeaturedCarousel
kompozycyjną nad
wszystkie kompozycje (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)
}
}
}