[Swift][iOS] UICollectionView - CompositionalLayout

강의를 통해 UICollectionView의 CompositionalLayout을 처음 사용해봤다.

NSCollectionLayoutItem, NSCollectionLayoutGroup, NSCollectionLayoutSection 같은 개념들을 활용해 레이아웃을 세밀하게 조정하여 UICollectionView의 레이아웃을 훨씬 유연하고 직관적으로 구성할 수 있게 도와준다.

코드 예제와 함께 이번에 배운 내용들을 정리해두도록 하자.

---

0. Compositional Layout의 기본 구조

위와 같이 Section, Header, Footer, Group, Item 등으로 이루어져 있다.

---

1. NSCollectionLayoutItem - 아이템의 크기 설정

먼저, NSCollectionLayoutItem을 사용해 각 아이템의 크기를 설정한다.
아이템의 크기는 NSCollectionLayoutSize를 사용해 설정하며, fractionalWidth와 fractionalHeight를 이용해 부모의 크기 대비 비율로 지정할 수 있다.

let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)

• 여기서는 아이템이 그룹 내에서 전체 너비와 높이를 100% 차지하도록 설정했다.
• fractionalWidth(1.0)과 fractionalHeight(1.0)은 부모의 크기에 대해 아이템이 전체를 차지한다는 의미이다.

---

2. NSCollectionLayoutGroup - 그룹의 크기 및 방향 설정

다음으로, NSCollectionLayoutGroup을 사용해 아이템들을 포함하는 그룹을 구성한다.
그룹의 크기도 NSCollectionLayoutSize로 지정하고, 그룹 내 아이템의 배치를 수평 또는 수직으로 설정할 수 있다.

let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(0.25),
    heightDimension: .fractionalHeight(0.4)
)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

• 여기서는 그룹의 너비를 부모의 25%, 높이를 40%로 설정했다.
• horizontal을 사용해 아이템들이 수평으로 배치되도록 했다.

---

3. NSCollectionLayoutSection - 섹션 구성 및 스크롤 설정

그룹을 섹션에 추가한 다음, 섹션의 스크롤 방식과 간격을 설정한다.
NSCollectionLayoutSection은 레이아웃의 전반적인 구조를 정의하는 역할을 한다.

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .continuous
section.interGroupSpacing = 10
section.contentInsets = .init(top: 10, leading: 10, bottom: 20, trailing: 10)

• orthogonalScrollingBehavior를 .continuous로 설정해 수평 스크롤이 연속적으로 이루어지도록 했다.
• interGroupSpacing을 사용해 그룹 간의 간격을 10포인트로 설정했다.
• contentInsets로 섹션의 패딩을 설정해 레이아웃의 가장자리와 여백을 줬다.

---

4. NSCollectionLayoutBoundarySupplementaryItem - 헤더 추가하기

섹션에 헤더를 추가할 때는 NSCollectionLayoutBoundarySupplementaryItem을 사용한다.

let headerSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1),
    heightDimension: .estimated(44)
)
let header = NSCollectionLayoutBoundarySupplementaryItem(
    layoutSize: headerSize,
    elementKind: UICollectionView.elementKindSectionHeader,
    alignment: .top
)
section.boundarySupplementaryItems = [header]

• 헤더의 크기를 부모의 너비 100%로 설정하고, 높이는 44포인트로 설정했다.
• elementKindSectionHeader를 사용해 섹션 헤더로 정의했다.
• 섹션의 boundarySupplementaryItems에 헤더를 추가해준다.