iOS 视图没有数据时的 占位图显示逻辑
2016-11-12 本文已影响3549人
manajay
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
