[TIL] 컬렉션뷰

Eden·2025년 6월 19일

개요

UICollectionView는 iOS에서 그리드 또는 커스텀 레이아웃의 리스트 UI를 만들 때 사용하는 강력한 컴포넌트입니다. UITableView보다 유연하며, 가로/세로 스크롤, 셀 크기 조절, 다양한 레이아웃 구성에 적합합니다.

핵심 개념

✅ UICollectionView

데이터를 셀 단위로 보여주는 뷰
UICollectionViewLayout을 기반으로 다양한 형태의 UI 구성 가능

✅ UICollectionViewCell

하나의 아이템을 표시하는 셀
커스텀 UI 구성 가능 (예: 이미지 + 텍스트)

✅ DataSource & Delegate

데이터 공급과 사용자 상호작용을 처리하는 필수 프로토콜
DataSource: 셀 개수, 셀 생성 등
Delegate: 셀 선택, 크기, 레이아웃 설정 등

기본 사용 방법 ✏️

class MyViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    let items = ["🍎", "🍊", "🍇", "🍓"]

    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.minimumInteritemSpacing = 10
        layout.minimumLineSpacing = 10
        layout.itemSize = CGSize(width: 100, height: 100)

        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.dataSource = self
        cv.delegate = self
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        return cv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        collectionView.frame = view.bounds
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .systemBlue
        return cell
    }
}

레이아웃 종류

레이아웃 종류	설명
`UICollectionViewFlowLayout`	기본 세로/가로 그리드 형태
커스텀 레이아웃	직접 subclassing하여 다양한 형태 구현 가능
`UICollectionViewCompositionalLayout`	iOS 13+에서 사용, 유연하고 선언적인 레이아웃 구성