Jetpack Compose Academy · 강의

캐러셀을 위한 LazyRow

가로로 스크롤되는 선반을 만듭니다.

캐러셀을 위한 LazyRow은(는) CoddyKit의 무료 Jetpack Compose Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Jetpack Compose Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Scrolling Sideways

Sometimes content should slide left and right, like a movie shelf. For that you use LazyRow, the horizontal cousin of LazyColumn. ↔️

Why Not a Plain Row?

A plain Row composes every child immediately and cannot scroll. A LazyRow scrolls horizontally and only builds the items in view.

Basic LazyRow

You feed LazyRow items just like a column, but they line up side by side instead of stacking.

LazyRow {
    items(movies) { movie ->
        MovieCard(movie)
    }
}

Spacing Cards Apart

Carousel cards need gaps. Use horizontalArrangement with spacedBy to set a consistent space between each card.

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }

Padding at the Ends

Add contentPadding so the first card peeks in from the edge instead of being clipped flush against it.

contentPadding = PaddingValues(horizontal = 16.dp)

Sizing Each Card

Give each carousel item a fixed width so cards stay uniform as the user swipes through them.

MovieCard(movie, Modifier.width(140.dp))

A Peek of the Next Card

Make a fraction of the next card visible to hint there is more. A slightly smaller card width relative to the screen does this nicely.

val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))

Headers Above Carousels

A carousel usually sits under a title. Compose the LazyRow inside a Column, with a Text header above it.

Column {
    Text("Trending Now")
    LazyRow { items(movies) { MovieCard(it) } }
}

Nesting in a LazyColumn

A home screen often stacks many carousels. Place several LazyRow rows inside a parent LazyColumn for a Netflix-style feed.

LazyColumn {
    items(shelves) { shelf ->
        Shelf(shelf)
    }
}

Each Row Needs Width

A LazyRow inside a LazyColumn fills the available width automatically. Just ensure the parent gives it a finite width to measure against.

When to Use LazyRow

Reach for LazyRow for shelves, chip filters, story bubbles, and any content that invites a horizontal swipe rather than a downward scroll.

Quick Check

Think about horizontal scrolling.

Recap: Carousels

You built horizontal shelves with LazyRow: side-by-side items, spacing, end padding, fixed-width cards, and nesting inside a feed. 🎬

자주 묻는 질문

“캐러셀을 위한 LazyRow” 강의는 무료인가요?

네 — “캐러셀을 위한 LazyRow” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Jetpack Compose Academy 강의 전체를 잠금 해제할 수 있습니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“캐러셀을 위한 LazyRow”에서 뭘 배우나요?

가로로 스크롤되는 선반을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Jetpack Compose Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Jetpack Compose Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Jetpack Compose Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“캐러셀을 위한 LazyRow” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Jetpack Compose Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Jetpack Compose Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Jetpack Compose Academy(으)로 돌아가기