แอปสื่อที่ทำงานบนทีวีต้องอนุญาตให้ผู้ใช้เรียกดูข้อเสนอเนื้อหา เลือก และเริ่มเล่นเนื้อหา ประสบการณ์ในการเรียกดูเนื้อหาสำหรับแอปประเภทนี้ควรเรียบง่าย ใช้งานง่าย ดึงดูดสายตา และน่าสนใจ
เครื่องมือเลือกแคตตาล็อกสื่อมักจะประกอบด้วยหลายส่วน และแต่ละส่วนจะมีรายการเนื้อหาสื่อ ตัวอย่างส่วนต่างๆ ในแคตตาล็อกสื่อ ได้แก่ เพลย์ลิสต์ เนื้อหาแนะนำ หมวดหมู่แนะนำ
ใช้ฟังก์ชันของ Compose สำหรับทีวีเพื่อใช้อินเทอร์เฟซผู้ใช้สำหรับเรียกดูเพลงหรือวิดีโอจากแคตตาล็อกสื่อของแอป
สร้างฟังก์ชันที่ประกอบกันได้สําหรับแคตตาล็อก
ทุกอย่างที่ปรากฏในจอแสดงผลจะใช้เป็นฟังก์ชัน Composable ใน Compose สำหรับทีวี เริ่มต้นด้วยการกำหนดฟังก์ชัน Composable สำหรับเบราว์เซอร์แคตตาล็อกสื่อ ดังนี้
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
คือฟังก์ชันที่ประกอบกันได้ซึ่งใช้แคตตาล็อกสื่อของคุณในเบราว์เซอร์ ฟังก์ชันนี้ใช้อาร์กิวเมนต์ต่อไปนี้
- รายการเนื้อหาเด่น
- รายชื่อส่วน
- ออบเจ็กต์ตัวแก้ไข
- ฟังก์ชัน 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)
}
}
}
ในตัวอย่างนี้ Section
ฟังก์ชัน Composable จะกำหนดวิธีแสดงส่วนต่างๆ
ในฟังก์ชันต่อไปนี้ 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) }
)
}
}
}
ในคอมโพสิเบิล Section
จะใช้คอมโพเนนต์ Text
ข้อความและคอมโพเนนต์อื่นๆ ที่กําหนดไว้ใน Material Design มีอยู่ในคลัง tv-material คุณสามารถเปลี่ยนสไตล์ข้อความตามที่ระบุไว้ใน Material Design ได้โดยอ้างอิงถึงออบเจ็กต์ MaterialTheme
ออบเจ็กต์นี้มาจากคลัง tv-material ด้วย
Card
เป็นส่วนหนึ่งของคลัง tv-material
MovieCard
กำหนดวิธีแสดงข้อมูลภาพยนตร์แต่ละเรื่องในแคตตาล็อกตามที่กำหนดไว้เป็นข้อมูลโค้ดต่อไปนี้
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
ไฮไลต์เนื้อหาแนะนำ
ในตัวอย่างที่อธิบายก่อนหน้านี้ ภาพยนตร์ทั้งหมดจะแสดงเท่าๆ กัน
พื้นที่ของทั้ง 2 รายการเหมือนกัน ไม่มีความแตกต่างที่มองเห็นได้
คุณสามารถไฮไลต์รายการที่ต้องการได้โดยใช้ Carousel
ภาพสไลด์จะแสดงข้อมูลในชุดรายการที่เลื่อน เลือน หรือย้ายเข้ามาในมุมมองได้ คุณใช้คอมโพเนนต์นี้เพื่อไฮไลต์เนื้อหาแนะนำ เช่น ภาพยนตร์ที่เพิ่งมีให้รับชมหรือตอนใหม่ของรายการทีวี
Carousel
คาดหวังให้คุณระบุจำนวนรายการที่ภาพสไลด์มีและวิธีวาดแต่ละรายการเป็นอย่างน้อย คุณสามารถระบุรายการแรกด้วย itemCount
องค์ประกอบที่ 2
สามารถส่งเป็น lambda ได้ ระบบจะส่งหมายเลขดัชนีของรายการที่แสดงไปยัง Lambda คุณระบุรายการที่แสดงด้วยค่าดัชนีที่ระบุได้ดังนี้
@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)
}
}
}