[iOS/UIKit] UICollectionViewLayout 정리

CollectionLayout

ColletionView의 레이아웃을 생성하기 위한 추상적인 베이스 클래스

@MainActor
class UICollectionViewLayout : NSObject

• 여러 collectionView를 잘 보여주기 위한 레이아웃이다
• 먼저 subclassing을 해야한다
• collectionView는 cells, supplementary view, decoration views 로 구성된다

*UICollectionViewLayout을 사용하기 전에, CompositionalLayout을 수정할 수 있는지도 확인 해야한다.?? 이건 무슨 말일까?

 

Subclassing

Layout object는 collection view에서의 항목 위치, 크기 및 시각적 상태를 정의한다.

Layout views은 colleciton view의 data source에 의해 만들어진다.

*여기서 data source란?

: Colllection View에 표시되는 데이터를 제공하는 객체

• UICollectionViewDataSource 프로토콜을 채택한 객체가 데이터 소스 역할을 수행한다
• 데이터 소스는 CollectionView에게 섹션의 수, 각 섹션에 있는 항목의 수, 각 항목에 대한 셀을 어떻게 구성할지 등을 알려준다.
  • UICollectionViewDataSource 프로토콜은 다음과 같은 메서드를 정의합니다:
  1. numberOfSections(in:): CollectionView에 표시될 섹션의 수를 반환합니다.
  2. collectionView(_:numberOfItemsInSection:): 지정된 섹션에 표시될 항목의 수를 반환합니다.
  3. collectionView(_:cellForItemAt:): 지정된 위치에 표시할 셀을 반환합니다.

 

Collection View 구성 3가지

• 셀(Cell)
  • layout에 의해 배치되는 주요 요소
  • collectionView의 단일 데이터를 나타냄
  • 셀은 선택, 끌기, 재정렬 등의 작업을 수행할 수 있음(interactive 작업)
  • 단일 셀 그룹을 포함/여러 섹션으로 나눌 수 있다
• 보충 뷰(Supplementary view)
  • 데이터 표시는 가능 but, 사용자가 선택할 수는 없음
  • 특정 섹션/전체 컬렉션 뷰의 header, footer, title 등의 기능을 구현할 수 있다
  • 선택사항이며, 사용 및 배치는 레이아웃에 의해 정의된다
• 장식 뷰(Decoration view)
  • 보충 뷰처럼 선택사항이며, 시각적 꾸밈을 위한 것이므로, 선택할 수 X(interactive X)
  • ex. 뱃지, 배경 패턴 등

 

정리(collection view & layout)

즉, collection view에 있는 아이템(항목, cell)을 잘 보여주기 위해선, layout을 어떻게 구성했는지가 중요하다.
layout ⇒ collection view의 보여지는 방식

layout을 생성하고 등록해야 collectionView에 데이터가 잘 나오는지도 확인이 가능한 것!

그렇다면 layout을 굳이 커스텀 안하고 간단하게 쓸 수 있는거 없을까? ⇒ Flow layout

 

예시) Flow layout

Flow layout은 UICollectionViewLayout의 서브클래스 중 하나로, CollectionView의 셀들을 일정한 간격으로 배치해준다.

수직, 수평 방향으로 셀들을 나열할 수 있으며, 스크롤 방향대로 유동적 이동 가능.

Flow layout 사용 예시

import UIKit

class MyCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
    
    let reuseIdentifier = "Cell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 셀 등록(Register cell classes) -> colelction view 구성
        self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        
        // flowlayout 설정
        if let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.scrollDirection = .vertical // 수직 스크롤
            flowLayout.minimumInteritemSpacing = 10 // 셀 간의 수평 간격
            flowLayout.minimumLineSpacing = 10 // 셀 간의 수직 간격
            flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) // 섹션의 여백
        }
    }

    // MARK: UICollectionViewDataSource
    // 데이터 관련 프로토콜(몇개 보여야하는지, 어디까지 끊을 것인지)

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20 // 20개의 아이템
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
        cell.backgroundColor = UIColor.blue
        return cell
    }

    // MARK: UICollectionViewDelegateFlowLayout
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 셀의 크기 지정
        let cellWidth = (collectionView.bounds.width - 30) / 2 // 가로로 2개의 셀이 보이도록
        return CGSize(width: cellWidth, height: cellWidth) // 정사각형 형태로 크기 지정
    }
}

 

[참고 자료]

Apple developer - UICollectionViewLayout