Tworzenie przeglądarki katalogu

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.

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