在 TV 上运行的媒体应用需要允许用户浏览其提供的内容、进行选择以及开始播放内容。此类应用的内容浏览体验应简单直观,并具有视觉吸引力和吸引力。
本部分介绍了如何使用 Compose for TV 提供的函数实现一个界面,该界面用于从应用的媒体目录中浏览音乐或视频。
媒体目录浏览器往往由多个部分组成,每个部分都有一个媒体内容列表。媒体目录中的版块示例包括:播放列表、精选内容、推荐类别
为目录创建可组合函数
屏幕上显示的所有内容在 Compose for TV 中以可组合函数的形式实现。首先,为媒体目录浏览器定义一个可组合函数,如以下代码段所示:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
是实现媒体目录浏览器的可组合函数。该函数采用以下参数:
- 精选内容列表。
- 部分列表。
- 修饰符对象。
- 用于触发屏幕转换的回调函数。
设置界面元素
Compose for TV 提供了延迟列表,即用于显示大量项(或长度未知的列表)的组件。您将调用 TvLazyColumn
来垂直放置部分。TvLazyColumn
提供了一个 TvLazyListScope.() -> Unit
块,该块提供用于定义内容内容的 DSL。在以下示例中,每个部分放置在一个垂直列表中,各部分之间有 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)
}
}
}
在此示例中,Section
可组合函数定义了如何显示部分。在以下函数中,TvLazyRow
演示了如何通过调用提供的 DSL,通过此水平版本的 TvLazyColumn
以类似的方式使用 TvLazyListScope.() -> Unit
代码块定义水平列表。
@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) }
)
}
}
}
在 Section
可组合项中,使用了 Text
组件。Material Design 中定义的文本和其他组件在 tv-material 库中提供。您可以通过引用 MaterialTheme
对象来更改 Material Design 中定义的文本样式。此对象也由 tv-material 库提供。MovieCard
定义了每项电影数据在以下代码段定义的目录中呈现的方式。Card
也是 tv-material 库的一部分。
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
突出显示精选内容
在前述示例中,所有电影均以同样的方式显示。它们的面积相同,在外观上没有区别。
您可以使用 Carousel
突出显示其中的一些内容。
轮播界面用于在一组可以滑动、淡出或进入视图的项目中显示信息。您可以使用该组件突出显示精选内容,例如新上映的电影或新的电视节目剧集。
Carousel
要求您至少指定轮播界面包含的项数以及每个项的绘制方式。第一项可以使用 itemCount
指定。第二个代码可以作为 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
可以是延迟列表中的项,例如 TvLazyColumn
。以下代码段会在所有 Section
可组合项之上显示 FeaturedCarousel
可组合项。
@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)
}
}
}