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 sederhana, intuitif, serta menyenangkan dan menarik secara visual.
Browser katalog media cenderung terdiri dari beberapa bagian, dan setiap bagian memiliki daftar konten media. Contoh bagian dalam katalog media mencakup: playlist, konten unggulan, kategori yang direkomendasikan.
![](https://developer.android.google.cn/static/training/tv/images/compose-catalogbrowser-example.png?authuser=4&hl=id)
Gunakan fungsi yang disediakan oleh Compose untuk TV guna menerapkan antarmuka pengguna untuk menjelajahi musik atau video dari katalog media aplikasi Anda.
Membuat fungsi composable untuk katalog
Semua yang muncul di layar diterapkan sebagai fungsi composable di Compose untuk TV. Mulai 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 menerapkan browser katalog
media Anda. 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, yaitu komponen untuk menampilkan
item dalam jumlah besar (atau daftar yang panjangnya tidak diketahui). Panggil
TvLazyColumn
untuk menempatkan bagian secara vertikal. TvLazyColumn
menyediakan
blok TvLazyListScope.() -> Unit
, yang menawarkan DSL untuk menentukan konten item. Pada 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 = {},
) {
TvLazyColumn(
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, TvLazyRow
menunjukkan bagaimana
versi horizontal TvLazyColumn
ini juga digunakan untuk
menentukan daftar horizontal dengan blok TvLazyListScope.() -> 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,
)
TvLazyRow(
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 lain
yang ditentukan dalam Desain Material ditawarkan di library material tv . 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 materi tv.
MovieCard
menentukan cara setiap data film dirender dalam katalog yang ditentukan
sebagai cuplikan berikut:
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
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 bergerak ke tampilan. Anda menggunakan komponen ini untuk menyoroti konten unggulan, seperti film yang baru tersedia atau episode baru program TV.
Carousel
mengharapkan Anda untuk setidaknya menentukan 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 kepada 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 menunjukkan 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)
}
}
}