[iOS] UICollectionView 파헤치기

UICollectionView

• 데이터 항목의 정렬된 컬렉션을 관리하고 커스텀한 레이아웃을 사용해 표시하는 객체 
• ScrollView를 상속받음 
• 리스트형태 및 다양한 형태로 변형 가능함

리스트형태

 

어때이 CollectionView

CollectionView 구성 

Cell

- 컬렉션 뷰의 주요 컨텐츠를 표시

- CollectionView는 dataSource 객체에서 표시할 Cell의 정보를 가져옴

SupplementaryView

- 섹션에 대한 정보를 표시함 (Header,Footer)

- 필수로 구현할 필요 없음 

DecorationView

-컬렉션 뷰에 대한 배경을 꾸밀때 사용 

- Layout 객체는 DecorationView를 사용하여 Custom한 배경을 구현할 수 있음 

 

UICollecionViewLayout

- CollecionView는 Layout 객체를 통해 CollecionView내에 아이템 배치 및 시각적 스타일을 결정함

- Cell, SupplementatyView, CollecionView의 Bound, 내부에 있는 DecorationView 위치를 결정하고

   시각적 상태의 정보를 CollecionView에 제공함 

 

UICollecionView에서는 UICollecionViewFlowLayout 클래스에 Layout 객체를 사용해서  항목들을 정렬할 수 있음

즉 해당클래스를 사용하게 되면 cell을 원하는 형태로 정렬할 수 있음

 

FlowLayout은 cell의 선형경로를 배치하는데 최대한 셀을 따라 많은 셀을 채우다가 현재 행에 더이상 셀이 들어 갈 수 없게 된다면

새로운 행을 만들어 계속 배치해 나감 

다음 사진과 같이 스크롤이 세로일 경우 Cell이 가로로 그려지고 행에 cell이 가득차면 아래에 새로운 행을 만들어 계속 채워 나감

FlowLayout으로 다양하게 방식으로 셀을 구성할 수 있음

 

 

 

 

UICollectionViewFlowLayout

구성방법

1.Flow 레이아웃 객체를 작성하고 컬렉션 뷰에 이를 할당한다.

2.셀의 높이와 넓이를 정한다. - 지정하지 않으면 0이되어 나타나지 않음

3.필요한경우 셀의 상하좌우 최소 간격을 설정한다.

4.섹션에 헤더와 푸터가 있다면 크기를 지정한다.

5.레이아웃의 스크롤 방향을 정한다.

 

 

 

 

• 셀과 행간의 간격을 설정할 수 있음 
• 최소간격으로 배치하는 방법에 따라 지정한 값보다 큰값으로 설정될 수 있음 
• 셀들의 크기가 같으면 최소로 설정한 간격을 지킬수 있지만 셀들의 크기가 다르면 실제간격이 다를 수 있음

 

 

 

섹션 자체에서 공간설정 = UIEdgeInset

 UIEdgeInsets을 사용하여 섹션 자체에 공간을 줄 수 있음

 

 

UICollecionViewDataSource

 

• 컬렉션 뷰로 보여지는 콘텐츠를 관리하는 객체 
• DataSource를 정의하기 위해서는 UICollectionView DataSource 프로토콜을 준수해야 함
• 컬렉션뷰의 몇개의 섹션이 있는지, 특정 섹션에 몇개의 셀이 있는지, 툭정 섹션이나 셀을 보여주기 위해 어떤 뷰를 사용할것인지를 컬렉션뷰에 제공하는 역할을 함

 

 

UICollectionViewDelegate

콘텐츠의 표현,사용자의 상호작용과 관련된 것들을 관리하는 객체 

DataSource와 다르게 필수로 구현해주지 않아도 됨

 

 

정리)

핵심 객체들과의 관계 

CollectionView는 DataSource에서 보여줄 셀에 대한 정보를 가져오고

Layout 객체에서 해당 셀이 속하는 위치를 결정하고 하나이상의 레이아웃 속성 객체로 CollectionView에 전송함

CollectionView는 레이아웃정보를 실제 셀이나 다른뷰들과 결합하여 최종적으로 사용자에게 보여지게 됨