カルーセル

カルーセルは、ウィンドウ サイズに基づいて動的に調整される、スクロール可能なアイテムのリストを表示します。カルーセルを使用して、関連コンテンツのコレクションを紹介します。カルーセル アイテムはビジュアルを強調しますが、アイテムサイズに合わせた短いテキストを含めることもできます。

さまざまなユースケースに合わせて、4 つのカルーセル レイアウトが用意されています。

  • マルチブラウズ: サイズの異なるアイテムが含まれます。写真など、一度に多くのアイテムを閲覧する場合におすすめです。
  • コンテナなし: 単一サイズのアイテムが含まれ、画面の端を越えて流れます。各項目の上下にテキストやその他の UI を表示するようにカスタマイズできます。
  • ヒーロー: 1 つの大きな画像をハイライト表示して、小さなアイテムで次の内容をプレビューします。映画や番組のサムネイルなど、強調したいコンテンツをスポットライト表示する場合におすすめです。
  • 全画面: 画面いっぱいに 1 つの大きなアイテムを一度に表示し、縦方向にスクロールします。幅よりも高さがあるコンテンツにおすすめです。
コンテナなしのカルーセルとフルスクリーン カルーセルが並んで表示されています。コンテナなしのカルーセル タイプには複数のカルーセル アイテムがあり、全画面表示では 1 つのアイテムが画面全体に表示されます。
図 1. コンテナなし（1）と全画面表示（2）のカルーセル タイプ。

このページでは、マルチブラウズ レイアウトとコンテナなしのカルーセル レイアウトを実装する方法について説明します。レイアウト タイプの詳細については、カルーセル マテリアル 3 のガイドラインをご覧ください。

API サーフェス

マルチブラウズ カルーセルと非コンテナ カルーセルを実装するには、HorizontalMultiBrowseCarousel コンポーザブルと HorizontalUncontainedCarousel コンポーザブルを使用します。これらのコンポーザブルは、次の主要なパラメータを共有します。

  • state: 現在のアイテム インデックスとスクロール位置を管理する CarouselState インスタンス。この状態は rememberCarouselState { itemCount } を使用して作成します。ここで、itemCount はカルーセル内のアイテムの総数です。
  • itemSpacing: カルーセル内の隣接するアイテム間の空白スペースの量を定義します。
  • contentPadding: カルーセルのコンテンツ領域の周囲にパディングを適用します。これを使用すると、最初のアイテムの前または最後のアイテムの後にスペースを追加したり、スクロール可能な領域内のアイテムにマージンを設定したりできます。
  • content: 整数インデックスを受け取るコンポーズ可能な関数。このラムダを使用して、インデックスに基づいてカルーセル内の各アイテムの UI を定義します。

これらのコンポーザブルは、アイテムのサイズ指定方法が異なります。

  • itemWidth（HorizontalUncontainedCarousel の場合）: コンテナなしカルーセルの各アイテムの正確な幅を指定します。
  • preferredItemWidth（HorizontalMultiBrowseCarousel 用）: マルチブラウズ カルーセル内のアイテムの理想的な幅を提案し、スペースが許せばコンポーネントが複数のアイテムを表示できるようにします。

例: マルチブラウズ カルーセル

このスニペットは、マルチブラウズ カルーセルを実装します。

コードに関する主なポイント

  • CarouselItem データクラスを定義します。このクラスは、カルーセルの各要素のデータを構造化します。
  • 画像リソースと説明が入力された CarouselItem オブジェクトの List を作成して記憶します。
  • HorizontalMultiBrowseCarousel コンポーザブルを使用します。これは、カルーセルに複数のアイテムを表示するために設計されています。
    • カルーセルの状態は、アイテムの合計数が指定された rememberCarouselState を使用して初期化されます。
    • アイテムには preferredItemWidth（ここでは 186.dp）があり、各アイテムの最適な幅が提案されます。カルーセルはこれを使用して、画面に一度に表示できるアイテムの数を決定します。
    • itemSpacing パラメータは、アイテム間に小さなギャップを追加します。
    • HorizontalMultiBrowseCarousel の後置ラムダは CarouselItems を反復処理します。各反復処理で、インデックス i のアイテムを取得し、そのアイテムの Image コンポーザブルをレンダリングします。
    • Modifier.maskClip(MaterialTheme.shapes.extraLarge) は、事前定義されたシェイプマスクを各画像に適用して、角を丸くします。
    • contentDescription は、画像のユーザー補助機能の説明を提供します。

結果

次の画像は、上記のスニペットの結果を示しています。

3 つの画像を含むマルチブラウズ カルーセル。2 つの画像は完全に表示され、1 つの画像は部分的に画面外に表示されています。
図 2. 最後のアイテムがクリップされたマルチブラウズ カルーセル。

例: 枠のないカルーセル

次のスニペットは、コンテナなしのカルーセルを実装しています。

コードに関する主なポイント

  • HorizontalUncontainedCarousel コンポーザブルは、カルーセル レイアウトを作成します。
    • itemWidth パラメータは、カルーセル内の各アイテムの固定幅を設定します。

結果

次の画像は、上記のスニペットの結果を示しています。

3 つのアイテムを含むコンテナなしカルーセル。最後のアイテムは部分的に表示されていますが、クリップされていません。
図 3. コンテナなしのカルーセル。カルーセルの最後のアイテムはクリップされません。