1. Compositonal Layout 구성

1-1. Compositional Layout은 Item, Group, Section 으로 구성되어 있습니다.

• Item: 하나의 Item (Cell) → NSCollectionLayoutItem
• Group: Item의 집합 → NSCollectionLayoutGroup(layoutSize: groupSize, subitems: [item])
• Section: 여러 Group의 집합 → NSCollectionLayoutSection

1-2. NSCollectionLayoutDimension — Layout Size를 지정할 때 사용

• EdgeInsets → NSDirectionalEdgeInsets(top:, leading:, bottom: ,trailing: )
• size → NSCollectionLayoutSize(widthDimension: , heightDimension)
• .fractionalWidth, .fractionalHeight: 부모 컴포넌트 크기에 비례하여 크기를 설정할 때 사용.
• .absolute: 고정된 크기일 때 사용.
• .estimated: 크기가 변동될 수 있는 경우에 사용.

private func createLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                              heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 12, bottom: 0, trailing: 12)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                               heightDimension: .fractionalWidth(0.2))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
				section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 14, bottom: 16, trailing: 14)
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        
        return layout
    }

1-3. 스크롤 되게 하려면

• section.orthogonalScrollingBehavior
  • case none = 0 : 없음
  • case none = 1 Continue → 표준 스크롤 뷰 동작: UIScrollView 감속률 정상
  • case none = 2 continuousGroupLeadingBoundary → 그룹 경계의 맨 앞 가장자리에서 스크롤이 멈춥니다
  • case none = 3 paging → 페이지 크기 == 컬렉션 뷰의 범위를 가진 표준 스크롤 뷰 페이징 동작(UIScrollViewDecelerationRateFast)
  • case none = 4 grouppaging → 횡단 레이아웃 그룹의 차원에 따라 결정되는 부분 크기 페이징 동작
  • case none = 5 groupPagingCentered → 각 그룹의 내용을 직교 축을 따라 중앙에 배치하기 위해 추가적인 선행 및 후행 내용이 포함된 그룹 페이징과 동일

1-4. Supplementary and decoration view

• Supplementary → boundarySupplementaryItems
• decorationView → decorationItems에 지정
• Supplementary View가 section의 contentInsets에 영향을 받지 않도록 supplemetariesFollowContentInsets = false

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(44))
let headerSupplementary = NSCollectionLayoutBoundarySupplementaryItem(
  layoutSize: headerSize,
  elementKind: ViewController.elementKindSectionHeader,
  alignment: .top)
section.boundarySupplementaryItems = [headerSupplementary]
section.supplementariesFollowContentInsets = false

// Background
let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: ViewController.sectionBackgroundDecorationElementKind)
section.decorationItems = [sectionBackgroundDecoration]

// Register decoration view
let layout = UICollectionViewCompositionalLayout(section: section)
layout.register(
    SectionBackgroundDecorationView.self,
    forDecorationViewOfKind: ViewController.sectionBackgroundDecorationElementKind)