【iOS】一行代码实现UIScrollView空数据占位图

前言

最新开发遇到实现页面空数据时的显示及网络加载失败的显示，如果每个页面都写的话比较麻烦，于是就封装了一个空视图工具类GKPlaceholder，可快速实现页面空视图的显示。

效果

demo.gif

说明

1、特性

GKPlaceholder支持以下功能

• 1、支持图片、标题、描述、按钮多种组合方式
• 2、支持动态设置显示位置
• 3、自动适配安全区域
• 4、支持自定义视图显示

2、实现

GKPlaceholder是一个view，通过运行时添加到UIScrollView上，通过监听UIScrollView的contentSize动态控制其显示与隐藏，主要代码如下：

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if (!self.userInteractionEnabled) return;
    if ([keyPath isEqualToString:@"contentSize"] || [keyPath isEqualToString:@"gk_isRefreshing"]) {
        if (self.scrollView.gk_isRefreshing) {
            self.hidden = YES;
            return;
        }
        
        if ([self.scrollView isKindOfClass:[UITableView class]] || [self.scrollView isKindOfClass:[UICollectionView class]]) {
            if (self.scrollView.gk_totalDataCount == 0) {
                self.hidden = NO;
            }else {
                self.hidden = YES;
            }
        }else {
            if ((int)self.scrollView.contentSize.height > (int)self.headerHeight) {
                self.hidden = YES;
            }else {
                self.hidden = NO;
            }
        }
    }
}

3、使用

使用起来非常方便，一行代码就能实现，如：

self.tableView.gk_placeholder = [GKPlaceholder placeholderWithImage:@"placeholder" title:@"加载失败，点击重试" clickBlock:^{
    // refresh
}];

如果你想自己控制GKPlaceholder的显隐，可以使用gk_isRefreshing属性如：

// 请求数据之前
self.tableView.gk_isRefreshing = YES;
// 请求数据
[self loadDataCompletion::^{
       // 请求成功
       [self.tableView reloadData];
        self.tableView.gk_isRefreshing = NO;
}];

GKPlaceholder可设置更多属性

#pragma mark - imageView
/// 图片对象（UIImage）或名称（NSString）
@property (nonatomic, strong) id image;

/// 图片大小，默认图片实际大小
@property (nonatomic, assign) CGSize imageSize;

#pragma mark - titleLabel
/// 标题文字
@property (nonatomic, copy) NSString *title;

/// 标题字体，默认16
@property (nonatomic, strong) UIFont *titleFont;

/// 标题文字颜色，默认
@property (nonatomic, strong) UIColor *titleColor;

/// 标题与图片间距，默认defaultMargin
@property (nonatomic, assign) CGFloat titleTopMargin;

#pragma mark - detailLabel
/// 描述文字
@property (nonatomic, strong) NSString *detail;

/// 详细描述字体，默认14
@property (nonatomic, strong) UIFont *detailFont;

/// 详细描述文字颜色
@property (nonatomic, strong) UIColor *detailColor;

/// 详细默认行数，默认2
@property (nonatomic, assign) NSInteger detailNumberOfLines;

/// 详细描述最大宽度，默认父视图宽度-40
@property (nonatomic, assign) CGFloat detailMaxWidth;

/// 详细描述与顶部控件的间距
@property (nonatomic, assign) CGFloat detailTopMargin;

#pragma mark - actionBtn
/// 操作按钮，需传入btnTitle才会创建
@property (nonatomic, strong) UIButton *actionBtn;

/// 操作按钮文字
@property (nonatomic, copy) NSString *actionTitle;

/// 操作按钮点击回调
@property (nonatomic, copy) void(^actionClickBlock)(void);

/// 操作按钮的宽度，直接设置actionBtn的frame无效
@property (nonatomic, assign) CGFloat actionBtnWidth;

/// 操作按钮的高度，直接设置actionBtn的frame无效
@property (nonatomic, assign) CGFloat actionBtnHeight;

/// 操作按钮与顶部控件的间距
@property (nonatomic, assign) CGFloat actionTopMargin;

最后

GKPlaceholder可快速实现UIScrollView、UITableView、UICollectionView的空数据视图，使用起来很方便，如果您觉得还不错，可以来个star。

推荐

另外附上本人写的其他库
GKPhotoBrowser - 仿微信、微博、今日头条图片浏览器
GKPageScrollView - iOS类似微博、抖音、网易云等个人详情页滑动嵌套效果
GKNavigationBar - iOS自定义导航栏 - 导航栏联动效果
GKCycleScrollView - 一个轻量级的自定义轮播图组件，支持图片、文字轮播