CollectionView는 여러가지로 TableView와 비슷한 점이 많다. 하지만 CollectionView의 장점은 역시 Cell의 위치와 배열을 개발자 마음대로 할 수 있다는 장점이 아닐까 싶다. 그래서 이 역할의 중점적인 역할을 하는 UICollectionViewFlowLayout을 이번에 명쾌하게 알아보고자 한다.

UICollectionViewFlowLayout이 뭐야?

// Declaration
@MainActor class UICollectionViewFlowLayout : UICollectionViewLayout

위의 코드에서 보면 UICollectionViewFlowLayout은 UICollectionViewLayout을 상속받고 있다. UICollectionViewLayout은 CollectionView안에 있는 구성요소들의 시각적 배열과 조직을 구성하는 역할을 하는데, 그 중에서 UICollectionViewFlowLayout은 각 섹션의 item, Header, Footer와 같은 것들의 크기를 결정한다. 예를 들면 한 개의 행이 몇개의 item이 들어갈지, 너비와 높이는 어떻게 될지 하는 것들이다. 아직까지 감이 잡히질 않는다. 좀 더 자세하게 들여다보자.

UICollectionViewDelegateFlowLayout 을 채택하자.

UICollectionViewFlowLayout을 결정하기 위해서는 delegate 디자인 패턴인, delegate 개체를 원하는 View에 할당해줘야 한다. 그리고 UICollectionViewDelegateFlowLayout Protocol을 채택해야한다. 이제 이 delegate을 이용하여 Cell을 내가 원하는데로 조정할 수 있게 된다. 만약 delegate를 사용하지 않으면 속성의 기본값으로 나타내어진다.

// Getting the Size of Items
func collectionView(UICollectionView, layout: UICollectionViewLayout, sizeForItemAt: IndexPath) -> CGSize

// Getting the Section Spacing
func collectionView(UICollectionView, layout: UICollectionViewLayout, insetForSectionAt: Int) -> UIEdgeInsets

func collectionView(UICollectionView, layout: UICollectionViewLayout, minimumLineSpacingForSectionAt: Int) -> CGFloat

func collectionView(UICollectionView, layout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt: Int) -> CGFloat

// Getting the Header and Footer Sizes
func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForHeaderInSection: Int) -> CGSize

func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForFooterInSection: Int) -> CGSize

위 코드는 UICollectionViewDelegateFlowLayout의 메서드 들이다. 이것들을 이용하여 원하는 디자인을 구축하면 될 것이다. 여기서 특히 필수적으로 구현 해야할 것은 당연하게도 가장 첫 번째에 있는 Size of Items 메서드가 아닐까 싶다.

스크롤 방향

Flow layouts은 한 방향으로만 스크롤이 가능하고, 나머지 한 방향은 고정되어 있다. 이건 어떻게보면 많은 앱들을 사용하면서 자연스럽게 터득한 배경지식이라고 할 수 있다. 예를 들어 수직 스크롤 방향의 CollectionView라면 View의 너비는 고정되어 있고, 세로 방향의 View의 길이는 유동적으로 조절되는 것을 알 수 있다.
Default 값은 세로 스크롤이지만, 개발자가 스크롤의 방향도 바꿀 수 있다. UICollectionViewFlowLayout에 있는 scrollDirection Property를 이용하면 된다.

var scrollDirection : UICollectionView.ScrollDirection { get set } 

Header and Footer 구현

UICollectionViewFlowLayout은 Header와 Footer의 구현도 가능하다고 위에서 말했다. 이것은 delegate를 선언하여 UICollectionViewDelegateFlowLayout에 있는 Header와 Footer의 사이즈가 0이 아니게 설정하면 된다. 물론 그 안에 어떤 값이 들어갈지는 UICollectionViewDataSource에서 구현해주면 된다!

// Getting the Header and Footer Sizes
func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForHeaderInSection: Int) -> CGSize

func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForFooterInSection: Int) -> CGSize

https://developer.apple.com/documentation/uikit/uicollectionviewflowlayout/ 여기서 더 자세한 정보를 보실 수 있습니다 !