哎,连续加班加了一个多月,身心俱疲。每晚一两点回去睡觉,到今天终于开熬出头了。。。后台的几个在忙着部署服务器,我就在这里偷闲,正好把最近用到的一个非常非常实用的工具拿出来分享一下。
APP中不可避免地要用到tableView,但是在网络差或者没有网络的情况下,tableView没有数据会是一片空白,非常的丑。。。。这时候就需要用一个占位图来填充和美化。以前的时候做占位图的时候,自己傻不愣登的先去监听看看有没有数据,然后再根据情况来决定填上占位图还是用刷新数据,既繁琐还恶心,一不留神还会报错。后来在一个iOS群里面,一位道友给推荐了一个专门处理这种问题的第三方库,那就是DZNEmptyDataSet,一用之下果然很犀利。好东西不敢独享,特地拿出来分享一下。我才用了几天时间,对这个框架认识还很粗浅,如果有错请各位大湿指正。
首先认识一下这个库
github下载地址DZNEmptyDataSet
就像这样子的占位图(偷了他主页上)
这个库主要用于UITableView和UICollectionView上的,也可以用于UIScrollView(不过我没有用过)。
使用方法。
使用过程非常的简单。
首先去下载后拖入到工程中,推荐使用cocoapods,因为这个不像支付 分享那些SDK那么恶心,cocoapods容易出错(像支付分享那些,个人真心推荐直接拖进去,不要用cocoapods,不然很容易出错的)。
在用到的地方导入这个库,肯定每个地方都用得到,所以还是添加到pch中比较方便
#import "UIScrollView+EmptyDataSet.h"
- 使用步骤非常简单:
- 引入这个库的两个协议。
@interface WKMessageController ()<UITableViewDelegate,UITableViewDataSource,DZNEmptyDataSetSource, DZNEmptyDataSetDelegate>
2. 设置tableView代理
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, KSCREEN_WIDTH, KSCREEN_HEIGHT) style:UITableViewStylePlain];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.emptyDataSetSource = self;
self.tableView.emptyDataSetDelegate = self;
//去掉TableView中的默认横线
self.tableView.tableFooterView = [UIView new];
3. 设置如数据时候的占位图片
#pragma mark - 无数据占位
//无数据占位
- (UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{
return [UIImage imageNamed:@"pic_networkerror"];
}
- (CAAnimation *)imageAnimationForEmptyDataSet:(UIScrollView *)scrollView{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath: @"transform"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 1.0)];
animation.duration = 0.25;
animation.cumulative = YES;
animation.repeatCount = MAXFLOAT;
return animation;
}
就这样简单的几步,一个占位图就做好了。
![2016122274652QQ20161222-0.png](http://upload-images.jianshu.io/upload_images/1377427-9704956b66883fa6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
### 扩展设置
- 设置文字(上图下面的文字,我这个图片默认没有这个文字的)是富文本样式,扩展性很强!
//这个是设置标题文字的
-
(NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView {
NSString *text = @"网络不给力";NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:16.0f],
NSForegroundColorAttributeName: [UIColor darkGrayColor]};return [[NSAttributedString alloc] initWithString:text attributes:attributes];
}
//这是设置内容描述的
- (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView {
NSString *text = @"请检查网络后再重试";
NSMutableParagraphStyle *paragraph = [NSMutableParagraphStyle new];
paragraph.lineBreakMode = NSLineBreakByWordWrapping;
paragraph.alignment = NSTextAlignmentCenter;
NSDictionary *attributes = @{
NSFontAttributeName: [UIFont systemFontOfSize:14.0f],
NSForegroundColorAttributeName: [UIColor lightGrayColor],
NSParagraphStyleAttributeName: paragraph
};
return [[NSAttributedString alloc] initWithString:text attributes:attributes];
}
- 设置按钮的文本和按钮的背景图片
- (NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
NSLog(@"buttonTitleForEmptyDataSet:点击上传照片");
NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:17.0f]};
return [[NSAttributedString alloc] initWithString:@"点击上传照片" attributes:attributes];
}
- (UIImage *)buttonImageForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state {
return [UIImage imageNamed:@"button_image"];
}
- 设置占位图空白页的背景色( 图片优先级高于文字)
- (UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView {
return [UIColor whiteColor];
}
- 如果不嫌麻烦,还可以自定义一张自己的view放上去 我是嫌麻烦。。。。
- (UIView *)customViewForEmptyDataSet:(UIScrollView *)scrollView;
- 如果有头视图的话,光这样 头视图有可能会挡住,这回事就需要跳转位置了
- (CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView{
return KSCREEN_HEIGHT * 0.5f;
}
- 当然还可以添加占位图的点击时间,点击了重新请求
//空白页点击事件
- (void)emptyDataSetDidTapView:(UIScrollView *)scrollView {
//重新加载默认的数据
NSDictionary *param = @{@"page":@"1",
@"epage":@"20"
};
[self loadDataWith:param];
}
- 最后还能控制各种属性
//是否显示空白页,默认YES
- (BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView {
return YES;
}
//是否允许点击,默认YES - (BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView {
return NO;
}
//是否允许滚动,默认NO - (BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView {
return YES;
}
//图片是否要动画效果,默认NO - (BOOL) emptyDataSetShouldAllowImageViewAnimate:(UIScrollView *)scrollView {
return YES;
}
//空白页点击事件 - (void)emptyDataSetDidTapView:(UIScrollView *)scrollView {
return YES;
}
//空白页按钮点击事件 - (void)emptyDataSetDidTapButton:(UIScrollView *)scrollView {
return YES;
}