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

96
WangK_Dev
0.1 2016.12.22 23:16* 字数 857

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

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://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;
    }





iOS学习经验
Web note ad 1