[Swift] UICollectionView에 .xib커스텀 셀을 적용해보기

저번에 테이블 뷰에 커스텀 셀을 적용하는 방법을 해보았었는데

이번에는 컬렉션 뷰를 사용해서 같은 방식으로 커스텀 셀을 적용해 보겠습니다.

컬렉션 뷰는 테이블 뷰보다 좀 더 난이도가 있다고 생각합니다. 

(이것저것 조절해야 할 것도 많습니다...)

그래도 잘 활용할 줄만 안다면 자신의 App의 표현력을 높일 수 있을 것이라고 생각합니다. 

구성은 거의 테이블 뷰와 비슷합니다. 

그렇다면 한 번 알아보겠습니다.

---

1. Storyboard에 CollectionView 생성

storyboard에서 collectionView를 생성합니다.

아래와 같이 좌상단에 조그만 사각형 셀이 보입니다. 

하지만 이번에 해보는 것은 커스텀 셀이기 때문에 그냥 넘기겠습니다.

2. CollectionView 설정

최소한의 기능을 사용하여 CollectionView를 설정합니다.

(최소한의 구성만 사용하였습니다.)

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.delegate = self
        self.collectionView.dataSource = self
    }
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        return UICollectionViewCell()
    }
}

3. 커스텀 셀 생성

커스텀 셀을 만들어 보겠습니다. 제약과 디자인은 자신의 감각을 살려서 만드시면 됩니다.

그리고 id 설정을 잊지 말고 해줍니다.

구린 디자인...

id 설정

4. CollectionView와 연결하기

커스텀 셀도 다 만들었다면 이제 컬렉션 뷰와 연결을 해보겠습니다.

연결은 되었지만 음... 뭔가 어색하게 보입니다. 여기서 커스텀 셀의 사이즈가 임의의 사이즈가 되어버렸기 때문에 많이 찌그러지고 망가져서 보이게 됩니다.

사이즈 조정을 해서 좀 더 깔끔하게 보이도록 하겠습니다.

5. CollectionView의 Cell크기 조정

크기를 조정하기 위해서 UICollectionViewDelegateFlowLayout 를 추가로 상속해 줍니다.

후에 임의의 사이즈 지정이나 아니면 스마트폰에 맞추어 설정할 것인가 등을 설정하여 컬렉션 뷰의 셀의 크기를 조정합니다. 

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.delegate = self
        self.collectionView.dataSource = self
        self.collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "cell")
    }
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as UICollectionViewCell
        return cell
    }

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

 

이렇게 해서 CollectionView의 커스텀 셀 적용을 마치겠습니다.

이번 코드는 어디까지나 제가 사용하는 코드이고 적용하는 방법은 다양하게 있습니다. 더 효율적인 방법이나 나는 이런 식으로 한다 하시는 분 있으시면 댓글로 알려주시면 감사하겠습니다.

---

환경 

Xcode 11.3.1

swift 5