[swift] DZNEmptyDataSet을 사용하여 빈 상태의 뷰에 애니메이션 효과 추가하기

27 Nov 2023

swift

빈 상태의 뷰에 애니메이션 효과를 추가하려면 DZNEmptyDataSet 라이브러리를 사용할 수 있습니다. DZNEmptyDataSet은 UITableView와 UICollectionView를 위한 라이브러리로, 빈 상태일 때 텍스트, 이미지, 버튼 등을 추가하여 유저에게 더 나은 시각적인 피드백을 제공할 수 있습니다.

필요한 라이브러리 설치

DZNEmptyDataSet을 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 추가해야 합니다. Swift 프로젝트에서는 CocoaPods 또는 Carthage를 사용하여 DZNEmptyDataSet을 설치할 수 있습니다.

CocoaPods를 사용하는 경우

Podfile에 다음과 같은 줄을 추가합니다:

pod 'DZNEmptyDataSet'

그리고 터미널에서 다음 명령어를 실행하여 라이브러리를 설치합니다:

$ pod install

Carthage를 사용하는 경우

Cartfile에 다음과 같은 줄을 추가합니다:

github "dzenbot/DZNEmptyDataSet"

그리고 터미널에서 다음 명령어를 실행하여 라이브러리를 설치합니다:

$ carthage update

DZNEmptyDataSet 사용하기

DZNEmptyDataSet을 사용할 UITableView 또는 UICollectionView를 선택합니다.
해당 뷰 컨트롤러에서 UIScrollViewDelegate와 DZNEmptyDataSetSource, DZNEmptyDataSetDelegate 프로토콜을 채택합니다.
UITableViewDelegate나 UICollectionViewDelegate의 emptyDataSetShouldDisplay(_:) 메서드를 구현하여 빈 상태일 때 DZNEmptyDataSet을 표시할 지 여부를 반환합니다.
UITableViewDataSource나 UICollectionViewDataSource의 tableView(_:numberOfRowsInSection:) 또는 collectionView(_:numberOfItemsInSection:) 메서드를 구현하여 빈 상태를 체크할 데이터를 반환합니다.
DZNEmptyDataSetSource의 image(forEmptyDataSet:), title(forEmptyDataSet:), description(forEmptyDataSet:) 등의 메서드를 구현하여 빈 상태일 때 표시할 이미지, 타이틀, 설명 등의 컨텐츠를 반환합니다.
DZNEmptyDataSetSource의 buttonTitle(forEmptyDataSet:), buttonImage(forEmptyDataSet:) 메서드를 구현하여 빈 상태일 때 표시할 버튼의 타이틀 또는 이미지를 반환합니다.
DZNEmptyDataSetDelegate의 emptyDataSet(_:didTapButton:) 메서드를 구현하여 버튼을 탭했을 때의 동작을 정의합니다.

예제 코드

import UIKit
import DZNEmptyDataSet

class MyViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        tableView.delegate = self
        tableView.emptyDataSetSource = self
        tableView.emptyDataSetDelegate = self
    }
    
    // MARK: - Empty Data Set
    
    func emptyDataSetShouldDisplay(_ scrollView: UIScrollView) -> Bool {
        return true // 빈 상태일 때 DZNEmptyDataSet을 표시
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 빈 상태를 체크할 데이터를 반환
        return data.count
    }
    
    func image(forEmptyDataSet scrollView: UIScrollView) -> UIImage? {
        return UIImage(named: "empty_icon") // 빈 상태일 때 표시할 이미지
    }
    
    func title(forEmptyDataSet scrollView: UIScrollView) -> NSAttributedString? {
        let attributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.boldSystemFont(ofSize: 18),
            .foregroundColor: UIColor.gray // 빈 상태일 때 표시할 타이틀
        ]
        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.lightGray // 빈 상태일 때 표시할 설명
        ]
        return NSAttributedString(string: "There is no data.", attributes: attributes)
    }
    
    func buttonTitle(forEmptyDataSet scrollView: UIScrollView, for state: UIControl.State) -> NSAttributedString? {
        let attributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 16),
            .foregroundColor: UIColor.blue // 빈 상태일 때 표시할 버튼의 타이틀
        ]
        return NSAttributedString(string: "Add Data", attributes: attributes)
    }
    
    func emptyDataSet(_ scrollView: UIScrollView, didTapButton button: UIButton) {
        // 버튼을 탭했을 때의 동작 정의
        // 데이터 추가 등의 로직을 처리할 수 있습니다.
        // 예: performSegue(withIdentifier: "addDataSegue", sender: self)
    }
}

위의 예제 코드에서는 UITableView를 기준으로 작성되었습니다. UICollectionView를 사용하는 경우 마찬가지로 위의 예제 코드를 참고하여 적절하게 수정해주시면 됩니다.

더 자세한 내용은 DZNEmptyDataSet 공식 문서에서 확인할 수 있습니다.