UICollectionViewCompositionalLayout
iOS 13부터 도입된 UICollectionView의 새로운 레이아웃
복잡하고 다양한 레이아웃을 계층 구조로 깔끔하게 설계할 수 있도록 도와주는 API
구성 구조
Layout
└── Section
└── Group
└── Item| 구성요소 | 역할 설명 |
|---|---|
| Item | 셀(Cell) 하나에 해당하는 가장 작은 단위 |
| Group | 하나 이상의 item 묶음 (수평/수직 정렬 가능) |
| Section | 여러 group으로 구성된 레이아웃 블록 |
| Layout | 전체 섹션을 조합한 UICollectionView의 최종 레이아웃 |
장점
| 장점 | 설명 |
|---|---|
| 섹션마다 레이아웃 다르게 가능 | 각 섹션을 독립적으로 설계할 수 있음 (예: 1섹션은 리스트, 2섹션은 그리드 등) |
| 복잡한 UI 설계 가능 | Pinterest 스타일, App Store 스타일 등 고급 UI 구성 가능 |
| 코드 가독성 높음 | 계층적 구성으로 읽기 쉽고 유지보수 편리 |
| 스크롤 방향 조절 가능 | orthogonalScrollingBehavior로 섹션 단위 수평/수직 스크롤 지정 가능 |
2열 그리드 레이아웃
/ 1. 아이템 (셀 단위)
let itemSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(0.5), // 너비의 50%
heightDimension: .fractionalHeight(1.0) // 그룹 높이와 동일
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)
// 2. 그룹 (아이템 2개 수평으로 정렬)
let groupSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0), // 전체 너비
heightDimension: .absolute(100) // 고정 높이
)
let group = NSCollectionLayoutGroup.horizontal(
layoutSize: groupSize,
subitems: [item, item]
)
// 3. 섹션
let section = NSCollectionLayoutSection(group: group)
// 4. 최종 레이아웃
let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout
:>