当TableView没有数据源时,如何显示占位图片?

有时候项目中有这样的需求,页面包含一个UITableVeiw,当没有数据的时候显示一张占位图片,点击图片可以重新刷新数据。效果图如下:


有数据时.png

没数据时.png

思路

为UITableView增加个Category,利用方法method_exchangeImplementations交换reloadData方法为real_ReloadData,在real_ReloadData方法内判断是否有数据源,再动态显示占位的UIView。
在创建UITableView的地方一句代码设置占位控件。
    tableView.placeHolderView = [[PlaceholderView alloc]initWithFrame:tableView.bounds onTapView:^{
      //点击占位图片
    }];
    [self.view addSubview:tableView];

UITableView+Placeholder.h文件

#import <UIKit/UIKit.h>
@interface UITableView (Placeholder)
/* 占位图 */
@property (nonatomic, strong) UIView *placeHolderView;
@end

UITableView+Placeholder.m文件

#import "UITableView+Placeholder.h"
#import <objc/runtime.h>

@implementation UITableView (Placeholder)

+ (void)load
{
    //交换刷新方法
    Method reloadData =class_getInstanceMethod(self,  @selector(reloadData));
    Method real_ReloadData =class_getInstanceMethod(self, @selector(real_ReloadData));
    method_exchangeImplementations(reloadData, real_ReloadData);
}

-(void)real_ReloadData
{
    [self dataIsEmpty];
    [self real_ReloadData];
}

/** 判断是否有数据源,没有数据源则显示占位图片  */
- (void)dataIsEmpty
{
    BOOL isEmpty = YES;
    id<UITableViewDataSource> dataSourse = self.dataSource;
    //检测是否有数据源
    if ([dataSourse respondsToSelector:@selector(numberOfSectionsInTableView:)]) {//group
        NSInteger sections = [dataSourse numberOfSectionsInTableView:self];
        if (sections >0) {
            isEmpty = NO;
        }
    }else if([dataSourse respondsToSelector:@selector(tableView:numberOfRowsInSection:)]){//plain
        NSInteger rows = [dataSourse tableView:self numberOfRowsInSection:0];
        if (rows >0) {
            isEmpty = NO;
        }
    }
    if (isEmpty) {//显示占位图
        [self.placeHolderView removeFromSuperview];
        [self addSubview:self.placeHolderView];
    }else{//移除占位图片
        [self.placeHolderView removeFromSuperview];
    }
}
- (void)setPlaceHolderView:(UIView *)placeHolderView
{
    objc_setAssociatedObject(self, @selector(placeHolderView), placeHolderView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (UIView *)placeHolderView
{
    return objc_getAssociatedObject(self, @selector(placeHolderView));
}

自定义占位的UIView 为PlaceholderView

PlaceholderView.h文件

#import <UIKit/UIKit.h>
//点击后的回调
typedef void(^TapBlock)();
@interface PlaceholderView : UIView
@property(nonatomic,copy)TapBlock onTapBlock;
- (instancetype)initWithFrame:(CGRect)frame onTapView:(TapBlock)onTapBlock;
@end

PlaceholderView.m文件

#import "PlaceholderView.h"

@implementation PlaceholderView
{
    UIImageView *_imageView;
}

- (instancetype)initWithFrame:(CGRect)frame onTapView:(TapBlock)onTapBlock
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        self.onTapBlock = onTapBlock;
        [self setupSubViews];
    }
    return self;
}
-(void)setupSubViews
{
    UIImageView *imageView =[[UIImageView alloc]init];
    imageView.userInteractionEnabled = YES;
    imageView.contentMode = UIViewContentModeCenter;
    [imageView setImage:[UIImage imageNamed:@"nodataPlaceholder"]];
    _imageView = imageView;
    [self addSubview:imageView];
    
    [self addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(onTapView:)]];
}
-(void)layoutSubviews
{
    [super layoutSubviews];
    _imageView.frame = self.bounds;
}
/** 增加点击手势 **/
-(void)onTapView:(UITapGestureRecognizer *)recognizer
{
    if (self.onTapBlock) {
        self.onTapBlock();
    }
}

这样当这个需求发生变化时,改动相对来说更小。当然,还可以把设置placeholderView的代码也封装到UItableView分类的init里面去。
点击下载Demo 有什么错误欢迎批评指正 。

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

推荐阅读更多精彩内容

  • 概述在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似...
    liudhkk阅读 9,061评论 3 38
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,109评论 4 62
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,152评论 30 470
  • 摄影/祈澈姑娘
    祈澈菇凉阅读 204评论 2 5
  • 中考。雖然不能換學校,換專業,但是我們這倆班成績喜人。被市裡關注,也被其它重點中學的老師刮目相看。大家都在期待著高...
    MABEL梅阅读 163评论 0 0