カルーセル用のLazyRow
横にスクロールする棚を作ります。
「カルーセル用のLazyRow」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
横方向にスクロールする
映画の棚のように、コンテンツを左右にスライドさせたい場合があります。そのときは、LazyColumnの横方向版であるLazyRowを使います。↔️
通常のRowではだめなのか
通常のRowはすべての子要素を直ちにコンポーズし、スクロールもできません。LazyRowは横方向にスクロールし、表示中のitemsだけを構築します。
基本的なLazyRow
LazyRowにはColumnと同じようにitemsを渡しますが、縦に積み重ねるのではなく、横に並べて表示します。
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}カード間に間隔を設ける
カルーセルのカードには間隔が必要です。horizontalArrangementとspacedByを使い、カード間に一定の間隔を設定します。
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }両端のパディング
contentPaddingを追加すると、最初のカードが端に完全に密着して切り取られるのではなく、端から少し見えるようにできます。
contentPadding = PaddingValues(horizontal = 16.dp)各カードのサイズを決める
カルーセルの各itemに固定のwidthを設定し、ユーザーがスワイプしてもカードの大きさを統一します。
MovieCard(movie, Modifier.width(140.dp))次のカードを少し見せる
次のカードを少し見せて、続きがあることを示しましょう。画面に対してやや小さいwidthを設定すると、うまく実現できます。
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))カルーセルの上にヘッダーを置く
通常、カルーセルはタイトルの下に配置します。Columnの中にLazyRowを置き、その上にTextのヘッダーを配置します。
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}LazyColumnにネストする
ホーム画面では、多くのカルーセルを積み重ねることがあります。親のLazyColumnの中に複数のLazyRowを配置すると、Netflixのようなフィードを作成できます。
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}各Rowには幅が必要
LazyColumn 内の LazyRow は、利用可能な幅を自動的に埋めます。測定の基準にできる有限の width を親から渡すようにしてください。
LazyRow を使う場面
棚型レイアウト、チップフィルター、ストーリーバブルなど、下方向へのスクロールではなく横スワイプを促すコンテンツには LazyRow を使います。
クイックチェック
横方向のスクロールについて考えてみましょう。
まとめ：カルーセル
LazyRow を使って、横方向の棚型レイアウトを作成しました。横並びのアイテム、間隔、末尾のパディング、固定幅のカード、フィード内へのネストを扱いました。🎬
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「カルーセル用のLazyRow」レッスンは無料ですか？
はい。「カルーセル用のLazyRow」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「カルーセル用のLazyRow」で何を学びますか？
横にスクロールする棚を作ります。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「カルーセル用のLazyRow」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- LazyVerticalGridギャラリー
- カルーセル用のLazyRow
- 適応型と固定型のグリッドセル
- スクロール状態とプログラムスクロール