UICollectionViewCompositionalLayout

UICollectionView를 구현하는 과제를 하면서 UICollectionViewCompositionalLayout을 사용하는 연습을 해보려고 한다. 그 전에 Layout 설정에 대한 이해가 필요해 내용정리를 하려고 한다.

공식문서에서 UICollectionViewCompositionalLayout은 "아이템들을 적응적이고 유연한 시각적 배열로 조합할 수 있게 해주는 레이아웃 객체"라고 정의하고 있다.

UICollectionViewCompositionalLayout은 크게 Section, Group, Item 3가지로 구성된다

NetflixCloneApp에서의 Layout 형태

Group은 항목을 가로 행(horizontal), 세로 열(vertical) 또는 사용자 지정 배열로 배치할 수 있게 한다.

- 기본적인 코드 구성 예시

func createBasicListLayout() -> UICollectionViewLayout { 
	// 아이템 크기 설정
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                  
                                         heightDimension: .fractionalHeight(1.0))    
    // 설정한 크기를 아이템에 적용
    let item = NSCollectionLayoutItem(layoutSize: itemSize)  
  
    // 그룹 크기 설정
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                          
                                          heightDimension: .absolute(44))  
    // 설정한 크기를 그룹에 적용
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,                                                   
                                                     subitems: [item])  
    // 섹션에 크기 설정이 끝난 그룹 담기
    let section = NSCollectionLayoutSection(group: group)    

	// UICollectionViewCompositionalLayout에 섹션을 적용
    let layout = UICollectionViewCompositionalLayout(section: section)    
    return layout
}

UICollectionView의 item 사이즈를 정하는 3가지 방법

• .absolute : 고정 크기
• .estimated : 런타임에 변경
• .fractional : 비율. (비율은 1.0이 100%를 의미)

- NetflixCloneApp에서의 코드 구성

    private func createLayout() -> UICollectionViewLayout{
        
        //각 아이템이 각 그룹 내에서 전체 넓이와 전체 높이를 차지 (1.0 = 100%)
        let itemSize = NSCollectionLayoutSize (
            widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)
        )
        
        //위에서 지정한 itemSize로 item 생성
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        //각 그룹 넓이는 화면 넓이의 25%, 높이는 넓이의 40%
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.25), heightDimension: .fractionalWidth(0.4))
        
        //위에서 지정한 groupSize로 group 생성.
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        //그룹으로 섹션 생성
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous//수평 스크롤 지정
        section.interGroupSpacing = 10//그룹 사이의 간격
        section.contentInsets = .init(top: 10, leading: 10, bottom: 20, trailing: 10)//섹션간의 간격
        
        //헤더 size 설정
        let headerSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(44)
        )
        
        //위에서 설정한 headerSize로 헤더 생성
        let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
        
        //섹션에 헤더 추가
        section.boundarySupplementaryItems = [header]
        
        return UICollectionViewCompositionalLayout(section: section)
    }

NetflixCloneApp에서는 섹션 설정에 orthogonalScrollingBehavior라는 설정이 사용됐다.

orthogonalScrollingBehavior 설정 옵션의 종류

• .none : 스크롤 동작이 없는 기본값. 단순히 화면에 고정된 목록이나 섹션을 표현할 때 사용
• .continuous : 부드러운 연속 스크롤 동작. 수평으로 스크롤 동작
• .continuousGroupLeadingBoundary : 그룹의 리딩(leading) 경계를 기준으로 스크롤 동작이 제한. 스크롤이 중단될 때 그룹의 리딩(왼쪽 또는 시작 부분)이 화면에 정렬되도록 동작
• .paging : 페이지 단위로 스크롤. 슬라이드쇼처럼 한 번의 스와이프로 정해진 페이지 크기(보통 그룹의 크기)만큼 이동
• .groupPaging : 그룹 단위로 페이지 스크롤. 그룹별 콘텐츠를 페이지처럼 표시할 때 사용
• .groupPagingCentered : 그룹 단위로 스크롤되며, 스크롤 후 그룹이 중앙에 정렬

---

마지막으로 간단히 알아보는 자주 사용되는 UICollectionView의 레이아웃의 종류

• Flow Layout (UICollectionViewFlowLayout)
  • 가장 널리 사용되는 기본 레이아웃. 셀을 행이나 열 단위로 정렬.
  • 그리드나 리스트 형태의 UI에 사용
• Compositional Layout (UICollectionViewCompositionalLayout)
  • iOS 13 이상에서 제공되는 고급 레이아웃. 복잡한 레이아웃을 쉽게 구성.
  • 대시보드, 여러 종류의 셀을 포함한 복잡한 UI에 사용
• Custom Layout (UICollectionViewLayout)
  • 직접 레이아웃을 설계하는 방법. 모든 레이아웃 동작을 완전히 커스터마이즈 가능
  • 비표준 레이아웃(예: 원형, 3D 효과, 드래그 앤 드롭 레이아웃 등)