[iOS]一行代码集成空白页面占位图(基于runtime+MJRefresh思想) 此框架是本人在5

LYEmptyView

此框架是本人在5，6个月前，公司启动新项目的时候，一起开始着手编写的，经过这个项目的验证与考验，不断的进行完善，在此特将这份框架分享出来供大家参考与学习。 github地址

不需要遵循协议，不需要设置代理，不需要实现代理方法，只需这一句代码，就可为一个UITableViwe/UICollectionView集成空白页面占位图。self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

一效果展示

二使用参考示例

一行代码集成空内容视图

自由选择空内容元素

自定义空内容元素

自定义元素的UI样式

二次封装

延迟显示emptyView

特殊需求，手动控制emptyView的显示隐藏

一效果展示

二使用参考示例

1 一行代码集成空内容视图

//框架方法

self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"

titleStr:@"暂无数据，点击重新加载"

detailStr:@""];

PS:可对框架进行二次封装，调用更简洁（二次封装方法在下面的示例5中会讲到）

//二次封装方法，调用简洁

self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

完全低耦合，在你的项目中加入这一行代码就可集成不管项目中是reloadData方法刷UI还是insert、delete等方式刷UI,不需做其他任何操作，只需这一行代码就可实现以下效果

2 自由选择空内容元素

交互事件可选择SEL或block方式

SEL交互事件:

self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"

titleStr:@"无数据"

detailStr:@"请稍后再试!"

btnTitleStr:@"重新加载"

target:target

action:action];

block交互事件:

self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"

titleStr:@""

detailStr:@""

btnTitleStr:@""

btnClickBlock:^{}];

// imageStr : 占位图片

// titleStr : 标题

// detailStr : 详细描述

// btnTitleStr : 按钮标题

框架提供四个元素，传入相应元素的字符串即可显示对应元素（按钮的显示前提是传入target，action或btnClickBlock）可根据项目需求，自由进行组合，如下只展示了部分组合效果

3 自定义空内容元素

特殊情况下，如果空内容状态布局不满足需求时，可进行自定义通过方法+ (instancetype)emptyViewWithCustomView:(UIView *)customView; 传入一个View 即可创建一个自定义的emptyView

self.tableView.ly_emptyView = [LYEmptyView emptyViewWithCustomView:customView];

4 自定义元素的UI样式

这里自定义UI样式需要很多代码，别担心，在示例5中会讲解二次封装的方式，封装后调用时就只需要一行代码了 ^ _ ^

//初始化一个emptyView

LYEmptyView *emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"

titleStr:@"无数据"

detailStr:@"请稍后再试!"

btnTitleStr:@"重新加载"

btnClickBlock:^{}];

//元素竖直方向的间距

emptyView.subViewMargin = 20.f;

//标题颜色

emptyView.titleLabTextColor = MainColor(90, 180, 160);

//描述颜色

emptyView.detailLabTextColor = MainColor(180, 120, 90);

//按钮背景色

emptyView.actionBtnBackGroundColor = MainColor(90, 180, 160);

//设置空内容占位图

self.tableView.ly_emptyView = emptyView;

这里只列举了一些常用的属性，更多属性请到LYEmptyView.h查看

5 二次封装

第4小节的示例代码，修改emptyView的样式需要一个个属性单独去改，如果项目中每个界面都这么写就显得很麻烦，而且不易维护解决办法是对库进行二次封装，二次封装后，对UI样式单独管理，方便维护

1)新建一个类继承自LYEmptyView，例如demo中的MyDIYEmpty

2)重写- (void)prepare 方法，并修改想要改变的元素的UI样式

- (void)prepare{

[super prepare];

self.titleLabFont = [UIFont systemFontOfSize:25];

self.titleLabTextColor = MainColor(90, 180, 160);

self.detailLabFont = [UIFont systemFontOfSize:17];

self.detailLabTextColor = MainColor(180, 120, 90);

self.detailLabMaxLines = 5;

self.actionBtnBackGroundColor = MainColor(90, 180, 160);

self.actionBtnTitleColor = [UIColor whiteColor];

}

操作上面的两步就可实现对样式的单独管理调用方法不变，只是调用的类变成了MYDiyEmpty

self.tableView.ly_emptyView = [MYDiyEmpty emptyActionViewWithImageStr:@"noData"

titleStr:@"暂无数据"

detailStr:@"请稍后再试!"

btnTitleStr:@"重新加载"

btnClickBlock:^{}];

3)进一步封装显示的元素内容，比如无数据状态图、无网络状态图

在MYDiyEmpty.h定义方法+ (instancetype)diyNoDataEmpty; 在MYDiyEmpty.m实现方法

+ (instancetype)diyNoDataEmpty{

return [MyDIYEmpty emptyViewWithImageStr:@"noData"

titleStr:@"暂无数据"

detailStr:@"请稍后再试!"];

}

经过3步封装，自定义了UI样式，使管理更方便，使调用更简洁 self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

下面的两种示例，属于特殊需求，需要四行代码搞定，调用和MJRefrsh类似，需要先设置样式，然后显示和隐藏

6 延迟显示emptyView

如示例1图，框架自动根据DataSource计算是否显示emptyView，在空页面发起网络请求时，DataSource肯定为空，会自动显示emptyView，有的产品需求可能不希望这样，希望发起请求时暂时隐藏emptyView。本框架提供了两个方法可实现此需求，两个方法都是scrollView的分类，调用非常方便

/**

一般用于开始请求网络时调用，ly_startLoading调用时会暂时隐藏emptyView

当调用ly_endLoading方法时，ly_endLoading方法内部会根据当前的tableView/collectionView的

DataSource来自动判断是否显示emptyView

- (void)ly_startLoading;

/**

在想要刷新emptyView状态时调用

注意:ly_endLoading 的调用时机，有刷新UI的地方一定要等到刷新UI的方法之后调用，

因为只有刷新了UI，view的DataSource才会更新，故调用此方法才能正确判断是否有内容。

- (void)ly_endLoading;

*注意点:使用这两个方法，请先将emptyView的autoShowEmptyView属性置为NO，关闭自动显隐

以下是调用示例（具体细节可参考demo中的demo2）

//1.先设置样式

self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

//2.关闭自动显隐（此步可封装进自定义类中，相关调用就可省去这步）

self.tableView.ly_emptyView.autoShowEmptyView = NO;

//3.网络请求时调用

[self.tableView ly_startLoading];

//4.刷新UI时调用（保证在刷新UI后调用）

[self.tableView ly_endLoading];

7 特殊需求，手动控制emptyView的显示隐藏

在某些特殊界面下，有的tableView/collectionView有固定的一些死数据，其它的数据根据网络加载，这时根据以上的示例方法可能达不到这需求。本框架提供另外的两个方法来解决这个问题。

/**

手动调用显示emptyView

- (void)ly_showEmptyView;

/**

手动调用隐藏emptyView

- (void)ly_hideEmptyView;

*注意点:使用这两个方法，请先将emptyView的autoShowEmptyView属性置为NO，关闭自动显隐

以下是调用示例（具体细节可参考demo中的demo4）

//1.先设置样式

self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];

//2.关闭自动显隐（此步可封装进自定义类中，相关调用就可省去这步）

self.tableView.ly_emptyView.autoShowEmptyView = NO;

//3.显示emptyView

[self.tableView ly_showEmptyView];

//4.隐藏emptyView

[self.tableView ly_hideEmptyView];

github欢迎star 地址

作者：yangli_dev

链接：http://juejin.im/post/5a4c3b7651882546f00a717d