[iOS] UICollectionView 사용법

가장 먼저 Storyboard에서 기본 View Controller에 Collection View를 넣어줍니다.

그럼 위와 같은 모양으로 컬렉션 뷰가 생성됩니다. constraint 도 넣어주도록 합니다.

 

상하좌우 여백이 없도록 0으로 넣어주겠습니다.

 

그 후 cell을 디자인해줍니다. cell에 vertical stack view를 넣어 주고 그 안에 image view 와 label을 넣어주었습니다.

 

다음은 이 뷰에 관한 Controller 클래스 를 만들어주었습니다. Storyboard 에서 custom class에 방금 생성한 클래스의 이름을 넣어주면 아울렛 변수를 연결할 수 있는 상태로 바뀝니다. 스토리보드에서 collectionv view를 선택하고 코드로 끌어와서 아울렛 변수를 생성해줍니다.

이제 collection view 를 코드로 제어해야겠죠? 아래쪽에 extentsion으로 컨트롤러에 UICollectionViewDelegate 와 UICollectionViewDataSource 프로토콜을 상속받아옵니다.

 

이제 cell을 custom 할 수 있도록 cell에 관한 클래스도 만들어줍니다. CocoaTouchClass를 선택한 후, 다음과 같이 UICollectionViewCell을 상속받도록 선택해줍니다.

 

Storyboard에서 cell을 선택한 후, 방금 만든 클래스 이름을 우측의 Custom Class에 입력합니다. 그러면 아웃렛 변수를 연결할 수 있게 됩니다. 이제 cell을 구성하는 요소들을 끌어와 Outlet변수를 선언업니다.

 

스토리보드로 돌아와 해야 하는 중요한 일이 하나 더 있습니다. CollectionView는 cell을 재사용하게 되는데, 이 재사용하는 cell을 알아낼 때 이용하는 것이 우측 Collection Reusable View의 Identifier입니다. 여기에 식별자를 적어줘야 코드에서 cell을 알아낼 수 있습니다. identifier의 이름을 "cell"이라고 적어주었습니다.

 

collectionView의 delegate와 dataSource를 self로 해 준 후, extension으로 추가한 부분에 필요한 delegate 메서드와 datasource 메서드를 구현합니다.

기본적으로 section당 item의 갯수를 반환하는 메서드

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
      return 50
}

재사용 cell에 데이터를 넣어주는 메서드

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCollectionViewCell
      
      cell.image.image = UIImage(named: "jiro.jpg")
      cell.label.text = "food"
      return cell
}

이 두 개를 넣어주기만 해도 collectionView는 다음과 같이 동작합니다.

 

 

더 많은 메서드를 알아보려면 아래 링크를 참조하세요!

 

UICollectionViewDelegate 관련 메서드

https://developer.apple.com/documentation/uikit/uicollectionviewdelegate

Apple Developer Documentation

UICollectionViewDataSource 관련 메서드

developer.apple.com/documentation/uikit/uicollectionviewdatasource

Apple Developer Documentation

위의 과정만 거쳐도 UICollectionView가 동작하긴 하지만 더 정밀한 레이아웃을 구성하려면 다음 프로토콜을 채택해야 합니다.

protocol UICollectionViewDelegateFlowLayout

//특정 item cell의 사이즈를 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, sizeForItemAt: IndexPath) -> CGSize {
}

//특정 section의 마진을 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, insetForSectionAt: Int) -> UIEdgeInsets {
}

//cell의 위아래 간격을 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, minimumLineSpacingForSectionAt: Int) -> CGFloat {
}

//cell의 양 옆 간격을 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt: Int) -> CGFloat {
}

//header의 사이즈를 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForHeaderInSection: Int) -> CGSize {
}

//footer의 사이즈를 정함
func collectionView(UICollectionView, layout: UICollectionViewLayout, referenceSizeForFooterInSection: Int) -> CGSize {
}

 

이상 UICollectionView를 사용하는 방법을 간단하게 정리해 보았습니다!☺️