Membuat browser katalog

Aplikasi media yang berjalan di TV harus memungkinkan pengguna menjelajahi kontennya penawaran, membuat pilihan, dan mulai memutar konten. Penjelajahan konten untuk aplikasi jenis ini harus sederhana, intuitif, dan secara visual secara visual dan menarik.

Browser katalog media cenderung terdiri dari beberapa bagian, dan setiap bagian memiliki daftar konten media. Contoh bagian dalam katalog media meliputi: daftar putar, konten unggulan, kategori yang disarankan.

Gambar 1. Layar katalog pada umumnya. Pengguna dapat menjelajahi data katalog video.

Gunakan fungsi yang disediakan oleh Compose untuk TV guna menerapkan pengguna untuk menjelajahi musik atau video dari katalog media aplikasi Anda.

Membuat fungsi composable untuk katalog

Semua yang muncul di layar diimplementasikan sebagai fungsi composable di Compose untuk TV. Mulai dengan menentukan composable untuk browser katalog media:

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

CatalogBrowser adalah fungsi composable yang menerapkan katalog media Anda browser. Fungsi ini mengambil argumen berikut:

• Daftar konten unggulan.
• Daftar bagian.
• Objek Pengubah.
• Fungsi callback, yang memicu transisi layar.

Menyetel elemen UI

Compose untuk TV menawarkan daftar lambat, komponen untuk menampilkan jumlah item (atau daftar dengan panjang yang tidak diketahui). Telepon LazyColumn untuk menempatkan bagian secara vertikal. LazyColumn menyediakan LazyListScope.() -> Unit yang menawarkan DSL untuk mendefinisikan isi item. Dalam contoh berikut, setiap bagian ditempatkan dalam daftar vertikal dengan jarak antar-bagian 16 dp:

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

Dalam contoh, fungsi composable Section menentukan cara menampilkan bagian. Dalam fungsi berikut, LazyRow menunjukkan bagaimana hal ini versi horizontal LazyColumn juga digunakan untuk tentukan daftar horizontal dengan blok LazyListScope.() -> Unit dengan memanggil DSL yang disediakan:

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

Dalam composable Section, komponen Text digunakan. Teks dan komponen lainnya didefinisikan dalam Material Design ditawarkan di library tv-material . Anda dapat mengubah teks seperti yang didefinisikan dalam Material Design dengan mengacu pada Objek MaterialTheme. Objek ini juga disediakan oleh library tv-material. Card adalah bagian dari library materi tv. MovieCard menentukan cara setiap data film dirender dalam katalog yang ditentukan seperti cuplikan berikut:

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

Catatan: AsyncImage adalah composable yang memuat gambar dari internet. Lihat Memuat Gambar untuk mengetahui detailnya.

Soroti konten unggulan

Dalam contoh yang dijelaskan sebelumnya, semua film ditampilkan secara merata. Keduanya memiliki area yang sama, tidak ada perbedaan visual di antara keduanya. Anda dapat menandai beberapa di antaranya dengan Carousel.

Carousel menampilkan informasi dalam sekumpulan item yang dapat bergeser, memudar, atau masuk ke tampilan. Anda menggunakan komponen ini untuk menyoroti konten unggulan, seperti film atau episode baru dari program TV yang tersedia.

Carousel mengharapkan Anda untuk setidaknya menentukan jumlah item yang dimiliki {i>Carousel<i} dan bagaimana caranya menggambar setiap item. Yang pertama dapat ditentukan dengan itemCount. Yang kedua bisa diteruskan sebagai lambda. Nomor indeks item yang ditampilkan adalah yang diberikan ke lambda. Anda dapat menentukan item yang ditampilkan dengan nilai indeks yang diberikan:

@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 dapat menjadi item dari daftar lambat, seperti TvLazyColumn. Cuplikan berikut menampilkan composable FeaturedCarousel di atas semua composable 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)
    }
  }
}