แอปสื่อที่ทำงานบนทีวีต้องอนุญาตให้ผู้ใช้เรียกดูเนื้อหาของตัวเองได้ นำเสนอ เลือกแล้ว และเริ่มเล่นเนื้อหา การเรียกดูเนื้อหา แอปประเภทนี้ควรเรียบง่าย ใช้งานง่าย และมีรูปลักษณ์ น่าพอใจและน่าสนใจ
เบราว์เซอร์แคตตาล็อกสื่อมีแนวโน้มที่จะประกอบด้วยส่วนต่างๆ และแต่ละส่วน มีรายการเนื้อหาสื่อ ตัวอย่างส่วนต่างๆ ในแคตตาล็อกสื่อ ได้แก่ เพลย์ลิสต์ เนื้อหาเด่น หมวดหมู่ที่แนะนำ
![](https://developer.android.com/static/training/tv/images/compose-catalogbrowser-example.png?hl=th)
ใช้ฟังก์ชันของ Compose สำหรับทีวีเพื่อนำผู้ใช้ไปใช้ สำหรับเรียกดูเพลงหรือวิดีโอจากแคตตาล็อกสื่อของแอป
สร้างฟังก์ชันที่ประกอบกันได้สำหรับแคตตาล็อก
ทุกอย่างที่ปรากฏบนจอแสดงผลจะใช้เป็นฟังก์ชันที่ประกอบกันได้ใน Compose สำหรับทีวี เริ่มต้นด้วยการกำหนด Composable ฟังก์ชันสำหรับเบราว์เซอร์แคตตาล็อกสื่อ:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
เป็นฟังก์ชัน Composable ที่ใช้แคตตาล็อกสื่อ
เบราว์เซอร์ ฟังก์ชันมีอาร์กิวเมนต์ต่อไปนี้
- รายการเนื้อหาเด่น
- รายการส่วน
- ออบเจ็กต์ตัวปรับแต่ง
- ฟังก์ชัน Callback ซึ่งจะทริกเกอร์การเปลี่ยนหน้าจอ
ตั้งค่าองค์ประกอบ UI
Compose สำหรับทีวีจะมีรายการแบบ Lazy Loading ซึ่งเป็นองค์ประกอบในการแสดง
จำนวนรายการ (หรือรายการที่ไม่ทราบความยาว) โทร
LazyColumn
เพื่อวางส่วนต่างๆ ในแนวตั้ง LazyColumn
มอบ
LazyListScope.() -> Unit
ซึ่งนำเสนอ DSL เพื่อกำหนดเนื้อหาของรายการ ในตัวอย่างต่อไปนี้
แต่ละส่วนจะอยู่ในรายการแนวตั้งที่มีช่องว่าง 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)
}
}
}
ในตัวอย่างนี้ ฟังก์ชัน Composable ของ Section
จะกำหนดวิธีแสดงส่วนต่างๆ
ในฟังก์ชันต่อไปนี้ LazyRow
จะสาธิตวิธีใช้
LazyColumn
เวอร์ชันแนวนอนคล้ายกับ
กำหนดรายการแนวนอนด้วยบล็อก LazyListScope.() -> Unit
ด้วยการเรียก
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) }
)
}
}
}
ใน Composable Section
จะใช้คอมโพเนนต์ Text
ข้อความและองค์ประกอบอื่นๆ
มีระบุไว้ใน ดีไซน์ Material ใน ไลบรารีวัสดุของทีวี คุณสามารถ
เปลี่ยนข้อความ" สไตล์ตามที่นิยามไว้ในดีไซน์ Material โดยอ้างถึง
MaterialTheme
ออบเจ็กต์นี้มาจากไลบรารีวัสดุทีวีด้วย
Card
เป็นส่วนหนึ่งของคลังเนื้อหาทีวี
MovieCard
กำหนดวิธีแสดงข้อมูลภาพยนตร์แต่ละเรื่องในแคตตาล็อกที่กำหนด
เป็นข้อมูลโค้ดต่อไปนี้
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
ไฮไลต์เนื้อหาเด่น
ในตัวอย่างที่อธิบายก่อนหน้านี้ ภาพยนตร์ทุกเรื่องจะแสดงเท่าๆ กัน
ซึ่งมีพื้นที่เดียวกันและไม่มีความแตกต่างด้านการมองเห็น
คุณสามารถไฮไลต์ข้อความบางส่วนได้โดยใช้ Carousel
ภาพหมุนจะแสดงข้อมูลในชุดรายการที่สามารถเลื่อน จางลง หรือ ย้ายไปอยู่ในมุมมอง คุณใช้คอมโพเนนต์เพื่อไฮไลต์เนื้อหาเด่น เช่น ภาพยนตร์ที่ออกใหม่หรือตอนใหม่ของรายการทีวี
Carousel
คาดหวังให้คุณระบุจำนวนรายการที่ Carousel มีและวิธีการ
วาดแต่ละรายการ หมายเลขแรกระบุได้ด้วย itemCount
อันที่ 2
ก็สามารถส่งผ่านเป็นแลมบ์ดาได้ หมายเลขดัชนีของรายการที่แสดงคือ
ที่มอบให้แก่แลมบ์ดา คุณสามารถกำหนดรายการที่จะแสดงด้วย
ค่าดัชนีที่กำหนด:
@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
อาจเป็นรายการของลิสต์แบบ Lazy Loading เช่น TvLazyColumn
ข้อมูลโค้ดต่อไปนี้แสดง FeaturedCarousel
Composable ที่ด้านบนของ
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)
}
}
}