[iOS - swift] 1. collectionView 개념

1. collectionView 개념

2. collectionView 구현, custom cell

3. collectionView 레이아웃 (UICollectionViewFlowLayout)

CollectionView의 개념

• CollectionView와 TableView의 차이점
  • CollectionView는 cell이 grid형태 
  • CollectionView는 UICollectionViewLayout이라해서 cell 레이아웃 설정하는 부분이 따로 존재
  • tableView에서의 "row"라는 용어가 "Item"으로 사용
• CollectionView와 TableView의 공통점
  • Section과 Cell이 존재하고 dataSource를 가지고 데이터처리와 UI 처리가 분리되어 있는 구조
  • TableView와 동일하게 하나의 Section에는 Header, cell, Footer가 존재

• CollectionView에서의 DataSource 구조
  • DataSource는 배열 하나를 가지고 있고, 이 배열안에는 Section별 배열이 존재하며, 이 section에는 item이 존재
  • tableView에서는 "row" 였다면, CollectionView는 "item"
    • ex) cellForRowAt -> cellForItemAt
    • ex) dataSource[indexPath.row] -> dataSource[indexPath.item]
    • ex) didSelectRowAt -> didSelectItemAt

CollectionView의 구조

이미지 출처: https://seoyoung612.tistory.com/115?category=790470

• Cell: 주요 콘텐츠 표출, collectionView의 dataSource에서 셀에 표시할 데이터를 가져와서 표출
• Supplementary View: Section에 관한 정보를 표출하며, Header와 Footer View 역할
• 데코레이션뷰: 래ㅐ
• 레이아웃 객체: 컬렉션 뷰 내의 아이템 layout, style 결정 - dataSource에서 데이터를 불러올 때 해당 레이아웃 객체에서 prepare()함수에서 계산 후 표출

UICollectionViewLayout

• Cell의 레이아웃을 설정하는 클래스
• 디폴트로 제공되는 레이아웃: UICollectionViewFlowLayout (선형 경로에 배치하고 최대한 행을 따라 많은 셀을 채우는 것)

UICollectionViewFlowLayout 형태 (이미지 출처 - https://seoyoung612.tistory.com/entry/swift-%EC%8A%A4%EC%9C%84%ED%94%84%ED%8A%B8-UICollectionViewFlowLayout)

UICollectionViewFlowLayout 형태

• 컨텐츠 사이의 여백 - inset 프로퍼티 사용

Cell 등록

• storyboard에서 방식
  • storyboard에서 cell의 inspector에서 class이름 입력 (또는 코드에서 register class or nib)
  • dataSource에서 cell 할당 (tableView의 cellForRowAt)
• progrmatically 방식
  • registerClass:forCellWithReuseIdentifier: 또는 registerNib:forCellWithReuseIdentifier: 사용
  • dataSource에서 cell 할당 (tableView의 cellForRowAt)

* 참고

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCellsandViews/CreatingCellsandViews.html#//apple_ref/doc/uid/TP40012334-CH7-SW3

https://seoyoung612.tistory.com/115?category=790470