[swift] DZNEmptyDataSet을 사용하여 빈 상태뷰에 텍스트 애니메이션 추가하기

27 Nov 2023

swift

앱에서 데이터가 없는 경우에 빈 상태뷰를 사용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. DZNEmptyDataSet은 iOS 앱에서 빈 상태뷰를 구현하기 위한 유용한 라이브러리입니다.

여기에서는 DZNEmptyDataSet을 사용하여 빈 상태뷰에 텍스트 애니메이션을 추가하는 방법을 알아보겠습니다.

Step 1: DZNEmptyDataSet 라이브러리 설치하기

먼저, 프로젝트에 DZNEmptyDataSet 라이브러리를 설치해야 합니다. CocoaPods을 사용하여 간단하게 설치할 수 있습니다.

프로젝트의 Podfile에 다음과 같이 작성하세요:

pod 'DZNEmptyDataSet'

터미널을 열고 프로젝트 루트 경로에서 아래 명령어를 실행하여 DZNEmptyDataSet을 설치하세요:

$ pod install

Step 2: DZNEmptyDataSet 적용하기

DZNEmptyDataSet을 적용하려는 뷰 컨트롤러에서 UIScrollViewDelegate와 DZNEmptyDataSetSource 그리고 DZNEmptyDataSetDelegate 프로토콜을 구현해야 합니다.

class MyViewController: UIViewController, UIScrollViewDelegate, DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
  // ...
  
  override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    tableView.emptyDataSetSource = self
    tableView.emptyDataSetDelegate = self
  }
  
  // ...
  
  // MARK: DZNEmptyDataSetSource
  
  func title(forEmptyDataSet scrollView: UIScrollView) -> NSAttributedString? {
    // 빈 상태뷰에 표시할 텍스트 반환
    let attributes = [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18.0),
                      NSAttributedString.Key.foregroundColor: UIColor.gray]
    return NSAttributedString(string: "데이터가 없습니다.", attributes: attributes)
  }
  
  func description(forEmptyDataSet scrollView: UIScrollView) -> NSAttributedString? {
    // 빈 상태뷰에 표시할 부가 설명 반환
    let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 14.0),
                      NSAttributedString.Key.foregroundColor: UIColor.lightGray]
    return NSAttributedString(string: "데이터를 추가해주세요.", attributes: attributes)
  }
  
  func image(forEmptyDataSet scrollView: UIScrollView) -> UIImage? {
    // 빈 상태뷰에 표시할 이미지 반환
    return UIImage(named: "emptyDataSetImage")
  }
  
  // MARK: DZNEmptyDataSetDelegate
  
  func emptyDataSetShouldAnimateImageView(_ scrollView: UIScrollView) -> Bool {
    // 텍스트 애니메이션 적용 여부 반환
    return true
  }
  
  func emptyDataSet(_ scrollView: UIScrollView, didAppear imageView: UIImageView) {
    // 텍스트 애니메이션이 완료된 후에 호출됩니다.
    // imageView.layer.add(animation, forKey: "animationKey")
  }
  
  // ...
}

위의 코드에 주석을 추가해보았습니다. title(forEmptyDataSet:scrollView), description(forEmptyDataSet:scrollView) 메서드를 사용하여 텍스트를 설정하고, image(forEmptyDataSet:scrollView) 메서드를 사용하여 이미지를 설정할 수 있습니다.

emptyDataSetShouldAnimateImageView(:)** 메서드를 사용하여 텍스트 애니메이션의 적용 여부를 설정하고, **emptyDataSet(:didAppear:) 메서드를 사용하여 애니메이션이 완료된 후에 추가 작업을 수행할 수 있습니다. 텍스트 애니메이션을 적용하려면, 추가 작업 부분에 애니메이션 코드를 작성해야 합니다.

Step 3: 커스텀 이미지 추가하기

빈 상태뷰에 표시할 이미지를 추가하려면, Assets.xcassets에 이미지를 추가하고 이름을 정해야 합니다. 이 예제에서는 이미지 이름을 emptyDataSetImage로 설정했습니다. 자신의 이미지 이름으로 바꿔서 사용해보세요.

결론

이제 DZNEmptyDataSet 라이브러리를 사용하여 빈 상태뷰에 텍스트 애니메이션을 추가하는 방법을 알아보았습니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있을 것입니다. 더 많은 설정 옵션에 대해 공식 GitHub 저장소를 참고하세요.

참고 자료

DZNEmptyDataSet 공식 GitHub 저장소