iOS UICollectionViewFlowLayout 개발자 문서 개요

 

 

---

Class
UICollectionViewFlowLayout

UICollectionViewFlowLayout은 컬렉션뷰(UICollectionView)의 섹션에 헤더뷰 / 푸터뷰를 포함하거나, 아이템을 구성할때 사용할 수 있는 레이아웃 객체입니다. 

즉, UICollectionViewFlowLayout은 컬렉션뷰의 레이아웃 구성에 사용되는 객체라고 할 수 있습니다. 

 

 

---

Declaration
선언방식

UICollectionViewFlowLayout은 클래스로 되어있으며, UICollectionViewLayout을 상속받습니다. 
상속받는 클래스, 본 클래스 명을 보면 알 수 있듯이, UICollectionViewFlowLayout은 UICollectionView의 레이아웃 구성에 사용됩니다.

UICollectionViewLayout 클래스는 컬렉션뷰의 레이아웃 정보를 생성하기 위해 사용하는 기본 추상 클래스(abstract base class)입니다.

 

 

 

---

Overview
개요

플로우 레이아웃(flowLayout)은 컬렉션뷰 레이아웃의 타입입니다.
현재 스크롤 되는 방향에 따라 보여질 컬렉션뷰의 행 / 열의 컬렉션뷰 아이템들은 기존의 아이템들과 크기가 동일할 수도, 상이할 수도 있습니다. 

플로우 레이아웃(flowLayout)은 각각의 섹션에 존재하는 아이템 셀들 / 헤더뷰(headerView) / 푸터뷰(footerView) 등에 대한 크기를 결정하기 위해 작동하는데요. 이때 해당 컬렉션뷰의 delegate 객체와 함께 동작하게 됩니다. 

 

 

---

UICollectionViewDelegateFlowLayout

이때 flowLayout과 함께 동작하게 되는 delegate객체는 UICollectionViewDelegateFlowLayout 프로토콜을 준수해야 합니다. 

delegate 객체를 사용하는 것은 개발자가 컬렉션뷰의 레이아웃 정보를 동적으로 조절할 수 있도록 도와줍니다.
그 예를 들자면, 개발자는 그리드 내에 있는 각 아이템들의 상이한 크기를 특정하기 위해 delegate 객체를 사용할 수 있습니다.

만약 delegate 객체에 별도의 설정을 하지 않았다면, 당신이 사용하는 컬렉션뷰 클래스의 기본 설정 값(default value)에 따라 레이아웃이 적용되게 됩니다.

 

 

 

---

flowLayout 배치방식

컬렉션뷰 플로우 레이아웃(flowLayout)은 컬렉션뷰의 한 방향으로 고정된 거리 + 다른 방향으로 스크롤 가능한 거리를 사용해서 컨텐츠들을 배치하게 됩니다.

그 예를 들자면, 수직으로 스크롤 가능한 그리드가 있다면,

1) 해당 그리드 상에서 섹션, 아이템 수에 맞게 동적으로 컨텐츠의 높이값(다른 방향으로 스크롤 가능한 거리)을 조절하는 동안,
2) 너비값(컬렉션뷰의 한 방향으로 고정된 거리)은 이에 대응해서 제한됩니다. (수직 스크롤 되는 그리드 상에서 동적인 높이값 조절, 너비값 제한)

레이아웃은 기본적으로 수직으로 스크롤 되어지지만, 개발자들은 해당 방향을 수평 / 수직 방향으로 자유롭게 설정이 가능합니다. 해당 스크롤 방향 설정은 scrollDirection 프로퍼티를 사용하면 됩니다.

 

 

---

UICollectionView header / footerView
컬렉션뷰 헤더뷰, 푸터뷰

플로우 레이아웃 상에서 각 섹션은 각각 헤더뷰 / 푸터뷰를 가질 수 있습니다.

이는 grouped 타입의 테이블뷰에서 각 섹션이 헤더뷰/푸터뷰를 가질 수 있는 것과 유사합니다.

 

각 섹션의 헤더 / 푸터를 설정하기 위해서는 헤더뷰 / 푸터뷰의 높이를 0 이상으로 설정해주어야 합니다. 이러한 설명은 headerReferenceSize, footerReferenceSize 프로퍼티를 통해 적절한 값을 부여하고 설정할 수 있습니다. 

만약 헤더뷰 / 푸터뷰의 높이를 0으로 설정한다면, 해당 지정 헤더뷰 / 푸터뷰는 보이지 않게 됩니다.