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

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

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





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容