iOS runtime 交换方法实现TableView 无数据

作者: 丨Majestic灬磊 | 来源:发表于2018-01-15 10:56 被阅读284次

Now

项目完成上线后，需要给所有的TableView列表页没有数据的时候添加一个友好的提示图，如果一个个的去改的话又太麻烦，因为没有写基类，业务逻辑也不是很好实现，所以准备用runtime交换方法去改系统的tableView，为了方便大家理解，特意提取出来一个Demo！！

Demo

demo 链接在这里👉 （https://github.com/290138645/RLTVNoDataView.git）

image

Advantage

拖拽进空城即可使用, 无需 import , 对原有代码无需进行任何修改，也可以选择实现方法, 实现快捷的自定义和完全的自定义

原理

无入侵

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

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

  #  import <objc/runtime.h>

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

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

也就是说:

在代码中所有调用 reloadData 的方法最终会调用我们自定义的 rl_reloadData 方法.
我们 rl_reloadData 方法中, 如果想调用系统的 reloadData 方法, 则需要调用 rl_reloadData 方法.

+ (void)load {

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

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

method_exchangeImplementations(reloadData, rl_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 方法具体实现是异步的.想要获取到加载完成的状态有两种方法

使用 layoutIfNeeded 方法
获取主队列异步执行

第一种方法实现代码为:

[self rl_reloadData];

[self layoutIfNeeded];

//接下来的代码

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

所以我选择第二种方法

[self rl_reloadData];

dispatch_async(dispatch_get_main_queue(), ^{

    //接下来的代码

});

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

- (void)rl_reloadData {

  [self rl_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 rl_havingData:havingData];

  });

}

展示一个占位视图

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

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

- (void)rl_havingData:(BOOL)havingData {

  if (havingData) {
      self.backgroundView = nil;
  } else {
      self.backgroundView = 自定义视图;
  }

}

如何让控制器自定义视图

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

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

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

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

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

}

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

  /**

  消除警告

  */

@protocol RLTableViewDelegate

 @optional

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

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

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

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

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

@end

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

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

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

完整的rl_havingData方法如下:

- (void)rl_havingData:(BOOL)havingData {

//  不需要显示占位图

  if (havingData) {
      self.backgroundView = nil;
      return ;
  }

//  不需要重复创建

  if (self.backgroundView) {
      return ;
  }

//  自定义了占位图

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

      self.backgroundView = [self.delegate performSelector:@selector(rl_noDataView)];
      return ;
  }

//  使用自带的

  UIImage  *img   = nil;
  NSString *msg   = @"暂无数据";
  UIColor  *color = [UIColor lightGrayColor];
  CGFloat  offset = 0;

//  获取图片

  if ([self.delegate    respondsToSelector:@selector(rl_noDataViewImage)]) {
      img = [self.delegate performSelector:@selector(rl_noDataViewImage)];
  }

//  获取文字

  if ([self.delegate    respondsToSelector:@selector(rl_noDataViewString)]) {
      msg = [self.delegate performSelector:@selector(rl_noDataViewString)];
  }

//  获取颜色

  if ([self.delegate      respondsToSelector:@selector(rl_noDataViewMessageColor)]) {
      color = [self.delegate performSelector:@selector(rl_noDataViewMessageColor)];
  }

//  获取偏移量

  if ([self.delegate        respondsToSelector:@selector(rl_noDataViewCenterYOffset)]) {
      offset = [[self.delegate performSelector:@selector(rl_noDataViewCenterYOffset)] floatValue];
  }

//  创建占位图

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

}

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

界面的一些代码

/**
 默认的占位图
 */

- (UIView *)rl_defaultNoDataViewWithImage:(UIImage *)image string:(NSString *)string 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           = string;
 label.textAlignment  = NSTextAlignmentCenter;
 label.frame          = CGRectMake(0, CGRectGetMaxY(imgView.frame) + 24, sW, label.font.lineHeight);

//  视图
 RLNoDataView *view   = [[RLNoDataView alloc] init];
 [view addSubview:imgView];
 [view addSubview:label];

//  实现跟随 TableView 滚动
 [view addObserver:self forKeyPath:kRLNoDataViewObserveKeyPath options:NSKeyValueObservingOptionNew context:nil];

 return view;

}

细节优化

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

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

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

 //  忽略第一次加载

if (![self isInitFinish]) {

    [self rl_havingData:YES];
    [self setIsInitFinish:YES];
    return ;

}

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

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

  static NSString * const kRLTableViewPropertyInitFinish = @"kRLTableViewPropertyInitFinish";

/**
 设置已经加载完成数据了
*/

 - (void)setIsInitFinish:(BOOL)finish {
  objc_setAssociatedObject(self, &kRLTableViewPropertyInitFinish, @(finish), OBJC_ASSOCIATION_ASSIGN);
 }

 /**
  是否已经加载完成数据
 */

- (BOOL)isInitFinish {

  id obj = objc_getAssociatedObject(self, &kRLTableViewPropertyInitFinish);
  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 *)change context:(void *)context {

if ([keyPath isEqualToString:kRLNoDataViewObserveKeyPath]) {

    /**
     在 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 即可使用.

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

iOS runtime 交换方法实现TableView 无数据

Now

Demo

Advantage

原理

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

进阶

iOS Study

iOS runtime 交换方法 实现TableView 无数据

Now

Demo

Advantage

原理

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

进阶

iOS Study

iOS runtime 交换方法实现TableView 无数据