UICollectionViewCompositionalLayout

UICollectionViewCompositionalLayout은
iOS 13에서 도입된 강력하고 유연한 레이아웃 시스템으로,
복잡하고 다양한 레이아웃을 손쉽게 구성할 수 있도록 설계되었습니다. 

🔴 레이아웃 (Layout)

UICollectionViewCompositionalLayout을 사용하여 복잡한 레이아웃을 손쉽게 구현할 수 있음

1. UICollectionViewCompositionalLayout:
   •   여러 섹션이 서로 다른 레이아웃을 가질 수 있는 컬렉션뷰 레이아웃을 구성하는 객체
   •   NSCollectionLayoutSection 객체를 사용하여 섹션 단위로 레이아웃을 정의
2. NSCollectionLayoutSection:
   •   컬렉션뷰의 각 섹션에 대한 레이아웃을 정의
   •   섹션 내의 그룹 및 아이템의 크기, 간격, 방향 등을 설정할 수 있음
   •   헤더, 푸터 등의 보조 뷰도 설정할 수 있음
3. NSCollectionLayoutGroup:
   •   아이템을 그룹화하여 배치하는 데 사용
   •   그룹 내에서 여러 아이템을 한 번에 구성할 수 있으며, 그룹의 크기와 방향을 정의
4. NSCollectionLayoutItem:
   •   컬렉션뷰에서 각 개별 아이템의 레이아웃 속성을 정의
   •   아이템의 크기, 간격, 셀 내 여백 등을 설정할 수 있음

UICollectionViewCompositionalLayout에서 

NSCollectionLayoutDimension을 정의할 때 사용하는 두 가지 옵션

1️⃣ .fractionalWidth: 부모 요소의 너비를 기준으로 비율을 설정

       0.0에서 1.0 사이의 값을 사용하여, 부모 요소의 너비 중 몇 퍼센트를 차지할지를 결정

2️⃣ .absolute: 고정된 픽셀 값을 사용하여 크기를 설정 특정한 크기를 절대값으로 지정할 수 있음

 

🔵 데이터 소스 (Data Source)

데이터 소스는 컬렉션뷰에 표시할 데이터를 관리하고, 셀을 구성하는 역할

모던 컬렉션뷰에서는  UICollectionViewDiffableDataSource와 NSDiffableDataSourceSnapshot을

사용하여 데이터를 더 안전하고 효율적으로 관리

1. UICollectionViewDiffableDataSource:
   •   데이터 소스의 최신 구현 방식으로, 타입 안전성과 성능을 보장
   •   cellProvider 클로저를 통해 데이터 항목에 적합한 셀을 반환
   •   데이터의 변경 사항을 반영하기 위해 스냅샷을 사용하여 컬렉션뷰를 업데이트
2. NSDiffableDataSourceSnapshot:
   •   컬렉션뷰의 현재 데이터 상태를 나타내는 구조체
   •   데이터 항목의 추가, 삭제, 업데이트를 처리하며, 이를 적용하여 컬렉션뷰를 동기화
   •   데이터의 변경을 적용할 때 애니메이션을 제공하여 사용자 경험을 향상

 

⌨️ 예제코드

🔴

 

🔵