iOS-Study-Log 에서도 확인 가능합니다.
EmptyView란?
말그대로 화면이 Empty 할때 필요한 View 로 사용자가 아무 컨텐츠도 없을때 빈내용이 아니라 빈내용 대신 어떠한 내용이 있어야 했는지, 어떤 상황인지 인식할수있도록 하는데 필요한 View 입니다
예전에 WWDC Writing for interfaces 영상을 정리하면서 Empty View 에 대해서 정리한 내용을 아래 첨부하겠습니다
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
'UIKit' 카테고리의 다른 글
UITableView Header 동적으로 만들기 (0) | 2022.11.02 |
---|