UIView+PlaceholderView介绍

经常需要处理这种占位图业务 (无网 UFO 无数据 NoData）
UIView+PlaceholderView 尝试用一行代码更优雅的去处理列表中的占位图业务问题

UIView+PlaceholderView 可以提供给你
1、 使用链式语法，一行代码创建完成
2、采用 ph. 命名空间，比如 RxSwift 的 rx.，SnapKit 的 snp. 有效避免项目中命名冲突
3、采用extension方式实现，实现代码解耦

---

总结了一下，现阶段我们项目中占位图分一下几种

• 无网/弱网 占位图
• 空数据 占位图
• 自定义 占位图

---

场景组合

UIView+PlaceholderView 支持一下场景： 场景 1 弱网无网 场景２

A 空数据

B 空数据 + 自定义(修改页面元素)

场景３

C 自定义(修改页面元素)

自定义显示： 自定义类型 页面元素 根绝传入是否有值来控制改元素是否显示 ,不传不显示

---

页面元素构成

无网/弱网 占位图　

UI组件元素	元素名称	默认值	修改默认值	显示
UIView	placeholderView	UIColor.white	不允许	true
UIImageView	imageView	UIImage(named: “NetWorkFailed”)	不允许	true
UILabel	label	网络无法连接，请稍后再试	不允许	true
UIButton	btn	请点击刷新	不允许	true

空数据 占位图　

UI组件元素	元素名称	默认值	修改默认值	显示
UIView	placeholderView	UIColor.white	不允许	true
UIImageView	imageView	UIImage(named:”ReservationList_NoData”)	允许	true
UILabel	label	暂时没有数据	允许	true
UIButton	btn	快去看看吧	允许	true

自定义 占位图　

UI组件元素	元素名称	默认值	修改默认值	显示
UIView	placeholderView	UIColor.white	不允许	true
UIImageView	imageView	空	允许	true/false
UILabel	label	空	允许	true/false
UIButton	btn	空	允许	true/false

---

代码示例 + 效果展示

展示 无网/弱网 占位图

self.tableView.ph.showPlaceholderView {
    /// Do Someting Code ...
    /// eg: 重新发起请求
 }

---

展示 空数据 占位图，传入 noData 类型

self.tableView.ph.showPlaceholderView(.noData, handler: {
    /// Do Someting Code ...
})

---

以上是最常用的 2种 占位图显示UI，下面介绍一下应对特殊需求，需要自定义元素的占位图

---

空数据占位图 + 修改标签

 self.tableView.ph.title("你可以自定义提醒").showPlaceholderView(.noData, handler: {
      /// Do Someting Code ...
})

---

空数据占位图 + 修改标签和按钮

self.tableView.ph.title("你可以自定义提醒").btnTitle("按钮提醒").showPlaceholderView(.noData, handler: {
     /// Do Someting Code ...
 })

---

自定义占位图 风格一

self.tableView.ph.title("按钮不设置title不显示").showPlaceholderView(.custom)

---

自定义占位图 风格二

self.tableView.ph.title("自定义标题").btnTitle("图片不设置不显示").showPlaceholderView(.custom, handler:{
     /// Do Someting Code ...
 })

以上示例都可以替换image元素，不在举例了。