[iOS] UICollectionView에서 Section 나누기

최종 프로젝트를 하며 진행한 코드들을 조금씩 기록해 봅니다. (다시 수정될 수 있겠지만-)

 

앞서 두번째 탭바에 연결되는 ToDoList Page를 CollectionView로 작업했고, 

 

오늘은 세번째 탭바로 연결되는 화면 전체를 콜렉션뷰로 설정하고,

이 콜렉션 뷰를 세개의 섹션으로 나누는 과정을 기록해 봅니다.

---

 

1. 클래스 선언 및 콜렉션뷰 선언:

class TodoCalandarViewController: UIViewController {
    
    // 콜렉션뷰 선언 (지연 초기화 사용)
    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical  // 스크롤 방향을 수직으로 설정
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .yellow  // 콜렉션뷰 배경색을 노란색으로 설정
        return cv
    }()

• TodoCalandarViewController는 UIViewController의 서브클래스이다.
• collectionView는 UICollectionView 인스턴스로, 수직(위아래) 스크롤을 설정하고 배경은 노란색으로 설정했다.

 

2. ViewDidLoad: 

override func viewDidLoad() {
    super.viewDidLoad()
    setup()  // 콜렉션뷰 설정 메서드 호출
    collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")  // 셀 등록
    collectionView.delegate = self  // 델리게이트 설정
    collectionView.dataSource = self  // 데이터 소스 설정
}

• 뷰가 로드될 때 콜렉션뷰를 설정하고, 셀을 등록하고(register), delegate와 dataSource를 설정했다.

 

3. 콜렉션뷰 설정: 

func setup() {
    view.addSubview(collectionView)  // 콜렉션뷰를 서브뷰로 추가
    
    // SnapKit을 사용하여 콜렉션뷰의 제약 조건 설정
    collectionView.snp.makeConstraints {
        $0.edges.equalTo(self.view.safeAreaLayoutGuide)  // 콜렉션뷰를 안전 영역에 맞춤
    }
}

• setup 메서드는 콜렉션뷰를 뷰의 서브뷰로 추가하고, SnapKit을 사용하여 제약 조건을 설정했다.
• 콜렉션뷰는 안전 영역의 경계에 맞춰지도록 SafeAreaLayoutGuide를 사용했다. → 상단 네비게이션 영역과 하단 탭바를 가리지 않는다.

 

4. 데이터 소스 메서드: 

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 3  // 섹션의 수를 3으로 설정
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1  // 각 섹션마다 하나의 셀을 반환
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell else {
        return UICollectionViewCell()  // 셀을 큐에서 재사용하거나 새로 생성
    }
    
    // 첫 번째 섹션의 셀에 대한 설정
    if indexPath.section == 0 {
        cell.titleLabel.text = "첫 번째 섹션의 셀"  // 첫 번째 섹션 셀의 텍스트 설정
    }
    
    return cell  // 구성된 셀 반환
}

• numberOfSections(in:) 메서드는 콜렉션뷰의 섹션 수를 3으로 설정하고,
• collectionView(_:numberOfItemsInSection:) 메서드는 각 섹션마다 하나의 셀을 반환한다.
• collectionView(_:cellForItemAt:) 메서드는 셀을 재사용 큐에서 가져오거나 새로 생성하여 구성한다. 
• dequeueReusableCell(withReuseIdentifier:for:) 메서드는 UICollectionView에서 재사용 가능한 셀을 큐에서 가져오는 역할을 한다. 셀의 재사용을 통해 성능을 최적화하고 메모리 사용을 줄이는 데 중요한 역할! →  새로운 셀을 매번 생성하는 대신, 이미 생성된 셀을 재사용하여 앱의 성능을 크게 향상시킬 수 있다.

 

5. 전체 코드 

import UIKit
import SnapKit

class TodoCalandarViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    
    // 콜렉션뷰 선언 (지연 초기화 사용)
    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical  // 스크롤 방향을 수직으로 설정
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .yellow  // 콜렉션뷰 배경색을 노란색으로 설정
        return cv
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureBackground()  // 배경 설정 메서드 호출
        configureFloatingButton()  // 플로팅 버튼 설정 메서드 호출
        setup()  // 콜렉션뷰 설정 메서드 호출
        
        // 셀 등록
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        
        // 델리게이트 및 데이터 소스 설정
        collectionView.delegate = self
        collectionView.dataSource = self
    }
    
    // 콜렉션뷰 설정
    func setup() {
        view.addSubview(collectionView)  // 콜렉션뷰를 서브뷰로 추가
        
        // SnapKit을 사용하여 콜렉션뷰의 제약 조건 설정
        collectionView.snp.makeConstraints {
            $0.edges.equalTo(self.view.safeAreaLayoutGuide)  // 콜렉션뷰를 안전 영역에 맞춤
        }
    }
    
    // 콜렉션뷰에 3개의 섹션을 선언
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }
    
    // 각 섹션에 한 개의 셀 넣어주기
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }
    
    // 셀 구성
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell else {
            return UICollectionViewCell()
        }
        
        // 첫 번째 섹션의 셀에 대한 설정
        if indexPath.section == 0 {
            cell.titleLabel.text = ""
        }
        
        return cell
    }
}

 

UICV > UICVCell > UILabel (3개씩)

 

 

다음 글에서 세 개로 나뉜 콜렉션 뷰의 첫번 째 셀에 3D 콜렉션뷰 캐로셀을 넣어봅니다.