介绍
快捷为界面添加占位图（无数据占位图，网络失败占位图等），可调整界面布局，以及动态更新界面。
初始化方法及使用
_emptyView = [XKEmptyPlaceView configScrollView:self.tableView config:nil];
[_emptyView showWithImgName:@"xxx" title:@"xxx" des:nil tapClick:^{ }];
可以使用属性存储XKEmptyPlaceView对象，配置后调用占位图的方法显示隐藏。为了方便使用，给UIScrollView加了一个分类，可以不用申明属性，快速使用占位图
快捷初始化方法及使用
// 初始化方法
[self.tableView configDefaultEmptyView];
[self.tableView.emptyPlaceView showWithImgName:@"xxx" title:@"xxxx" des:nil tapClick:^{ }];
使用范例
[HTTPClient postXXXX:^(id responseObject) {
self.datas = xxx;
if (self.datas.count) {
[self.emptyTipView hide];
} else {
[self.emptyTipView showWithImgName:kEmptyPlaceImgName title:nil des:@"暂无数据" tapClick:nil];
}
} failure:^(XKHttpErrror *error) {
if (self.datas.count == 0) {
__weak typeof(self) weakSelf = self;
self.emptyTipView.config.viewAllowTap = YES;
[self.emptyTipView showWithImgName:kNetErrorPlaceImgName title:@"网络错误" des:@"点击屏幕重试" tapClick:^{
[weakSelf request];
}];
}
}];
效果
image.png
图片+标题
__weak typeof(self) weakSelf = self;
_emptyView = [XKEmptyPlaceView configScrollView:self.tableView config:nil];
[_emptyView showWithImgName:@"暂无内容" title:@"暂无数据" des:nil tapClick:^{
//
}];
无数据
图片+标题+描述
__weak typeof(self) weakSelf = self;
_emptyView = [XKEmptyPlaceView configScrollView:self.tableView config:nil];
[_emptyView showWithImgName:@"加载失败" title:@"无法获取网络" des:@"点击屏幕重试" tapClick:^{
[weakSelf.emptyView hide];
}];
无网络
图片+标题+描述+按钮
__weak typeof(self) weakSelf = self;
_emptyView = [XKEmptyPlaceView configScrollView:self.tableView config:nil];
_emptyView.config.viewAllowTap = NO;
[_emptyView showWithImgName:@"加载失败" title:@"无法获取网络" des:@"请检查网络" btnText:@"重试" btnImg:nil tapClick:^{
[weakSelf.emptyView hide];
}];
image.png
多配置
- (void)viewDidLoad {
[super viewDidLoad];
__weak typeof(self) weakSelf = self;
XMEmptyViewConfig *config = [XMEmptyViewConfig new];
config.titleFont = [UIFont systemFontOfSize:18];
config.verticalOffset = -50;
config.btnBackImg = [UIColor orangeColor];
config.btnColor = [UIColor whiteColor];
config.btnFont = [UIFont systemFontOfSize:18];
config.btnMargin = 50;
config.spaceDesBtmHeight = 20;
config.spaceTitleBtmHeight = 30;
_emptyView = [XKEmptyPlaceView configScrollView:self.tableView config:config];
[self showNetError];
}
- (void)showNetError {
__weak typeof(self) weakSelf = self;
// 展示前可继续动态配置config
self.emptyView.config.viewAllowTap = NO;
_emptyView.config.titleColor = [UIColor blackColor];
[_emptyView showWithImgName:@"404出错页面" title:@"不开心\n无法获取网络" des:@"检查一下网络" btnText:@"重试" btnImg:nil tapClick:^{
[weakSelf showEmpty];
}];
}
- (void)showEmpty {
__weak typeof(self) weakSelf = self;
_emptyView.config.viewAllowTap = YES;
_emptyView.config.titleColor = [UIColor orangeColor];
[_emptyView showWithImgName:@"暂无内容" title:@"暂无数据" des:@"戳屏幕再刷新" tapClick:^{
[weakSelf showNetError];
}];
}
image.png
使用要点
1. 目前只能用于UIScrollView， 如果普通界面需要使用，可先创建UIScrollView进行承载。
2. config配置是核心，是对界面的显示描述，在show方法调用时，会使用config的配置进行界面的重绘。
3. emptyView自带有config属性，初始化未为传入会自动生成一个默认的config，针对自己的app设计，可以将基础的配置项在默认配置里设置完，外界只配置特殊的。 在展示前可获取congfig进行属性配置，即可继续动态配置占位图的显示效果。 config的界面配置属性如果设置过多，显示其他界面不需要时，可重置，设置可调用resetConfig
4. 封装的显示方法里考虑了方便动态更新界面,所以将会动态变化频繁的参数放入了方法中，其实内部也是对config进行的赋值，在show方法之前单独设置的img，title，des会被方法传入的覆盖：
/**不带按钮的占位图*/
- (void)showWithImgName:(NSString *)imgName title:(NSString *)title des:(NSString *)des tapClick:(void(^)(void))tap;
/**下方带按钮的 btnImg 可是image or 图片名称*/
- (void)showWithImgName:(NSString *)imgName title:(NSString *)title des:(NSString *)des btnText:(NSString *)btnText btnImg:(id)btnImg tapClick:(void(^)(void))tap;
需求场景可为界面先为网络错误占位图，后请求成功为无数据占位。可参考多配置demo
5. 视图的点击事件和按钮的点击回调是同一个，当开启config.viewAllowTap = YES;,点击屏幕和按钮都会回调block，如果只想按钮点击，设置为NO即可
Installation
XKEmptyPlaceView is available through CocoaPods. To install
it, simply add the following line to your Podfile:
pod 'XKEmptyPlaceView'
Author
Jamesholy, 447523382@qq.com
