DZNEmptyDataSet은 iOS 애플리케이션에서 빈 상태뷰를 관리하는 데 도움이되는 라이브러리입니다. 컬렉션 뷰의 경우, 빈 상태일 때 사용자에게 보여줄 디자인된 컬렉션 뷰 셀을 추가하는 방법에 대해 알아보겠습니다.
DZNEmptyDataSet 라이브러리 설치
DZNEmptyDataSet을 사용하기 위해 먼저 CocoaPods를 통해 라이브러리를 설치해야 합니다. Podfile
파일에 다음 내용을 추가하고, 터미널에서 pod install
명령어를 실행하세요.
pod 'DZNEmptyDataSet'
커스텀 컬렉션 뷰 셀 만들기
DZNEmptyDataSet으로 표시될 커스텀 컬렉션 뷰 셀을 만들어보겠습니다. 먼저 프로젝트에 EmptyCollectionViewCell.swift
라는 새로운 Swift 파일을 생성하고, 다음의 코드를 추가하세요.
import UIKit
class EmptyCollectionViewCell: UICollectionViewCell {
let emptyLabel: UILabel = {
let label = UILabel()
label.text = "No data available"
label.textColor = .gray
label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(emptyLabel)
emptyLabel.frame = bounds
emptyLabel.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
이 컬렉션 뷰 셀은 “No data available”라는 메시지를 표시하는 레이블을 가지고 있습니다.
DZNEmptyDataSet 구현하기
이제 DZNEmptyDataSet을 사용하여 컬렉션 뷰의 빈 상태에 커스텀 컬렉션 뷰 셀을 추가할 차례입니다.
extension YourCollectionViewController: DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
let attributes: [NSAttributedString.Key: Any] = [
.font: UIFont.boldSystemFont(ofSize: 18),
.foregroundColor: UIColor.black
]
return NSAttributedString(string: "No Data", attributes: attributes)
}
func description(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
let attributes: [NSAttributedString.Key: Any] = [
.font: UIFont.systemFont(ofSize: 14),
.foregroundColor: UIColor.gray
]
return NSAttributedString(string: "There is no data available.", attributes: attributes)
}
func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
return UIImage(named: "empty_state_image")
}
func backgroundColor(forEmptyDataSet scrollView: UIScrollView!) -> UIColor! {
return UIColor.white
}
func customView(forEmptyDataSet scrollView: UIScrollView!) -> UIView! {
let emptyCell = EmptyCollectionViewCell(frame: CGRect(x: 0, y: 0, width: scrollView.frame.width, height: scrollView.frame.height))
return emptyCell
}
}
위의 코드는 YourCollectionViewController
에 DZNEmptyDataSetSource와 DZNEmptyDataSetDelegate를 채택한 extension을 추가한 것입니다. 각 메소드에서 빈 상태뷰에 표시될 타이틀, 설명, 이미지, 배경 색상 및 커스텀 뷰를 설정할 수 있습니다.
커스텀 뷰에서는 방금 만든 EmptyCollectionViewCell
을 사용하며, 뷰의 크기를 전체 스크린에 맞게 설정했습니다.
DZNEmptyDataSet 적용하기
마지막으로, DZNEmptyDataSet을 적용하기 위해 YourCollectionViewController
에서 다음의 메소드를 구현하세요.
func setupEmptyDataSet() {
yourCollectionView.emptyDataSetSource = self
yourCollectionView.emptyDataSetDelegate = self
yourCollectionView.reloadData()
}
setupEmptyDataSet()
메소드는 컬렉션 뷰의 emptyDataSetSource
와 emptyDataSetDelegate
를 설정하고, 컬렉션 뷰를 다시 로드합니다. 이를 통해 DZNEmptyDataSet에 설정한 내용이 적용됩니다.
결론
DZNEmptyDataSet을 사용하여 빈 상태뷰에 커스텀 디자인된 컬렉션 뷰 셀을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 보다 직관적인 UI를 제공할 수 있습니다.