[Swift] TableView, CollectionView 사용시 빈값 처리하기

안녕하세요 듀니에요 :)

 

오늘 기록할 내용은 테이블 뷰나 컬렉션 뷰를 사용시, 표시할 내용이 없을때 원하는 메시지를 띄워주는 방법이에요.

 

Extension을 활용하여 UITableView 클래스에 추가해줍니다.

//MARK: 테이블 뷰 데이터 없을때 처리
extension UITableView {
    func setNoDataPlaceholder(_ message: String) {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height))
        label.text = message
        // styling, 원하는 폰트나 정렬을 설정해줄 수 있어요.
        label.sizeToFit()
        label.font = .boldSystemFont(ofSize: 18)
        label.textAlignment = .center

        self.isScrollEnabled = true
        self.backgroundView = label
        self.separatorStyle = .none
    }
    
    func removeNoDataPlaceholder() {
        self.isScrollEnabled = true
        self.backgroundView = nil
    }
}

사용 예시!

아래는 간단하게 만든 장바구니 화면이에요.

과일, 채소, 생선 버튼을 누르면 카테고리 별로 사진과 이름이 출력되는 화면이에요.

빠르게 만드느라 디자인은..

 

아래에 소스를 보면 이해하기 쉬우실 거에요.

리스트의 내용이 있을시엔 remove 처리 해주셔야 되요!

if currentList.isEmpty {
    tableView.setNoDataPlaceholder("장바구니에 생선이 없어요!")
} else {
    tableView.removeNoDataPlaceholder()
}

ViewController 전체 코드에요. (Cell과 스토리보드는 올리지 않았어요.)

import UIKit

struct Product {
    let image: UIImage
    let name: String
}

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    
    private let fruits = [Product(image: UIImage(named: "apple")!, name: "사과"),
                    Product(image: UIImage(named: "banana")!, name: "바나나"),
                    Product(image: UIImage(named: "orange")!, name: "오렌지"),
                    Product(image: UIImage(named: "pineapple")!, name: "파인애플"),
                    Product(image: UIImage(named: "kiwi")!, name: "키위")]
    
    private let vegetables = [Product(image: UIImage(named: "potato")!, name: "감자"),
                              Product(image: UIImage(named: "mushroom")!, name: "버섯")]
    
    private let fishs = [Product]()
    
    private var currentList = [Product]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
    }
    
    @IBAction func fruitListCall(_ sender: UIButton) {
        currentList = fruits
        tableView.reloadData()
        if currentList.isEmpty {
            tableView.setNoDataPlaceholder("장바구니에 과일이 없어요!")
        } else {
            tableView.removeNoDataPlaceholder()
        }
    }
    
    @IBAction func vegetableListCall(_ sender: UIButton) {
        currentList = vegetables
        tableView.reloadData()
        if currentList.isEmpty {
            tableView.setNoDataPlaceholder("장바구니에 채소가 없어요!")
        } else {
            tableView.removeNoDataPlaceholder()
        }
    }
    
    @IBAction func fishListCall(_ sender: UIButton) {
        currentList = fishs
        tableView.reloadData()
        if currentList.isEmpty {
            tableView.setNoDataPlaceholder("장바구니에 생선이 없어요!")
        } else {
            tableView.removeNoDataPlaceholder()
        }
    }
    
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return currentList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! FruitTableViewCell
        
        cell.name.text = currentList[indexPath.row].name
        cell.fruitImageView.image = currentList[indexPath.row].image
        
        return cell
    }
}

//MARK: 테이블 뷰 데이터 없을때 처리
extension UITableView {
    func setNoDataPlaceholder(_ message: String) {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height))
        label.text = message
        // styling
        label.sizeToFit()
        label.font = .boldSystemFont(ofSize: 18)
        label.textAlignment = .center
        label.numberOfLines = 0

        self.isScrollEnabled = true
        self.backgroundView = label
        self.separatorStyle = .none
    }
    
    func removeNoDataPlaceholder() {
        self.isScrollEnabled = true
        self.backgroundView = nil
    }
}

 

이런식으로 컬렉션뷰도 똑같이 적용할 수 있답니다.

extension UICollectionView {
    func setNoDataPlaceholder(_ message: String) {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height))
        label.text = message
        // styling
        label.sizeToFit()
        label.font = .boldSystemFont(ofSize: 18)
        label.textAlignment = .center
        label.numberOfLines = 0

        self.isScrollEnabled = true
        self.backgroundView = label
    }
    func removeNoDataPlaceholder() {
        self.isScrollEnabled = true
        self.backgroundView = nil
    }
}