UITableView/UICollectionView中默认占
a8.jpg.gif
相信大家都有遇到在项目中遇到过关于 UITableView 或 UICollectionView 实现下的占位图需求。
比如某鱼 App 中对于各种不同场景需求显示的占位图：
- 数据加载中的占位图
7AC3195F4F6F14D68B0FC387502952D3.png
- 网络异常时的占位图
ED5CB7BD800A944721C6F466A2210356.png
- 无数据时的占位图
D2BC07B0AAD7A83B0FAFEC1FE386E31F.png
思考#
那么疑问来了，遇到这种需求时你会如何进行相关实现呢？
-
创建三种不同的占位图，然后再根据不同的场景调整与之相关的**UITableVIew ** 视图层级来进行显示？(当然这里还不包括在不同场景下交互逻辑，占位图是否可点击操作？占位图显示时 UITableView 滚动限制等等)
-
可能也有稍微灵活一些的方案，依旧创建三种不同的占位图，但是在管理视图显示逻辑时根据不同场景情况下将与 UITableView 大小相等的占位图加载至或替换原有的 **UITableVIewHeaderView/TableViewFooterView ** 来进行实现，这样实现的好处避免了多种占位图以及多种场景下的层级显示处理逻辑，同时也能很好的适配各种不同 UITableView 的大小并且在相关滚动限制上能很好的进行掌控。
-
......
小编以前有幸看到了某一家公司关于这方面的需求实现，在看了一部分源码之后我差点就当场原地自爆，除了复杂的多场景占位图 Frame 变更之外还有与之附带的多页面代码入侵，不得不佩服当时写下这些代码的人的脑力与体力，但是秉承偷懒才是 IT 行业的第一生产力的名言，所以小编在参考了其它一些大牛的实现思路后，决定撸一个属于自己的小框架。
![OJ11D}6~K(J`7]0)PSC]7JC.gif](http:https://img.haomeiwen.com/i3831145/c5b34482f3bb68a4.gif?imageMogr2/auto-orient/strip)
使用方式及相关介绍#
该框架提供了三种不同场景下的占位图显示功能(UICollectionView 版本请参考以下 UITableVIew 实现流程)
1. 请先在你所使用的 UITableView 或者 UITableViewConroller 内部实现 WCQTableViewPlaceholderDelegate 代理方法
返回加载时的默认占位图方法(@required)
- (UIView *)wcq_tableViewPlaceholderInLoadingState;
返回网络异常时的默认占位图方法(@required)
- (UIView *)wcq_tableViewPlaceholderInAnormalNetState;
返回空数据时的默认占位图方法(@required)
- (UIView *)wcq_tableViewPlaceholderInEmptyDatasourceState;
控制默认占位图显示时 UITableView 的滚动限制(@optional)
- (BOOL)wcq_enableScroll;
2. 框架内部实现了关于 UITableView 的一个分类（WCQTableViewPlaceholder）,该分类为 UITableView 提供了：
- 网络异常时自动加载相关默认占位图的功能
- (void)wcq_setAnormalNetwork;
- 数据加载时自动加载相关默认占位图的功能
- (void)wcq_setLoadingState;
- 而空数据时自动加载相关默认占位图的实现则是基于 UITableView 数据源驱动实现的，使用者在使用系统 ReloadData 方法时框架会自行判断加载，无需使用者添加相关代码
代码示例#
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, WCQTableViewPlaceholderDelegate>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *dataArray;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view addSubview:self.tableView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - Refresh Methods
- (void)reloadData {
NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
AFURLSessionManager *manager = [[AFURLSessionManager alloc] initWithSessionConfiguration:configuration];
NSURL *URL = [NSURL URLWithString:@"http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_key=hello&bk_length=600"];
NSURLRequest *request = [NSURLRequest requestWithURL:URL];
[self.tableView wcq_setLoadingState];
NSURLSessionDataTask *dataTask = [manager dataTaskWithRequest:request completionHandler:^(NSURLResponse *response, id responseObject, NSError *error) {
if (error) {
NSLog(@"Error: %@", error);
[self.tableView.mj_header endRefreshing];
[self.tableView wcq_setAnormalNetwork];
} else {
NSLog(@"%@ %@", response, responseObject);
[self.tableView.mj_header endRefreshing];
self.dataArray = [NSMutableArray arrayWithArray:@[@"1", @"2", @"3"]];
[self.tableView reloadData];
}
}];
[dataTask resume];
}
- (void)loadData {
[self.tableView wcq_setLoadingState];
[self.dataArray removeAllObjects];
[self.tableView performSelector:@selector(reloadData) withObject:nil afterDelay:3.0];
[self.tableView.mj_footer endRefreshing];
}
#pragma mark - UITableViewDataSource Methods
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([UITableViewCell class])];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0
green:arc4random()%256/255.0
blue:arc4random()%256/255.0
alpha:1];
return cell;
}
#pragma mark - UITableViewDelegate Methods
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 100;
}
#pragma mark - WCQTableViewPlaceholderDelegate Methods
- (UIView *)wcq_tableViewPlaceholderInLoadingState {
UIImageView *placeholderView = [UIImageView new];
placeholderView.contentMode = UIViewContentModeScaleAspectFill;
placeholderView.image = [UIImage imageNamed:@"loading"];
return placeholderView;
}
- (UIView *)wcq_tableViewPlaceholderInAnormalNetState {
UIImageView *placeholderView = [UIImageView new];
placeholderView.contentMode = UIViewContentModeScaleAspectFill;
placeholderView.image = [UIImage imageNamed:@"anormal"];
return placeholderView;
}
- (UIView *)wcq_tableViewPlaceholderInEmptyDatasourceState {
UIImageView *placeholderView = [UIImageView new];
placeholderView.contentMode = UIViewContentModeScaleAspectFill;
placeholderView.image = [UIImage imageNamed:@"emptyData"];
return placeholderView;
}
- (BOOL)wcq_enableScroll {
return YES;
}
#pragma mark - Getter Methods
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(reloadData)];
_tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadData)];
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:NSStringFromClass([UITableViewCell class])];
}
return _tableView;
}
- (NSMutableArray *)dataArray {
if (!_dataArray) {
_dataArray = [[NSMutableArray alloc] init];
}
return _dataArray;
}
@end
效果图:#
WCQTableViewPlaceholder.gif
注意####
-
下啦刷新是真正进行网络请求操作，而上啦刷新则是模拟网络请求失败，并未进行网络请求操作，请同学们注意
-
Demo 中所有占位图均为图片，如网络异常占位图，图中按钮无法进行相关点击操作，如果有这方面交互需求的同学，可以在相对应的返回默认占位图代理方法中实现。
总结#
- 对原有代码侵入性小，建议大家可以自定义一个统一的 UITableView 或者 UITableViewController 进行相关管理
- 简单易用同时降低开发者对于后期维护的成本，而且开放多种不同场景的默认占位图显示接口
WCQTableViewPlaceholder地址(内附Demo)
广告#
本人也是新手入门如果发现本文有什么错误的地方可以下方留言跟我反馈，哪怕是文章的排版问题还是其他影响到阅读体验的问题都可以反馈我，大家一起探讨如果我确实写的有问题我会欣然接受并改正。同时我的新浪微博是 KeepMoveingOn，有任何问题也都可以@我，我会尽快回复大家的，感谢各位看官花费宝贵的时间阅读此文🙏
