Swift에서 컬렉션 뷰(UICollectionView)를 사용하려면 가장 먼저 컬렉션 뷰 인스턴스를 생성해야 합니다. 스토리보드에 드래그 앤 드롭으로 추가하는 방법과 코드로 직접 작성하는 방법 두 가지가 있습니다.
컬렉션 뷰를 생성한 후에는 클래스가 UICollectionViewDataSource와 UICollectionViewDelegate 프로토콜을 반드시 채택해야 합니다. 전자는 컬렉션 뷰에 데이터를 공급하는 역할을 하고, 후자는 사용자의 터치 등 상호작용 이벤트를 처리하는 역할을 합니다.
또한 셀의 크기나 레이아웃을 커스터마이징해야 하는 경우에는 UICollectionViewDelegateFlowLayout 프로토콜까지 추가로 채택해야 합니다.
1. 프로그래밍 방식으로 컬렉션 뷰 생성하기
코드로 컬렉션 뷰를 만드는 과정을 살펴보겠습니다. 먼저 레이아웃 객체를 설정하고, 컬렉션 뷰를 초기화한 뒤 뷰 계층에 추가합니다.
func initCollection() {
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 50, height: 50)
let collection = UICollectionView.init(frame: self.view.frame, collectionViewLayout: layout)
collection.dataSource = self
collection.delegate = self
collection.backgroundColor = colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
collection.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
self.view.addSubview(collection)
}위 함수는 viewDidLoad() 메서드 안에서 호출해야 합니다. 컬렉션 뷰를 코드로 생성하든 스토리보드로 생성하든, dataSource와 delegate를 반드시 할당해야 합니다. dataSource는 컬렉션 뷰에 데이터를 제공하고, delegate는 사용자 동작(선택, 스크롤 등)을 관찰하고 처리합니다.
2. 섹션 수 정의하기
다음으로 컬렉션 뷰에 섹션이 몇 개 있는지 알려주어야 합니다.
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}3. 아이템 수와 셀 내용 정의하기
이어서 각 섹션에 포함될 아이템의 개수와, 각 셀에 어떤 데이터가 표시될지 정의합니다.
func collectionView(_ collection: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 7
}
func collectionView(_ collection: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collection.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
cell.layer.backgroundColor = colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
return cell
}numberOfItemsInSection 메서드는 해당 섹션에 표시할 아이템 개수를 반환하고, cellForItemAt 메서드는 재사용 큐(reuse queue)에서 셀을 꺼내 필요한 데이터를 설정한 후 반환합니다.
4. 셀 크기 커스터마이징하기 (선택 사항)
필요에 따라 아이템별로 서로 다른 크기를 지정할 수도 있습니다. 이 기능을 사용하려면 앞서 언급한 UICollectionViewDelegateFlowLayout 프로토콜을 채택해야 합니다.
func collectionView(_ collection: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let size = CGSize(width: 200, height: 50)
return size
}실행 결과
위 코드를 실제 기기나 시뮬레이터에서 실행하면 초록색 배경 위에 진홍색 셀들이 그리드 형태로 배치된 컬렉션 뷰가 화면에 나타납니다.
정리하면, Swift에서 컬렉션 뷰를 사용하는 핵심 흐름은 ① 컬렉션 뷰 생성 → ② dataSource/delegate 할당 → ③ 섹션 및 아이템 수 반환 → ④ 셀 구성 → ⑤ (선택) 레이아웃 커스터마이징입니다. 이 순서만 기억하면 테이블 뷰와 유사한 패턴으로 손쉽게 컬렉션 뷰를 구현할 수 있습니다.