[SWIFT]UICollectionView 백그라운드 Empty Message 추가

UICollectionView 의 보여줄 내용이 없거나, 네트워크 등의 에러로 리스트에 보여줄 수 없을 경우

휑~~하니 흰색바탕화면만 나타나면 썰렁해서 UICollectionView 백그라운드에 이미지와 메세지를 추가해준다.

 

Extention 으로 구현해서 사용하면 된다.

enum alertImageType {
    case check, congratulation, nothing, shoot, sorry, success, sure
    
    var identifier: String {
        switch self {
        case .check: 			return "alert_check"
        case .congratulation: 	return "alert_congratulation"
        case .nothing:			return "alert_nothing"
        case .shoot:			return "alert_shoot"
        case .sorry:			return "alert_sorry"
        case .success:			return "alert_success"
        case .sure:				return "alert_sure"
        }
    }
}

enum EmptyMessage {
    case NetworkCheck
    case NetworkError
    case ListEmpty
    
    var message: String {
        switch self {
        case .NetworkCheck: return "네트워크 상태를 체크해주세요."
        case .NetworkError: return "네트워크 상태를 체크해주세요."
        case .ListEmpty: return "등록된 내용이 없습니다."
        }
    }
}
extension UICollectionView {
    
    // Empty Message Add
    func setEmptyMessage(image type:alertImageType, _ message: String = "", fontSize: CGFloat = 14.0) {
        
        if isEmptyMessageVisible() == true {
            self.backgroundView = nil
        }
        
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: type.identifier) //UIImage로 이미지 불러와서 사용하면됨.
        
        
        let messageLabel = UILabel()
        messageLabel.text = message
        messageLabel.font = UIFont.notoSansFont(forFont: .NotoSansCJKkrMedium, size: fontSize)
        messageLabel.textColor = .gray
        messageLabel.numberOfLines = 0
        messageLabel.textAlignment = .center
        messageLabel.sizeToFit()
        
        let mainView = UIView()
        mainView.addSubview(imageView)
        mainView.addSubview(messageLabel)
        
        // 이미지보다 컬렉션뷰가 작을 경우
        if (imageView.image?.size.height)! > self.frame.height {
            imageView.image = resizeImage(image: imageView.image!, newWidth: self.frame.height - 40)
        }
        
        //Auto Layout
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.centerXAnchor.constraint(equalTo: mainView.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: mainView.centerYAnchor , constant: -20).isActive = true //-40
        
        
        
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        messageLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 10).isActive = true //20
        messageLabel.leadingAnchor.constraint(equalTo: mainView.leadingAnchor, constant: 10).isActive = true
        messageLabel.trailingAnchor.constraint(equalTo: mainView.trailingAnchor, constant: 10).isActive = true
        
        self.backgroundView = mainView
    }
    
    private func isEmptyMessageVisible() -> Bool {
        if self.backgroundView != nil {
            return true
        }
        return false
    }
    
    // Empty Message Relese
    private func restoreBackgroundView() {
        self.backgroundView = nil
    }
    
    private func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage? {
        let scale = newWidth / image.size.width // 새 이미지 확대/축소 비율
        let newHeight = image.size.height * scale
        UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
        image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }
}

사용방법

/// 결과값이 잘못됬을 경우 아래 한줄로 표시하면됨.
if result == nil {
	collectionView.setEmptyMessage(image: .sorry, "보여주고 싶은 메세지")
}