在電視上執行的媒體應用程式必須允許使用者瀏覽內容 優惠,任選一個,即可開始播放內容。內容瀏覽 提供簡單直覺、符合直覺的應用程式體驗 以及參與度高低
媒體目錄瀏覽器通常由多個部分組成,每個部分 包含多個媒體內容清單媒體目錄中的版面範例如下: 播放清單、精選內容、推薦類別
![](https://developer.android.com/static/training/tv/images/compose-catalogbrowser-example.png?authuser=9&hl=zh-tw)
使用 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
是實作媒體目錄的可組合函式
。這個函式採用下列引數:
- 精選內容清單。
- 版面清單。
- 修飾符物件。
- 回呼函式,用於觸發畫面轉換。
設定 UI 元素
Compose for TV 提供 Lazy 清單,這是用來顯示大型
項目數量 (或長度未知的清單)。致電
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 定義的定義清單。你可以
變更文字。請參閱 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
可以是 Lazy 清單的項目,例如 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)
}
}
}