(Swift) Collection Reusable View 사용

UICollectionViewCell의 header에 UICollectionReusableView 를 사용했음

 

사용방법

1. storyboard에 Collection Resuable View object 추가
2. UICollectionResuableView 파일 생성
3. custom class, reusable id 설정
4. 파일과 object 연결

Collection View Cell 만들어서 연결하는 것과 동일하게

 

---

 

 

header view 구성하기

1. header view 에 들어갈 데이터 정하기

enum Section: CaseIterable {
    case breathing
    case walking
    
    var title: String {
        switch self {
        case .breathing: return "Breathing"
        case .walking: return "Walking"
        }
    }
}

dataSource.supplymentaryViewProvider = { (collectionView, elementKind, indexPath in
    guard let header = collectionView.dequeueReusableSupplementaryView
                          (ofKind: UICollectionView.elementKindSectionHeader, 
                          withReuseIdentifier: "FocusHeaderView", for: indexPath)
                          as? FocusHeaderView else {
        return nil
    }
    
    let allSections = Section.allCases
    let section = allSections[indexPath.section]
    header.configureTitle(section.title)
    return header
}


/// UICollectionView.elementKindSectionHeader : Header view 에 대한 카테고리 구분자
/// >> Header / Footer 두 종류가 있다.

/// 2개 이상의 Section가 존재시; 현재 Section에 접근하기 위해
/// >> indexPath 로 접근한다.

 

 

+)  .supplementaryViewProvider 이란?

// UIKit 문서 

@available(iOS 13.0, tvOS 13.0, *)
@MainActor @preconcurrency open class UICollectionViewDiffableDataSource<SectionIdentifierType, ItemIdentifierType> : NSObject, UICollectionViewDataSource where SectionIdentifierType : Hashable, SectionIdentifierType : Sendable, ItemIdentifierType : Hashable, ItemIdentifierType : Sendable {

    public typealias SupplementaryViewProvider = (_ collectionView: UICollectionView, _ elementKind: String, _ indexPath: IndexPath) -> UICollectionReusableView?

    @MainActor public var supplementaryViewProvider: UICollectionViewDiffableDataSource<SectionIdentifierType, ItemIdentifierType>.SupplementaryViewProvider?
    
}

 

 

 

---

 

 

2. header view 의 layout 정하기

// header layout
let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                       heightDimension: .absolute(50))
let header = NSCollectoinLayoutBoundarySupplymentaryItem(layoutSize: headerSize,
                       elementKind: UICollectionView.elementKindSectionHeader,
                       alignment: .top)
section.boundarySupplementaryItems = [header]

 

 

 

 

 

---

 

 

 

 

1) UICollectionView  >  UICollectionViewDiffableDataSource  >  supplementaryViewProvider

https://developer.apple.com/documentation/uikit/uicollectionviewdiffabledatasource/3255142-supplementaryviewprovider

supplementaryViewProvider | Apple Developer Documentation

 

 

2) UICollectionView  >  UICollectionReusableView

https://developer.apple.com/documentation/uikit/uicollectionreusableview

UICollectionReusableView | Apple Developer Documentation