Aplikacja do multimediów uruchamiana na telewizorze musi umożliwiać użytkownikom przeglądanie ofert, wybieranie treści i rozpoczynanie odtwarzania. Przeglądanie treści w tego typu aplikacjach powinno być proste i intuicyjne, a także przyjemne dla oka i wciągające.
W tej sekcji opisujemy, jak używać funkcji dostępnych w funkcji Utwórz na telewizory do implementacji interfejsu do przeglądania muzyki i filmów z katalogu multimediów aplikacji.
Przeglądarka katalogu multimediów składa się zwykle z kilku sekcji, a każda z nich zawiera listę treści multimedialnych. Przykłady sekcji w katalogu multimediów: playlisty, polecane treści, polecane kategorie,
Tworzenie funkcji kompozycyjnej dla katalogu
Wszystko, co znajduje się na ekranie, jest implementowane jako funkcja kompozycyjna w przypadku YouTube TV. Zaczniesz od zdefiniowania funkcji kompozycyjnej dla przeglądarki katalogu multimediów w postaci tego fragmentu kodu:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser to funkcja kompozycyjna implementująca przeglądarkę katalogu multimediów. Funkcja przyjmuje te argumenty:
- Lista polecanych treści.
- Lista sekcji.
- Obiekt modyfikatora.
- Funkcja wywołania zwrotnego, która uruchamia przejście ekranu.
Ustawianie elementów interfejsu
Funkcja tworzenia wiadomości na telewizory udostępnia leniwe listy, czyli komponent służący do wyświetlania dużej liczby elementów (lub list o nieznanej długości). Wywołaj metodę TvLazyColumn, aby umieścić sekcje w pionie. TvLazyColumn udostępnia blok TvLazyListScope.() -> Unit, który umożliwia definiowanie zawartości elementu za pomocą DSL. W poniższym przykładzie każda sekcja jest umieszczona na pionowej liście z odstępem między sekcjami wynoszącym 16 dp.
@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)
}
}
}
W przykładzie funkcja kompozycyjna Section określa sposób wyświetlania sekcji.
W poniższej funkcji TvLazyRow pokazuje, jak ta pozioma wersja TvLazyColumn jest podobnie używana do definiowania poziomej listy z blokiem TvLazyListScope.() -> Unit przez wywołanie podanego DSL.
@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) }
)
}
}
}
W komponencie Section używany jest komponent Text.
Tekst i inne komponenty
zdefiniowane w stylu Material Design są dostępne w bibliotece materiałów tv . Styl tekstu określony w stylu Material Design możesz zmienić, odwołując się do obiektu MaterialTheme.
Ten obiekt jest też udostępniany przez bibliotekę tv-material.
MovieCard określa sposób renderowania danych każdego filmu w katalogu zdefiniowanym w podanym niżej fragmencie.
Card wchodzi też w skład biblioteki materiałów telewizyjnych.
@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.
Obejmują one ten sam obszar, nie widać różnic między nimi.
Niektóre z nich możesz wyróżnić za pomocą ikony Carousel.
Karuzela wyświetla informacje w formie zbioru elementów, które można przesuwać, zanikać i przesuwać w widoku. Służy on do wyróżniania polecanych treści, takich jak nowo dostępne filmy czy nowe odcinki programów telewizyjnych.
Carousel wymaga co najmniej sprecyzowania liczby elementów w karuzeli oraz sposobu rysowania poszczególnych elementów. Pierwsze można określić za pomocą funkcji itemCount. Drugi można przekazać jako lambda. Funkcja lambda otrzymuje numer indeksu wyświetlanego elementu. Wyświetlany element można określić za pomocą danej wartości 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.
Poniższy fragment kodu pokazuje funkcję FeaturedCarousel kompozycyjną, która znajduje się nad wszystkimi elementami kompozycyjnymi 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)
}
}
}