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 들 간의 좌우 최소 간격, 위아래 최소 간격을 정한다.

 

CollectionView 에 들어가는 Cell의 크기를 설정하는 메서드

Cell 의 width, height 를 정한다. <필수>

 

⑤ Section 에 header / footer 가 있다면 이들의 크기를 정한다.

⑥ Layout 의 Scroll 방향을 정한다. (기본 값: Vertical)