[iOS] CollectionView - Empty state (데이터가 없을시 보여줄 화면)

앱을 만들다가 CollectionViewCell에 데이터가 없을때 

즉, Empty state일때 

아무것도 없는 화면 보다 데이터 추가를 유도 하는 문구를 나타내는게 필요할것 같아 공부해봤습니다.

 

---

먼저 UICollectionView의 Extension에 아래 두개 메소드를 추가해줍니다.

// Extension.swift

import Foundation
import UIKit

// MARK: UICollectionView
extension UICollectionView {
    // 1
    func setEmptyMessage(_ message: String) {
        let messageLabel: UILabel = {
            let label = UILabel()
            label.text = message
            label.textColor = .white
            label.numberOfLines = 0;
            label.textAlignment = .center;
            label.font = UIFont(name: "BM JUA_OTF", size: 15) 
            label.sizeToFit()
            return label
        }()
        self.backgroundView = messageLabel;
    }
    // 2
    func restore() {
        self.backgroundView = nil
    }
}

1. 데이터가 없을때 보여줄 backgroundView 입니다. (여기선 label만 구현했습니다.)

 

2. 데이터가 있을때 backgroundView를 없앱니다.

 

 

그리고 아래 메소드를 사용하는곳!

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

여기에 Extension에 구현했던걸 가져올겁니다.

 

// ViewController.swift

// numberOfItemsInSection: Cell을 몇개 보여줄지
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if movieData.count == 0 {
            collectionView.setEmptyMessage("데이터를 추가해 주세요.")
        } else {
            collectionView.restore()
        }
        return movieData.count
    }

 

 

여기까지 해주시면 해당 CollectionView에 데이터가 없을시 아래와 같은 화면이 나옵니다.

 

 

만들고 있는앱에 TableViewCell도 있는데

비슷한 방식으로 구현될것 같은 느낌이네요. 

TableView 작업할때 다른점이 있다면 또 블로깅 해서 올리겠습니다 :) 

---

 

참고: StackOverFlow