[IOS] collectionView no data view 만들기 (swift)

들어가기 전에

이번에 앱을 제작해 보면서 collectionViewCell에 데이터가 없을 경우 데이터가 없다고 표시되는 뷰를 만들어보아야겠다는 생각을 했습니다. 그래서 간단하게 view를 만들어서 적용해보겠습니다.

코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

import Foundation import UIKit import SnapKit     extension UICollectionView {          func setEmptyView(title: String, message: String, image: UIImage) {         let emptyView: UIView = {             let view = UIView(frame: CGRect(x: self.center.x, y: self.center.y, width: self.bounds.width, height: self.bounds.height))             //view.backgroundColor = .blue                          return view         }()                  let titleLabel: UILabel = {             let label = UILabel()             label.text = title             label.textColor = .black             label.font = UIFont(name: "HelveticaNeue-Bold", size: 18)             return label         }()                  let messageLabel: UILabel = {             let label = UILabel()             label.text = message             label.textColor = .lightGray             label.font = UIFont(name: "HelveticaNeue-Regular", size: 17)             label.numberOfLines = 0             label.textAlignment = .center             return label         }()                           emptyView.addSubview(titleLabel)         emptyView.addSubview(messageLabel)                  titleLabel.snp.makeConstraints {             $0.centerY.equalTo(emptyView.snp.centerY)             $0.centerX.equalTo(emptyView.snp.centerX)         }                  messageLabel.snp.makeConstraints {             $0.top.equalTo(titleLabel.snp.bottom).offset(20)             $0.left.equalTo(emptyView.snp.left).offset(20)             $0.right.equalTo(emptyView.snp.right).offset(-20)         }                  self.backgroundView = emptyView              }          func restore() {         self.backgroundView = nil     } }   Colored by Color Scripter

cs

UICollectionView class에서 extension으로 setEmptyView 함수를 구현하였습니다. 모든 layout과 view설정은 code로 구현하였습니다

Snapkit 라이브러리를 사용하여 레이아웃을 빠르고 쉽게 설정할 수 있으니 사용하면 좋을듯 합니다😄 UI를 다짠후 backgroundView를 emptyView로 설정하면 완성됩니다. restore함수는 collectionView Cell에 데이터가 생성될때 emptyView를 없애주는 역할을 합니다.

적용

1 2 3 4 5 6 7 8 9 10 11 12 13

extension PortfolioViewController: UICollectionViewDataSource {     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {         if portfolios.count == 0 {             collectionView.setEmptyView(title: "No data", message: "Set portfolio!🔥", image: .checkmark)                      }         else {             collectionView.restore()         }         return portfolios.count          } Colored by Color Scripter

cs

적용은 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 함수에 적용합니다. collectionView를 이룰 데이터의 개수가 0이라면 setEmptyView를 실행합니다. 그렇지 않다면 기존에 설정된 collectionview cell설정을 따릅니다.