美文网首页征服SwiftiOS开发资料收集111
iOS 视图没有数据时的 占位图显示逻辑

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

作者: manajay | 来源:发表于2016-11-12 14:13 被阅读3549次

    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 能适应所有视图的才是王道

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

    第三方库

    DZNEmptyDataSet

    相关文章

      网友评论

        本文标题:iOS 视图没有数据时的 占位图显示逻辑

        本文链接:https://www.haomeiwen.com/subject/fukqpttx.html