[swift] DZNEmptyDataSet을 사용하여 빈 상태뷰에 커스텀 디자인된 컬렉션 뷰 셀 추가하기

27 Nov 2023

swift

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를 제공할 수 있습니다.