iOS 视图没有数据时的 占位图显示逻辑

TableView ,CollectionView或者普通的视图 都要试用

建议 使用 分类 Extension 的方式 善用组合 少用继承,除非业务需要

UITableView与UICollectionView extension的逻辑

// swift 3.0
extension UITableView {
    
    func autoShowEmptyView(dataSourceCount:Int?){
        self.autoShowEmptyView(title: nil, image: nil, dataSourceCount: dataSourceCount)
    }
    
    func autoShowEmptyView(title:String?,image:UIImage?,dataSourceCount:Int?){
        
        guard let count = dataSourceCount else {
            let empty = EmptyView.init(frame: self.bounds)
            empty.setEmpty(title: title, image: image)
            self.backgroundView = empty
            return
        }
        
        if count == 0 {
            let empty = EmptyView.init(frame: self.bounds)
            empty.setEmpty(title: title, image: image)
            self.backgroundView = empty
        } else {
            self.backgroundView = nil
        }
        
    }
    
}

extension UICollectionView {
    
    func autoShowEmptyView(dataSourceCount:Int?){
        self.autoShowEmptyView(title: nil, image: nil, dataSourceCount: dataSourceCount)
    }
    
    func autoShowEmptyView(title:String?,image:UIImage?,dataSourceCount:Int?){
        
        guard let count = dataSourceCount else {
            let empty = EmptyView.init(frame: self.bounds)
            empty.setEmpty(title: title, image: image)
            self.backgroundView = empty
            return
        }
        
        if count == 0 {
            let empty = EmptyView.init(frame: self.bounds)
            empty.setEmpty(title: title, image: image)
            self.backgroundView = empty
        } else {
            self.backgroundView = nil
        }
        
    }
}
复制代码

Empty 视图(可以根据 UI 设计 自己去做)

// swiift 3.0
import UIKit
// frame paras
private let marginX:CGFloat = 14
private let paddingY:CGFloat = 20

private let PLACEHODER_TITLE = "暂无相关数据"
private let PLACEHODER_IMAGE = UIImage.init(named: "warning_icon")

class EmptyView: UIView {

    lazy var noDataImageView: UIImageView = {
        // imageView
        let noDataImageView = UIImageView.init()
        noDataImageView.image = PLACEHODER_IMAGE
        
        return noDataImageView
    }()
 
    lazy var infoLabel: UILabel = {
        // label
        let infoLabel = UILabel.init()
        infoLabel.text = PLACEHODER_TITLE
        infoLabel.textAlignment = .center
        infoLabel.textColor = Common.kColor_DarkTitle
        infoLabel.font = UIFont.systemFont(ofSize: 14)
        return infoLabel
    }()
    

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension EmptyView {
    
    func setupUI() {
        self.addSubview(infoLabel)
        self.addSubview(noDataImageView)
        
        infoLabel.snp.makeConstraints { (make) in
            make.left.equalTo(self).offset(marginX)
            make.right.equalTo(self).offset(-marginX)
            make.centerY.equalTo(self).offset(paddingY)
        }
        
        noDataImageView.snp.makeConstraints { (make) in
            make.bottom.equalTo(self.snp.centerY).offset(-paddingY)
            make.centerX.equalTo(self)
        }
    }

}

extension EmptyView {
    
    /// 设置有标题的 空白视图
    ///
    /// - parameter title: 标题
    func setEmpty(title:String) -> () {
        self.setEmpty(title: PLACEHODER_TITLE, image: PLACEHODER_IMAGE)
    }
    
    
    /// 设置 带有图片的 空白视图
    ///
    /// - parameter image: 图片
    func setEmpty(image:UIImage) -> () {
        self.setEmpty(title: PLACEHODER_TITLE, image: image)
    }
    
    
    /// 设置带有标题与图片的 空白视图
    ///
    /// - parameter title: 标题
    /// - parameter image: 图片
    func setEmpty(title:String?,image:UIImage?) -> () {
        noDataImageView.image = image ?? PLACEHODER_IMAGE
        infoLabel.text = title ?? PLACEHODER_TITLE
    }
}
复制代码

其实想直接写 UIScrollView 和 UIView 的 extension 能适应所有视图的才是王道

上面是自己写的, 很简单, 有需要其他思路的 可以参考下面的做法

• iOS 项目中tableview无数据时展示占位图demo--这里只有干货 **作者的 KVC 思路可以做到, 只是 复用麻烦些
• iOS造轮子系列-TableView空数据显示占位图片 runtime实现 作者 loadView 的思路很赞作者 github 的 demo

• FORScrollViewEmptyAssistant: 基于DZNEmptyDataSet开源库的简单封装

第三方库

DZNEmptyDataSet