IOS) collectionView

컬렉션뷰는 리스트 형식인 테이블뷰보다 더 다양한 레이아웃을 구성하고 싶을 때 사용한다.

셀(cell)
컬렉션뷰의 주요 콘텐츠를 표시합니다. 컬렉션뷰는 컬렉션뷰 데이터 소스 객체에서 표시할 셀에 대한 정보를 가져옵니다. 각 셀은 UICollectionViewCell 클래스의 인스턴스 또는 UICollectionViewCell을 상속받은 클래스의 인스턴스입니다.

보충 뷰(Supplementary views)
섹션에 대한 정보를 표시합니다. 셀과 달리 필수는 아니며, 사용법과 배치 방식은 사용되는 레이아웃 객체가 제어합니다. 헤더와 푸터를 예로 들 수 있습니다.

데코레이션 뷰(Decoration views)
콘텐츠가 스크롤 되는 컬렉션뷰에 대한 배경을 꾸밀 때 사용합니다. 레이아웃 객체는 데코레이션 뷰를 사용하여 커스텀 배경 모양을 구현할 수 있습니다.

레이아웃 객체(Layout Object)
레이아웃 객체는 컬렉션뷰 내의 아이템 배치 및 시각적 스타일을 결정합니다. 컬렉션뷰 데이터 소스 객체가 뷰와 표시할 콘텐츠를 제공한다면, 레이아웃 객체는 크기, 위치 및 해당 뷰의 레이아웃과 관련된 특성들을 결정합니다.

컬렉션뷰와 관련된 클래스 및 프로토콜
UICollectionView : 사용자에게 보여질 컬렉션 형태의 뷰입니다.
UICollectionViewCell : UICollectionView 인스턴스에 제공되는 데이터를 화면에 표시하는 역할을 담당합니다.
UICollectionReusableView : 뷰 재사용 메커니즘을 지원합니다.
UICollectionViewFlowLayout : 컬렉션뷰를 위한 디폴트 클래스로, 그리드 스타일로 셀들을 배치하도록 설계되어있습니다. scrollDirection 프로퍼티를 통해 수평 및 수직 스크롤을 지원합니다.
UICollectionViewLayoutAttributes : 컬렉션뷰 내의 지정된 아이템의 레이아웃 관련 속성을 관리합니다.
UICollectionViewDataSource 프로토콜 : 컬렉션뷰에 필요한 데이터 및 뷰를 제공하기 위한 기능을 정의한 프로토콜입니다.
UICollectionViewDelegate 프로토콜 : 컬렉션뷰에서 아이템의 선택 및 강조 표시를 관리하고 해당 아이템에 대한 작업을 수행할 수 있는 기능을 정의한 프로토콜입니다.
UICollectionViewDelegateFlowLayout 프로토콜 : UICollectionViewLayout 객체와 함께 그리드 기반 레이아웃을 구현하기 위한 기능을 정의한 프로토콜입니다.

• UICollectionView DataSource
  컬렉션뷰 데이터소스 객체는 컬렉션뷰와 관련하여 가장 중요한 객체이며, 필수로 제공해야 합니다.

• UICollectionViewDelegate
  컬렉션뷰 델리게이트 프로토콜은 컬렉션뷰에서 셀의 선택 및 강조표시를 관리하고 해당 셀에 대한 작업을 수행할 수 있는 메서드를 정의합니다. 이 프로토콜의 메서드는 모두 선택사항입니다.

• UICollectionViewFlowLayout
  UICollectionViewFlowLayout 클래스를 사용하면 컬렉션뷰의 셀을 원하는 형태로 정렬할 수 있습니다. 플로우 레이아웃은 레이아웃 객체가 셀을 선형 경로에 배치하고 최대한 이 행을 따라 많은 셀을 채우는것을 의미합니다. 현재 행에서 레이아웃 객체의 공간이 부족하면 새로운 행을 생성하고 거기에서 레이아웃 프로세스를 계속 진행합니다.

컬렉션뷰의 콘텐츠(데이터)를 관리하고 해당 콘텐츠를 표현하는 데 필요한 뷰를 만듭니다. 데이터소스 객체를 구현하려면 UICollectionViewDataSource 프로토콜을 준수하는 객체를 만들어야 합니다.

컬렉션뷰를 구성하기 위한 delegate, datasource를 알아보며 컬렉션뷰를 구성하고
diffable datasource, snapkit을 사용해서 컬렉션뷰를 구성해볼 예정이다.

1. 기존 방법으로 구성하기

extension MainViewController: UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let interval:CGFloat = 0.5
    let width: CGFloat = ( UIScreen.main.bounds.width - interval * 4 ) / 5
    return CGSize(width: width , height: width*2 )
  }
  
  func collectionView(_ collectionView: UICollectionView,
      layout collectionViewLayout: UICollectionViewLayout,
      minimumLineSpacingForSectionAt section: Int) -> CGFloat {
          return 3
    }

  //3
    func collectionView(_ collectionView: UICollectionView,
      layout collectionViewLayout: UICollectionViewLayout,
      minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
          return 3
    }
}

2. diffableDatasource, snapshot 사용하기