テレビで動作するメディアアプリでは、ユーザーがコンテンツ サービスをブラウジングし、選択を行い、コンテンツの再生を開始できるようにする必要があります。このタイプのアプリのコンテンツ ブラウジング エクスペリエンスは、シンプルで直感的、視覚的に魅力的で魅力的なものである必要があります。
このセクションでは、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 には、多数のアイテム(または長さが不明のリスト)を表示するコンポーネントである遅延リストが用意されています。TvLazyColumn
を呼び出してセクションを縦方向に配置します。TvLazyColumn
には、アイテム コンテンツを定義する DSL を提供する TvLazyListScope.() -> Unit
ブロックが用意されています。次の例では、各セクションを縦方向のリストに配置し、セクション間の間隔を 16 dp にしています。
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
TvLazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}
この例では、コンポーズ可能な関数 Section
がセクションの表示方法を定義しています。次の関数の TvLazyRow
は、この水平バージョンの TvLazyColumn
を使用して、提供された DSL を呼び出して TvLazyListScope.() -> Unit
ブロックを含む水平リストを定義する方法を示しています。
@Composable
fun Section(
section: Section,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
Text(
text = section.title,
style = MaterialTheme.typography.headlineSmall,
)
TvLazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(section.movieList){ movie ->
MovieCard(
movie = movie,
onClick = { onItemSelected(movie) }
)
}
}
}
Section
コンポーザブルでは、Text
コンポーネントが使用されています。マテリアル デザインで定義されたテキストやその他のコンポーネントは、tv-material ライブラリで提供されています。マテリアル デザインで定義されているテキストのスタイルは、MaterialTheme
オブジェクトを参照して変更できます。このオブジェクトは tv-material ライブラリからも提供されます。
MovieCard
は、次のスニペットで定義されたカタログで各映画データのレンダリング方法を定義します。Card
も tv-material ライブラリの一部です。
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
注目のコンテンツを紹介する
前述の例では、すべての映画が同じように表示されます。表示面積は同じで、見た目の違いはありません。その一部を Carousel
でハイライト表示できます。
カルーセルでは、スライド、フェード、ビュー内への移動が可能な一連のアイテムとして情報が表示されます。このコンポーネントを使用して、新たに視聴可能な映画やテレビ番組の新しいエピソードなど、注目のコンテンツをハイライト表示します。
Carousel
では、少なくとも、カルーセルに含まれるアイテムの数と、各アイテムの描画方法を指定する必要があります。最初の URL は itemCount
で指定できます。2 つ目の引数はラムダとして渡すことができます。表示されるアイテムのインデックス番号がラムダに渡されます。表示されるアイテムは、指定されたインデックス値で判断できます。
@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
などの遅延リストの項目にできます。次のスニペットは、すべての Section
コンポーザブルの上にある FeaturedCarousel
コンポーザブルを示しています。
@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)
}
}
}