[iOS] CollectionView의 extension으로 EmptyView 만들기

 

프로젝트를 진행하며 데이터가 존재하지 않을 때 사용자에게 알려주기 위한 화면을 만들 일이 생겼는데, 이럴 때 사용하는 엠티뷰라는 방법을 새롭게 알게 되어 정리 & 공유하고자 글을 쓰게 되었습니다 !

 

---

 

엠티뷰란 무엇인가?

• 셀에 데이터가 없을 경우 알려주기 위해 표시하는 화면입니다.
• 빈 화면을 사용자에게 그대로 노출시키기 보다는, 설명 라벨이나 이미지•버튼 등을 화면에 넣어 사용자에게 특정한 액션을 유도하도록 하기 위한 화면입니다.

 

아이디어

컬렉션 뷰와 테이블 뷰는 같은 형태의 데이터를 안에 들어가는 내용만 바꾸어 표시하기 위한 큰 틀인데요,

dataSource 부분에서 셀의 개수를 지정해주고, delegate 부분에서 셀을 어떻게 보여줄 것인지에 대해 결정하죠?

들어갈 데이터의 수에 따라 셀의 개수가 결정되는 것이기 때문에 데이터 소스의 numberOfRowsInSection 부분에서 카운트가 0일 때와 아닐 때를 구분해서 화면을 다르게 보여주면 됩니다.

한 마디로 데이터가 아예 없는 경우에 엠티뷰를 띄워주자는 소리 ...!

 

만들기

저는 컬렉션뷰를 사용해야 했기 때문에 예시로 진행하도록 하겠습니다.

 

1. EmptyView 파일 생성

• UICollectionView 클래스의 extension으로 뷰를 만들어주는 함수, 뷰를 없애는 함수를 넣어줍니다.

import UIKit

import SnapKit
import Then

extension UICollectionView {
   
    func setEmptyView(title: String, image: UIImage, message: String) {
        let emptyView = UIView().then {
            $0.frame = CGRect(x: self.center.x, y: self.center.y, width: self.bounds.width, height: self.bounds.height)
        }
        
        let titleLabel = UILabel().then {
            $0.textAlignment = .left
            $0.text = title
            $0.textColor = Color.black
            $0.font = UIFont.font(.pretendardBold, ofSize: 24)
        }
        let sobokImage = UIImageView().then {
            $0.image = image
            $0.contentMode = .scaleAspectFit
        }
        let descriptionLabel = UILabel().then() {
            $0.textAlignment = .center
            $0.text = message
            $0.textColor = Color.gray500
            $0.font = UIFont.font(.pretendardRegular, ofSize: 16)
        }
        
        [titleLabel, sobokImage, descriptionLabel].forEach {
            emptyView.addSubview($0)
        }
        
        titleLabel.snp.makeConstraints {
            $0.top.equalToSuperview().offset(84)
            $0.left.equalTo(20)
        }
        
        sobokImage.snp.makeConstraints {
            $0.top.equalToSuperview().offset(297)
            $0.leading.equalToSuperview()
            $0.trailing.equalToSuperview()
            $0.height.equalTo(165)
        }
        
        descriptionLabel.snp.makeConstraints {
            $0.top.equalToSuperview().offset(491)
            $0.leading.equalToSuperview().offset(28)
            $0.width.equalTo(318)
        }
        
        self.backgroundView = emptyView
    }
    
    func restore() {
        self.backgroundView = nil
    }
}

 

2. 사용 (조건에 따른 처리)

• UICollectionViewDataSource의 numberOfItemsInSection 함수에서 데이터의 개수가 0개이면 setEmptyView() 함수를 실행, 아니면 restore() 함수를 실행하도록 나누어줍니다.

extension NoticeViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if noticeList.count == 0 {
            collectionView.setEmptyView(title: "소중한 지안님의 알림", image: Image.illustOops, message: "아직 도착한 알림이 없어요!")
        }
        else {
            collectionView.restore()
        }
        return noticeList.count
    }
}

 

 

---

그 외에도 cell을 따로 만들어서 바꿔주는 방법이라든가, 테이블 뷰나 컬렉션 뷰 자체에 엠티뷰를 넣어서 그려주고 상황에 따라 isHidden 처리하기 등등 여러 방법들을 알게 되었고 취향껏 잘 사용하면 될 것 같다는 생각이 들었습니다 ㅎㅎ (덧붙인 방법들은 아래의 두 번째 링크를 참고해주세요)

 

그럼 끝 ~!!

 

참고한 곳

 - [IOS] collectionView no data view 만들기 (swift)
 - [iOS] 아무 데이터가 없을 때 나오는 화면,엠티뷰(empty view) 만들기