Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

カタログブラウザを作成する

テレビで使用するメディアアプリでは、ユーザーが提供コンテンツをブラウズして選び、再生を開始できるようにする必要があります。このタイプのアプリのコンテンツブラウジングに関するユーザーエクスペリエンスは、直観的で、目を楽しませる魅力的なものである必要があります。

カタログブラウザは通常、複数のセクションで構成され、各セクションにはメディアコンテンツのリストが含まれています。メディアカタログのセクションの例としては、プレイリスト、おすすめコンテンツ、おすすめカテゴリなどがあります。

**図 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
}TvMoviesActivity.kt

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)
        }
    }
}TvMoviesActivity.kt

この例では、SectionRow コンポーズ可能な関数でセクションの表示方法を定義しています。次の関数では、LazyRow は、 LazyColumn のこの横方向バージョンと同様に LazyListScope.() -> Unit ブロックを使用して横方向のリストを定義する方法を示しています。

@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
    )
}TvMoviesActivity.kt

@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) }
            )
        }
    }
}TvMoviesActivity.kt

SectionRow コンポーズ可能関数では、Text コンポーネントが使用されます。マテリアルデザインで定義されたテキストやその他のコンポーネントは、tv-material ライブラリで提供されています。`MaterialTheme` オブジェクトを参照することで、マテリアルデザインで定義されているテキストのスタイルを変更できます。このオブジェクトも 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,
        )
    }
}TvMoviesActivity.kt

おすすめコンテンツをハイライト表示する

前述の例では、すべての映画が同じように表示されます。領域は同じで、視覚的な違いはありません。 Carousel を使用して、一部をハイライト表示できます。

カルーセルには、スライド、フェード、またはビューに移動できるアイテムのセットで情報が表示されます。このコンポーネントを使用して、新しく公開された映画やテレビ番組の新しいエピソードなど、注目のコンテンツをハイライト表示します。

Carousel では、カルーセルに表示するアイテムの数と、各アイテムの描画方法を指定する必要があります。最初のアイテムは itemCount で指定できます。2 つ目のアイテムはラムダとして渡すことができます。表示されるアイテムのインデックス番号がラムダに渡されます。指定されたインデックス値を使用して、表示されるアイテムを決定できます。

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}TvMoviesActivity.kt

Carousel は、LazyColumn などの Lazy リストのアイテムにすることができます。次のスニペットは、すべての SectionRow コンポーズ可能関数の上にある FeaturedCarousel コンポーズ可能関数を示しています。

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}TvMoviesActivity.kt

このガイドの内容

詳細画面を作成する

カタログ ブラウザを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

カタログ用のコンポーズ可能な関数を作成する

UI 要素を設定する

おすすめコンテンツをハイライト表示する

カタログブラウザを作成する