สร้างเบราว์เซอร์แคตตาล็อก

แอปสื่อที่ทำงานบนทีวีต้องอนุญาตให้ผู้ใช้เรียกดูเนื้อหาที่นำเสนอ ทำการเลือก และเริ่มเล่นเนื้อหาได้ ประสบการณ์การเรียกดูเนื้อหาสำหรับแอปประเภทนี้ควรใช้งานง่าย มีภาพที่น่าสนใจและดึงดูดใจ

เบราว์เซอร์แคตตาล็อกมักประกอบด้วยหลายส่วน และแต่ละส่วนจะมีรายการเนื้อหาสื่อ ตัวอย่างส่วนต่างๆ ในแคตตาล็อกสื่อ ได้แก่ เพลย์ลิสต์ เนื้อหาที่โดดเด่น หมวดหมู่ที่แนะนำ

รูปที่ 1 หน้าจอแคตตาล็อกทั่วไป ผู้ใช้จะเรียกดูข้อมูลแคตตาล็อกวิดีโอได้

ใช้ฟังก์ชันที่ Compose สำหรับ TV มีให้เพื่อสร้างอินเทอร์เฟซผู้ใช้สำหรับการเรียกดูเพลงหรือวิดีโอจากแคตตาล็อกสื่อของแอป

สร้างฟังก์ชันที่ประกอบกันได้สำหรับแคตตาล็อก

ทุกอย่างที่ปรากฏบนจอแสดงผลจะใช้เป็นฟังก์ชันที่ประกอบกันได้ใน Compose สำหรับ TV เริ่มต้นด้วยการกำหนดฟังก์ชันที่ประกอบกันได้สำหรับเบราว์เซอร์แคตตาล็อกสื่อ

@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    // ToDo: add implementation
}
TvMoviesActivity.kt

CatalogBrowser คือฟังก์ชันที่ประกอบกันได้ซึ่งใช้เบราว์เซอร์แคตตาล็อกสื่อของคุณ ฟังก์ชันจะรับอาร์กิวเมนต์ต่อไปนี้

• รายการเนื้อหาที่โดดเด่น
• รายการส่วน
• ออบเจ็กต์ Modifier
• ฟังก์ชัน Callback ซึ่งจะทริกเกอร์การเปลี่ยนหน้าจอ

ตั้งค่าองค์ประกอบ UI

Compose สำหรับ TV มี Lazy List ซึ่งเป็นคอมโพเนนต์สำหรับแสดงรายการจำนวนมาก (หรือรายการที่มีความยาวไม่แน่นอน) เรียกใช้ 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt

ในตัวอย่าง ฟังก์ชันที่ประกอบกันได้ SectionRow จะกำหนดวิธีแสดงส่วนต่างๆ ในฟังก์ชันต่อไปนี้ LazyRow แสดงให้เห็นว่าLazyColumn เวอร์ชันแนวนอนนี้ใช้เพื่อกำหนดรายการแนวนอนที่มีบล็อก LazyListScope.() -> Unit ในลักษณะเดียวกันได้อย่างไรโดยการเรียกใช้ DSL ที่มีให้

@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
    )
}
TvMoviesActivity.kt

@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) }
            )
        }
    }
}
TvMoviesActivity.kt

ใน Composable SectionRow ระบบจะใช้คอมโพเนนต์ Text ข้อความและคอมโพเนนต์อื่นๆ ที่กำหนดไว้ใน Material Design มีให้บริการในคลัง tv-material คุณเปลี่ยนรูปแบบของข้อความตามที่กำหนดไว้ใน Material Design ได้โดยอ้างอิงออบเจ็กต์ MaterialTheme ออบเจ็กต์นี้ยังมีอยู่ในไลบรารี tv-material ด้วย Card เป็นส่วนหนึ่งของไลบรารี tv-material MovieCard กำหนดวิธีแสดงผลข้อมูลภาพยนตร์แต่ละเรื่องในแคตตาล็อกที่กำหนดเป็นตัวอย่างโค้ดต่อไปนี้

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

หมายเหตุ: AsyncImage เป็น Composable ที่โหลดรูปภาพจากอินเทอร์เน็ต ดูรายละเอียดได้ที่การโหลดรูปภาพ

ไฮไลต์เนื้อหาที่โดดเด่น

ในตัวอย่างที่อธิบายไว้ก่อนหน้านี้ ภาพยนตร์ทั้งหมดจะแสดงอย่างเท่าเทียมกัน ทั้ง 2 รายการมีพื้นที่เท่ากันและไม่มีความแตกต่างที่มองเห็นได้ คุณสามารถไฮไลต์บางรายการด้วย Carousel

ภาพสไลด์จะแสดงข้อมูลในชุดรายการที่เลื่อน เลือนหาย หรือย้ายเข้ามาในมุมมองได้ คุณใช้คอมโพเนนต์เพื่อไฮไลต์เนื้อหาที่โดดเด่น เช่น ภาพยนตร์ที่เพิ่งพร้อมให้บริการหรือตอนใหม่ของรายการทีวี

Carousel คาดหวังให้คุณระบุจำนวนรายการที่ภาพสไลด์มีและวิธีวาดแต่ละรายการเป็นอย่างน้อย คุณระบุรายการแรกได้ด้วย itemCount ส่วนอาร์กิวเมนต์ที่ 2 สามารถส่งเป็น lambda ได้ ระบบจะระบุหมายเลขดัชนีของรายการที่แสดงให้กับ Lambda คุณสามารถกำหนดรายการที่แสดงด้วยค่าดัชนีที่ระบุได้ดังนี้

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}
TvMoviesActivity.kt

Carousel อาจเป็นรายการของ Lazy List เช่น LazyColumn ข้อมูลโค้ดต่อไปนี้แสดง Composable ของ FeaturedCarousel ที่ด้านบนของ Composable ของ SectionRow ทั้งหมด

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt