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