在电视上运行的媒体应用需要允许用户浏览其内容 然后进行选择,然后开始播放内容。内容浏览 为此类应用提供简单、直观且直观的 令人愉悦且引人入胜。
媒体目录浏览器通常由多个部分组成 具有媒体内容列表。媒体目录中的部分示例包括: 播放列表、精选内容和推荐类别
![](https://developer.android.google.cn/static/training/tv/images/compose-catalogbrowser-example.png?authuser=6&hl=nb)
使用 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 提供延迟列表,这是一个用于显示大型
项数量(或长度未知的列表)。致电
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
可组合函数定义了如何显示各个部分。
在以下函数中,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
组件。
文本和其他组件
均在 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,
)
}
}
突出显示精选内容
在前面描述的示例中,所有电影都以同等方式显示。
它们的区域相同,但视觉上并无差别。
您可以使用 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
。
以下代码段显示了 FeaturedCarousel
可组合项,位于
所有 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)
}
}
}