UITableView EmptyView 만들기 🍚

[chaneeii]

EmptyView란?

말그대로 화면이 Empty 할때 필요한 View 로 사용자가 아무 컨텐츠도 없을때 빈내용이 아니라 빈내용 대신 어떠한 내용이 있어야 했는지, 어떤 상황인지 인식할수있도록 하는데 필요한 View 이다.

예전에 WWDC Writing for interfaces 영상을 정리하면서 Empty View 에 대해서 정리한 내용을 아래 첨부하겠다!

• https://github.com/WWHigh/WWDC-STUDY/issues/24

Type이 있는 TableView의 EmptyView 만들기

기본컨셉

1. EmptyView 구성 파트

TableView의 extension 을 만들고, 1️⃣ EmptyView 일때 설정하는 함수와 2️⃣ 아닐때를 위해 다시 돌려두는 함수를 만듭니다.

import UIKit

extension UITableView {
   func setEmptyView()  // 1️⃣
   func restore() // 2️⃣
}

2. EmptyView 적용 파트

그리고 UITableViewDataSource 의 numberOfRowsInSection에서 사용해줍니다.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  if searchResults.count == 0 {
          tableView.setEmptyView()
  } else {
      tableView.restore()
  }
  return searchResults.count
}

만들 EmtpyView 분석하기

제가 만들 EmptyView 는 다음과 같이 2가지로 타입이 나뉘어야했는데요!	검색하기 전	검색결과가 없는 경우

타입을 나눕니다.

EmptyView 의 2가지 타입을 나누어 주었습니다.

    enum EmptyViewType {
        case search
        case noresult
    }

setEmptyView 함수를 작성해줍니다.

self.backgroundView 를 만든 EmptyView 로 설정해줍니다.

func setEmptyView(message: String, type: EmptyViewType) {

        // ✅ EmptyView
        let emptyView = UIView(frame: CGRect(x: self.center.x,
                                             y: self.center.y,
                                             width: self.bounds.size.width,
                                             height: self.bounds.size.height))

        let iconView: UIImageView = {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.image = UIImage((type == .search) ?  .img_emptyfriends_search : .img_emptyfriends_noresult)
            $0.layer.applyFigmaShadow(
                color: .black,
                opacity: 0.1,
                xCoord: 0,
                yCoord: 0,
                blur: 5,
                spread: 0
            )
            return $0
        }(UIImageView())

        let messageLabel: UILabel = {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.text = message
            $0.textColor = (type == .noresult) ? .zestyColor(.dim) : .label
            $0.numberOfLines = 0
            $0.textAlignment = .center
            $0.font = .systemFont(ofSize: 17, weight: .medium)
            $0.sizeToFit()
            return $0
        }(UILabel())

        self.addSubview(emptyView)

        emptyView.addSubviews([iconView, messageLabel])
        NSLayoutConstraint.activate([
            iconView.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor, constant: -180),
            iconView.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor),
            iconView.widthAnchor.constraint(equalToConstant: 50),
            iconView.heightAnchor.constraint(equalToConstant: 50),
            messageLabel.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 10),
            messageLabel.leadingAnchor.constraint(equalTo: emptyView.leadingAnchor, constant: 20),
            messageLabel.trailingAnchor.constraint(equalTo: emptyView.trailingAnchor, constant: -20)
        ])

        self.backgroundView = emptyView // ✅ EmptyView 를 background 로 설정
    }

restore 함수를 작성해줍니다.

    func restore() {
        self.backgroundView = nil
    }

적용시켜줍니다! ( 상황에 맞게..!)

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if searchResults.count == 0 {
            if searchingTextFieldView.textField.text == "" {
                tableView.setEmptyView(message: "등록하려는 맛집을\n검색해주세요.", type: .search)
            } else {
                tableView.setEmptyView(message: "검색 결과가 없어요.", type: .noresult)

            }
        } else {
            tableView.restore()
        }
        return searchResults.count
    }

그럼 완성 🚀

Ref

https://stackoverflow.com/questions/43772984/how-to-show-a-message-when-collection-view-is-empty https://gist.github.com/SwapnanilDhol/649bd2d4dd330bc902054e86a45114df