TableView 가 아닌 다른 데이터 나열을 위해서 아이템을 보여줄 때 사용

CollectionView 사용 구조

개발시 구조가 이런 모습이다.

하나의 큰 TableView → 각 TableView에 대한 Cell 따로 구현

→ 해당 Cell에 추가요소 + CollectionViewCell

그래서 TableViewCell을 구현하고 추가적으로 CollectionViewCell을 구현,

TableViewCell에 CollectionViewCell에 대한 delegate를 설정해주어야 한다.

CollectionView의 구조

위에 헤더, 푸터가 존재하고 안의 내용물을 감싸는 inset 이라는 padding 요소가 존재한다. 내부에는 셀이 자유롭게 배치 될 수 있다. 저 cell 또한 다양한 타입을 가질 수 있다.

UICollectionViewDelegateFlowLayout

UICollectionViewDelegateFlowLayout 프로토콜은 UICollectionViewFlowLayout 객체와 상호작용하여 레이아웃을 조정할 수 있는 메서드가 정의되어 있다. 해당 객체를 delegate하여 값을 설정하면 된다.

CollectionView 관련 delegate

CollectionView를 만들기 위해서는 TableView와 동일하게 delegate를 구현해주어야 하는데,

이러한 delegate들이 존재한다. 주요한 것만 살펴봤다.

delegate는 UICollectionViewDelegateFlowLayout, UICollectionViewDelegate, UICollectionViewDataSource 를 한번에 모아서 구현해준다.

// 섹션의 개수, 2개로 하면 완전 다른 섹션으로 인식한다
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 2
}

// 한 섹션에 있는 아이템 개수
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 4
}

// collectionView 가장자리 inset의 간격 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
}

// 섹션간 간격
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 6
}

// 각 섹션 내의 아이템 간의 간격
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 6
}

// 헤더의 referenced size 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return .zero
}

// 푸터의 referenced 냨ㄷ
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    return .zero
}

// 각 아이템에 대한 사이즈
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return QuickCategoryCollectionViewCell.cellSize()
}

// 각 내용물을 어떻게 채워줄지
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(QuickCategoryCollectionViewCell.self, for: indexPath)
    if let quickCategory = self.model?.quickCategory?.links?.safety(index: indexPath.row) {
        cell.bindUI(imageUrl: quickCategory.imgUrl, text: quickCategory.label)
    }
    return cell
}

// 각 셀을 눌렀을 때의 동작 
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let quickCategory = (self.model?.quickCategory?.links?.safety(index: indexPath.row))
    print(quickCategory)
    
    // TODO: 동작 넣어주기 - selectQuickMenu
}