建立目錄瀏覽器

在電視上執行的媒體應用程式必須允許使用者瀏覽其提供的內容、進行選取，並開始播放內容。這類應用程式的內容瀏覽體驗應直覺、視覺效果良好且引人入勝。

目錄瀏覽器通常包含多個部分，每個部分都有媒體內容清單。媒體目錄中的部分範例包括：播放清單、精選內容、推薦類別。

圖 1. 一般目錄畫面。使用者可以瀏覽影片目錄資料。

使用 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 是實作媒體目錄瀏覽器的可組合函式。這個函式會採用下列引數：

  • 精選內容清單。
  • 各節清單。
  • Modifier 物件。
  • 回呼函式，會觸發畫面轉換。

設定 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}

在範例中，SectionRow 可組合函式定義了如何顯示各個部分。在下列函式中，LazyRow 示範如何透過呼叫提供的 DSL，使用 LazyListScope.() -> Unit 區塊定義水平清單，這與 LazyColumn 的水平版本類似：

@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
    )
}

@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) }
            )
        }
    }
}

在 SectionRow 可組合函式中，使用 Text 元件。tv-material 程式庫提供 Material Design 中定義的文字和其他元件。您可以參照 MaterialTheme 物件，變更 Material Design 定義的文字樣式。這個物件也由 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,
        )
    }
}

醒目顯示精選內容

在上述範例中，所有電影的顯示方式都相同。兩者面積相同，視覺上沒有差異。您可以使用 Carousel 醒目顯示其中一些。

輪轉介面會以一組項目的形式顯示資訊，這些項目可以滑動、淡出或移入檢視畫面。您可以使用這個元件醒目顯示精選內容，例如新上架的電影或電視節目新集數。

Carousel 預期您至少指定 Carousel 的項目數量，以及如何繪製每個項目。第一個可以使用 itemCount 指定。第二個可以 lambda 形式傳遞。顯示項目的索引編號會提供給 lambda。您可以使用指定的索引值，決定要顯示的項目：

Carousel 可以是 Lazy 清單的項目，例如 LazyColumn。下列程式碼片段顯示位於所有 SectionRow 可組合項上方的 FeaturedCarousel 可組合項：

上一頁
打造電視版面配置
下一頁
建構詳細資料畫面