[swift] DZNEmptyDataSet을 사용하여 빈 상태뷰에 커스텀 디자인된 아이콘 추가하기

27 Nov 2023

swift

안녕하세요! 이번에는 DZNEmptyDataSet 라이브러리를 사용하여 빈 상태뷰(empty state view)에 커스텀 디자인된 아이콘을 추가하는 방법에 대해 알아보겠습니다.

DZNEmptyDataSet이란?

DZNEmptyDataSet은 UITableView나 UICollectionView 등과 같은 뷰에서 데이터가 없을 때 빈 상태뷰를 표시해주는 라이브러리입니다. 이 라이브러리를 사용하면 더 나은 사용자 경험을 제공할 수 있습니다.

DZNEmptyDataSet 설치

DZNEmptyDataSet을 사용하기 위해서는 먼저 Cocoapods을 통해 라이브러리를 설치해야 합니다. 프로젝트의 Podfile에 다음과 같이 추가해주세요:

pod 'DZNEmptyDataSet'

그리고 터미널에서 다음 명령어를 실행하여 설치를 완료해주세요:

$ pod install

사용법

ViewController에서 UITableViewDelegate 및 UITableViewDataSource 프로토콜을 준수하도록 설정해주세요:

class MyViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    // ...
}

UITableViewDelegate 메서드를 구현하고, 해당 뷰가 데이터가 없는 경우 DZNEmptyDataSet의 빈 상태뷰를 사용하도록 설정해주세요:

extension MyViewController: UITableViewDelegate, UITableViewDataSource {
    // ...

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 데이터의 개수를 반환하는 로직이 들어가야 합니다.
        return 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 셀을 반환하는 로직이 들어가야 합니다.
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath)
        return cell
    }
    
    func tableView(_ tableView: UITableView, viewForEmptyDataSet scrollView: UIScrollView) -> UIView? {
        let emptyStateView = UIView()
        
        // 커스텀 디자인된 아이콘을 생성하고 빈 상태뷰에 추가하는 로직이 들어가야 합니다.
        let iconImageView = UIImageView(image: UIImage(named: "custom_icon"))
        emptyStateView.addSubview(iconImageView)
        
        // 아이콘 중앙 정렬 로직이 들어가야 합니다.
        iconImageView.centerXAnchor.constraint(equalTo: emptyStateView.centerXAnchor).isActive = true
        iconImageView.centerYAnchor.constraint(equalTo: emptyStateView.centerYAnchor).isActive = true
        
        return emptyStateView
    }
}

DZNEmptyDataSet을 사용하려는 UITableView에 dataSource 및 delegate를 설정해주세요:

class MyViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ...

        tableView.dataSource = self
        tableView.delegate = self
        tableView.emptyDataSetSource = self
        tableView.emptyDataSetDelegate = self
    }
}

이제 빈 데이터 상태에 해당하는 화면을 보면, 커스텀 디자인된 아이콘이 표시될 것입니다!

마치며

DZNEmptyDataSet을 사용하여 빈 상태뷰에 커스텀 디자인된 아이콘을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 눈에 잘 띄는 상태뷰를 제공하여 앱의 사용자 경험을 개선할 수 있습니다.

더 자세한 내용이나 더 많은 기능을 알고 싶다면, DZNEmptyDataSet의 공식 문서를 참고해주세요.