[swift] DZNEmptyDataSet을 사용하여 빈 상태뷰에 테이블 레이아웃 변경하기

27 Nov 2023

swift

DZNEmptyDataSet은 iOS 앱에서 테이블 뷰의 빈 상태를 보여주는 뷰에 사용되는 라이브러리입니다. 이를 사용하여 사용자가 데이터가 없는 경우에 나타날 텅 빈 상태뷰의 레이아웃을 변경할 수 있습니다.

DZNEmptyDataSet 설치하기

CocoaPods를 사용하고 있다면 Podfile에 다음과 같이 추가하여 DZNEmptyDataSet을 설치할 수 있습니다.

pod 'DZNEmptyDataSet', '~> 1.9'

설치한 후, 프로젝트의 루트 디렉토리에서 pod install 명령어를 실행해주세요.

만약 CocoaPods를 사용하지 않는다면, DZNEmptyDataSet에서 직접 소스코드를 다운로드 받아서 프로젝트에 추가할 수도 있습니다.

DZNEmptyDataSet 사용하기

프로젝트에서 DZNEmptyDataSet를 사용할 테이블 뷰 컨트롤러를 찾아 UIViewController+EmptyDataSet.m 파일을 import 해주세요.
테이블 뷰 컨트롤러 클래스에 DZNEmptyDataSetSource와 DZNEmptyDataSetDelegate 프로토콜을 적용해주세요:

class MyTableViewController: UITableViewController, DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
    // ...
}

뷰 컨트롤러의 viewDidLoad 메소드에서 DZNEmptyDataSet의 register 메소드를 사용하여 사용할 데이터셋을 등록합니다:

override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.emptyDataSetSource = self
    tableView.emptyDataSetDelegate = self
    tableView.tableFooterView = UIView() // DZNEmptyDataSet과 함께 사용할 경우 테이블 푸터 뷰를 설정해줘야 합니다.
    
    // ...
}

DZNEmptyDataSetSource 메소드를 구현하여 빈 상태뷰의 레이아웃과 내용을 설정합니다:

func title(forEmptyDataSet scrollView: UIScrollView) -> NSAttributedString? {
    let attributes: [NSAttributedString.Key: Any] = [
        .font: UIFont.boldSystemFont(ofSize: 18.0),
        .foregroundColor: UIColor.black
    ]
    
    return NSAttributedString(string: "데이터가 없습니다.", attributes: attributes)
}

func description(forEmptyDataSet scrollView: UIScrollView) -> NSAttributedString? {
    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.lineBreakMode = .byWordWrapping
    paragraphStyle.alignment = .center
    
    let attributes: [NSAttributedString.Key: Any] = [
        .font: UIFont.systemFont(ofSize: 14.0),
        .foregroundColor: UIColor.gray,
        .paragraphStyle: paragraphStyle
    ]
    
    return NSAttributedString(string: "데이터를 추가해주세요.", attributes: attributes)
}

func image(forEmptyDataSet scrollView: UIScrollView) -> UIImage? {
    return UIImage(named: "empty_state_image")
}

위의 예시에서는 데이터가 없을 때 사용자에게 “데이터가 없습니다.”라는 제목과 “데이터를 추가해주세요.”라는 설명을 보여주고 있습니다. 이미지는 “empty_state_image”라는 이미지 파일을 사용하고 있습니다.

DZNEmptyDataSetDelegate 메소드를 구현하여 사용자의 터치 이벤트 등을 처리할 수 있습니다.

이제 DZNEmptyDataSet을 사용하여 테이블 뷰의 빈 상태뷰의 레이아웃을 변경할 수 있습니다. 사용자에게 친화적인 UI를 제공하기 위해 적절한 제목, 설명, 그리고 이미지를 선택해보세요.

자세한 내용은 DZNEmptyDataSet 문서를 참고하시기 바랍니다.