iOS开发之无网络数据时候占位图

2016-12-22 本文已影响2969人 Ke_Wang

哎，连续加班加了一个多月，身心俱疲。每晚一两点回去睡觉，到今天终于开熬出头了。。。后台的几个在忙着部署服务器，我就在这里偷闲，正好把最近用到的一个非常非常实用的工具拿出来分享一下。

APP中不可避免地要用到tableView，但是在网络差或者没有网络的情况下，tableView没有数据会是一片空白，非常的丑。。。。这时候就需要用一个占位图来填充和美化。以前的时候做占位图的时候，自己傻不愣登的先去监听看看有没有数据，然后再根据情况来决定填上占位图还是用刷新数据，既繁琐还恶心，一不留神还会报错。后来在一个iOS群里面，一位道友给推荐了一个专门处理这种问题的第三方库，那就是DZNEmptyDataSet，一用之下果然很犀利。好东西不敢独享，特地拿出来分享一下。我才用了几天时间，对这个框架认识还很粗浅，如果有错请各位大湿指正。

首先认识一下这个库

github下载地址DZNEmptyDataSet

就像这样子的占位图（偷了他主页上）

2016122262177Snip20161222_1.png

这个库主要用于UITableView和UICollectionView上的，也可以用于UIScrollView（不过我没有用过）。

使用方法。

使用过程非常的简单。

首先去下载后拖入到工程中，推荐使用cocoapods，因为这个不像支付分享那些SDK那么恶心，cocoapods容易出错（像支付分享那些，个人真心推荐直接拖进去，不要用cocoapods，不然很容易出错的）。
在用到的地方导入这个库，肯定每个地方都用得到，所以还是添加到pch中比较方便

#import "UIScrollView+EmptyDataSet.h"

使用步骤非常简单：
1. 引入这个库的两个协议。

@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:https://img.haomeiwen.com/i1377427/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;
}

iOS开发之无网络数据时候占位图

首先认识一下这个库

使用方法。

猜你喜欢

热点阅读