Membuat browser katalog

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

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

Gambar 1. Layar katalog standar. Pengguna dapat menjelajahi data katalog video.

Gunakan fungsi yang disediakan oleh Compose untuk TV guna mengimplementasikan antarmuka 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. Mulailah dengan menentukan fungsi 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 mengimplementasikan browser katalog media Anda. Fungsi ini menggunakan 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 banyak item (atau daftar dengan panjang yang tidak diketahui). Panggil LazyColumn untuk menempatkan bagian secara vertikal. LazyColumn menyediakan blok LazyListScope.() -> Unit, yang menawarkan DSL untuk menentukan konten item. Dalam contoh berikut, setiap bagian ditempatkan dalam daftar vertikal dengan celah 16 dp di antara bagian:

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

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

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

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

Dalam composable SectionRow, komponen Text digunakan. Teks dan komponen lain yang ditentukan dalam Desain Material ditawarkan di library tv-material . Anda dapat mengubah gaya teks seperti yang ditentukan dalam Desain Material dengan merujuk ke objek MaterialTheme. Objek ini juga disediakan oleh library tv-material. Card adalah bagian dari library tv-material. MovieCard menentukan cara setiap data film dirender dalam katalog yang ditentukan sebagai cuplikan berikut:

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

Menyoroti konten unggulan

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

Carousel menampilkan informasi dalam kumpulan item yang dapat digeser, dipudarkan, atau dipindahkan ke tampilan. Anda menggunakan komponen ini untuk menandai konten unggulan, seperti film yang baru tersedia atau episode baru program TV.

Carousel mengharuskan Anda menentukan setidaknya jumlah item yang dimiliki Carousel dan cara menggambar setiap item. Yang pertama dapat ditentukan dengan itemCount. Yang kedua dapat diteruskan sebagai lambda. Nomor indeks item yang ditampilkan diberikan ke lambda. Anda dapat menentukan item yang ditampilkan dengan nilai indeks yang diberikan:

Carousel dapat berupa item daftar lambat, seperti LazyColumn. Cuplikan berikut menunjukkan composable FeaturedCarousel di atas semua composable SectionRow:

Sebelumnya
Membuat tata letak TV
Berikutnya
Membuat layar detail