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

テレビで動作するメディアアプリでは、ユーザーが提供するコンテンツを閲覧し、選択し、コンテンツの再生を開始できるようにする必要があります。このタイプのアプリのコンテンツ ブラウジング エクスペリエンスは、シンプルで直感的で、楽しく、魅力的なものでなければなりません。

メディア カタログ ブラウザは複数のセクションで構成され、各セクションにメディア コンテンツのリストが含まれる傾向があります。メディア カタログのセクションには、再生リスト、注目コンテンツ、おすすめのカテゴリなどがあります。

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 ライブラリによっても提供されています。 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 で指定できます。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)
    }
  }
}