在電視上執行的媒體應用程式必須允許使用者瀏覽內容、做出選擇，然後開始播放內容。這類應用程式的內容瀏覽體驗應簡單、直覺，且具有吸引力和視覺吸引力。
媒體目錄瀏覽器通常包含多個部分，每個部分都有媒體內容清單。媒體目錄中的部分可分為播放清單、精選內容和推薦類別。
使用 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 會示範如何透過呼叫提供的 DSL，以類似方式使用這個水平版本的 LazyColumn 來定義含有 LazyListScope.() -> Unit 區塊的水平清單：
@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 物件，變更 Material Design 中定義的文字樣式。這個物件也是由 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 預期您至少會指定 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)
}
}
}