DZNEmptyDataSet은 iOS 앱에서 데이터가 없을 때 나타나는 빈 상태 화면을 구현하기 위한 라이브러리입니다. 이 라이브러리를 활용하면 테이블 뷰, 컬렉션 뷰 등의 데이터가 없을 때 자동으로 화면에 빈 상태를 보여줄 수 있습니다. 본 게시물에서는 DZNEmptyDataSet을 사용할 때 함께 활용할 수 있는 디자인 패턴에 대해 알아보겠습니다.
1. 메시지 디자인 패턴
메시지 디자인 패턴은 데이터가 없을 때 사용자에게 메시지를 전달하는 패턴입니다. 이 패턴을 사용하면 사용자에게 데이터가 없다는 사실을 알리고 특정한 동작을 유도할 수 있습니다.
예시 코드:
extension MyViewController: DZNEmptyDataSetSource {
func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
let text = "데이터가 없습니다."
let attributes = [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18), NSAttributedString.Key.foregroundColor: UIColor.black]
return NSAttributedString(string: text, attributes: attributes)
}
func description(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
let text = "새로운 데이터를 추가하려면 + 버튼을 눌러주세요."
let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 14), NSAttributedString.Key.foregroundColor: UIColor.gray]
return NSAttributedString(string: text, attributes: attributes)
}
func buttonTitle(forEmptyDataSet scrollView: UIScrollView!, for state: UIControl.State) -> NSAttributedString! {
let text = "새로운 데이터 추가"
let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16), NSAttributedString.Key.foregroundColor: UIColor.blue]
return NSAttributedString(string: text, attributes: attributes)
}
func emptyDataSet(_ scrollView: UIScrollView!, didTapButton button: UIButton!) {
// + 버튼이 클릭되었을 때의 동작을 구현합니다.
// 새로운 데이터 추가 로직을 수행하도록 합니다.
}
}
설명:
위의 예시 코드에서는 DZNEmptyDataSetSource 프로토콜을 채택하여 메시지 디자인 패턴을 구현하고 있습니다. title(forEmptyDataSet:), description(forEmptyDataSet:), buttonTitle(forEmptyDataSet:for:) 메서드를 통해 각각의 텍스트와 스타일을 설정하고, emptyDataSet(_:didTapButton:) 메서드에서는 버튼이 클릭되었을 때 실행될 동작을 구현하고 있습니다.
2. 스켈레톤 디자인 패턴
스켈레톤 디자인 패턴은 데이터가 로딩 중인 상태를 시각적으로 보여주는 패턴입니다. 이 패턴을 사용하면 사용자에게 데이터 로딩 중임을 알리고 사용성을 향상시킬 수 있습니다.
예시 코드:
extension MyViewController: DZNEmptyDataSetSource {
func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
return UIImage(named: "loading_icon")
}
func imageTintColor(forEmptyDataSet scrollView: UIScrollView!) -> UIColor! {
return UIColor.blue
}
func imageAnimation(forEmptyDataSet scrollView: UIScrollView!) -> CAAnimation! {
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.toValue = NSNumber(value: Double.pi * 2)
rotationAnimation.duration = 1.0
rotationAnimation.repeatCount = Float.infinity
return rotationAnimation
}
func emptyDataSetShouldDisplay(_ scrollView: UIScrollView!) -> Bool {
return isLoadingData // 데이터 로딩 중일 때만 스켈레톤 디자인을 보여줍니다.
}
}
설명:
위의 예시 코드에서는 DZNEmptyDataSetSource 프로토콜을 통해 스켈레톤 디자인 패턴을 구현하고 있습니다. image(forEmptyDataSet:) 메서드를 통해 이미지를 설정하고, imageTintColor(forEmptyDataSet:) 메서드를 통해 이미지의 색상을 설정합니다. imageAnimation(forEmptyDataSet:) 메서드에서는 이미지에 애니메이션 효과를 주는 설정을 하고 있습니다. emptyDataSetShouldDisplay(_:) 메서드에서는 데이터 로딩 중일 때만 스켈레톤 디자인을 보여주도록 설정하고 있습니다.