[TIL] UICollectionViewCompositionalLayout

UICollectionViewCompositionalLayout는 iOS 13에서 도입된 강력한 레이아웃 시스템으로,
컬렉션 뷰에서 복잡하고 다양한 레이아웃을 선언형 방식으로 쉽게 구현할 수 있도록 합니다.

---

1. UICollectionViewCompositionalLayout란?

• UICollectionView의 새로운 레이아웃 API (iOS 13 이상)
• 기존 UICollectionViewFlowLayout의 한계를 극복
• 섹션 단위 레이아웃 지원 → 각 섹션마다 다른 레이아웃 적용 가능
• 선언형(Declarative) 방식으로 직관적인 코드 작성 가능

---

2. 핵심 개념

• Item: 레이아웃의 기본 단위 (셀)
• Group: 여러 아이템을 묶은 컨테이너
• Section: 하나 이상의 그룹으로 구성
• Layout: 섹션들을 조합해 컬렉션 뷰 전체 레이아웃 정의

---

3. 기본 구조

Compositional Layout
 └── Section
       └── Group
             └── Item

---

4. 기본 사용 예시

4.1 Compositional Layout 생성

let layout = UICollectionViewCompositionalLayout { sectionIndex, layoutEnvironment in
    // 1. 아이템 크기 정의
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                          heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    // 2. 그룹 크기 정의
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                           heightDimension: .absolute(150))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    // 3. 섹션 생성
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .groupPaging

    return section
}

collectionView.collectionViewLayout = layout

---

5. 주요 기능

5.1 다양한 스크롤 동작

• .none → 기본 동작
• .continuous → 연속 스크롤
• .groupPaging → 그룹 단위 페이징
• .groupPagingCentered → 중앙 정렬 페이징

5.2 섹션별 레이아웃

섹션마다 다른 레이아웃 적용 가능:

let layout = UICollectionViewCompositionalLayout { sectionIndex, _ in
    if sectionIndex == 0 {
        // 첫 번째 섹션: 가로 스크롤
    } else {
        // 두 번째 섹션: 세로 리스트
    }
}

---

6. 장점

• 유연성: 복잡한 레이아웃을 간단히 구현
• 섹션별 다른 레이아웃 가능
• 선언형 코드로 가독성 향상

---

7. 단점

• iOS 13 이상에서만 지원
• API가 상대적으로 복잡할 수 있음

---

결론

UICollectionViewCompositionalLayout는 기존 FlowLayout의 한계를 극복하고,
다양하고 복잡한 UI를 쉽게 구현할 수 있는 강력한 도구입니다.
현대 iOS 앱 개발에서 컬렉션 뷰 레이아웃 구현의 표준으로 자리 잡았습니다.