NSCollectionLayoutSection은 UICollectionView에서 레이아웃을 정의하는 중요한 요소 중 하나인데,
이 객체는 UICollectionView 내의 섹션을 정의하고 그 섹션 안에서 아이템들이 어떻게 배치될지를 설정한다.
그리고 섹션은 NSCollectionLayoutGroup을 포함하고, 이를 통해 수평, 수직 등 다양한 레이아웃 방식이 가능하다.
NSCollectionLayoutSection의 역할
NSCollectionLayoutSection은 UICollectionView의 섹션을 구성하는 객체로 여러 개의 그룹을 하나로 묶어 구성한다.
섹션은 그룹을 포함하고, 그 그룹은 아이템들을 배치하는 방식에 따라 수평, 수직 등으로 구성되는데,
섹션은 UICollectionView 내의 한 화면을 구성하는 레이아웃의 큰 단위라고 보면 된다.
NSCollectionLayoutSection 사용해보기
NSCollectionLayoutSection을 사용하는 방법은 크게 두 가지 주요 단계로 나눌 수 있다.
-
그룹 만들기: 아이템들을 그룹화하여 섹션에 포함시킬
NSCollectionLayoutGroup을 만든다. -
섹션 만들기: 만들어둔 그룹을
NSCollectionLayoutSection에 넣고, 추가적인 설정을 한다.
1. 그룹 만들기
먼저 아이템을 구성하는 NSCollectionLayoutItem을 정의하고, 이걸 그룹으로 묶는다.
NSCollectionLayoutItem은 컬렉션 뷰의 개별 셀을 의미한다.
그리고 NSCollectionLayoutGroup은 이러한 아이템들을 묶어서 레이아웃을 정의해주는데, 내일 NSCollectionLayoutGroup에 대해 블로그 작성을 해볼 예정이다. 그때 자세히 다뤄보겠다.
아무튼 수평 그룹을 만드는 코드 예시를 보면
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개의 아이템을 수평으로 나열하는 그룹을 만든다.
2. 섹션 만들기
NSCollectionLayoutSection을 사용해 섹션을 만들어 주는데 섹션은 그룹을 포함할 수 있다.
NSCollectionLayoutGroup을 섹션에 넣고, 추가적인 레이아웃 설정을 할 수도 있는데 원한다면 interGroupSpacing을 사용해 그룹 간 간격을 설정하거나, contentInsets로 섹션의 여백을 조정할 수도 있다.
.
.
let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = 10 // 그룹 간 간격 설정
section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20) // 섹션의 여백 설정위 코드에서는 group을 포함하는 섹션을 생성하고, 그룹 간 간격과 섹션의 여백을 설정했다.
3. 섹션을 UICollectionView에 적용하기
마지막으로 NSCollectionLayoutSection을 UICollectionViewCompositionalLayout에 추가해서 UICollectionView에 레이아웃을 적용한다.
이유는 NSCollectionLayoutGroup만 정의하는 것만으로는 실제로 화면에 레이아웃이 표시되지 않기 때문인데,
UICollectionView는 UICollectionViewCompositionalLayout을 사용해서 실제로 화면에 레이아웃을 보여주기에 해야하는 작업이다.
NSCollectionLayoutGroup을 UICollectionView에 적용하려면,
해당 그룹을 NSCollectionLayoutSection에 포함시키고, 그 섹션을 UICollectionViewCompositionalLayout에 설정해야 한다.
.
.
let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout위 코드는 section을 레이아웃에 적용해서 컬렉션 뷰에 설정한다.
이렇게 되면 UICollectionView는 정의한 대로 레이아웃을 화면에 표시가 될 것이다.
NSCollectionLayoutSection의 추가 설정
-
headers: 섹션의 헤더를 설정할 수 있음
-
footers: 섹션의 푸터를 설정할 수 있음
-
orthogonalScrollingBehavior: 섹션 내에서 스크롤이 수평인지, 아니면 수직인지 설정할 수 있다.
헤더와 푸터 설정
헤더와 푸터를 설정하는 방법은
let headerItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .absolute(50)
))
let headerGroup = NSCollectionLayoutGroup.horizontal(
layoutSize: NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .absolute(50)
),
subitems: [headerItem]
)
section.boundarySupplementaryItems = [
NSCollectionLayoutBoundarySupplementaryItem(
layoutElementKind: UICollectionView.elementKindSectionHeader,
elementSize: headerGroup.layoutSize,
alignment: .top
)
]잠시 헤더와 푸터의 용도를 보자면,
-
헤더 (Header)
섹션의 시작 부분에 표시된다. 주로 섹션의 제목, 설명, 혹은 섹션을 구분할 수 있는 정보를 넣는 데 사용된다. -
푸터 (Footer)
섹션의 끝 부분에 표시된다. 섹션을 마무리하는 정보나 섹션 내에 대한 추가적인 내용을 제공하는 데 사용된다. -
헤더와 푸터의 특징
- 크기 : 헤더와 푸터는 고정된 크기를 가질 수 있으며 NSCollectionLayoutSize로 크기를 정의할 수 있다.
- 배치 : 헤더는 섹션의 상단에, 푸터는 섹션의 하단에 배치된다.
- 사용 유연성 : 헤더와 푸터는 사용자 정의 뷰를 사용할 수 있어서 텍스트 외에도 이미지나 버튼 등을 배치할 수 있다.
아무튼 위 코드에서는 섹션의 헤더를 설정했다. 헤더의 크기는 50포인트로 설정하고 섹션 상단에 배치될 것이다.
음...
처음에 NSCollectionLayoutSection을 접했을 때는 복잡해보여서 좀 당황했다.
그래도 오늘 각 그룹, 아이템, 그리고 섹션이 어떻게 상호작용하는지 차근차근 공부를 해보니 이해가 된 것 같은데
UICollectionViewCompositionalLayout을 활용해서 다양한 방법으로 레이아웃을 구성할 수 있다는게 유용하구나 라는걸 알게 되었다.
그리고 헤더와 푸터를 설정도 알게되고.... 어플들을 볼때마다 어 여기 이거 썼구나 하면서 좀 아는척을 해볼 수 있을 것 같다.
현재 과제에서도 쓰일 것이라 공부한건데, 나중에 실제 앱 개발에서 이러한 기능을 활용할 일이 많을 것 같으니 미리 이해해 두는 것이 중요하겠다는 생각도 들었다.
