Swift Academy · 강의

플로 레이아웃 만들기

항목을 여러 줄에 동적으로 배치합니다.

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

흐름 layout이란 무엇인가요

흐름 layout은 항목을 왼쪽에서 오른쪽으로 배치하다가 다음 항목이 사용 가능한 width를 넘으면 새 row로 줄을 바꾸는 방식입니다. 태그 칩이나 단어 줄 바꿈과 비슷합니다.

계획

공유 도우미에서 row가 바뀌는 지점을 계산하고, sizeThatFits에서 전체 height를 반환한 다음, placeSubviews에서도 같은 계산을 재사용합니다. 로직을 공유하면 두 메서드의 결과가 일치합니다.

Placement 모델링

간단한 구조체에 각 하위 뷰가 배치될 위치를 기록합니다. 모든 placements를 미리 계산하면 두 프로토콜 메서드를 간단하게 구현할 수 있습니다.

struct Placement {
    let index: Int
    let point: CGPoint
    let size: CGSize
}

줄 바꿈 알고리즘

하위 뷰를 순회하며 현재 x를 추적합니다. 자식 뷰가 max width를 넘게 되면 x를 초기화하고, row height와 spacing만큼 아래로 이동합니다.

func layout(_ subviews: Subviews, maxWidth: CGFloat) -> (placements: [Placement], height: CGFloat) {
    var placements: [Placement] = []
    var x: CGFloat = 0, y: CGFloat = 0, rowHeight: CGFloat = 0
    let spacing: CGFloat = 8
    for (i, s) in subviews.enumerated() {
        let size = s.sizeThatFits(.unspecified)
        if x + size.width > maxWidth, x > 0 {
            x = 0; y += rowHeight + spacing; rowHeight = 0
        }
        placements.append(Placement(index: i, point: CGPoint(x: x, y: y), size: size))
        x += size.width + spacing
        rowHeight = max(rowHeight, size.height)
    }
    return (placements, y + rowHeight)
}

sizeThatFits 구현하기

sizeThatFits는 제안된 width를 기준으로 알고리즘을 실행하고, 제안 width와 계산된 전체 height를 반환합니다.

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
    let maxWidth = proposal.width ?? .infinity
    let result = layout(subviews, maxWidth: maxWidth)
    return CGSize(width: maxWidth == .infinity ? result.placements.map { $0.point.x + $0.size.width }.max() ?? 0 : maxWidth,
                  height: result.height)
}

placeSubviews 구현하기

placeSubviews는 같은 알고리즘을 실행한 다음 각 Placement를 bounds.origin만큼 오프셋하고 place를 호출합니다.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    let result = layout(subviews, maxWidth: bounds.width)
    for p in result.placements {
        let pt = CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y)
        subviews[p.index].place(at: pt, anchor: .topLeading,
                                proposal: ProposedViewSize(p.size))
    }
}

전체 FlowLayout 타입

각 요소를 결합하면 완전하고 재사용 가능한 흐름 layout이 됩니다. 공유 layout 도우미가 크기와 배치가 일치하도록 보장합니다.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let r = layout(subviews, maxWidth: proposal.width ?? .infinity)
        return CGSize(width: proposal.width ?? 0, height: r.height)
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let r = layout(subviews, maxWidth: bounds.width)
        for p in r.placements {
            subviews[p.index].place(at: CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y),
                                    anchor: .topLeading, proposal: ProposedViewSize(p.size))
        }
    }
}

흐름 layout 사용하기

어떤 container에든 넣어 사용할 수 있습니다. width가 줄어들면 태그가 자동으로 줄 바꿈됩니다.

var body: some View {
    FlowLayout {
        ForEach(tags, id: \.self) { tag in
            Text(tag)
                .padding(8)
                .background(.blue.opacity(0.2))
                .clipShape(Capsule())
        }
    }
}

row마다 첫 항목 처리하기

x > 0 조건문은 row의 첫 항목 앞에서 줄 바꿈이 일어나는 것을 방지합니다. 이 조건이 없으면 container보다 width가 큰 항목 때문에 무한 루프가 발생하거나 불필요하게 빈 row로 밀려날 수 있습니다.

if x + size.width > maxWidth, x > 0 {
    // wrap only if the row already has content
}

spacing 선택

여기서는 spacing이 기본값을 가진 저장 프로퍼티입니다. 실제 제품에서는 하드코딩된 상수 대신 각 하위 뷰의 spacing 선호 설정을 읽어 시스템 지표를 준수하세요.

var spacing: CGFloat = 8 // configurable per instance

경계 사례 테스트하기

항목이 0개인 경우, 하나의 매우 큰 항목인 경우, 아주 작은 항목이 많은 경우를 테스트하세요. 올바른 흐름 layout은 빈 content에 대해 height를 0으로 보고하며, 하나의 oversized 자식 뷰도 절대 자르지 않습니다.

빠른 확인: 흐름 layout

줄 바꿈 알고리즘에 대한 이해도를 테스트합니다.

복습: 흐름 layout 만들기

흐름 layout은 현재 x를 추적하다가 다음 자식 뷰가 영역을 넘으면 새 row로 초기화하여 항목을 줄 바꿈합니다. 공유 도우미가 모든 placements와 전체 height를 계산하므로 sizeThatFits와 placeSubviews의 결과가 일치합니다.

placements를 bounds.origin만큼 오프셋하고, row마다 첫 항목인지 확인하며, 빈 항목·oversized 항목·많은 항목이 있는 경우를 테스트하세요. 그 결과 재사용 가능한 줄 바꿈 container를 얻을 수 있습니다.

자주 묻는 질문

“플로 레이아웃 만들기” 강의는 무료인가요?

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

“플로 레이아웃 만들기”에서 뭘 배우나요?

항목을 여러 줄에 동적으로 배치합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“플로 레이아웃 만들기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Swift Academy(으)로 돌아가기