NSCollectionLayoutGroup은 UICollectionView의 레이아웃을 구성하는 데 중요한 역할을 하는 클래스다.

UICollectionView는 여러 개의 아이템을 화면에 표시할 때 사용되는데,

이 아이템들을 어떻게 배치할지 정의하는 것이 바로 레이아웃이다.

NSCollectionLayoutGroup은 그 중에서도 여러 아이템을 묶어서 한 단위로 처리할 수 있게 해주는 객체라고 할 수 있다.

쉽게 말해서 NSCollectionLayoutGroup은 여러 아이템들을 그룹으로 묶어서 배치하는 방법을 정의하는데 여러 개의 셀을 수평으로 나열하거나, 세로로 쌓는 것과 같은 방식이라고 보면 된다.

그래서 보다 더 복잡하고 정교한 레이아웃을 쉽게 만들 수 있게 된다.

NSCollectionLayoutGroup을 사용하는 이유

UICollectionView에서 레이아웃을 설정할 때 단순히 아이템들을 한 줄로 배치하는 것만으로는 부족할 때가 있을 것이다.

현재 나의 과제도 그렇지만 가로로 여러 개의 아이템을 배치하고, 그 아래에 또 다른 아이템을 세로로 나열하거나,

아니면 아이템을 그리드 형식으로 배치하고 싶을 때가 있을 수도 있는데, 이럴 때 NSCollectionLayoutGroup이 유용하게 쓰인다.

그리고 그룹을 이용하면 여러 아이템들을 묶어서 하나의 큰 레이아웃 단위로 다룰 수도 있고 수평, 수직, 그리드 등 다양한 배치 방식도 손쉽게 구현할 수 있다.

NSCollectionLayoutGroup의 기본 사용법

NSCollectionLayoutGroup은 크게 두 가지 주요 레이아웃 방식으로 아이템들을 배치한다.

그것은 바로 수평 그룹과 수직 그룹이다.

각 그룹은 NSCollectionLayoutItem들을 포함하고, 그 아이템들을 수평이나 수직으로 배치할 수 있다.

---

수평 그룹 (Horizontal Group)

수평 그룹은 아이템들이 한 줄로 나열되는 그룹인데, 여러 개의 셀을 가로로 나열하고 싶을 때 사용한다.

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

let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .absolute(100)
    ), 
    subitems: [item, item, item]
)

위 코드는 하나의 그룹 안에 3개의 아이템을 가로로 나열하는 방식이다.

각 아이템의 크기는 fractionalWidth(1.0)와 fractionalHeight(1.0)을 사용하고

아이템이 전체 그룹 안에서 100%를 차지하도록 설정을 했다.

수직 그룹 (Vertical Group)

수직 그룹은 아이템들이 세로로 나열되는 그룹인데, 여러 개의 셀을 세로로 배치하고 싶을 때 사용한다.

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

let group = NSCollectionLayoutGroup.vertical(
    layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .absolute(200)
    ), 
    subitems: [item, item]
)

위 코드에서는 두 개의 아이템을 세로로 나열하는 수직 그룹을 만들었고 그룹의 높이는 200으로 고정한 뒤 각 아이템은 높이를 100% 차지하도록 설정했다.

---

NSCollectionLayoutGroup을 활용한 복잡한 레이아웃 만들기

NSCollectionLayoutGroup은 단순히 수평 또는 수직으로 아이템을 배치하는 것뿐만 아니라,

여러 그룹을 조합하여 복잡한 레이아웃을 만들 수 있는데, 수평 그룹 안에 수직 그룹을 넣거나, 그 반대로 배치할 수도 있다.

수평 그룹 안에 수직 그룹 넣기

조금 (나에겐)난이도가 있는 수평 그룹 안에 여러 개의 수직 그룹을 넣은 코드를 보자.

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

let verticalGroup = NSCollectionLayoutGroup.vertical(
    layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(0.5),
        heightDimension: .absolute(200)
    ), 
    subitems: [item1, item1]
)

let horizontalGroup = NSCollectionLayoutGroup.horizontal(
    layoutSize: NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .absolute(300)
    ), 
    subitems: [verticalGroup, verticalGroup]
)

이 코드는 NSCollectionLayoutGroup을 사용하여 두 개의 수직 그룹(verticalGroup)을 수평으로 나열하는 레이아웃을 만들고 있는건데 각각의 부분을 간단히 설명하자면,

1. item1
   NSCollectionLayoutItem을 정의하여 각 아이템의 크기를 설정하는데 여기서는 아이템이 그룹 내에서 width: 100%, height: 100%로 설정되어서 각 아이템이 그룹의 크기를 완전히 채운다.

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

2. verticalGroup
   verticalGroup은 수직 그룹을 정의한다. 이 그룹은 두 개의 item1을 세로로 나열하는 그룹이고 그룹의 너비는 전체 화면의 50%로 설정한뒤 높이는 200포인트로 고정된다.

   let verticalGroup = NSCollectionLayoutGroup.vertical(
       layoutSize: NSCollectionLayoutSize(
           widthDimension: .fractionalWidth(0.5),
           heightDimension: .absolute(200)
       ), 
       subitems: [item1, item1]
   )

3. horizontalGroup
   horizontalGroup은 수평 그룹을 정의하고 이 그룹은 두 개의 verticalGroup을 가로로 나열하는 그룹인데 그룹의 너비는 화면 전체의 100%로 설정하고, 높이는 300포인트로 고정된다.

   let horizontalGroup = NSCollectionLayoutGroup.horizontal(
       layoutSize: NSCollectionLayoutSize(
           widthDimension: .fractionalWidth(1.0),
           heightDimension: .absolute(300)
       ), 
       subitems: [verticalGroup, verticalGroup]
   )

• verticalGroup은 두 개의 아이템을 세로로 나열한 그룹이고
• horizontalGroup은 두 개의 verticalGroup을 가로로 나열한 그룹이다.
• horizontalGroup의 크기는 화면 너비의 100%, 높이는 300포인트로 설정된다.
• 이건 두 개의 세로 그룹을 가로로 배치한 복잡한 레이아웃을 구성한다.

---

NSCollectionLayoutGroup을 UICollectionView에 적용하기

이제 NSCollectionLayoutGroup을 UICollectionView에 적용하는 방법이 있다.

NSCollectionLayoutGroup은 NSCollectionLayoutSection과 결합하여 최종적인 레이아웃을 구성한다.

let section = NSCollectionLayoutSection(group: horizontalGroup)
let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout

코드 설명을 해보자면

1. let section = NSCollectionLayoutSection(group: horizontalGroup)

• NSCollectionLayoutSection은 UICollectionView의 레이아웃에서 섹션을 나타낸다.
• 섹션 안에 어떤 그룹(group)이 배치될지를 정의한다.
• horizontalGroup은 이미 정의된 NSCollectionLayoutGroup 객체로, 수평으로 배치된 그룹을 의미한다.
• 그러니까 section은 horizontalGroup을 포함한 하나의 섹션을 나타낸다는 것이다.

2. let layout = UICollectionViewCompositionalLayout(section: section)

• UICollectionViewCompositionalLayout은 UICollectionView에서 사용할 레이아웃 객체를 생성한다.
• 이 레이아웃은 위에서 정의한 section을 기반으로 만들어진다.
• 컴포지셔널 레이아웃은 다양한 레이아웃 구성 방식을 지원하고, 복잡한 형태의 섹션도 쉽게 정의할 수 있게 한다.
• 결과적으로 layout은 하나의 섹션(section)을 포함한 UICollectionView의 전체적인 레이아웃을 나타낸다.

3. collectionView.collectionViewLayout = layout

• 생성된 layout을 collectionView의 레이아웃으로 설정하는 부분이다.
• UICollectionView는 기본적으로 레이아웃을 사용하여 아이템과 섹션을 화면에 배치한다.
• 여기서는 layout이 설정되면서, 컬렉션 뷰가 horizontalGroup 기반의 섹션을 사용해 화면에 아이템들을 배치하게 된다

.
.

이 코드의 핵심 역할로는

• NSCollectionLayoutSection: 섹션 내부에 어떤 그룹을 배치할지 정의.
• UICollectionViewCompositionalLayout: 복잡한 레이아웃을 정의하는 핵심 클래스.
• collectionView.collectionViewLayout: 컬렉션 뷰에 레이아웃을 적용.

---

음...

NSCollectionLayoutGroup은 UICollectionView에서 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와준다.

여러 아이템을 그룹으로 묶어서 수평 또는 수직으로 배치할 수 있고 그룹을 조합해 다양한 형태의 레이아웃을 만들 수도 있다.

NSCollectionLayoutGroup을 잘 활용하면 복잡한 컬렉션 뷰 레이아웃을 잘 만들 수 있게 된다.

잘 활용하면.. !!!