🗓️23.10.05

Sticky Header (with compositionalLayout)

• UICollectionLayoutListConfiguration 과 함께 헤더를 고정하는 법을 찾다 도무지 찾을 방법이 없어 원초적인 방법으로 pinToVisibleBounds을 설정해줬다.

    private func listLayout() -> UICollectionViewCompositionalLayout {
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(80))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(80))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
        group.edgeSpacing = NSCollectionLayoutEdgeSpacing(leading: nil, top: .fixed(3), trailing: nil, bottom: nil)
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 3, leading: 0, bottom: 0, trailing: 0)
        
        let headerSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(80))
        let headerSupplementary = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: ElementKind.sectionHeader,
            alignment: .top)
        headerSupplementary.pinToVisibleBounds = true
        section.boundarySupplementaryItems = [headerSupplementary]
        
        return UICollectionViewCompositionalLayout(section: section)
    }

• 찾고 찾은 끝에 UICollectionLayoutListConfiguration과 함께 헤더를 설정하는 방법을 찾았고, 헤더는 고정 됐지만 그 위로 셀이 올라가는 문제가 발생했다. zIndex를 설정해줘서 헤더를 위로 끌어올리는 방법을 찾았다!!

    private func listLayout() -> UICollectionViewCompositionalLayout {
        let layout = UICollectionViewCompositionalLayout { _, layoutEnvironment in
            
            var configuration = UICollectionLayoutListConfiguration(appearance: .grouped)
            configuration.headerMode = .supplementary
            configuration.backgroundColor = .systemGray6
            
            let section = NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: layoutEnvironment)
            section.contentInsets = NSDirectionalEdgeInsets(top: 7, leading: 0, bottom: 0, trailing: 0)
            section.interGroupSpacing = 7
            let headerSize = NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1.0),
                heightDimension: .estimated(80))
            let headerSupplementary = NSCollectionLayoutBoundarySupplementaryItem(
                layoutSize: headerSize,
                elementKind: ElementKind.sectionHeader,
                alignment: .top)
            
            headerSupplementary.pinToVisibleBounds = true
            headerSupplementary.zIndex = 110
            section.boundarySupplementaryItems = [headerSupplementary]
            return section
        }
        
        return layout
    }

1. CompositionalLayout에서 Cell 및 Supplementary View(header 또는 footer 등)의 사이즈를 잡아줌
2. DiffableDataSource를 통해 Custom View 및 Supplementary View를 Collection View에 넘겨줌

• 기본 list configuration을 썼을 때 headerMode만 설정해줘도 해더의 레이아웃이 잡히는 이유
  • configuration에서 기본적으로 헤더 사이즈를 잡아주기 때문
  • 따라서 헤더에 대한 레이아웃을 커스터마이징을 하기 위해서는 configuration으로 section을 만들고 커스터마이징한 헤더를 넣어주면 됨

---

📚 참고링크

https://nemecek.be/blog/83/how-to-create-sticky-headers-with-compositional-layout
https://techblog.gccompany.co.kr/compositional-layout과-diffable-datasource로-홈-리팩토링하기-d80ac0d11edd
https://velog.io/@hyesuuou/iOSSwift-UICollectionLayoutListConfiguration.plain에-헤더를-넣었을-때-헤더위에-뭔가-여백이-생기는-경우
https://medium.com/@pruthvi187/uicollectionview-list-layout-beb22f5a7021
https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayoutsectionprovider
https://developer.apple.com/documentation/uikit/uicollectionlayoutlistconfiguration
https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views#4208526