iOS 0行代码实现 TableView 无数据时展示占位视图

点击上方“iOS开发”，选择“置顶公众号”

关键时刻，第一时间送达！

前面

目前项目功能做的差不多了. 需要完善和打磨, 今天需要为所有的 TableView 列表页没有数据的时候展示一个友好的提示视图, 一个一个改太麻烦了. 而且业务逻辑烦杂改起来也不容易. 所以花了点时间写了一个小东西.在项目中按照项目的规范前缀使用了AN, 自己提取出来还是按照自己的喜好将前缀改为了XY.

Demo

国际惯例, 先上 Demo(https://github.com/hanyx1992/XYTableViewNoDataView)

优点

• 拖拽即可使用, 无需 import , 对原有代码无需进行任何修改

• 也可以选择实现方法, 实现快捷的自定义和完全的自定义

感谢

今天搜索到了这篇文章, 也是我的思路来源.UITableView没数据时用户提示如何做

原理

无入侵

使用 Runtime 交换方法实现对原有代码无入侵.

创建一个 TableView 的分类, 在 .m 中

#import <objc/runtime.h>

目前我想到的思路是在 reloadData 的时候进行实现, 所以定义一个

xy_reloadData 方法, 然后和原有的 reloadData 方法进行交换.

也就是说:

• 在代码中所有调用 reloadData 的方法最终会调用我们自定义的 xy_reloadData 方法.

• 我们 xy_reloadData 方法中, 如果想调用系统的 reloadData 方法, 则需要调用 xy_reloadData 方法.

+ (void)load {

    

    Method reloadData    = class_getInstanceMethod(self, @selector(reloadData));

    Method xy_reloadData = class_getInstanceMethod(self, @selector(xy_reloadData));

    method_exchangeImplementations(reloadData, xy_reloadData);

}

对 load 方法的描述是

Invoked whenever a class or category is added to the Objective-C runtime; implement this method to perform class-specific behavior upon loading.当一个 类 或 分类 添加到 Objective-C Runtime 时；实现这个方法来加载后执行特定类的行为。

所以可以实现无需 import 就可以实现加载.

获取 TableView 的数据量

TableView 有可能有多个 Sections 每个 Section 都有可能有很多 Cell. 所以不能单单判断第一个 Section 是否有数据. 所以要:

• 获取 Section 的数量

• 获取每一个 Section 当中 Cell 的数量

    NSInteger numberOfSections = [self numberOfSections];

    BOOL havingData = NO;

    for (NSInteger i = 0; i < numberOfSections; i++) {

        if ([self numberOfRowsInSection:i] > 0) {

            havingData = YES;

            break;

        }

    }

这样这个布尔值 havingData 即是是否有数据的标记.

如何实现 reloadData 完成之后再获取数量.

因为 TableView 的 reloadData 方法具体实现是异步的.想要获取到加载完成的状态有两种方法

1. 使用 layoutIfNeeded 方法

2. 获取主队列异步执行

第一种方法实现代码为:

    [self xy_reloadData];

    [self layoutIfNeeded];

    //接下来的代码

这样的话线程会一直阻塞, 当然我们不希望原来业务代码中的 reloadData 会阻塞, 直到加载完成之后再继续执行代码.

所以我选择第二种方法

    [self xy_reloadData];

    dispatch_async(dispatch_get_main_queue(), ^{

        //接下来的代码

    });

那么我们 xy_reloadData 中的方法实现为:

- (void)xy_reloadData {

    

    [self xy_reloadData];

    

    //  刷新完成之后检测数据量

    dispatch_async(dispatch_get_main_queue(), ^{

        

        NSInteger numberOfSections = [self numberOfSections];

        BOOL havingData = NO;

        for (NSInteger i = 0; i < numberOfSections; i++) {

            if ([self numberOfRowsInSection:i] > 0) {

                havingData = YES;

                break;

            }

        }

        

        [self xy_havingData:havingData];

    });

}

展示一个占位视图

TableView 有一个 backgroundView 的属性可以很好的胜任这个需求

可以根据 havingData 的状态来进行赋值

- (void)xy_havingData:(BOOL)havingData {

    if (havingData) {

        self.backgroundView = nil;

    } else {

        self.backgroundView = 自定义视图;

    }

}

如何让控制器自定义视图

当然我们不满足于简简单单的视图的需求, 我们希望对应的控制器可以根据自己的需求自定义自己的视图.

我们最习惯的方法当然是在 TableView 的代理类(通常是控制器)中去处理 TableView 的一些逻辑

那么假设我们希望代理类实现一个方法 xy_noDataView

    if ([self.delegate respondsToSelector:@selector(xy_noDataView)]) {

        self.backgroundView = [self.delegate performSelector:@selector(xy_noDataView)];

        return ;

    }

这个地方会有一个编译警告, 我选择在 .m 文件中定义一个 protocol 来消除, 我还定义了一些其他的方法来更好的完成我的需求.

/**

 消除警告

 */

@protocol XYTableViewDelegate <NSObject>

@optional

- (UIView   *)xy_noDataView;                //  完全自定义占位图

- (UIImage  *)xy_noDataViewImage;           //  使用默认占位图, 提供一张图片,    可不提供, 默认不显示

- (NSString *)xy_noDataViewMessage;         //  使用默认占位图, 提供显示文字,    可不提供, 默认为暂无数据

- (UIColor  *)xy_noDataViewMessageColor;    //  使用默认占位图, 提供显示文字颜色, 可不提供, 默认为灰色

- (NSNumber *)xy_noDataViewCenterYOffset;   //  使用默认占位图, CenterY 向下的偏移量

@end

之所以没有在. h 中声明, 然后要求控制器实现我们的代理, 然后在去实现方法是想尽可能的无侵入, 契约式编程, 按规则实现方法既可以生效.

我希望能实现 拖来即用, 想扔就扔

我还实现了一些简单的功能. 详细的可以查看 Demo.

完整的xy_havingData方法如下:

- (void)xy_havingData:(BOOL)havingData {

    

    //  不需要显示占位图

    if (havingData) {

        self.backgroundView = nil;

        return ;

    }

    

    //  不需要重复创建

    if (self.backgroundView) {

        return ;

    }

    

    //  自定义了占位图

    if ([self.delegate respondsToSelector:@selector(xy_noDataView)]) {

        self.backgroundView = [self.delegate performSelector:@selector(xy_noDataView)];

        return ;

    }

    

    //  使用自带的

    UIImage  *img   = nil;

    NSString *msg   = @"暂无数据";

    UIColor  *color = [UIColor lightGrayColor];

    CGFloat  offset = 0;

    

    //  获取图片

    if ([self.delegate    respondsToSelector:@selector(xy_noDataViewImage)]) {

        img = [self.delegate performSelector:@selector(xy_noDataViewImage)];

    }

    //  获取文字

    if ([self.delegate    respondsToSelector:@selector(xy_noDataViewMessage)]) {

        msg = [self.delegate performSelector:@selector(xy_noDataViewMessage)];

    }

    //  获取颜色

    if ([self.delegate      respondsToSelector:@selector(xy_noDataViewMessageColor)]) {

        color = [self.delegate performSelector:@selector(xy_noDataViewMessageColor)];

    }

    //  获取偏移量

    if ([self.delegate        respondsToSelector:@selector(xy_noDataViewCenterYOffset)]) {

        offset = [[self.delegate performSelector:@selector(xy_noDataViewCenterYOffset)] floatValue];

    }

    

    //  创建占位图

    self.backgroundView = [self xy_defaultNoDataViewWithImage  :img message:msg color:color offsetY:offset];

}

实现了, 可以通过完全自定义 View 的方法实现完全自定义, 也可以使用自带的一些样式, 指定图片, 文字, 文字颜色, 以及位置偏移量, 当然其中任何一个都是可以不指定的, 使用默认设定.

界面的一些代码

/**

 默认的占位图

 */

- (UIView *)xy_defaultNoDataViewWithImage:(UIImage *)image message:(NSString *)message color:(UIColor *)color offsetY:(CGFloat)offset {

    

    //  计算位置, 垂直居中, 图片默认中心偏上.

    CGFloat sW = self.bounds.size.width;

    CGFloat cX = sW / 2;

    CGFloat cY = self.bounds.size.height * (1 - 0.618) + offset;

    CGFloat iW = image.size.width;

    CGFloat iH = image.size.height;

    

    //  图片

    UIImageView *imgView = [[UIImageView alloc] init];

    imgView.frame        = CGRectMake(cX - iW / 2, cY - iH / 2, iW, iH);

    imgView.image        = image;

    

    //  文字

    UILabel *label       = [[UILabel alloc] init];

    label.font           = [UIFont systemFontOfSize:17];

    label.textColor      = color;

    label.text           = message;

    label.textAlignment  = NSTextAlignmentCenter;

    label.frame          = CGRectMake(0, CGRectGetMaxY(imgView.frame) + 24, sW, label.font.lineHeight);

    

    //  视图

    XYNoDataView *view   = [[XYNoDataView alloc] init];

    [view addSubview:imgView];

    [view addSubview:label];

    

    //  实现跟随 TableView 滚动

    [view addObserver:self forKeyPath:kXYNoDataViewObserveKeyPath options:NSKeyValueObservingOptionNew context:nil];

    return view;

}

细节优化

如何实现页面加载的时候不展示占位图

在 TableView 显示到界面上时, 相当于调用了 reloadData 方法, 所以按照我们目前的逻辑会先展示一个占位图, 然后数据加载完成后, 再次调用 reloadData 方法以隐藏占位图.

数据加载之前, 我们肯定不希望展示无数据的占位图, 因为很有可能是有数据的, 所以可以忽略掉第一次调用 reloadData 的处理, 在 xy_reloadData 方法中增加如下校验在 [self xy_reloadData]; 之后, 如果没有加载完成数据时, 我们默认当做有数据去处理, 即相当于占位图不显示. 然后记录一下, 数据已经加载完成了.

//  忽略第一次加载

    if (![self isInitFinish]) {

        [self xy_havingData:YES];

        [self setIsInitFinish:YES];

        return ;

    }

为 TableView 绑定一个属性用来记录是否已经加载完

/// 加载完数据的标记属性名

static NSString * const kXYTableViewPropertyInitFinish = @"kXYTableViewPropertyInitFinish";

/**

 设置已经加载完成数据了

 */

- (void)setIsInitFinish:(BOOL)finish {

    objc_setAssociatedObject(self, &kXYTableViewPropertyInitFinish, @(finish), OBJC_ASSOCIATION_ASSIGN);

}

/**

 是否已经加载完成数据

 */

- (BOOL)isInitFinish {

    id obj = objc_getAssociatedObject(self, &kXYTableViewPropertyInitFinish);

    return [obj boolValue];

}

滚动时如何让占位图跟随 TableView 的滚动而滚动.

因为我们的占位图是赋值在 TableView 的 backgroundView 属性上的, 相当于增加到了 TableView 上, 通过调试可以发现, 在 TableView 滚动 contentOffset 改变时, backgroundView 的frame.origin.y也是同步改变的, 所以我们看起来无论 TableView 怎么滚动占位图都是无动于衷的, 如果我们想让占位图跟随滚动的话, 只要取消掉backgroundView 的 frame.origin.y 的同步更新就好了, 也就是说要保证 frame.origin.y 的值一直为0.

我这里没有找到更好的办法, 暂时使用 KVO 来实现, 记得 View 销毁的时候要移除 KVO 的监听, 详细实现可以看 Demo 啦...

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {

    if ([keyPath isEqualToString:kXYNoDataViewObserveKeyPath]) {

        

        /**

         在 TableView 滚动 ContentOffset 改变时, 会同步改变 backgroundView 的 frame.origin.y

         可以实现, backgroundView 位置相对于 TableView 不动, 但是我们希望

         backgroundView 跟随 TableView 的滚动而滚动, 只能强制设置 frame.origin.y 永远为 0

         兼容 MJRefresh

         */

        CGRect frame = [[change objectForKey:NSKeyValueChangeNewKey] CGRectValue];

        if (frame.origin.y != 0) {

            frame.origin.y  = 0;

            self.backgroundView.frame = frame;

        }

    }

}

如果不想显示占位图怎么办?

在对应的控制器实现如下方法即可

- (NSString *)xy_noDataViewMessage {    return @"";}

关于分割线

在我上面提到的那篇文章中. 在修改 backgroundView 属性的同时修改了 TableView 的 separatorStyle 属性, 没数据的时候将分割线取消掉, 有数据的时候在添加上, 可是我在项目中使用的 TableView 的分割线 separatorStyle 风格不一. 所以我没有修改分割线属性, 如果想让 TableView 没有数据的时候隐藏分割线, 可以看我的 Demo 在对应的控制器添加这样一行代码即可.

self.tableView.tableFooterView = [UIView new];

最后

CollectionView 同理, 代码复制一遍, 将获取数据量的地方, 获取每个 Section 中 Cell 的数量的 numberOfRowsInSection 方法改为 numberOfItemsInSection 即可使用.

菜鸟一枚, 如果有大神不吝赐教, 必将感激不尽.

• 作者：韩元旭

• 链接：https://juejin.im/post/5a308f72518825293b504c66

• iOS开发整理发布，转载请联系作者授权

【点击成为Android大神】