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

时间  2019-11-16
标签 ios 代码 实现 tableview 数据 展现 占位 视图 栏目 iOS 繁體版
原文   原文链接

前面

目前项目功能作的差很少了. 须要完善和打磨, 今天须要为全部的 TableView 列表页没有数据的时候展现一个友好的提示视图, 一个一个改太麻烦了. 并且业务逻辑烦杂改起来也不容易. 因此花了点时间写了一个小东西.在项目中按照项目的规范前缀使用了AN, 本身提取出来仍是按照本身的喜爱将前缀改成了XY.git

Demo

国际惯例, 先上 Demo github

Demo效果

优势

  • 拖拽便可使用, 无需 import , 对原有代码无需进行任何修改
  • 也能够选择实现方法, 实现快捷的自定义和彻底的自定义

感谢

今天搜索到了这篇文章, 也是个人思路来源. UITableView没数据时用户提示如何作编程

原理

无入侵

使用 Runtime 交换方法实现对原有代码无入侵. 建立一个 TableView 的分类, 在 .m 中异步

#import <objc/runtime.h>
复制代码

目前我想到的思路是在 reloadData 的时候进行实现, 因此定义一个 xy_reloadData 方法, 而后和原有的 reloadData 方法进行交换.async

也就是说:优化

  • 在代码中全部调用 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 方法的描述是ui

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 时；实现这个方法来加载后执行特定类的行为。this

因此能够实现无需 import 就能够实现加载.spa

获取 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 绑定一个属性用来记录是否已经加载完

/** 设置已经加载完成数据了 */
- (void)setIsInitFinish:(BOOL)finish {
    objc_setAssociatedObject(self, @selector(isInitFinish), @(finish), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

/** 是否已经加载完成数据 */
- (BOOL)isInitFinish {
    id obj = objc_getAssociatedObject(self, _cmd);
    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 便可使用.

菜鸟一枚, 若是有大神不吝赐教, 必将感激涕零.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程