[Swift] UICollectionView에서 Section을 나눠 보자!

준비물 & 들어가며

이전 포스팅에 이어서 작업하는 튜토리얼 이지만 이미 작성된 기본 UICollectionView만 있다면 조금이나마 도움이 될 거 같습니다! 이번에 구현할 것은 UICollectionView를 3개의 Section으로 나누는 것 입니다~ (섹션에 들어가는 셀은 다음 포스팅에서 다루겠습니다.)

가끔 UI 튜토리얼 보면 상단 컬렉션 뷰는 자동으로 넘어가는 카드뷰, 바로 아래에는 다른 컬렉션 뷰를 놓는 다 던가, 같은 화면에서 다른 컬렉션 뷰들이 들어가 있는 것을 볼 수 있습니다. 

이때 각각의 컬렉션 뷰를 구현해도 되겠지만 Section을 나누어 구현해도 됩니다~ 어떻게 구현할 수 있는지 알아봅시다~~

---

section의 갯수를 지정하는 메소드가 있습니다.

optional func numberOfSections(in collectionView: UICollectionView) -> Int

 optional이기 때문에 작성하지 않아도 오류가 발생하지 않습니다.

3개의 섹션을 생성하겠습니다

func numberOfSections(in collectionView: UICollectionView) -> Int {
    3
}

so simple

 

그리고 각 섹션에 한 개의 셀만 넣어 주겠습니다

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

커스텀 셀을 넣기 위해 파일을 생성해 주겠습니다.

 

cocoa Touch class 선택해 주시고

Subclass 를 UICollectionViewCell로 지정해 주세요

class 명은 원하시는 걸로 지으시면 됩니다

XIB를 이용해서 UI를 작성하고 싶으시다면 'Also create XIB file'에 체크해 주시면

xib 파일이 생성됩니다

저는 간단한 셀을 구현할 것이기 때문에 넘어가 주도록 하겠습니다.

 

섹션을 총 3개 만들었고 각 섹션에 따른 UICollectionViewCell 파일을 생성해 주었습니다.

각 UICollectionViewCell을 알아 볼 수 있도록 방금 생성한 파일에 아래와 같이 적어줍니다

색상은 다 다르게 작성해 주세요

import UIKit

class MinutePickerCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = #colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

다시 ViewController.swift 파일로 돌아와 주세요

재사용 셀에 등록해야 할 때 사용할 identifier는 셀에서 지정한 것과 컬렉션 뷰에 등록한 id의 철자가 다르면 제대로 작동하지 않습니다.

그래서 아래와 같이 identifier을 작성해 주겠습니다.

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
    
    let ID_DATE_CELL = "DatePickerCell"
    let ID_HOUR_CELL = "HourPickerCell"
    let ID_MIN_CELL = "MinutePickerCell"
    
    
    //(이하 생략)

이제 섹션 별로 cell을 지정해 줍니다

cellForItemAt 메소드를 아래와 같이 수정합니다.

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        var cell = UICollectionViewCell()
        
        if indexPath.section == 0 {
            cell = collectionView.dequeueReusableCell(withReuseIdentifier: ID_DATE_CELL, for: indexPath) as! DatePickerCell
        } else if indexPath.section == 1 {
            cell = collectionView.dequeueReusableCell(withReuseIdentifier: ID_HOUR_CELL, for: indexPath) as! HourPickerCell
        } else {
            cell = collectionView.dequeueReusableCell(withReuseIdentifier: ID_MIN_CELL, for: indexPath) as! MinutePickerCell
        }
        
        return cell
    }

collectionView에 해당 셀을 등록해 줍니다. viewDidLoad 부분에서

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(collectionView)
        
        self.collectionView.delegate = self
        self.collectionView.dataSource = self
        
        // 수정된 부분 ----------------------------------------------------------------------------------------
        self.collectionView.register(DatePickerCell.self, forCellWithReuseIdentifier: ID_DATE_CELL)
        self.collectionView.register(HourPickerCell.self, forCellWithReuseIdentifier: ID_HOUR_CELL)
        self.collectionView.register(MinutePickerCell.self, forCellWithReuseIdentifier: ID_MIN_CELL)
        // ----------------------------------------------------------------------------------------
        self.collectionView.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
        
        
        let constraints = [
            collectionView.heightAnchor.constraint(equalToConstant: 180),
            collectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            collectionView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300)
        ]
        
        NSLayoutConstraint.activate(constraints)
        
    }

각 셀의 높이와 넓이를 지정해 주기 위해 메소드를 써주겠습니다.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize

이 메소드는 collectionView를 인자로 가지고 있어서 컬렉션뷰의 넓이와 높이도 알 수 있고 indexPath도 알 수 있기 때문에

각 섹션 별로 각 셀의 높이와 넓이를 지정해 줄 수 있습니다.

저는 아래와 같이 넓이는 화면 넓이(컬렉션 뷰 넓이), 높이는 각 셀당 삼분의 일씩 해서

겹치지 않도록 섹션 구역을 나누어 주었습니다.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: collectionView.frame.height/3)
    }

실행해 보면

3개의 섹션에 각 셀이 지정된 것을 볼 수 있습니다!

 

틀리거나 이상한 부분이 있다면 댓글 부탁드려요! 언제든지 환영입니다~😊