CollectionViewFlowLayout

CollectionView

컬렉션 뷰는 반복되는 뷰를 보여주는 방법이다. 테이블 뷰는 위에서 아래로만 뷰들을 보여주지만 컬렉션 뷰는 이러한 테이블 뷰보다 커스텀이 자유롭다는 장점이 있다.

대신 그만큼 설정이 복잡하고, 그런 커스텀을 하는 방법 중 하나가 CollectionViewFlowLayout을 사용하는 것이다.

CollectionViewFlowLayout

CollectionViewLayout(이하 flowlayout)은 flow 대로 흐르는대로 레이아웃을 잡는 것을 의미한다. CSS의 flex-flow와 같은 맥락으로 작동한다.

수직, 수평으로 뷰를 나열할 수 있고 뷰가 한 줄이 꽉차면 아래로 자동으로 내려 가게 된다. 수직 스크롤의 경우 아래와 같이 뷰가 배치된다.

또 위 그림처럼 헤더와 푸터를 설정할 수 있다.

코드

import UIKit


class ViewController: UIViewController {

    private var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 100
        layout.minimumInteritemSpacing = 10
        layout.scrollDirection = .horizontal
        layout.itemSize = CGSize(width: 200, height: 200)
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        return cv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        collectionView.register(NumberCollectionViewCell.self, forCellWithReuseIdentifier: NumberCollectionViewCell.identifier)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.frame = view.bounds
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
    }
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: NumberCollectionViewCell.identifier, for: indexPath) as? NumberCollectionViewCell else {
            return UICollectionViewCell()
        }
        cell.backgroundColor = .systemBackground
        cell.configure(with: indexPath.row)
        return cell
    }
}

테이블 뷰와 다르게 컬렉션 뷰는 생성할 때 부터 기본적으로 layout을 필요로 한다. frmae에 넣는 .zero는 기본적으로 프레임을 0, 0, 0, 0으로 잡는다는 뜻이고 나중에 동적으로 컬렉션 뷰 크기를 변경할 때 사용한다.

layout에 위에서 flowlayout 객체를 넣어준다.

.scrollDirection을 통해 컬렉션 뷰 셀을 수평 스크롤해서 볼지 수직 스크롤해서 볼지
.itemSize통해 컬렉션 뷰 셀의 크기를 조정할 수 있다.

.minimumLineSpacing으로 각 컬렉션 뷰 셀의 간격을 조정할 수 있다.
여기서 Line은 뷰가 오버플로우 되면서 나뉘는 간격을 말한다.

.minimumInterItemSpacing은 컬렉션 뷰 셀과 바로 다음 컬렉션 뷰 셀의 간격을 말한다.

이외에도 section 관련, 헤더, 푸터 관련 더 많은 설정이 있으니 필요할 때 찾아서 사용하면 된다.

참고