UICollectionView ContentView / UICollectionViewFlowLayout
UICollectionView
데이터 항목의 정렬된 컬렉션을 관리하고 커스텀한 레이아웃을 사용해 표시하는 객체.
CollectionView 의 구성
- Supplementary View : Section에 대한 정보를 표시 (header-footer. 필수적으로 구현 X)
- Cell : Collection View 의 콘텐츠를 표시
UICollectionView, UITableView 의 ContentView
UIView 타입으로, Cell 을 구성할 때 Cell Content 를 나타내는 모든 Custom View 를 Content View 에 추가한다.
Cell 객체는 BackgroundView 앞에 Content View 를 배치한다.
* Decoration View : Collection View 에 대한 배경 설정
UICollectionViewLayout & UICollectionViewFlowLayout
1. UICollectionViewLayout
Layout 객체를 통해 CollectionView 내에 아이템 배치 및 시각적 스타일을 결정한다.
Layout 객체가 하는 일은 Cell, Supplementary View, Collection View 의 Bound, 내부에 있는 Decoration View 위치 를 결정하고, 시각적 상태의 정보를 CollectionView 에 제공한다.
2. UICollectionViewFlowLayout
UICollectionView 에서는 UICollectionViewFlowLayout 클래스의 Layout 객체를 사용하여 항목들을 정렬할 수 있다. 해당 클래스를 사용하게 되면 Cell 을 원하는 형태로 정렬할 수 있다.
FlowLayout 은 Cell 의 선형 경로를 결정한다. 최대한 행을 따라 많은 Cell 을 채우다가(현재 행에 최대한 많은 Cell 을 채우다가) 다 채웠다면 다음 행에 자동으로 채워준다.
2.1 UICollectionViewFlowLayout 구성 단계 (하단 구현 부분에 상세 과정 설명)
① Flow Layout 객체를 작성하고 CollectionView 에 이를 할당한다.
② Cell 의 width, height 를 정한다. <필수>
③ 필요한 경우 Cell 들 간의 좌우 최소 간격, 위아래 최소 간격을 정한다.
④ Section 에 header / footer 가 있다면 이들의 크기를 정한다.
⑤ Layout 의 Scroll 방향을 정한다.
2.2 Cell 과 행 사이의 간격 설정
: 설정한 간격은 최소 간격으로 배치하는 방법에 따라, 지정한 값보다 큰 값으로 설정될 수 있다.
Cell 들의 크기가 같으면 최소로 설정한 간격을 지킬 수 있지만, Cell 들의 크기가 다르면 실제 간격이 다를 수 있다.
2.3 Section 자체에 간격 설정
## UIEdgeInset 을 통해 top, left, bottom, right 간격을 줄 수 있다.
UICollectionViewDataSource
CollectionView 로 보여지는 콘텐츠들을 관리하는 객체.
numberOfItemsInSection 메서드 와 cellForItemAt 메서드는 필수로 구현해야 한다.
UICollectionViewDelegate
콘텐츠의 표현. 사용자와의 상호작용과 관련된 것들을 관리하는 객체.
CollectionView 와 관련된 핵심 개체들의 관계
CollectionView 는 DataSource 에서 보여줄 Cell 에 대한 정보를 가져오고, Layout 객체에서 해당 Cell 이 속하는 위치를 결정하고, 하나 이상의 Layout 속성 객체로 CollectionView 에 전송한다.
이후, CollectionView 는 Layout 정보를 실제 Cell 이나 다른 뷰들과 결합하여 최종적으로 사용자에게 보여지게 된다.
구현
① Storyboard 에서 CollectionView 를 생성한 뒤, Constraints 를 부여한다.
② CollectionView 의 Custom Cell 을 구성한다. - Cell 을 행마다 몇개씩 보여줄지
- 속성 Inspector 에서 Identifier 를 설정한다. (WordCell)
- 셀이 행마다 원하는 갯수로 생성되게 하려면, 아이폰 해상도에 따라 Cell 의 Width 값이 동적으로 변경되어야 하므로, 이후에 Cell 의 크기는 코드로 구성한다.
- Cell 에 포함될 Label 등의 UI를 구성한다. → 추가 시 Cell 의 속성 Inspector 에서 Content View를 체크하여 Content 에 해당하는 View 의 SuperView 를 추가한다.
이후 CollectionView Cell 에 어떠한 방식으로 보여줄지 구성한다.
③ 먼저 UICollectionViewFlowLayout 객체를 생성한다.
④ 필요한 경우 Cell 들 간의 좌우 최소 간격, 위아래 최소 간격을 정한다.
Cell 의 width, height 를 정한다. <필수>
⑤ Section 에 header / footer 가 있다면 이들의 크기를 정한다.
⑥ Layout 의 Scroll 방향을 정한다. (기본 값: Vertical)