Compositional Layout 이란?
WWDC19에서 도입 된 Compositional Layout 은 UICollectionViewLayout의 서브클래스로, 복잡한 CollectionView 레이아웃을 더 쉽게 정의하고 관리할 수 있도록 도와준다.
WHY? -> 🖥️ Layout 이슈
- 기존의
UICollectionViewFlowLayout대부분의 단순 디자인에서는 좋은 역할을 해왔다. - 다만, 점점 복잡한 디자인이 되었을때는,
CustomLayout을 그때 마다 구현 해 주어야한다.
-> 효율성 저하 + 디자이너와 마찰
개념
CollectionView를 구성하는 Layout을 3가지의 개념(Item, Group, Section)으로 구성해서 배치한다.
구현
이 개념들을 이용해서 Layout을 배치하는 코드는 다음과 같다.
layout을 만들기 위해서는 section이 필요하고,
section을 만들기 위해서는 group이 필요하고,
group을 만들기위해서는 layoutSize와 subitems(item)가 필요하고,
item을 만들기 위해서는 size가 필요하고,
size를 만들기 위해서는 가로, 세로의 치수가 필요한데,
이 치수를 정해주는 방법은 다음과 같다.
fractionalWidth&fractionalHeight- 컨테이너와의 너비&높이 비율
absolute- 포인트값으로 지정
estimated- 나중에 content의 크기가 바뀌어 크기가 정확하지 않을 때
ex) .fractionalWidth(0.25)는 컨테이너의 너비의 25%
ex) .absolute(30)은 30만큼의 크기를 가짐. (크기 고정)
ex) .estimated(30)은 기본적으로 30의 크기를 가지지만, 동적으로 변화가능. 콘텐츠의 양에 따라 크기가 증가하거나 감소할 수 있음. 최소 크기 30
실제 구현을 해보았다.
private func layout() -> UICollectionViewCompositionalLayout {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.33), heightDimension: .fractionalWidth(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(0.33))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, repeatingSubitem: item, count: 3)
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)
let layout = UICollectionViewCompositionalLayout(section: section)
return layout
}
}여기서 group에서의 count는 그룹 내에서 나열되는 항목의 수이며, 3으로 설정 되어 있으므로 가로로 3개의 항목을 가진다.
contentInsets를 사용하여 섹션의 여백을 왼쪽, 오른쪽 16으로 설정 하였다.
마치며
어렵게 고민해서 구현하던 기존의 방식이 매우 편하게 구현 가능할 수 있도록 바뀌었다.
복잡한 컬렉션 & 테이블 뷰를 구성할 때 사용하면 매우 좋을 것 같다.
