[swift] DZNEmptyDataSet을 사용하여 빈 상태뷰의 배경 이미지 애니메이션 추가하기

27 Nov 2023

swift

빈 상태뷰는 앱 내에서 데이터가 없거나 로딩 중인 경우에 사용자에게 메시지를 전달하는 데 사용됩니다. iOS 앱에서 DZNEmptyDataSet 라이브러리를 사용하면 쉽게 빈 상태뷰를 구현할 수 있습니다. 이 튜토리얼에서는 DZNEmptyDataSet을 사용하여 빈 상태뷰의 배경 이미지에 애니메이션을 추가하는 방법을 알아보겠습니다.

DZNEmptyDataSet 라이브러리 추가하기

먼저 DZNEmptyDataSet 라이브러리를 프로젝트에 추가해야 합니다. CocoaPods을 사용하는 경우 Podfile에 다음과 같이 추가합니다.

pod 'DZNEmptyDataSet'

그리고 터미널에서 다음 명령을 실행하여 CocoaPods를 업데이트합니다.

pod install

만약 수동으로 라이브러리를 추가하려는 경우, DZNEmptyDataSet GitHub 저장소에서 최신 코드를 다운로드하여 프로젝트에 넣어주십시오.

DZNEmptyDataSet 데이터 소스 구현하기

DZNEmptyDataSet을 사용하려면 데이터 소스를 구현해야 합니다. 기본적으로 DZNEmptyDataSet은 UICollectionViewDelegate, UICollectionViewDataSource, UITableViewDelegate, UITableViewDataSource와 같이 작동합니다.

import DZNEmptyDataSet

class MyViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, DZNEmptyDataSetDelegate, DZNEmptyDataSetSource {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.emptyDataSetDelegate = self
        tableView.emptyDataSetSource = self
    }
    
    // MARK: UITableViewDataSource
    
    // 테이블 뷰의 행 개수를 반환하는 메서드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 0 // 데이터가 없으므로 0을 반환
    }
    
    // 테이블 뷰의 셀을 반환하는 메서드
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        // 셀 구현 코드
        
        return cell
    }
    
    // MARK: DZNEmptyDataSetDelegate
    
    // DZNEmptyDataSet을 사용할 때 빈 상태뷰가 터치되었을 때 동작하는 메서드
    func emptyDataSet(_ scrollView: UIScrollView, didTap view: UIView) {
        // 빈 상태뷰가 터치되면 동작할 코드 구현
    }
    
    // MARK: DZNEmptyDataSetSource
    
    // 빈 상태뷰에 표시될 이미지를 반환하는 메서드
    func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
        return UIImage(named: "empty_state_image")
    }
    
    // 빈 상태뷰에 표시될 애니메이션을 추가하는 메서드
    func imageAnimation(forEmptyDataSet scrollView: UIScrollView) -> CAAnimation? {
        let animation = CABasicAnimation(keyPath: "transform.rotation")
        animation.fromValue = 0.0
        animation.toValue = Double.pi * 2.0
        animation.duration = 1.0
        animation.repeatCount = .infinity
        
        let layer = CALayer()
        layer.add(animation, forKey: "rotationAnimation")
        
        return animation
    }
    
    // 빈 상태뷰에 표시될 애니메이션의 백그라운드 컬러를 반환하는 메서드
    func backgroundColor(forEmptyDataSet scrollView: UIScrollView) -> UIColor? {
        return UIColor.white
    }
}

위의 예시 코드에서, tableView는 DZNEmptyDataSet을 사용할 UITableView 인스턴스입니다. 테이블 뷰의 행 수가 0인 경우 빈 상태뷰가 표시됩니다. imageAnimation 메서드에서는 빈 상태뷰의 배경 이미지에 애니메이션을 추가하기 위해 CABasicAnimation을 사용합니다.

결과 확인하기

실행하고 로딩 중이거나 데이터가 없는 경우 테이블 뷰에 빈 상태뷰가 표시됩니다. 빈 상태뷰의 배경 이미지가 애니메이션되며, 터치하면 이벤트를 처리하는 동작이 수행됩니다.

이제 DZNEmptyDataSet을 사용하여 빈 상태뷰에 배경 이미지 애니메이션을 추가하는 방법을 알게 되었습니다. 빈 상태뷰는 사용자에게 유용한 메시지를 전달하는 데 사용될 수 있으므로 앱의 사용자 경험을 개선하는 데 도움이 됩니다.