カルーセル

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

さまざまなユースケースに合わせて、次の 4 種類のカルーセル レイアウトを使用できます。

  • マルチブラウジング: サイズが異なるアイテムが含まれます。写真など、多くのアイテムを一度に閲覧する場合におすすめです。
  • 制限なし: 単一サイズのアイテムが画面の端を超えて流れます。各アイテムの上または下にテキストやその他の UI を表示するようにカスタマイズできます。
  • ヒーロー: 注目すべき 1 つの大きな画像をハイライト表示し、小さなアイテムで次に何があるのかを確認できます。映画や番組のサムネイルなど、強調したいコンテンツをハイライト表示する場合におすすめです。
  • 全画面: 1 つの大きなアイテムを端から端まで一度に表示し、垂直方向にスクロールします。幅よりも高さのあるコンテンツに推奨されます。
枠なしの全画面カルーセル タイプが並べて表示されます。制限なしカルーセル タイプには複数のカルーセル アイテムがありますが、全画面表示には 1 つのアイテムが画面全体を占有します
図 1. カルーセルのタイプは、枠なし（1）と全画面（2）の 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. カルーセル内の最後のアイテムが切り取られていない、枠のないカルーセル。